stitch-react-components
CommunityTurn Stitch screens into validated React components.
Authorcassioalexandre
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It converts Stitch design screens into modular, theme-consistent React components so you avoid manual, error-prone redevelopment and styling drift.
Core Features & Use Cases
- Design retrieval and resilient downloading: Fetches Stitch screen HTML and screenshots via the Stitch MCP namespace, using a system-level fetch script to handle GCS redirect/TLS issues.
- Architecture-compliant component scaffolding: Generates components as modular files aligned to an Atomic Design structure, with logic isolated into hooks and data moved into a mock data layer.
- Quality gates for safety and correctness: Runs an AST-based validator to enforce TypeScript
Readonlyprops interfaces and prevent hardcoded hex styling, then checks against an architecture checklist.
Quick Start
Prompt the agent: "Convert my Landing Page screen in my Podcast Stitch Project to a React component system."
Dependency Matrix
Required Modules
@swc/core
Components
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: stitch-react-components Download link: https://github.com/cassioalexandre/agf/archive/main.zip#stitch-react-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.