How do I install react:components?

Run `npx skills add https://github.com/google-labs-code/stitch-skills --skill react:components` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does react:components support?

react:components works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is react:components free to use?

Yes. react:components is free to install and use. It is available from the open explainx.ai skill registry published by google-labs-code.

Where can I read ratings and reviews for react:components?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

Frontend

react:components▌

google-labs-code/stitch-skills · updated Apr 8, 2026

$npx skills add https://github.com/google-labs-code/stitch-skills --skill react:components

summary

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.

skill.md

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.
Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- 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.
- If files do not exist: Proceed to step 4.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
- 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"
- This script handles the necessary redirects and security handshakes.
Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm 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.

general reviews

Ratings

4.5★★★★★10 reviews

★★★★★Shikha Mishra· Oct 10, 2024
react:components is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
★★★★★Piyush G· Sep 9, 2024
Keeps context tight: react:components is the kind of skill you can hand to a new teammate without a long onboarding doc.
★★★★★Chaitanya Patil· Aug 8, 2024
Registry listing for react:components matched our evaluation — installs cleanly and behaves as described in the markdown.
★★★★★Sakshi Patil· Jul 7, 2024
react:components reduced setup friction for our internal harness; good balance of opinion and flexibility.
★★★★★Ganesh Mohane· Jun 6, 2024
I recommend react:components for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
★★★★★Oshnikdeep· May 5, 2024
Useful defaults in react:components — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
★★★★★Dhruvi Jain· Apr 4, 2024
react:components has been reliable in day-to-day use. Documentation quality is above average for community skills.
★★★★★Rahul Santra· Mar 3, 2024
Solid pick for teams standardizing on skills: react:components is focused, and the summary matches what you get after install.
★★★★★Pratham Ware· Feb 2, 2024
We added react:components from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
★★★★★Yash Thakker· Jan 1, 2024
react:components fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.