CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-code-connect-components

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

47

Quality

50%

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

47%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 tidy catalogue stub that outsources the real workflow to an upstream GitHub repo, so structure and brevity score well while actionability and workflow clarity are weak.

Suggestions

Replace or augment the `open https://github.com/figma/skills` hint with the concrete install command for the upstream bundle (e.g., the exact skills-directory path and clone/copy step).

Inline a minimal executable Code Connect example (e.g., a sample figma.config.json snippet or `npx figma-mcp` command) so the skill is usable without leaving the file.

Add a verification step (e.g., confirm the component mapping renders or that the bundle is discoverable by name) to give the rough sequence a real checkpoint.

DimensionReasoningScore

Conciseness

The body is lean and well-sectioned without explaining concepts Claude already knows; only the meta sentence about advertising in Open Design could be trimmed.

4 / 5

Actionability

The only command is `open https://github.com/figma/skills`, which merely points to the upstream README; the actual Code Connect task has no concrete executable steps.

2 / 5

Workflow Clarity

A rough sequence exists (inspect upstream, install bundle, invoke skill) but the key install step has no real command and no checkpoints, leaving large gaps.

2 / 5

Progressive Disclosure

Content is cleanly split into What it does / Source / How to use with a clearly signaled one-level pointer to the upstream repo; minor gaps only because no local bundle files exist.

4 / 5

Total

12

/

20

Passed

Description

53%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 clearly states what the skill does within a specific Figma niche, but it lacks an explicit trigger/"Use when" clause, capping completeness and trigger-term quality at the midpoint.

Suggestions

Add an explicit "Use when..." clause naming natural trigger phrases (e.g., "Use when connecting Figma components to code, or when syncing design-system updates into the codebase").

Expand the action list beyond the single "connect" verb (e.g., map variants, sync properties, handle component updates) to lift specificity toward comprehensive coverage.

Include common synonyms/file-context terms users actually say (e.g., "Figma", "Code Connect", "design tokens", "component library") to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

Names the domain ("Figma design components to code components using Code Connect") and one concrete action (connect them so updates flow automatically), but offers only a single action rather than comprehensive coverage.

3 / 5

Completeness

Gives a clear "what" (connect design components to code components) but omits an explicit "when" / "Use when" trigger clause, which caps completeness at 3 per the rubric.

3 / 5

Trigger Term Quality

Contains relevant domain keywords ("Figma", "Code Connect", "design components") but lacks the natural "Use when..." phrasing and common variations a user would say.

3 / 5

Distinctiveness Conflict Risk

The Figma Code Connect niche is fairly specific and unlikely to conflict with unrelated skills, though the missing "when" clause leaves minor overlap risk with adjacent Figma skills.

4 / 5

Total

13

/

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.

Validation15 / 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
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.