What problem does it solve? Translating approved visual designs into production React code is error-prone: developers often hardcode colors, break existing data flows, or produce monolithic components. This Skill turns approved Stitch screens into modular, typed, theme-consistent React components while preserving the target project's routing, data contracts, and accessibility requirements. ## Core Features & Use Cases - Design retrieval: Fetches Stitch screen HTML and screenshots via a curl-based script that handles Google Cloud Storage redirects and TLS/SNI issues, storing artifacts in .stitch/designs/. - Token-consistent generation: Extracts the tailwind.config from the design HTML and syncs it with a local style guide so components use theme-mapped Tailwind classes instead of hardcoded hex values. - Automated validation: Runs an AST-based check using @swc/core to enforce Props interfaces and reject hardcoded hex colors, plus a 20-point architecture checklist audit. - Use Case: After approving a landing page design in a Stitch project, ask the agent to convert it into a React component system; it downloads the design, scaffolds Atomic Design components, wires them into the mapped route, and validates the output against the project's typecheck, lint, and test commands. ## Quick Start Use the react:components skill to convert my approved Landing Page screen in my Stitch project into a modular React component system wired into the existing route.
