Skill UI

Provides comprehensive guidance on implementing standard user interface controls according to Apple's Human Interface Guidelines (HIG). It details the appropriate use cases for toggles, segmented controls, pickers, sliders, and other input elements, ensuring designs are consistent, accessible, and optimized for the Apple ecosystem.

Generate a comprehensive, multi-screen mobile onboarding prototype displayed in a side-by-side HTML format. This tool is perfect for designing the initial user experience (UX) flow, covering splash screens, value proposition details, and final sign-in steps. Ideal for apps needing a polished debut experience.

Wraps any existing HTML artifact (landing page, dashboard, etc.) with a live sidebar panel of controls. This panel allows users to instantly adjust design variables—such as accent color, typography scale, layout density, and dark mode—by rewriting CSS custom properties in real time. All changes are persisted via localStorage, enabling continuous exploration and variant testing without losing state.

This skill systematically defines all necessary variants, states, and properties for a Figma component before development. It ensures comprehensive coverage of all states (e.g., Hover, Disabled, Loading) and properties (e.g., Size, Type), generating a robust variant matrix that prevents critical design gaps and streamlines the entire component building process in Figma.

A standardized three-screen template illustrating the complete mobile onboarding journey. This sequence typically includes a brand splash screen, a value proposition screen highlighting key benefits, and a final sign-in/signup screen with primary CTAs. Ideal for designing the first impression of a new app.

Provides domain knowledge for compiling character/scene/prop creative settings into executable image generation prompts. Covers reference board layouts (character identity boards, sequence keyframes, environment study boards, prop study boards), composition and camera language, avoiding image moderation false positives, entity continuity, and cross-variant derivative design based on the main image. Not for video prompt compilation, pure material editing, or evaluating generated outputs.

This skill provides direction and intent for frontend design tasks. It helps define purpose, tone, domain, color world, and review criteria before coding. It incorporates cross-domain principles from cinema, architecture, marketing, UX, and automotive design to create memorable interfaces. Use it alongside the design skill to ensure intentional craftsmanship, proper loading order, and visual hierarchy. Focus on restraint, negative space, and signature elements rather than excessive intensity.

Provides opinionated, evolving constraints to guide agents when building interfaces. Helps identify high-impact design problems and propose implementation-ready improvements.

Design and refine readable, trustworthy dashboards using Few and Tufte visual principles, Shneiderman's overview-zoom-details layout, actionable guidance, and proper comment etiquette.

This skill defines and reviews text rendering standards, covering type scales, spacing, font features, wrapping, and punctuation. It ensures consistent typography across projects by setting CSS properties over raw tags, optimizing line-heights, and managing font loading. Use it to improve readability and visual hierarchy in web interfaces, adhering to accessibility and design best practices.