CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-pencil-fsd-tailwind4

Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.

70

Quality

85%

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

78%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 well-structured, lean overview skill that delegates detail to a real, one-level-deep reference bundle and provides a sequenced workflow with a validation checklist. Main weaknesses are the absence of an inline executable conversion example and a missing explicit validate→fix→retry feedback loop.

Suggestions

Add a short inline worked code example (a single frame → one FSD layer) in the body so the core conversion is executable without opening example-mapping.md.

Make the validation step an explicit feedback loop: 'if a checklist item fails, fix and re-run before reporting complete' rather than only 'run the checklist before reporting complete'.

Trim the framing sentences in the intro and Assumptions section (e.g. the framework-agnostic caveat) to push conciseness toward fully lean.

DimensionReasoningScore

Conciseness

Dense, rule-oriented body with no padding about concepts Claude already knows (no 'what is Figma/Tailwind' exposition); every section is actionable. A few orientation sentences ('This skill is framework-agnostic ...') could be trimmed, keeping it at 4 rather than 5. Not a 3 because it is genuinely efficient rather than merely 'mostly' so.

4 / 5

Actionability

Concrete, specific guidance throughout — named tools (ESLint, Steiger, dependency-cruiser, axe, Lighthouse), concrete patterns (`@theme { ... }`, `bg-[oklch(...)]`), and an explicit required-state list. No copy-paste code blocks for the core conversion (the worked example is delegated to example-mapping.md), which leaves minor gaps. Not a 5 because the main conversion lacks an inline executable example; not a 3 because guidance is specific and executable, not pseudocode.

4 / 5

Workflow Clarity

A clear 10-step numbered workflow culminating in a validation checklist with verifiable items (grep imports, run linter, run type-check/lint/tests). Not a 5 because there is no explicit 'if validation fails → fix → re-validate' feedback loop, only 'run the checklist before reporting complete'. Not a 3 because checkpoints are explicit and present; the destructive/batch cap does not apply to this generation task.

4 / 5

Progressive Disclosure

Clear overview body with each major section signaling 'Detailed rules in references/<file>.md', plus a consolidated References list; all 8 referenced files exist in ./references/ and references are one level deep. Matches the anchor 5 pattern of well-signaled one-level-deep references with easy navigation.

5 / 5

Total

17

/

20

Passed

Description

92%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, specific description that clearly states both capability and trigger conditions with concrete FSD/Tailwind vocabulary. The only mild gap is trigger-term synonym coverage, which keeps trigger quality at 4 rather than 5.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Convert Figma or Pencil designs into production-ready frontend code', 'extracting tokens', 'mapping UI to FSD layers', 'enforcing Server vs Client boundaries', 'validating design-to-code fidelity' — giving comprehensive coverage. Not a 4 because the action set is broad and specific rather than having minor gaps.

5 / 5

Completeness

Explicitly answers both what ('Convert ... designs into production-ready frontend code using FSD and Tailwind CSS v4') and when ('Use when translating designs into code, extracting tokens, mapping UI to FSD layers ...'), with concrete trigger phrases. Matches the anchor 5 example structure exactly.

5 / 5

Trigger Term Quality

Good natural-term coverage ('Figma', 'Pencil', 'translating designs into code', 'design-to-code fidelity', 'tokens'), but a few common phrasings users might say (e.g. 'Figma to React', design-file extensions) are absent. Not a 5 because synonym/extension coverage is incomplete; not a 3 because several natural trigger phrases are present.

4 / 5

Distinctiveness Conflict Risk

Targets a clear niche — Figma/Pencil design-to-code via FSD + Tailwind v4 — with distinct triggers unlikely to fire for unrelated skills. Not a 4 because the toolchain and layer enumeration make it highly specific with minimal overlap risk.

5 / 5

Total

19

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
JohnWayneeee/ai-agent-skills
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.