CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

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

82%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-organized, highly actionable CLI-oriented skill: pinned executable commands, a clear options table, an output review checklist, and troubleshooting feedback loops. Its minor weaknesses are slight redundancy in API-key handling and an implicit rather than explicit step sequence.

DimensionReasoningScore

Conciseness

The body is lean and sectioned with no explanation of concepts Claude already knows, but has minor redundancy: the DASHSCOPE_API_KEY export appears in both CLI Usage and API Key Handling, and the npx-rationale sentence ('so the documented command works without relying on a global binary') is justification padding. Fits anchor 4 (minor over-explanation that could be trimmed), not 5 (every token earns its place).

4 / 5

Actionability

Fully executable, copy-paste-ready commands with a pinned version ('npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src'), an options table with defaults, a concrete config-file example, a gitignore snippet, and troubleshooting rows with specific fixes. Matches anchor 5 (specific examples covering the common cases).

5 / 5

Workflow Clarity

The input → CLI → review sequence is conveyed by section order and validated by an explicit Output Review Checklist (formatter, linter, type checker, build) plus a Troubleshooting feedback table, so the batch-operation cap does not apply. However, no explicit numbered step sequence is given, matching anchor 4 (most checkpoints, minor gaps) rather than 5 (fully explicit stepwise sequence with validation inline).

4 / 5

Progressive Disclosure

No nested references and cleanly organized sections, but the body exceeds the simple-skill (<50 line) threshold, the References section only names the npm package rather than any file, and material like the troubleshooting table and options reference could arguably live in a separate file. Good structure with minor organization gaps — anchor 4.

4 / 5

Total

17

/

20

Passed

Description

82%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 concise, well-targeted description with an explicit 'Use when...' trigger, clear what/when coverage, and distinctive library-specific terms. Its only weakness is thin action coverage — it names batch conversion but omits the component extraction, shared component, and router wiring capabilities documented in the body.

DimensionReasoningScore

Specificity

Names the domain ('UI screenshots or design exports', 'Vue 3 components') and one concrete action ('batch conversion into Vue 3 components') plus the supported libraries, but does not list several specific actions — the body's component extraction, shared components, and router wiring are absent. Fits anchor 3 ('1-2 concrete actions, not comprehensive'), not 4 ('lists several specific actions').

3 / 5

Completeness

Explicitly answers both: what ('batch conversion into Vue 3 components') and when ('Use when the user has UI screenshots or design exports that need batch conversion'). Both are concrete and explicit with trigger phrases, matching anchor 5 rather than 4 where the 'when' would be less specific.

5 / 5

Trigger Term Quality

'UI screenshots', 'design exports', 'Vue 3', and the three library names ('Vant, Element Plus, or Ant Design Vue') are natural phrases a user would say, but common synonyms like 'mockup', 'design-to-code', or 'figma exports' are missing. Good coverage, a few natural terms missing — anchor 4, not 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche — screenshot/design-export to Vue 3 with named component libraries — with triggers unlikely to fire for unrelated skills. Minimal overlap risk, matching anchor 5.

5 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

affaan-m/ECC

Path

skills/ui-to-vue/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.