CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

code-to-figma

Sync code tokens and page structure to Figma via a CI + Gist pipeline. Use when asked to "set up a Figma sync pipeline", "sync code to Figma", "export design tokens to Figma", "update the page walker", or "wire up the tokens-sync-to-figma plugin"; when paths include `figma-sync.config.json`, `figma-export.json`, `scripts/tokens-to-figma/`, or `.github/workflows/figma-sync.yml`; or when checking figma-sync Gist or CI status. Not for agent-driven, one-off Figma writes such as creating variables or editing nodes (use `figma-use`) or generating screens (use `figma-generate-design`).

Quality

90%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

Well-structured, executable content: every command workflow is sequenced with validation and stop conditions, and detail is appropriately pushed into well-signaled one-level-deep references. The two 4s reflect mild redundancy in restating the Figma-parity boundary and templated/deferred specifics around the project-specific walker.

Suggestions

State the export-uploaded vs Figma-parity-verified separation once as an operating principle and reference it from the sync, status, and boundaries sections instead of restating it in each.

Note in the Behavioral evals section that `tests/walker-patterns-snippets.test.mjs` lives in the source repo rather than the skill bundle, or drop the path from the bundled SKILL.md, so the reference is not dangling from the bundle's perspective.

DimensionReasoningScore

Conciseness

No padding with concepts Claude already knows — principles like the pnpm stdout-corruption note and the DTCG `$type` contract are genuinely non-obvious, project-specific knowledge. It falls short of 5 because the export-vs-Figma-parity separation is restated across four sections (sync steps, status table, boundaries) and could be tightened.

4 / 5

Actionability

Concrete, executable commands dominate (node invocations, `jq -e '.sections | type == "array"'` with exit-0 semantics, `gh api gists/<id>`, `gh secret list`), with clear defaulting rules. Minor gaps keep it below 5: the walker path is templated (`walk-<site>.mjs`) and the setup file specifications are deferred to references rather than shown.

4 / 5

Workflow Clarity

All four commands have numbered sequences with explicit validation checkpoints ("must exit 0; stop on failure"), error-recovery guidance ("stop and tell the user rather than guessing"), stated completion criteria, and a status checklist table — the top anchor's pattern of validate-before-proceed is fully present.

5 / 5

Progressive Disclosure

The body is a lean command guide with a Reference Files table giving per-file 'load when' conditions; references are one level deep and all cited paths and fragment anchors resolve to real files and headings in the bundle. Only a near-5 deduction candidate is the mention of `tests/walker-patterns-snippets.test.mjs`, which is not present in the bundle.

5 / 5

Total

18

/

20

Passed

Description

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

A strong description: concrete mechanism, explicit and varied 'Use when' triggers including file paths, and clear exclusion boundaries against neighboring Figma skills. The only limitation is that the capability statement is a single pipeline action rather than an enumerated set of actions, which slightly caps specificity.

DimensionReasoningScore

Specificity

"Sync code tokens and page structure to Figma via a CI + Gist pipeline" names the domain and mechanism concretely, and specific paths like `figma-sync.config.json` and `.github/workflows/figma-sync.yml` ground it. It stays below a 5 because the 'what' is one macro-action (sync via pipeline) rather than a list of multiple distinct concrete actions.

4 / 5

Completeness

Explicitly answers both 'what' (sync code tokens and page structure to Figma via a CI + Gist pipeline) and 'when' with a concrete "Use when..." clause listing trigger phrases and paths, plus "Not for..." exclusions — matching the top anchor's example pattern.

5 / 5

Trigger Term Quality

Natural trigger phrases ("set up a Figma sync pipeline", "sync code to Figma", "export design tokens to Figma", "update the page walker") are complemented by file-path triggers and status-check phrasing, giving comprehensive coverage including synonyms and config filenames.

5 / 5

Distinctiveness Conflict Risk

It carves a clear niche (CI + Gist pipeline, `tokens-sync-to-figma` plugin) and explicitly redirects adjacent intents to `figma-use`, `figma-generate-design`, and the reverse-direction skill, minimizing wrong-skill triggering.

5 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 deeper-than-1-level

Warning

referenced_paths_exist

Referenced path issues: 6 missing, 6 deeper-than-1-level

Warning

Total

14

/

16

Passed

Repository

t4sh/skills4sh

Path

skills/code-to-figma/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.