How do I install the React Components skill?

Run npx skillmds@latest add thedaviddias/react-components in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Components safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Components?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Components free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Components?

thedaviddias (@thedaviddias) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Components by thedaviddias — Agent Skill

Name: React Components
Rating: 4.2 (5 reviews)
Author: thedaviddias

React Components

Converts Stitch designs into modular Vite and React components with system-level networking and AST-based validation. Use when translating design exports into production-ready React component architecture.

thedaviddias 911263d 10 files · 19.3 KB Updated Sep 10, 2026

File contents

Stitch to React Components

You 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.

Retrieval and networking

Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".
- This script handles the necessary redirects and security handshakes.
Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details.

Architectural rules

Modular components: Break the design into independent files. Avoid large, single-file outputs.
Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/.
Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.
Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.
Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
Style mapping:
- Extract the tailwind.config from the HTML <head>.
- Sync these values with resources/style-guide.json.
- Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

Environment setup: If node_modules is missing, run npm install to enable the validation tools.
Data layer: Create src/data/mockData.ts based on the design content.
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.
Application wiring: Update the project entry point (like App.tsx) to render the new components.
Quality check:
- Run npm run validate <file_path> for each component.
- Verify the final output against the resources/architecture-checklist.md.
- Start the dev server with npm run dev to verify the live result.

Troubleshooting

Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.

---name: react-componentsdescription: Converts Stitch designs into modular Vite and React components with system-level networking and AST-based validation. Use when translating design exports into production-ready React component architecture.---# Stitch to React ComponentsYou 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.## Retrieval and networking1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.3. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains. - Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`. - This script handles the necessary redirects and security handshakes.4. **Visual audit**: Check `screenshot.downloadUrl` to confirm the design intent and layout details.## Architectural rules* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.* **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`.* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`.* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.* **Style mapping**: * Extract the `tailwind.config` from the HTML `<head>`. * Sync these values with `resources/style-guide.json`. * Use theme-mapped Tailwind classes instead of arbitrary hex codes.## Execution steps1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.2. **Data layer**: Create `src/data/mockData.ts` based on the design content.3. **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.4. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.5. **Quality check**: * Run `npm run validate <file_path>` for each component. * Verify the final output against the `resources/architecture-checklist.md`. * Start the dev server with `npm run dev` to verify the live result.## Troubleshooting* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.

Frequently asked questions