Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
Convert Stitch-generated screens into validated React component systems with design token consistency
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
SKILL.md
1---2name: react:components3description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.4allowed-tools:5- "stitch*:*"6- "Bash"7- "Read"8- "Write"9- "web_fetch"10---11# Stitch to React Components13You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.15## Retrieval and networking171. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.182. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.193. **Check for existing designs**: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:20- **If files exist**: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.21- **If files do not exist**: Proceed to step 4.224. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.23- **HTML**: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"`24- **Screenshot**: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"`25- This script handles the necessary redirects and security handshakes.265. **Visual audit**: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details.27## Architectural rules29* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.30* **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`.31* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`.32* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.33* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.34* **Style mapping**:35* Extract the `tailwind.config` from the HTML `<head>`.36* Sync these values with `resources/style-guide.json`.37* Use theme-mapped Tailwind classes instead of arbitrary hex codes.38## Execution steps401. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.412. **Data layer**: Create `src/data/mockData.ts` based on the design content.423. **Component drafting**: Use `resources/component-template.tsx` as a base. Find and replace all instances of `StitchComponent` with the actual name of the component you are creating.434. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.445. **Quality check**:45* Run `npm run validate <file_path>` for each component.46* Verify the final output against the `resources/architecture-checklist.md`.47* Start the dev server with `npm run dev` to verify the live result.48## Troubleshooting50* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.51* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.