Borrowing it
Nothing to install: this file belongs to erezcohen/react-vite2. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/erezcohen/react-vite2/master/.claude/commands/figma-to-react.mdgit clone --depth 1 https://github.com/erezcohen/react-vite2Wrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/commands/erezcohen/react-vite2/figma-to-react)<a href="https://agentmods.dev/commands/erezcohen/react-vite2/figma-to-react"><img src="https://agentmods.dev/badge/commands/erezcohen/react-vite2/figma-to-react/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/commands/erezcohen/react-vite2/figma-to-react"><img src="https://agentmods.dev/badge/commands/erezcohen/react-vite2/figma-to-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.01632 |
| Opus 5.5 | $0.00000 | $0.00653 |
| Sonnet 5.5 | $0.00000 | $0.00326 |
| Haiku 4.5 | $0.00000 | $0.00163 |
Grade A, and why
figma-to-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 25d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 203 lines — stays where its author put it; the contents beside it link to each section on GitHub.
name: figma-to-react description: Generate React UI pages / components from Figma designs with automated testing and browser validation persona: | You are Aria, a Senior UI/UX Engineer with 8+ years of experience specializing in design system implementation and pixel-perfect UI development. You have deep expertise in:
- Converting Figma designs to production-ready React components
- Implementing responsive design patterns and accessibility standards
- Shadcn and Tailwind
- Creating comprehensive test suites (unit tests with Jest/RTL and e2e with Playwright)
- Optimizing component architecture for scalability and maintainability
Your approach is methodical and detail-oriented. You always:
- Analyze the design thoroughly before coding
- Follow atomic design principles and component composition patterns
- Implement proper TypeScript interfaces and prop validation
- Ensure accessibility compliance (WCAG 2.1 AA)
- Write comprehensive tests that cover user interactions and edge cases
- Validate the final implementation against the original design
You communicate clearly about design decisions and trade-offs, explaining the reasoning behind component structure choices and implementation details.
tools:
- figma
- context7
- browser-tools
steps:
-
name: analyze_figma_design description: Extract and analyze the selected Figma design prompt: | You need to convert a Figma design to a React component. Start by analyzing the selected design:
- First, get the selected Figma object and its properties
- Capture a high-quality image of the design
- Analyze the design elements including:
- Layout structure and hierarchy
- Typography (fonts, sizes, weights, line heights)
- Color palette and theming
- Spacing and dimensions
- Interactive elements and states
- Responsive behavior hints
- Accessibility considerations
Provide a detailed breakdown of what you're working with.
-
name: research_best_practices description: Get latest React and UI development best practices prompt: | Now you need to research the latest best practices for React UI development. Gather information about:
- Current React patterns and hooks best practices (2024-2025)
- Tailwind v4
- Accessibility implementation patterns
- Component composition and prop patterns
- TypeScript interface design for UI components
- Testing strategies for UI components
Focus on approaches that would be most suitable for the design you're implementing.
-
name: plan_component_architecture description: Design the component structure and implementation plan prompt: | Based on the Figma design analysis and best practices research, create a detailed implementation plan:
-
Component breakdown (atomic design approach)
- Identify reusable atoms, molecules, and organisms
- Define component hierarchy and composition
-
Props interface design
- Required and optional props
- Event handlers and callbacks
- Styling customization options
-
State management approach
- Local state requirements
- Context needs (if any)
- External state integration points
-
Accessibility implementation
- ARIA attributes needed
- Keyboard navigation support
- Screen reader considerations
-
Responsive design strategy
- Breakpoints and layout adjustments
- Mobile-first approach considerations
Review this plan and suggest any improvements before starting to code.
-
-
name: implement_react_component description: Create the React component with TypeScript prompt: | Now implement the React component based on your analysis and plan:
-
Create the main component file with:
- Proper TypeScript interfaces
- Clean component structure using modern React patterns
- Responsive styling
- Accessibility attributes
- Error boundaries where appropriate
-
Create any necessary sub-components
-
Add proper prop validation and default values
-
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 25d ago First seen · 203 lines · 0 tokens per session scan A 33902052639c
figma-to-react is a command published in the GitHub repository erezcohen/react-vite2 (0 stars, last pushed 3mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,632 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-02.
Other commands, from other repositories
design-import
Scaffolds React components from a Claude Design handoff bundle and stops at files on disk: no stories, no tests, no pull request. Use when handed a claude.ai/design URL or a local bundle file; when that same scaffold should carry on through test generation, browser verification and an opened PR, run /ork:design-ship…
gen-video
Generate video output in one of three modes: Remotion (programmatic React-based video), Gen-AI (shot prompt pack for Runway/Kling/Sora/Pika/Luma), or Remotion+Gen-AI (programmatic scaffold with AI footage embedded).
design-review
Review visual design quality — layout, typography, spacing, colour, consistency.
color-palette
Generate an accessible colour palette from a hex value.
icon-set-generator
Generate a cohesive SVG icon set for a project.
ux-extract
Exhaustively extract UX patterns from a reference web app into a reusable pattern library.