SKILLEMALL.ai
GitHub ↗ RU Sign in

AB ui-to-vue

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

The skillemall take

Converts UI screenshots and design exports into Vue 3 components with Vant, Element Plus, or Ant Design Vue support. Single instruction file, 1146 tokens, no critical issues. Quality score 87, process score 71. Clean safety record and no broken references.

In practice: works as a batch processor for turning mockups into components. Best for teams that regularly push designs to code and accept that output needs refinement. Wide platform support (Cursor, Claude, DeepSeek, others) means you can install it anywhere. Worth adding if you have a steady stream of UI-to-code work.

affaan-m/everything-claude-code Agent Skills author: affaan-m MIT 1 file body ≈ 1 146 tokens Open the sourcegithub.com↗ analyzed 21 h ago

Batch-convert UI design screenshots into Vue 3 Composition API component code.

As a process B 71/100 · Nearly there — weak spots: running it twice, progress reporting

IntegrationSoftware 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
A
95/100
safety, quality, tests
Safety 60%
100
Quality 40%
87
Run on models
none yet
Process rating
B
71/100
Nearly there
Progress reporting w 2
0
Running it twice w 4
30
Failures and branches w 10
50
the three weakest of ten parameters · all ten

The same skill appears in 2 more places: RA-Skills, RA-Skills

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

    Against the Agent Skills spec

    ✓ No remarks against the Agent Skills spec

    Process rating: all ten parameters 71/100

    • 0Progress reporting. Says nothing while it works
    • 30Running it twice. 2 mutating operations with no state check
    • 50Failures and branches. 0 branches, has a failure section
    • 60Tools and files. Uses tools (bash) that frontmatter does not declare
    • 60Result and completion. Output format stated, no completion criterion
    • 70When it triggers. States when to use, but not when not to
    • 70Inputs and preconditions. Inputs and preconditions are listed
    • 100Steps. 25 steps
    • 100Consistency. Name and required fields are in place
    • 100Execution cost. Instruction body is 1146 tokens
    • medium Safety rules and hard prohibitions inside a skill: they belong in the system prompt, here they protect nothing
    • low 11 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)
    • +1No license
    • +2Single-language instructions
    • +3Description length 159: enough signal without eating the budget
    • +4Structure: 12 headings
    • +3Step-by-step instructions: 25 items
    • +3Output format is stated explicitly
    • +4Has examples (7 code blocks)

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