Skill UI

This skill guides you through a comprehensive, multi-phase interview to capture every necessary detail of a new project idea. It is designed to run BEFORE any code is written, forcing detailed specification gathering across purpose, features, data models, and technical constraints. The output is a clean, self-contained prompt.md file, ensuring subsequent development is based on solid, unambiguous requirements and preventing costly mistakes.

This skill transforms vague feature briefs or Product Requirement Documents (PRDs) into highly structured design handoff briefs. It ensures designers have comprehensive context before starting work, including the core user goal, emotional context, critical technical constraints, necessary edge cases, and clear scope boundaries, preventing misdirection and scope creep.

This tool generates a comprehensive hiring rubric and technical interview scorecard for evaluating software engineers at specific levels and roles. It defines clear behavioral anchors, structured technical questions, and system design criteria, ensuring consistent, unbiased evaluation across all interviewers, and providing a full debrief agenda.

A comprehensive template designed to structure complex technical specifications, ensuring a complete record of engineering decisions. It guides users to document problem statements, proposed solutions, system architecture, data models, API designs, security considerations, and rollout plans, bridging product requirements and technical implementation.

This guide details the principles and implementation for Color Blocking design, an aesthetic characterized by large, solid, contrasting color sections (Mondrian style). It provides comprehensive technical implementations using CSS Grid (Web), SwiftUI, and Flutter for achieving striking, geometric layouts defined by bold colors and clean typography. Perfect for modern, impactful UIs.

A comprehensive guide covering the aesthetic and technical implementation of floating User Interface (UI) elements. Learn how to create detached, elevated components, such as cards and navigation bars, giving the application a light, airy, and modern feel across Web (CSS), iOS (SwiftUI), and Flutter platforms. Key principles include soft shadows, generous margins, and pill shapes.

This comprehensive guide outlines the principles and technical implementation for creating highly accessible, high-contrast user interfaces. It ensures WCAG AAA compliance by specifying pure black/white color pairings, clear boundaries, and legible typography across web (CSS), iOS (SwiftUI), and Android (Flutter) platforms. Ideal for applications requiring maximum legibility and stark visual impact.

This comprehensive guide provides technical implementations for achieving a modern 'Layered Design' aesthetic. It teaches developers how to create depth, intentional overlapping, and clear stratification across various platforms. Includes detailed code examples for CSS, SwiftUI, Flutter, and React Native to build complex, dimensional user 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 guide details the principles and technical implementation of widget-based user interfaces, mimicking the aesthetic of modern mobile operating systems (like iOS Home Screen). It covers core design principles such as strict aspect ratios, glanceability, and corner radius matching. Practical code examples are provided for Web (CSS Grid), iOS (SwiftUI), and Cross-platform (Flutter) development, enabling designers to create modular, highly functional mini-apps.

A comprehensive, adaptive framework for developing and implementing features, adhering to a strict, multi-phase workflow: Specify, Design, Tasks, and Execute. This skill ensures feature quality through granular task breakdown, atomic Git commits, requirement traceability, and mandatory, independent verification. It automatically adjusts its depth based on feature complexity (Small to Complex), providing a robust mechanism for managing technical debt and capturing project lessons.

This masterclass framework provides a structured, end-to-end guide for scoping and planning new web projects, applications, or page designs. It systematically covers core concept definition, user experience (UX) mapping, visual design system establishment, selecting the technical architecture, and optimizing for SEO and performance. Ideal for the initial stages of development.