Skill UI

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 guide for implementing spatial, mixed-reality user interfaces. Inspired by Apple Vision Pro and AR aesthetics, this pattern uses environmental transparency, blurred glass-like panels, and dynamic lighting effects to create deeply integrated, context-aware layouts for web and mobile applications.

This guide addresses inclusive design, which goes beyond WCAG compliance. It focuses on respecting the full spectrum of human diversity and real-world constraints, including low bandwidth, non-standard names, cultural differences, and low digital confidence. Use this when designing for global audiences or resource-constrained users to prevent exclusionary assumptions.

Guidance for designing menus and buttons following Apple Human Interface Guidelines. Covers menu bar, context menus, toolbars, pop-up buttons, pull-down buttons, action buttons, and disclosure controls across Apple platforms.

Guidance for designing system experience components per Apple Human Interface Guidelines: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Helps deliver glanceable, context-aware UI across platforms.

This skill creates or updates a shared Apple design context document for other HIG skills. It auto-discovers project details from code and assets, then gathers information on product overview, platforms, technology stack, design system, accessibility, and user context. The output is a structured markdown file used to tailor subsequent design guidance.

A comprehensive guide for implementing spatial, mixed-reality user interfaces. Inspired by Apple Vision Pro and AR aesthetics, this pattern uses environmental transparency, blurred glass-like panels, and dynamic lighting effects to create deeply integrated, context-aware layouts for web and mobile applications.

Create a visual direction brief mapping color, typography, imagery, and hierarchy to target emotions, cultural contexts, and accessibility needs. Use for marketing and design when visuals must reinforce specific emotional responses and support persuasion rather than decoration.