Skill UI

A comprehensive guide for implementing holographic user interfaces across web and mobile platforms. It teaches core principles like zero opacity backgrounds, scanlines, and luminous edges, simulating projected light displays. Ideal for designing futuristic, sci-fi, or high-tech application interfaces.

A comprehensive guide for designing futuristic, tactical Heads-Up Displays (HUDs) and user interfaces. This skill provides core principles, visual DNA, and ready-to-implement code snippets for Web (CSS/SVG), App (SwiftUI), and Mobile (Flutter) platforms. Perfect for creating high-tech, sci-fi, or military-themed dashboards, featuring circular radars, minimalist strokes, and technical monospace typography.

This template provides a comprehensive three-screen UI showcase for a gamified habit tracking application, designed with an RPG (Role-Playing Game) aesthetic. It includes a main cover page, a 'Today's Quests' summary screen displaying XP and level progress, and a detailed quest view for managing subtasks and rewards. Perfect for showcasing personal growth, productivity, or educational concepts.

A comprehensive Notion dashboard designed for real-time team operations and performance tracking. It provides a centralized overview by aggregating Key Performance Indicators (KPIs) in a grid format, displaying 7-day trend sparklines, showing live activity feeds, and summarizing tasks in a structured database table. Ideal for project managers and team leads who need a single source of truth for project status and team coordination.

A high-fidelity template for designing a complete mobile application screen. This mockup is enclosed in a pixel-accurate iPhone 15 Pro frame and includes all essential UI elements: status bar, app header, main content area (supporting lists, feeds, or forms), and bottom tab bar. Features realistic elements like the Dynamic Island and safe-area padding, making it ideal for UI/UX design mockups and professional portfolio display.

A template designed for creating educational and marketing explainer animations with a strong retro, 8-bit pixel aesthetic. Utilizing pure CSS keyframes for seamless looping, the design features a central pixel mascot, kinetic text displays, and a dynamic timeline ribbon. Perfect for conveying information in a nostalgic style without relying on JavaScript.

A comprehensive dashboard designed for tracking team Objectives and Key Results (OKRs). It visually displays the current quarter's theme, three primary objectives, and detailed progress bars for each Key Result (KR). Users can monitor status, identify owners, and view high-level summaries to ensure the team stays aligned and on track towards quarterly goals.

This template provides an editorial-minimalist web layout, inspired by high-end magazines. It features a warm monochrome palette, classic serif displays, and clean grotesque body text, emphasizing macro-whitespace and subtle ambient micro-animations. It is perfect for portfolio sites, long-form articles, or any content-heavy design needing a sophisticated, literary feel.

This tool guides the creation of actionable monitoring dashboards for observability platforms like Grafana and SigNoz. Instead of merely displaying raw metrics, it focuses on structuring data to answer critical operational questions: Is the system healthy? Where are the bottlenecks? What changes occurred? And what action should be taken? It transforms raw metrics into decision-making tools.