superforge-uilisted

# 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 2.2 AA), contrast checks, and simulated persona testing. Hand the accessibility half to **`superforge-a11y`** — it owns the criterion ledger and writes `docs/accessibility.md`. Do not restate the criteria here. 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.