---
name: figma-to-production-code
description: "Enforces strict translation rules when converting Figma frames into React components. Reuses project design tokens, extracts real vector SVGs, and prevents arbitrary hardcoded hex codes."
---

# SKILL: Figma-to-Code 1:1 Precision Engine
## Conversion Guardrails
1. Map Figma color styles directly to project Tailwind tokens (e.g. zinc-900, emerald-400), never arbitrary hex codes.
2. Maintain exact padding/margin rhythm using standard 4px grid steps (p-4, gap-3, py-6).
3. Do not import third-party icon packages when SVGs exist in the Figma node hierarchy.
4. Verify responsive behavior: default to mobile-first flex/grid layouts that scale cleanly to desktop.