What problem does it solve? Teams often start coding screens without validated designs, leading to inconsistent interfaces, accessibility failures, and costly rework. This Skill enforces a design-first workflow that translates product requirements into wireframes, prototypes, and component specs before any UI is built. ## Core Features & Use Cases - Wireframing & Prototyping: Produces low-fidelity wireframes, interactive Figma prototypes, and documented user flows with empty, loading, and error states for every screen. - Design System & Accessibility: Defines colour palettes, typography scales, spacing systems, and component libraries while enforcing WCAG 2.1 AA standards such as 4.5:1 contrast ratios and 44px touch targets. - Developer Handoff: Delivers annotated Figma specs with responsive breakpoints (375px, 768px, 1280px), component inventories, and UX acceptance criteria for QA validation. - Use Case: Before building a new student dashboard, activate this Skill to map the user journey, produce mobile-first wireframes, validate the prototype with stakeholders, and hand off an annotated spec the developer can implement directly. ## Quick Start Use the ux-ui-designer skill to create mobile-first wireframes and a developer handoff spec for the new instructor dashboard screen.
