Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-context-readerAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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.
