CtrlK
BlogDocsLog inGet started
Tessl Logo

design-clip-repro

Required for any bug fix or behaviour change in the Design editor (the canvas, layers, inspector and export in templates/design/app), and for clips of Design editor bugs: copy the real design, reproduce the bug on it in a browser, fix obvious bugs directly, measure Figma only when the right behaviour is unclear, and verify side by side. Not for Design's server, actions or AI generation. Runs in a Fusion branch or on your own machine.

76

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

96%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A lean, highly actionable skill body with an exemplary gated workflow: reproduction before change, explicit decision criteria, and per-issue verification evidence. The only weakness is bundle integrity — the well-signaled reference/ and harness/ paths referenced throughout do not exist in the provided bundle, which keeps progressive disclosure at 4.

Suggestions

Ship the referenced files: the body's References section and Tools table point to .agents/skills/design-clip-repro/reference/*.md and harness/* (doctor.mjs, dlib.mjs, sheet.mjs, figlib.mjs, lock.mjs, shot.mjs, osmouse), none of which are present in the bundle — include them so the one-level-deep navigation actually resolves.

Add export-figma-cookies.mjs to the body (e.g., in the Figma login row as the way to produce/refresh the FIGMA_COOKIES_B64 secret), since it is the only bundled script never mentioned; alternatively remove it from the bundle.

DimensionReasoningScore

Conciseness

The body is dense and imperative throughout — no concept Claude already knows is explained, no padding. Every line carries operational information the model could not invent: the Fusion/machine table, exact helper signatures ("openEditor(id, { prod, reuse })"), the OOM warning with "NODE_OPTIONS=--max-old-space-size=4096", and judgment rules like "Never prove a bug on a design you built yourself." The one explanatory passage (Figma text corner-radius rationale) is repo-specific knowledge that justifies its tokens, so anchor 5's 'every token earns its place' fits rather than anchor 4's 'minor instances of over-explanation'.

5 / 5

Actionability

Fully executable guidance: exact commands ("node .agents/skills/design-clip-repro/harness/doctor.mjs", "scripts/clip.mjs \"<link>\" [atMs,...]", "swiftc -O ...osmouse.swift -o .../osmouse"), a complete API table with function signatures and return values, and where artifacts go ("templates/design/.tmp/parity/shots/"). Copy-paste ready and covering the common cases (clip path and no-clip path), matching anchor 5.

5 / 5

Workflow Clarity

The loop is a clearly sequenced 6-step workflow with explicit validation checkpoints and feedback loops: doctor PASS/WAIT/FAIL gating with a retry path, a hard reproduction gate ("change no source until every issue is reproduced and its capture matches the clip frame"), and a final per-issue verification sheet ("Clip | Production before | Figma (if measured) | Local after") with recovery guidance when reproduction fails. The destructive operations (deleting production copies, changing source) are all guarded, so no workflow cap applies; this matches anchor 5's 'explicit validation steps; feedback loops for error recovery'.

5 / 5

Progressive Disclosure

The written structure is textbook: the main loop and tools live in SKILL.md while detail topics are split into a clearly signaled, one-level-deep reference list ("References (open only when the clip needs them)" with a one-line description per file). However, scored against the actual bundle as the rubric directs: the shipped bundle contains only scripts/ (clip.mjs, copy-design.mjs, figma-login.mjs, export-figma-cookies.mjs), while the referenced reference/*.md files and every harness/* file the loop depends on (doctor.mjs, dlib.mjs, sheet.mjs, figlib.mjs, lock.mjs, shot.mjs, osmouse) are absent, so navigation from the body hits dead ends. That is more than anchor 5's 'easy navigation' but the signaling and split are well above anchor 3's 'references present but not clearly signaled'.

4 / 5

Total

19

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

An exemplary description: concrete, comprehensive actions; natural trigger vocabulary including synonyms; explicit positive and negative trigger clauses; and a tightly scoped niche. It uses third person with no fluff or over-claims.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions covering the full workflow: "copy the real design, reproduce the bug on it in a browser, fix obvious bugs directly, measure Figma only when the right behaviour is unclear, and verify side by side." This is comprehensive coverage of the skill's capability space, matching the anchor-5 example's breadth (extract/fill/merge/convert) rather than anchor 4's 'minor gaps in coverage'.

5 / 5

Completeness

Both halves are explicit: the 'what' is the enumerated action list (copy, reproduce, fix, measure Figma, verify side by side), and the 'when' is a concrete trigger clause — "Required for any bug fix or behaviour change in the Design editor (the canvas, layers, inspector and export in templates/design/app), and for clips of Design editor bugs" — plus negative scope ("Not for Design's server, actions or AI generation"). This meets the anchor-5 requirement of explicit what AND when with concrete trigger phrases; anchor 4's 'when could be more explicit' does not apply.

5 / 5

Trigger Term Quality

Natural vocabulary a user would actually say is comprehensively represented with synonyms: "bug fix", "behaviour change", "Design editor", "the canvas, layers, inspector and export", "clips of Design editor bugs", "Figma", "reproduce". A user saying 'fix this canvas/export bug' or 'here's a clip of a layers bug' would hit these triggers; no meaningful natural term is missing, so anchor 5 fits better than anchor 4's 'a few natural terms missing'.

5 / 5

Distinctiveness Conflict Risk

It carves a clear niche (Design editor canvas/layers/inspector/export bug work in a specific app path) and actively reduces conflict with explicit exclusions ("Not for Design's server, actions or AI generation") and an environment statement. Minimal overlap risk with other skills — a textbook anchor-5 case, above anchor 4's 'minor overlap risk with closely related skills'.

5 / 5

Total

20

/

20

Passed

Validation

81%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

13

/

16

Passed

Repository
BuilderIO/agent-native
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.