anup4khandelwal 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
- Clarify scope, assumptions, and success criteria.
- Inspect repository context and existing patterns.
- Propose minimal safe change set.
- Implement artifacts and configuration updates.
- Run checks/tests and capture evidence.
- 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.