Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-context-readerAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
Figma Context Reader
Use this skill to turn Figma context into an evidence-backed design brief. This is a read-only skill; route mutations to figma-canvas-editor or figma-design-system-sync.
Modes
frame-brief: summarize a selected frame or page.component-brief: summarize components, variants, props, and constraints.token-brief: summarize variables, styles, color roles, spacing, radius, typography, and effects.audit-input: collect enough Figma evidence forux-audit-skillordesign-critic-skill.handoff: prepare context for implementation specialists.
Workflow
- Confirm the input type: Figma URL, selected node, file key, screenshot/export, or connected MCP selection.
- Apply
../../shared/privacy-policy.md. - If a
use_figmacall is needed, first invoke the installedfigma:figma-useskill. - Read only the needed nodes, variables, components, styles, and assets. Avoid broad file scans unless the user asks for library/system work.
- Produce a structured context brief with evidence labels. Distinguish direct Figma metadata from visual inference.
- If MCP access is unavailable, ask for an export, screenshot, node metadata, or manual Figma details as fallback.
Output Shape
Use assets/context-brief-template.md.
Evidence Rules
Figma metadata: node names, type, layout fields, variables, styles, component names, asset references.Visual inference: hierarchy, attention, density, likely intent, visual polish.Missing: anything not available from the current Figma context.
Do not claim DOM, runtime behavior, accessibility scan, or implementation evidence from Figma context alone.
Validation And Eval
- Check that the final brief names the evidence source and privacy mode.
- Check that every implementation claim is traceable to Figma metadata, visual inference, or an explicit missing-context note.
- Use
evals/evals.jsonfor forward tests that distinguish connected Figma context from screenshot-only input.
Resources
- Read
$CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.mdwhen tool availability is unclear. - Use assets/context-brief-template.md for reports.
