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.

A comprehensive guide detailing Apple's Human Interface Guidelines (HIG) for various presentation components. Learn best practices for implementing alerts, sheets, popovers, action sheets, and digit entry views across platforms (iOS, macOS, etc.) to ensure a seamless and intuitive user experience.

A comprehensive guide and assistant for designing and implementing user interface components (menus, buttons, toolbars) strictly following Apple's Human Interface Guidelines (HIG). It covers best practices for structure, hierarchy, contextual behavior, and platform-specific considerations across iOS, macOS, and visionOS.

A comprehensive toolkit for senior UI designers to build robust and scalable design systems. It guides the generation of design tokens (colors, spacing, typography), structuring component libraries (Atoms to Organisms), implementing responsive layouts, and preparing detailed developer handoff documentation. Essential for maintaining visual consistency and bridging the gap between design and development.

This comprehensive guide outlines world-class product design principles, mimicking Apple's standard. It covers building robust design systems, defining essential design tokens (color, typography, spacing, motion), structuring UI components (atoms to organisms), optimizing UX flows, and designing engaging onboarding experiences. Ideal for product designers and PMs needing to establish a cohesive, scalable visual language and improve overall user experience.

This skill allows users to build and maintain complex UI components and full screens directly within Figma using the Figma MCP. It rigorously enforces a defined design system (like Rayna UI) by validating design tokens, applying craft rules, detecting anti-patterns, and ensuring visual consistency. Ideal for creating new components, composing entire dashboards or landing pages, or auditing existing files for compliance.

StyleSeed is a comprehensive design judgment engine designed to elevate the aesthetic quality of AI-generated user interfaces. It codifies 69 visual rules covering color discipline, spatial rhythm, information hierarchy, and motion feedback. By integrating these principles, developers can ensure that AI output looks professionally designed and polished, rather than simply generated. Includes React components, Tailwind CSS implementation, and actionable design guidelines.

A comprehensive guideline for building modern, high-performance, and accessible UI/UX components using a flat, minimalist design philosophy. It defines foundational tokens (colors, spacing, typography), strict rules for component states (hover, focus, error), and adherence to WCAG 2.2 AA standards for engineers and designers.

A comprehensive guide for creating a robust design system based on perspective techniques. It details foundational tokens (color, typography, spacing), component rules (states, variants), and accessibility criteria (WCAG 2.2 AA). Use this skill to ensure scalable, realistic, and highly usable UI components with structured implementation.

Act as an expert design-system guideline author specializing in the Shadcn aesthetic. This skill generates comprehensive, implementation-ready design system documentation, covering foundational tokens (color, spacing, typography), component anatomy, interaction states (hover, focus, error), and strict accessibility requirements (WCAG 2.2 AA). It enforces semantic consistency and provides structured guidelines for developers and designers to build robust, clean UI components.

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.

Hallmark is a specialized design skill engineered for AI coding assistants. It enforces deep structural variety and aesthetic sophistication, ensuring generated UIs look professionally 'made' rather than generically templated. Users can invoke Hallmark to build new pages (default), audit existing designs for anti-patterns, redesign components while preserving intent, or extract the 'DNA' (structure, archetypes, color) from existing URLs or screenshots for reference.