Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From faos-ux-designer
<!-- AUTO-GENERATED by export-plugins.py — DO NOT EDIT -->
npx claudepluginhub frank-luongt/faos-skills-marketplace --plugin faos-ux-designerHow this skill is triggered — by the user, by Claude, or both
Slash command
/faos-ux-designer:react-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
<!-- AUTO-GENERATED by export-plugins.py — DO NOT EDIT -->
Converts Stitch designs into modular Vite + React + TypeScript components with Tailwind theming, dark mode via CSS variables, and clean architecture. For plain React apps (Vite/CRA), not Next.js App Router.
Converts Google Stitch Tailwind HTML+PNG exports into composable React components integrated with project design patterns and tokens.
Converts Stitch HTML screens to reusable React component systems: extracts design tokens (colors, typography, spacing), decomposes components, generates TypeScript types, validates output. For Stitch-to-React conversions.
Share bugs, ideas, or general feedback.
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.
list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.[prefix]:get_screen to retrieve the design JSON.Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".screenshot.downloadUrl to confirm the design intent and layout details.src/hooks/.src/data/mockData.ts.Readonly TypeScript interface named [ComponentName]Props.tailwind.config from the HTML <head>.resources/style-guide.json.node_modules is missing, run npm install to enable the validation tools.src/data/mockData.ts based on the design content.resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.App.tsx) to render the new components.npm run validate <file_path> for each component.resources/architecture-checklist.md.npm run dev to verify the live result.