agentskills.codes
RE

react:components

by plastikawebCodingSource

Automates the transformation of design assets into clean, modular React components with integrated type safety.

FrontendCode GenerationReactTypeScript

Install

mkdir -p .claude/skills/react-components && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13854" && unzip -o skill.zip -d .claude/skills/react-components && rm skill.zip

Installs to .claude/skills/react-components

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
118 charsno explicit “when” trigger
Advanced

Key capabilities

  • →Fetch design metadata and HTML from Stitch
  • →Generate modular React components from designs
  • →Isolate logic into custom React hooks
  • →Decouple data into mockData.ts files
  • →Sync Tailwind configuration from design files

How it works

The skill retrieves Stitch design data, including HTML and metadata, then transforms it into modular React components, separating logic into hooks and data into mock files, while syncing Tailwind styles.

Inputs & outputs

You give it
Stitch design JSON and HTML source
You get back
Modular React components, custom hooks, and mock data files

When to use react:components

  • →Convert Stitch UI designs into modular React components
  • →Sync Tailwind configuration from design files to project styles
  • →Generate Readonly TypeScript interfaces for new components

About this skill

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

  1. 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 steps

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

When not to use it

  • →When the design source is not Stitch
  • →When the target framework is not React with Vite
  • →When needing to generate non-component code

Prerequisites

npm install (for validation tools)

Limitations

  • →The skill is specific to Stitch designs.
  • →The output framework is React with Vite.
  • →The skill requires `npm install` for validation tools.

How it compares

This skill automates the conversion of Stitch designs into structured React components with specific architectural patterns like logic isolation and data decoupling, unlike manual component creation.

Compared to similar skills

react:components side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
react:components (this skill)05moReviewAdvanced
zustand1132moNo flagsIntermediate
web-artifacts-builder493moReviewIntermediate
landing-page-guide-v2489moReviewIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

More by plastikaweb

View all by plastikaweb →

playwright

plastikaweb

Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script.

00

You might also like

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

web-artifacts-builder

anthropics

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

49162

landing-page-guide-v2

bear2u

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.

48105

react

lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

3480

frontend-prompt-generator

gharam1234

Generate structured prompts for frontend development tasks following established patterns. Use when the user requests prompts for wireframes, UI implementation, data binding, or routing functionality in React/Next.js projects with specific formatting requirements (Cursor rules, file paths, test-driven development).

679

react-dev

davila7

This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack Router, React Router).

732

Search skills

Search the agent skills registry