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 provides principles for selecting, pairing, and implementing typefaces for optimal web readability. It covers advanced topics such as line height optimization, responsive typography, CSS implementation, and performance best practices. Use this when focusing on improving content legibility for long-form articles, dashboards, or general UI systems.

This skill helps enhance the robustness of data-dependent user interfaces (UIs) by implementing the four critical feedback states: loading, empty, error, and success. It ensures that applications provide clear, graceful, and actionable feedback regardless of data fetching status, making the product reliable and user-friendly.

An expert design system guideline for implementing modern, playful, and visually deep user interfaces using gradient principles. This guide provides engineers and designers with actionable standards covering color tokens, typography scales, component anatomy, interaction states, and WCAG accessibility criteria.

A comprehensive guide for implementing 'Aurora UI' aesthetics across multiple platforms including Web, SwiftUI, and Flutter. Learn how to create ethereal, atmospheric backgrounds using blurred color orbs, glassmorphism overlays, and fluid motion, ideal for luxury, futuristic, or high-end applications.

A comprehensive guide for implementing Brutalist Typography aesthetics across web and mobile platforms. This style intentionally breaks traditional design rules, utilizing massive system fonts, clashing colors (Black, White, Red), and aggressive layouts (overlapping, negative margins) to create a raw, attention-demanding, and unapologetic visual experience. Includes detailed CSS, SwiftUI, Flutter, and React Native examples.

A comprehensive style guide for implementing the Cyber Y2K aesthetic across web and mobile applications. This design package captures the retro-futuristic blend of late 90s/early 2000s digital culture, modern glitch art, and iridescent holographic gradients. It provides detailed code examples using CSS, SwiftUI, and Flutter to achieve key effects like RGB splitting, animated gradients, and aggressive vector typography.

A comprehensive guide to implementing the iconic Cyberpunk aesthetic across multiple platforms (Web, iOS, Android, Flutter). This guide details core principles like Neon-on-Black color schemes, sharply angled geometries (using clip-path or custom clippers), and glitch effects. It is ideal for developers needing to create high-tech, dystopian, or hacking interface experiences.

This comprehensive guide outlines the core principles for implementing effective and aesthetically pleasing dark mode across multiple platforms. It covers critical rules such as avoiding pure black backgrounds, defining elevation using lightness contrast, and utilizing desaturated accent colors to reduce eye strain. Detailed code examples for Web (CSS), iOS (SwiftUI), and Flutter are provided, ensuring a premium, high-fidelity user experience.