How do I install the React:components skill?

Run npx skillmds add tools-only/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: 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?

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

React:components by tools-only — Agent Skill

Name: React:components
Rating: 4.2 (5 reviews)
Author: tools-only

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 using system-level networking and AST-based validation.---# 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