SKILLEMALL.ai
GitHub ↗ RU Sign in

AB screenshot-to-code

Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".

OneWave-AI/claude-skills Agent Skills author: OneWave-AI 3 files body ≈ 1 335 tokens Open the sourcegithub.com↗ analyzed 6 h ago

Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain…

As a process B 67/100 · Nearly there — weak spots: result and completion, inputs and preconditions, running it twice

ProcedureFigmaSoftware developmentDesigntype 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
A
95/100
safety, quality, tests
Safety 60%
100
Quality 40%
88
Run on models
none yet
Process rating
B
67/100
Nearly there
Result and completion w 14
0
Inputs and preconditions w 11
0
Progress reporting w 2
0
the three weakest of ten parameters · all ten

How to improve

    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: 3. Evidence is masked. Grey chips explain why severity was lowered.

    Against the Agent Skills spec

    • note edit-residue the text marks something as outdated (lines 34): check that old rules are not kept next to new ones — the full check reads the text for contradictions

    Process rating: all ten parameters 67/100

    • 0Result and completion. Does not say what the result is
    • 0Inputs and preconditions. Does not say what the process needs to start
    • 0Progress reporting. Says nothing while it works
    • 30Running it twice. 2 mutating operations with no state check
    • 70When it triggers. States when to use, but not when not to
    • 100Tools and files. No external tools needed
    • 100Steps. 27 steps
    • 100Failures and branches. 1 branches, has a failure section
    • 100Consistency. Name and required fields are in place
    • 100Execution cost. Instruction body is 1335 tokens

    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

    • +4Description does not say when NOT to use the skill (false activations)
    • +3Output format is not stated: the model decides each time
    • -5TODO / placeholder text left in the skill
    • +1No license
    • +2Single-language instructions
    • +5Description quotes 4 example trigger phrases
    • +3Description length 518: enough signal without eating the budget
    • +4Structure: 5 headings
    • +3Step-by-step instructions: 27 items
    • +4Has examples (0 code blocks)
    • +4Reference files are cited in the instructions (2 of 2)

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