Content
81%Weight 40%Scale 1-5Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
A strong, highly actionable operational skill: ordered workflow, executable scripts, and unusually thorough validation (structural read-backs, font assertion, screenshot cadence, error-recovery loop). Its main cost is token budget — several mandates are repeated across Steps 2–4 and Best Practices, and some long reference-grade recipes are inlined in SKILL.md instead of the references/ bundle. Tightening the duplication would raise conciseness without losing clarity.
Suggestions
Collapse the componentization mandate into one authoritative statement (Step 2d/3b) and reduce Step 4's 'Componentize repeated and reusable elements' and Best Practices' 'Componentize by default' to one-line pointers, removing ~3 restatements of the same rule.
Delete or fold the Best Practices bullets that restate Step 2–5 rules verbatim ('Always search before building', 'Prefer design system tokens over hardcoded values', 'Prefer component instances over manual builds') into the steps that already mandate them.
Move the ~80-line 2a-iii existing-screen inventory script and the icon-SVG/image-transfer recipes into references/ files (alongside componentization.md), keeping only a short snippet and a link in SKILL.md.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The body is mostly efficient — the Figma MCP/$fig specifics and gotchas are things Claude would not already know — but the same mandates are repeated three to four times: componentization is required in Step 2d ('Decide reuse for every inventory item — REQUIRED'), Step 3b, Step 4 ('Componentize repeated and reusable elements (required)'), and Best Practices ('Componentize by default'); 'never hardcode hex/values' and 'search before building' are likewise restated in Best Practices almost verbatim from Steps 2 and 4. This fits anchor 3, 'mostly efficient... could be tightened'; it is not anchor 2 since the padding is duplication of genuinely useful rules, not explanation of concepts Claude already knows. | 3 / 5 |
Actionability | Guidance is fully executable: concrete use_figma/$fig scripts (the Code Connect key-resolution snippet, the 2a-iii inventory script, the Step 4 section-replace with variable bindings), exact tool call shapes ('search_design_system({ queries: [{ entity: "component", query: "button" }], fileKey, includeLibraryKeys: [...] })'), component-property examples with real key formats ('Label#2:0'), and the SVG import recipe with the width/viewBox gotcha. Common cases are covered with copy-paste-ready patterns, matching anchor 5. | 5 / 5 |
Workflow Clarity | Steps 1–6 are explicitly ordered ('Follow these steps in order. Do not skip steps.') with required invariants up front, and validation checkpoints are everywhere: per-section '.screenshot()' checks in Step 4, the Step 5 read-back descendant/image-count evidence, the structural component check, the mandatory font-family assertion, and an Error Recovery section with a feedback loop (safeToRetryWithoutCanvasRead → fix and retry, or read canvas then adjust). This matches anchor 5's 'explicit validation steps; feedback loops for error recovery'. | 5 / 5 |
Progressive Disclosure | Structure is good: both local bundle files are real and clearly signaled one level deep ([references/componentization.md], [references/discover-product-font.md]), plus a dedicated 'Reference Docs' section listing the figma-use references by topic. However, sizable inline material — the ~80-line 2a-iii inventory script, the icon SVG handling, and the image-transfer scripts — is the kind of detailed recipe that the existing references/ directory could hold, which is the 'minor organization gaps' of anchor 4 rather than the well-split ideal of anchor 5. | 4 / 5 |
Total | 17 / 20 Passed |