react-components_skill

Overview

This skill converts Stitch design exports into modular Vite + React components with automated validation and project wiring. It focuses on TypeScript safety, isolated logic, and Tailwind-aligned styling to produce maintainable UI code ready for local dev and validation tooling. The output emphasizes small files, custom hooks for behavior, and a mock data layer for static content.

How this skill works

The skill discovers the Stitch namespace, fetches the design JSON, and reliably downloads the HTML asset using a provided bash fetch script to handle redirects and storage quirks. It inspects the design screenshot for layout intent, extracts tailwind config from the HTML head to synchronize with a style-guide, and generates component files, hooks, and mock data. Each generated component is validated with AST-based checks and run-time dev verification.

When to use it

• You have Stitch design exports (HTML + JSON) and need production-ready React components.
• You want components that follow strict TypeScript interfaces and isolated business logic.
• You need Tailwind class mapping derived from project theme values, not raw hex styles.
• You require automated validation and a reproducible dev workflow for generated UI.
• You want small, testable files and a mock data layer for isolated UI testing.

Best practices

• Break every UI piece into its own file and expose a Readonly [ComponentName]Props interface for type safety.
• Move event handlers and side effects into src/hooks/ as custom hooks to keep components pure.
• Extract all static text, images, and lists into src/data/mockData.ts to decouple content from layout.
• Sync extracted tailwind.config values with resources/style-guide.json and use theme-mapped classes.
• Run npm install if node_modules is missing, then npm run validate <file> and npm run dev to verify behavior.

Example use cases

• Convert a Stitch page to a set of reusable landing page blocks with independent props and hooks.
• Generate a component library from design exports for integration into a Vite monorepo.
• Create an isolated preview app that uses mockData.ts and validates components via the AST validator.
• Rapidly scaffold feature UIs while enforcing project-level style and architecture rules.
• Automate transform pipelines that download Stitch assets reliably and produce validated code.