superforge-ui

# Superforge UI — Interface Design, Motion & Native Engineering Engine Use this skill when designing or implementing user interfaces across Web, iOS (SwiftUI), and Android (Jetpack Compose). This engine guarantees high aesthetic value, typography perfection, state specification, and micro-interaction polish. --- ## 1. Five-Phase Design Process 1. **UNDERSTAND**: Surface target user context, map assumptions, and reframe requirements. 2. **IDEATE**: Explore layout structures, navigation patterns, and component hierarchies. 3. **DESIGN**: Construct complete screens, typography grids, color assignments, and content states. 4. **EVALUATE**: Run accessibility audits (WCAG AA), contrast checks, and simulated persona testing. 5. **PREPARE**: Output clean production components, design tokens, and implementation specs. Step-by-step detail for DESIGN and EVALUATE is in `references/design-process.md`. --- ## 2. UX Spec & State Completeness (`ux-spec`) No UI component is complete until all 7 component states are explicitly engineered: 1. **Default**: Normal resting state. 2. **Hover**: Suble elevation/border highlight on cursor hover. 3. **Focus**: Distinct keyboard focus outline (`:focus-visible`). 4. **Active**: Touch/press tactile feedback (`scale(0.97)`). 5. **Disabled**: Reduced opacity (`0.4`), disabled pointer events. 6. **Loading**: Skeleton placeholder or inline spinner. 7. **Error**: Inline error messaging with clear recovery CTA. --- ## 3. Typography & Spacing Rhythm ...