CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

figma-code-connect-components

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

51

Quality

64%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

Quality

Content

51%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.

The body is a lean, well-organized catalogue stub with clean structure and no token waste, but its core workflow is not executable: the pivotal 'install the upstream bundle' step has no concrete command or path, and it defers even path discovery to the user. Progressive disclosure is excellent given the skill's deliberate minimal footprint.

Suggestions

Replace the `open https://github.com/figma/skills` snippet with an executable install command (e.g., the actual `git clone` command and the destination skills-directory path) so the install step is copy-paste ready.

Add a verification checkpoint after the install step (e.g., 'confirm the skill appears in the agent's skill list before invoking') to give the workflow a feedback loop.

Deduplicate content: the description is repeated verbatim in 'What it does' and the upstream URL appears twice — trimming these would push conciseness to 5.

DimensionReasoningScore

Conciseness

The body is lean (~27 lines), assumes Claude's competence, and explains nothing the model already knows — it fits anchor 4 ('Efficient; minor instances... that could be trimmed'). Not 5 because of redundancy: the frontmatter description is repeated verbatim in 'What it does' and the upstream URL appears in both the 'Source' section and the code block; not 3 or below since there is no padded or unnecessary explanation.

4 / 5

Actionability

The central instruction — 'install the upstream bundle into your active agent's skills directory' — has no executable command (no clone command, no destination path), and the snippet's own comment concedes the gap: 'Inspect the upstream README for exact paths'. The only concrete command is `open https://github.com/figma/skills`, which merely opens a webpage. This matches anchor 2 ('Minimal concrete guidance; high-level hints but missing the specific steps to execute') rather than 3, which would require some complete executable guidance.

2 / 5

Workflow Clarity

A rough sequence exists (inspect upstream README → install bundle → invoke by name or trigger phrase), but the middle step is undefined and there are no checkpoints confirming the install succeeded before invocation. This matches anchor 2 ('Rough sequence present but... steps poorly defined; validation absent'). It is not 3 because the key step (install) is left entirely unspecified rather than merely lacking checkpoints; the operation is non-destructive, so the destructive-op cap does not apply, and the simple-skill exception cannot raise it because the single action is not unambiguous.

2 / 5

Progressive Disclosure

No bundle directories (references/, scripts/, assets/) exist, so there is nothing misfiled; the body is well under 50 lines with clearly labeled sections ('What it does', 'Source', 'How to use') and a single clearly-signaled external pointer (the upstream repo). Per the rubric's simple-skill note, a short skill with no need for external references scores 5 with just well-organized sections, which this has.

5 / 5

Total

13

/

20

Passed

Description

61%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.

The description is concise, third-person, and concrete about the 'what', with strong natural keywords around Figma and Code Connect. Its main weakness is the absent 'when to use' guidance, which caps completeness, and it lists only one action, limiting specificity.

Suggestions

Append a 'Use when...' clause (e.g., 'Use when connecting Figma components to code, syncing a design system to a codebase, or when the user mentions Code Connect') to raise completeness from 3 to 4-5.

Add one or two more concrete actions or outcomes (e.g., 'generate component props mappings' or 'preview connected components in Figma dev mode') to strengthen specificity.

Include common synonyms users say, such as 'design to code' or 'sync Figma to code', to improve trigger-term coverage toward 5.

DimensionReasoningScore

Specificity

The description names the domain ('Figma design components', 'code components', 'Code Connect') and one concrete action — 'Connect Figma design components to code components' — plus an outcome ('design-system updates flow into the codebase automatically'). It matches anchor 3 ('names domain and 1-2 concrete actions, but not comprehensive'): it does not list several distinct actions like the anchor-4 example, and it is far above the vague anchor-2 ('Names the domain but actions are minimal or generic') because the action and mechanism are concrete.

3 / 5

Completeness

It has a clear 'what' ('Connect Figma design components to code components using Code Connect...') but no 'when' — there is no 'Use when...' clause or equivalent trigger guidance in the description text. Per the rubric guideline, a missing 'Use when' clause caps completeness at 3, which matches anchor 3 ('Has a clear what but when is missing or only weakly implied').

3 / 5

Trigger Term Quality

Good keyword coverage: 'Figma', 'Code Connect', 'design components', 'code components', 'design-system', 'codebase' are all natural terms a user needing this skill would say. Not 5 because common variations are missing ('design to code', 'sync designs to code', 'Figma Dev Mode', file extensions), and not 3 because coverage goes beyond 'some relevant keywords' — the core product name and domain nouns are all present.

4 / 5

Distinctiveness Conflict Risk

'Connect Figma design components to code components using Code Connect' carves out a specific niche (Figma's Code Connect feature), but there is minor overlap risk with closely related skills such as generic 'generate code from Figma designs' or design-system sync skills, matching anchor 4 ('Mostly distinct; minor overlap risk with closely related skills') rather than anchor 5's 'minimal conflict risk'.

4 / 5

Total

14

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

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

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.