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

84%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

86%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, actionable skill body centered on a CLI tool, with executable commands, validation via an output checklist, and clean single-file organization. Relative weaknesses are minor redundancy and the lack of an inline validate-fix-retry feedback loop for the batch conversion.

Suggestions

Add an inline validate->fix->retry step after the CLI run (e.g. 'run the converter, then run the project's lint/type-check/build; on failure, adjust --ui or inputs and re-run') to turn the post-hoc Output Review Checklist into a feedback loop and lift workflow_clarity.

De-duplicate the API key guidance: state `export DASHSCOPE_API_KEY=your_key` once and reference it, and drop or compress the global-install block that restates the npx command form, to tighten conciseness.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's competence (no explanation of what Vue or a UI library is), but has minor redundancy such as the repeated `export DASHSCOPE_API_KEY` line and the global-install block restating the npx command form, so it fits the efficient score-4 anchor rather than the fully lean score-5.	4 / 5
Actionability	It provides fully executable, copy-paste-ready commands for all three libraries (`npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src`, element-plus, antd-vue) plus a complete options table, config JSON, and gitignore, covering the common cases per the score-5 anchor.	5 / 5
Workflow Clarity	Sections sequence the flow (inputs -> conversion model -> CLI -> review) and the Output Review Checklist supplies validation checkpoints for this batch operation, so it clears the batch cap; it is not score-5 because validation is a post-hoc checklist rather than an inline validate->fix->retry feedback loop.	4 / 5
Progressive Disclosure	It is a single, well-organized file with clear section headers, no nested references, and only an external npm-package pointer; nothing that belongs in a bundled file is inlined, matching the well-organized-sections allowance for skills needing no external references.	5 / 5
	Total	18 / 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 tight, third-person description that clearly answers both what it does and when to use it, with concrete trigger terms and a distinct niche. The only weakness is that it names one primary action rather than enumerating several specific conversion behaviors.

Dimension	Reasoning	Score
Specificity	Quotes "batch conversion into Vue 3 components" plus the named libraries give a concrete domain and one main action, but it does not list several specific actions (e.g. page components, shared components, router wiring are absent), matching the score-3 anchor rather than the more comprehensive score-4.	3 / 5
Completeness	It explicitly states both what ("batch conversion ... into Vue 3 components") and when ("Use when the user has UI screenshots or design exports that need batch conversion ..."), with concrete trigger phrases matching the score-5 anchor; it is not score-4 because the when-clause is already explicit and specific rather than merely present.	5 / 5
Trigger Term Quality	Natural terms a user would say appear ("UI screenshots", "design exports", "Vue 3 components", "Vant, Element Plus, or Ant Design Vue"), giving good keyword coverage, but synonyms/file extensions like ".vue" or "design to code" are missing, so it stops short of the comprehensive score-5 anchor.	4 / 5
Distinctiveness Conflict Risk	The niche is narrow and specific (Vue 3 conversion from screenshots using Vant/Element Plus/Ant Design Vue), yielding distinct triggers and minimal conflict risk, matching the score-5 anchor.	5 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Path: skills/ui-to-vue/SKILL.md
Commit: d8409a4

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.