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 high-quality workflow skill: the step sequence is explicitly gated, validated, and recoverable, and the code examples are executable and cover the real failure modes. The main costs are token-level redundancy (rules restated in Best Practices that are already mandated inline) and heavy inline content where a reference file split would serve the progressive-disclosure structure it already gestures toward.
Suggestions
Delete the Best Practices section and keep only bullets not already mandated inline, or fold its unique points (match existing conventions) into the relevant steps — the $fig mandate, search-before-building, section-by-section work, and per-section validation are each already stated where they apply.
State the $fig requirement once (e.g., in Step 3) and remove the repetitions in the Step 4 table and Best Practices to save tokens without losing the constraint.
Move the icon SVG handling and image-transfer subsections into reference files linked from a short summary, mirroring the pattern already used for component/variable/style details.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The body is dense with Figma-plugin-specific knowledge Claude does not already have ($fig builder, componentProperties, importVariableByKeyAsync, imageHash transfer), but it repeats itself noticeably: 'MUST use $fig for all node creation' is mandated three times (Step 3, the Step 4 build-manually table, and Best Practices), the Best Practices section largely restates rules already enforced inline (search before building, work section-by-section, validate after each section), and the hard-gates block repeats constraints stated in the step text. This fits the 'mostly efficient but includes some unnecessary explanation or could be tightened' anchor better than 'minor instances of over-explanation' (4), since the redundancy spans whole sections rather than isolated instances. | 3 / 5 |
Actionability | Every step ships executable JavaScript: resolving component keys from Code Connect URLs ('figma.getNodeByIdAsync("609:35535")' with hyphen-to-colon conversion spelled out), instance-walking discovery scripts, the $fig.autoLayout wrapper with placeholder flags, section replacement with variable bindings and setProperties() overrides, imageHash extraction and transfer, and variant swapping. Placeholder keys are clearly marked (BUTTON_SET_KEY, BG_COLOR_VAR_KEY) and concrete failure modes are pre-empted (currentColor imports as black, SVG needs explicit width/height, HUG default vs FILL). | 5 / 5 |
Workflow Clarity | A strictly ordered 6-step workflow with explicit hard gates ('Forbidden: search_design_system… until 2a-i is complete'), per-section validation ('Validate the section with .screenshot() before moving on'), a full-view validation pass listing specific failure signatures (cropped text, overlaps, placeholder text, wrong variants, blank images), and a STOP→read error→inspect→fix→retry recovery loop justified by script atomicity. Validation and feedback loops are explicit throughout, so the missing-validation cap does not apply. | 5 / 5 |
Progressive Disclosure | Structure is good: a dedicated Reference Docs section lists one-level-deep links each with a one-line description of its contents (component-patterns, variable-patterns, text-style-patterns, effect-style-patterns, gotchas), and detail is deferred to them via targeted anchors. However, the skill ships no bundle of its own — every reference points into the sibling ../figma-use bundle (unverifiable from this review copy) — and some inline content (the multi-paragraph icon SVG handling and image-transfer subsections) is lengthy enough that it arguably belongs in a reference file. This fits 'good structure; most content appropriately placed; minor organization gaps' rather than the fully clean 5 anchor. | 4 / 5 |
Total | 17 / 20 Passed |