Mas Frontend UI
AUTO-MAS-Project/AUTO-MAS
A skill your agent uses when working on AUTO-MAS frontend UI, Ant Design Vue components, page layout, forms, tables, modals, drawers, feedback, empty/loading/error states, drag interactions, dark…
A skill your agent uses 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.
Install UI To Vue
$ npx skills add affaan-m/ECC --skill ui-to-vue -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install affaan-m/ECC ui-to-vue --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-to-vue .claude/skills/ui-to-vue && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .claude/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vueType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add affaan-m/ECC --skill ui-to-vue -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install affaan-m/ECC ui-to-vue --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-to-vue .agents/skills/ui-to-vue && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .agents/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add affaan-m/ECC --skill ui-to-vue -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install affaan-m/ECC ui-to-vue --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-to-vue .cursor/skills/ui-to-vue && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .cursor/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/affaan-m/ECC.git --path skills/ui-to-vue--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add affaan-m/ECC --skill ui-to-vue -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install affaan-m/ECC ui-to-vue --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-to-vue .gemini/skills/ui-to-vue && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .gemini/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install affaan-m/ECC ui-to-vueInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add affaan-m/ECC --skill ui-to-vue -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-to-vue .github/skills/ui-to-vue && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .github/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add affaan-m/ECC --skill ui-to-vue -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install affaan-m/ECC ui-to-vue --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-to-vue .opencode/skills/ui-to-vue && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-to-vue" agent skill from https://github.com/affaan-m/ECC/tree/main/skills/ui-to-vue into .opencode/skills/ui-to-vue/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-to-vue", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-to-vue- GitHub stars
- 277k
- Used in
- 1 other repo
- Token cost
- ~1.2k tokens
- SKILL.md length
- 514 words
- Files
- 1
- Skills in repo
- 683
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses 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 user has UI screenshots
- SKILL.md covers When to Use, When Not to Use, Inputs and Conversion Model, plus 7 more sections
- Calls npx and npm; needs DASHSCOPE_API_KEY
- Design exports that need batch conversion into Vue 3 components
What it does
UI To Vue is an agent skill from affaan-m/ECC. 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.
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with Vue.js and Ant Design. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.
When your agent uses it
- The user has UI screenshots
- Design exports that need batch conversion into Vue 3 components
- Especially with Vant
Example prompts
- “/ui-to-vue”
Requirements
- Node.js
- A credential in DASHSCOPE_API_KEY
What it can do on your machine
Read from SKILL.md and the folder at commit 2d515e4. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npxnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
DASHSCOPE_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI To Vue loads about 1.2k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 514 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from affaan-m/ECC at commit 2d515e4, republished under its MIT licence (© affaan-m). 514 words, ~1,203 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-to-vue/SKILL.md (or your agent's skills folder).- name
- ui-to-vue
- description
- 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.
- metadata.origin
- community
UI To Vue
Batch-convert UI design screenshots into Vue 3 Composition API component code.
When to Use
- The user provides a directory of design screenshots or design-export images.
- The target application is Vue 3.
- The user wants a first pass of page components, shared components, and router wiring.
- The user specifies Vant, Element Plus, or Ant Design Vue as the component library.
When Not to Use
- The user has only one screenshot and wants a bespoke component.
- The target project is not Vue.
- The design requires detailed interaction logic, data flow, or accessibility review.
- The screenshots contain private customer data that cannot be sent to an external model API.
Inputs
Use an input directory that groups screenshots by module and page state:
screenshots/
|-- HomePage/
| |-- List/
| | |-- HomePage-List-Default@3x.png
| | `-- cut-images/
| |-- cut-images/
| `-- HomePage-Default@3x.png
`-- cut-images/Supported cut-image directory names include assets, icons, sprites, cut, images, and cut-images.
Conversion Model
- Page grouping: combine related screenshots into one page component when they represent list, detail, form, loading, or empty states.
- UI library mapping: map native visual elements to Vant, Element Plus, or Ant Design Vue components where practical.
- Cut-image priority: prefer page-level assets, then module-level assets, then global shared assets.
- Component extraction: extract repeated UI regions into shared components when they appear more than once.
CLI Usage
Run the converter with npx so the documented command works without relying on a global binary:
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./srcFor desktop UI libraries:
npx ui-to-vue-converter@1.0.2 --input ./designs --ui element-plus --output ./src
npx ui-to-vue-converter@1.0.2 --input ./designs --ui antd-vue --output ./srcIf the package is installed globally, the ui-to-vue binary can be used directly:
npm install -g ui-to-vue-converter@1.0.2
ui-to-vue --input ./screenshots --ui vant --output ./srcOptions
| Option | Description | Default |
|---|---|---|
--input | Design image directory | ./screenshots |
--ui | UI library: vant, element-plus, or antd-vue | vant |
--output | Output directory | ./src |
--config | Config file path | ./.ui-to-vue.config.json |
API Key Handling
The converter can read DashScope credentials from a config file or from the environment. Prefer an environment variable in repositories:
export DASHSCOPE_API_KEY=your_keyIf a local config file is required, keep it out of version control:
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}.ui-to-vue.config.jsonShow full SKILL.md (217 more words)Show less
Security and Privacy
- Treat design screenshots as source material that may be sent to an external model API.
- Do not run this flow on private customer designs without permission.
- Pin the converter version in repeatable workflows instead of using
@latest. - Review generated Vue code before committing it.
- Do not commit
.ui-to-vue.config.json, API keys, generated secrets, or customer screenshots.
Output Review Checklist
- Page components were generated under
views/or the chosen output directory. - Repeated UI regions were extracted into
components/only when reuse is clear. - Router output is compatible with the target project's router style.
- Generated components use the requested UI library consistently.
- Generated CSS units match the design baseline.
- The code passes the project's formatter, linter, type checker, and build.
- Placeholder copy, mock data, and generated assets were reviewed before commit.
Troubleshooting
| Issue | Check |
|---|---|
401 or authentication error | Confirm DASHSCOPE_API_KEY is set in the shell running the command. |
command not found: ui-to-vue | Use the npx ui-to-vue-converter@1.0.2 form or install the package globally. |
| Cut images are ignored | Confirm the asset directory name is supported and nested under the matching page or module. |
| Components ignore the requested UI library | Re-run with an explicit --ui value and inspect the generated imports. |
| Generated layout dimensions look wrong | Confirm the screenshot export width matches the target library baseline. |
References
- npm package:
ui-to-vue-converter
© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/ui-to-vue of affaan-m/ECC.
Open the folder on GitHubat commit 2d515e4
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.
Compare with similar skills
UI To Vue next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI To Vue this skillaffaan-m/ECC | 277k | 1 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Mas Frontend UIAUTO-MAS-Project/AUTO-MAS | 711 | — | ~3.8k | Automated safety check: Pass | AGPL-3.0 | |
| Generate Themewot-ui/wot-ui | 387 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Ant Design Vue UIlazzyfu/goInsight | 729 | — | ~2k | Automated safety check: Pass | MIT | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| GSAP Core Animationgreensock/gsap-skills | 16k | 3 repos | ~3.7k | Automated safety check: Pass | MIT |
Similar skills
Generate Theme
wot-ui/wot-ui
为 wot-ui 生成单文件主题 SCSS，并在 App.vue 中挂载语义变量. An agent skill from wot-ui/wot-ui.
Ant Design Vue UI
lazzyfu/goInsight
Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
More from affaan-m/ECC
All 682 skills in this repoSkill Stocktake
affaan-m/ECC
Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.
VideoDB Video Search and Editing
affaan-m/ECC
Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.
Docs Governance
affaan-m/ECC
Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.
Rules Distillation
affaan-m/ECC
Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.
Master Agreement Generator
affaan-m/ECC
Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.
Frontend Design Direction
affaan-m/ECC
Set an ECC-specific frontend design direction for production UI work.
Related
Works with
Categories
Questions about UI To Vue
What does UI To Vue do?
A skill your agent uses 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. UI To Vue is an agent skill from affaan-m/ECC. 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.
When should I use UI To Vue?
UI To Vue fits situations like: the user has UI screenshots; design exports that need batch conversion into Vue 3 components; especially with Vant.
How do I install UI To Vue in Claude Code?
Run `npx skills add affaan-m/ECC --skill ui-to-vue -a claude-code`. Or copy the skill folder (skills/ui-to-vue in affaan-m/ECC) into .claude/skills/ui-to-vue in your project. Claude Code loads it when a task matches its description.
How do I install UI To Vue in Codex?
Run `npx skills add affaan-m/ECC --skill ui-to-vue -a codex`. Or copy the skill folder (skills/ui-to-vue in affaan-m/ECC) into .agents/skills/ui-to-vue in your project. Codex loads it when a task matches its description.
Can I use UI To Vue in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add affaan-m/ECC --skill ui-to-vue -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-to-vue, .gemini/skills/ui-to-vue, .github/skills/ui-to-vue and .opencode/skills/ui-to-vue in your project.
What does UI To Vue need to run?
Going by SKILL.md and its folder, UI To Vue needs the command-line tools its instructions call (npx and npm) and credentials named DASHSCOPE_API_KEY. Our summary lists: Node.js; A credential in DASHSCOPE_API_KEY.
Does UI To Vue access the network?
SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is UI To Vue safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI To Vue use?
UI To Vue is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI To Vue use?
About 1.2k tokens (SKILL.md is roughly 4.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UI To Vue?
Skills that share tags, products or a category with UI To Vue: Mas Frontend UI (AUTO-MAS-Project/AUTO-MAS, 711 stars), Generate Theme (wot-ui/wot-ui, 387 stars), Ant Design Vue UI (lazzyfu/goInsight, 729 stars) and Tailwindcss Development (anonaddy/anonaddy, 4.9k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI To Vue?
affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,673 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 11, 2026.
Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.