# Figma To React

> 1. Skill Name

- Skill: `anup4khandelwal/figma-to-react` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add anup4khandelwal/figma-to-react`
- Raw SKILL.md: https://api.skillmd.com/api/skills/anup4khandelwal/figma-to-react/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: anup4khandelwal (https://skillmd.com/u/anup4khandelwal)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/anup4khandelwal/figma-to-react

---

## 1. Skill Name
figma-to-react

## 2. Description
Figma To React: Improves web UX quality, performance, and accessibility.

## 3. When the AI agent should use this skill
Use this skill when a request aligns with Figma To React in the frontend domain.

## 4. Required Inputs
- Repository path and target scope
- Objective and acceptance criteria
- Stack details (Node.js, TypeScript, Python, infra, or data)
- Constraints (time, risk, compliance, cost)

## 5. Expected Outputs
- Implementation plan
- Generated or updated artifacts
- Validation steps and results
- Risks and follow-up actions

## 6. Step-by-Step Workflow
1. Clarify scope, assumptions, and success criteria.
2. Inspect repository context and existing patterns.
3. Propose minimal safe change set.
4. Implement artifacts and configuration updates.
5. Run checks/tests and capture evidence.
6. Summarize outcomes, limitations, and next steps.

## 7. Commands or tools used
- npm, vite/webpack analyzers, lighthouse, axe, playwright
- rg --files
- rg "pattern"
- git status
- git diff

## 8. Example prompts
- /skill figma-to-react Audit current implementation and propose prioritized improvements.
- /skill figma-to-react Implement a production-ready baseline with validation steps.
- /skill figma-to-react Generate artifacts and summarize tradeoffs.

## 9. Guardrails
- Do not run destructive actions without explicit approval.
- Preserve existing conventions unless migration is requested.
- Prefer deterministic and reproducible commands.
- Clearly state assumptions and uncertainty.

## 10. Limitations
- Output quality depends on project context and available tests.
- External systems may require environment-specific verification.
- Human review may still be needed for policy/compliance decisions.