What problem does it solve? Frontend surfaces often ship as functional but unstructured screens with weak hierarchy, missing states, and unclear calls to action. This Skill structures the design process before any component code is written, covering information architecture, responsive breakpoints, and all six UI states. ## Core Features & Use Cases - Information Architecture: Defines reading paths with primary content, proof, one dominant CTA, and trust signals so hierarchy drives the product decision. - Responsive & State Design: Specifies mobile-first Tailwind breakpoint patterns (320px to 1440px+) and designs default, loading, empty, error, degraded, and success states for every surface. - Section Composition Patterns: Provides TSX patterns for heroes, dashboards, forms, and empty states, plus vertical-specific guidance for TaxBridge tax UX, SabiScore analytics dashboards, and SwarmX agent UI. - Use Case: When asked to design a Nigerian SME tax filing form, the Skill produces a chunked fieldset layout with Naira currency inputs, FIRS trust signals, inline validation, and a single dominant submit action. ## Quick Start Ask the assistant to design the layout and information architecture for your landing page, dashboard, or form before writing any component code.
