agentleFS
Sign inStart free
involvexinvolvex/youtube-music-cli/.claude/skills/react-components/SKILL.md

react:components

Skill461 starsChanged 3 months agoMITView on GitHub

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

We split this skill into the rules it gives an agent

14 rules. About 0 are common, 3 are distinctive, and 11 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 11

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Namespace discovery: Run list_tools to find the Stitch MCP prefix.

    line 17
  2. Very specific:

    Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.

    line 18
  3. Very specific:

    Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:

    line 19
  4. Distinctive:

    If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files.

    line 20
  5. Very specific:

    Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.

    line 32
  6. Distinctive:

    Use theme-mapped Tailwind classes instead of arbitrary hex codes.

    line 37
  7. Very specific:

    Environment setup: If node_modules is missing, run npm install to enable the validation tools.

    line 40
  8. Very specific:

    Data layer: Create src/data/mockData.ts based on the design content.

    line 41
  9. Very specific:

    Component drafting: Use resources/component-template.tsx as a base.

    line 42
  10. Very specific:

    Application wiring: Update the project entry point (like App.tsx) to render the new components.

    line 43
  11. Very specific:

    Run npm run validate <file_path> for each component.

    line 45
  12. Very specific:

    Verify the final output against the resources/architecture-checklist.md.

    line 46
  13. Very specific:

    Start the dev server with npm run dev to verify the live result.

    line 47
  14. Distinctive:

    Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.

    line 50

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
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

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

  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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free