Turn a screenshot into a React component
For developers and designers who have a screenshot, mockup, or Figma export and want working code: turn it into a component that fits your project instead of a pile of hard-coded hex values. Reads your stack (React, Next.js, Vue, Svelte, or Astro; Tailwind, CSS modules, shadcn/ui), maps the design to your existing tokens and components, writes an accessible, responsive component with props and sample data, then renders it next to the screenshot and fixes the differences.
- Activity
- New: be the first to try it
- Installs
- 0 installs
- Likes
- 0 likes
- Clones
- 0 clones
How this works
- It is a skill: written instructions Claude reads when your request matches what the skill is for. You do not call it by name; just ask for the task.
- While it works, it reads and changes files in the places it lists, nowhere else.
- It runs these commands on your computer: node scripts/detect-stack.mjs.
- Nothing runs until you choose to use it, and you can remove it any time.
What it can access
What this kit declares, in the same words the CLI shows before you install. On Claude Code the CLI turns these into permission rules, so the agent stops anything undeclared.
Command
Runs the command: node scripts/detect-stack.mjs (with any arguments, without asking)
Reads
Reads files in ./**