figma-code-connect-components

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

Quality

53%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/figma-code-connect-components/SKILL.md

Quality

Content

50%

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

The body is a tidy catalogue pointer with clean sections and no padding of known concepts, but it delegates the real workflow to an external repo and provides little executable guidance or validation. Inlining a minimal concrete Code Connect setup step would materially improve actionability and workflow clarity.

Suggestions

Replace the generic `open https://github.com/figma/skills` with a concrete, copy-paste-ready installation step (e.g., exact clone path and where to place the bundle in the skills directory).

Add a short, sequenced workflow with an explicit verification checkpoint (e.g., 'After install, confirm the skill appears via the trigger phrase before proceeding').

Remove the verbatim re-statement of the description in "What it does" or repurpose that section with content not already in the frontmatter.

Dimension	Reasoning	Score
Conciseness	The body is short and does not lecture on concepts Claude already knows, but it repeats the frontmatter description verbatim in "What it does" and adds mild padding about catalogue discovery, so it could be tightened to the lean top anchor.	2 / 3
Actionability	It offers one concrete command (`open https://github.com/figma/skills`) but defers the actual Code Connect workflow to the upstream README, leaving the skill's core task without executable, copy-paste-ready guidance.	2 / 3
Workflow Clarity	A rough sequence is present (inspect README → install upstream bundle → invoke by name or trigger), but steps are imprecise and there are no validation checkpoints or feedback loops, matching the mid anchor.	2 / 3
Progressive Disclosure	Sections are cleanly organized and the body is short, but detailed content is offloaded to an external URL rather than structured local reference files, so it does not fully meet the clear one-level-deep reference anchor.	2 / 3
	Total	8 / 12 Passed

Description

57%

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

The description is specific and clearly owns a distinct niche, but it lists only one action and omits any explicit "Use when…" trigger guidance. Adding natural trigger phrases and a usage clause would lift the completeness and trigger-term dimensions.

Suggestions

Append an explicit 'Use when…' clause (e.g., 'Use when connecting Figma components to code, syncing design-system changes to code, or setting up Code Connect') to satisfy the completeness anchor.

Expand the single action into multiple concrete capabilities (e.g., add 'create, update, or map Code Connect bindings') to reach the specificity top anchor.

Broaden trigger terms with natural user phrasings such as 'sync Figma to code,' 'design-system code sync,' or 'map Figma components to React/Swift' to improve trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain and a concrete action — "Connect Figma design components to code components using Code Connect" — plus the outcome "design-system updates flow into the codebase automatically," but it is a single action rather than the multiple concrete actions the top anchor requires.	2 / 3
Completeness	It clearly states what the skill does but offers no "Use when…" clause or equivalent explicit trigger guidance, so per the guidelines completeness is capped at 2 (has what, when missing/implied).	2 / 3
Trigger Term Quality	Relevant keywords ("Figma," "Code Connect," "design-system") appear but coverage is thin and misses common phrasings a user might say, matching the "some relevant keywords but missing common variations" anchor rather than full coverage.	2 / 3
Distinctiveness Conflict Risk	It targets a clear niche — Figma Code Connect for design-system components — with distinct triggers unlikely to overlap with other skills, matching the top anchor.	3 / 3
	Total	9 / 12 Passed

Validation

93%

Warnings & errors only

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

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: skills/figma-code-connect-components/SKILL.md
Commit: f2760fd

Reviewed: about 14 hours ago

Table of Contents

Discovery Implementation Validation

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.