What problem does it solve? Turning wireframes into polished, high-fidelity UI screens by hand is slow and error-prone: tokens drift, states get skipped, accessibility issues surface late, and unrendered code hides visual defects. This Skill produces each wireframe-named screen as runnable code (HTML+Tailwind or React+shadcn), rendered headlessly and vision-reviewed before handoff. ## Core Features & Use Cases - Token-backed code generation: Maps design-system/DTCG tokens into CSS custom properties, Tailwind utilities, and shadcn themes so no raw hex or pixel values bypass the token layer. - Render-vision-review loop: Generates code, renders it headlessly via a browser, screenshots per viewport and state, vision-reviews against the wireframe and design system, then refines within a bounded iteration cap. - Numeric WCAG 2.2 AA checks on the render: Verifies contrast ratios, focus visibility, and target sizes with axe-core on the actual rendered output, never disabling rules. - Scoped amend mode: Applies changes as versioned deltas, rippling token edits through the map once and re-rendering only affected screens. - Use Case: Given wireframes for a Projects list screen with empty, loading, populated, and error states plus a design system, produce four rendered, token-backed, WCAG-passing screens as a build seed for engineers. ## Quick Start Use authoring-hi-fi to realize the screens in my wireframes document as rendered HTML+Tailwind code using the tokens from my design-system doc.
