SKILLEMALL.ai
GitHub ↗ RU Sign in

CD design-to-code

Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.

davila7/claude-code-templates Agent Skills author: davila7 MIT 4 files · 1 script body ≈ 1 170 tokens Open the sourcegithub.com↗ analyzed 6 d ago

Pixel-perfect Figma to React conversion using coderio.

As a process D 48/100 · Unfinished process — References files that are not bundled: scripts/structure-prompt.md, scripts/structure-output.json, scripts/current-props-prompt.md

ProcedureFigmaSoftware developmenttype and topics are labelled automatically from the skill text
Runs in: Claude / Claude Code ChatGPT / Codex Gemini CLI Cursor GitHub Copilot / VS Code Qwen Code Kimi Code CLI Z.ai (GLM) DeepSeek (Deep Code) Mistral Vibe LangChain (deepagents) OpenClaw Goose OpenCode
JSON
Technical rating
C
86/100
safety, quality, tests
Safety 60%
100
Quality 40%
64
Run on models
none yet
Process rating
D
48/100
Unfinished process
References files that are not bundled: scripts/structure-prompt.md, scripts/structure-output.json, scripts/current-props-prompt.md
Tools and files w 18
0
Result and completion w 14
0
Progress reporting w 2
0
the three weakest of ten parameters · all ten

How to improve

  1. Say in the description WHEN to use the skill ("use when…", example requests): that is the agent's main cue.
  2. The text references files that are not there: add them or drop the references.
For the model run — optional
  • Your own cases (evals/evals.json, 4–6 real requests with expected answers): the full check would then run those instead of a model-drafted suite.
  • A spec.yaml with trigger phrases and assertions — a behaviour contract for CI; `skilltest init` writes a template.

Guard findings · 0

✓ No critical or high findings

Files scanned: 4. Evidence is masked. Grey chips explain why severity was lowered.

Against the Agent Skills spec

  • warning description-no-when description does not say WHEN to use the skill (no "use when")
  • warning missing-ref reference to a missing file: scripts/structure-prompt.md
  • warning missing-ref reference to a missing file: scripts/structure-output.json
  • warning missing-ref reference to a missing file: scripts/current-props-prompt.md
  • warning missing-ref reference to a missing file: scripts/ComponentName-props.json
  • warning missing-ref reference to a missing file: scripts/code-prompt.md
  • warning missing-ref reference to a missing file: scripts/code-output.txt

Process rating: all ten parameters 48/100

Will not run. References files that are not bundled: scripts/structure-prompt.md, scripts/structure-output.json, scripts/current-props-prompt.md
  • 0Tools and files. 6 referenced file(s) missing: scripts/structure-prompt.md, scripts/structure-output.json, scripts/current-props-prompt.md
  • 0Result and completion. Does not say what the result is
  • 0Progress reporting. Says nothing while it works
  • 20When it triggers. No condition that starts the skill
  • 50Failures and branches. 0 branches, has a failure section
  • 70Inputs and preconditions. Inputs and preconditions are listed
  • 100Steps. 16 steps
  • 100Consistency. Name and required fields are in place
  • 100Execution cost. Instruction body is 1170 tokens
  • 100Running it twice. Mutating operations check current state
  • low 10 top-level sections: this looks like several domains in one skill

Everything here is measured from the skill text rather than judged by a model, so the numbers are checkable. A parameter weighs more when it is a more common reason for the process to stall.

Quality signals

  • +5Description has no quoted example phrases that should trigger the skill
  • +4Description does not say when NOT to use the skill (false activations)
  • +3Output format is not stated: the model decides each time
  • +2Single-language instructions
  • +3Description length 246: enough signal without eating the budget
  • +4Structure: 15 headings
  • +3Step-by-step instructions: 16 items
  • +4Has examples (11 code blocks)
  • +3All 1 scripts are documented
  • +1License stated

Quality base 70; lint remarks subtract, signals add up to 100. Result: 64.