Ant Design Vue UI
lazzyfu/goInsight
Build, refactor, or review production-grade admin interfaces with Vue 3 + JavaScript + Ant Design Vue 4.x.
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
MITAuto-check passed
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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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 docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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/docs/ja-JP/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
- 276k
- Token cost
- ~640 tokens
- SKILL.md length
- 98 words
- Files
- 1
- Skills in repo
- 683
- Repo updated
- First seen
- Licence
- MIT
At a glance
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
- SKILL.md covers 使用するタイミング, 使用しないタイミング, 入力 and 変換モデル, plus 6 more sections
- Calls npx; needs DASHSCOPE_API_KEY
What it does
UI To Vue is an agent skill from affaan-m/ECC. UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
Its SKILL.md is about 640 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
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.
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 4eb71d9. 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:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, 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 640 tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 98 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 4eb71d9, republished under its MIT licence (© affaan-m). 98 words, ~640 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-to-vue/SKILL.md (or your agent's skills folder).- name
- ui-to-vue
- description
- UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
- origin
- community
UI To Vue
UIデザインのスクリーンショットをVue 3 Composition APIコンポーネントコードに一括変換します。
使用するタイミング
- ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。
- ターゲットアプリケーションがVue 3のとき。
- ユーザーがページコンポーネント、共有コンポーネント、ルーター配線の最初の変換を希望するとき。
- ユーザーがVant、Element Plus、またはAnt Design Vueをコンポーネントライブラリとして指定するとき。
使用しないタイミング
- ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。
- ターゲットプロジェクトがVueでないとき。
- デザインが詳細なインタラクションロジック、データフロー、またはアクセシビリティレビューを必要とするとき。
- スクリーンショットに外部モデルAPIに送信できないプライベートな顧客データが含まれるとき。
入力
モジュールとページ状態でスクリーンショットをグループ化したディレクトリを入力として使用します。
サポートされている切り出し画像ディレクトリ名：assets、icons、sprites、cut、images、cut-images。
変換モデル
- ページグループ化：リスト、詳細、フォーム、ローディング、または空の状態を表す関連スクリーンショットを1つのページコンポーネントにまとめる。
- UIライブラリマッピング：可能な限りネイティブのビジュアル要素をVant、Element Plus、またはAnt Design Vueコンポーネントにマッピングする。
- 切り出し画像の優先順位：ページレベルのアセットを優先し、次にモジュールレベル、最後にグローバル共有アセット。
- コンポーネント抽出：繰り返し使われるUIリージョンが2回以上現れる場合は共有コンポーネントに抽出する。
CLI使用方法
グローバルバイナリに依存せず、ドキュメントに記載されたコマンドが機能するように npx でコンバーターを実行します：
export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./srcオプション
| オプション | 説明 | デフォルト |
|---|---|---|
--input | デザイン画像ディレクトリ | ./screenshots |
--ui | UIライブラリ：vant、element-plus、または antd-vue | vant |
--output | 出力ディレクトリ | ./src |
--config | 設定ファイルのパス | ./.ui-to-vue.config.json |
セキュリティとプライバシー
- デザインスクリーンショットを外部モデルAPIに送信される可能性があるソース素材として扱う。
- 許可なくプライベートな顧客デザインでこのフローを実行しないこと。
- 再現可能なワークフローでは
@latestの代わりにコンバーターのバージョンを固定すること。 - コミット前に生成されたVueコードをレビューすること。
.ui-to-vue.config.json、APIキー、生成されたシークレット、または顧客スクリーンショットをコミットしないこと。
出力レビューチェックリスト
- ページコンポーネントが
views/または選択した出力ディレクトリの下に生成された。 - 繰り返しのUIリージョンが再利用が明確な場合のみ
components/に抽出された。 - ルーター出力がターゲットプロジェクトのルータースタイルと互換性がある。
- 生成されたコンポーネントが要求したUIライブラリを一貫して使用している。
- 生成されたCSSのユニットがデザインのベースラインと一致している。
- コードがプロジェクトのフォーマッター、リンター、型チェッカー、ビルドをパスする。
- プレースホルダーのコピー、モックデータ、生成されたアセットをコミット前にレビューした。
トラブルシューティング
| 問題 | 確認事項 |
|---|---|
401 または認証エラー | コマンドを実行するシェルで DASHSCOPE_API_KEY が設定されていることを確認する。 |
command not found: ui-to-vue | npx ui-to-vue-converter@1.0.2 の形式を使用するか、パッケージをグローバルインストールする。 |
| 切り出し画像が無視される | アセットディレクトリ名がサポートされており、対応するページまたはモジュールの下にネストされていることを確認する。 |
| コンポーネントが要求されたUIライブラリを無視する | 明示的な --ui 値で再実行して、生成されたインポートを確認する。 |
| 生成されたレイアウトの寸法がおかしい | スクリーンショットのエクスポート幅がターゲットライブラリのベースラインと一致していることを確認する。 |
リファレンス
- npmパッケージ：
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 docs/ja-JP/skills/ui-to-vue of affaan-m/ECC.
Open the folder on GitHubat commit 4eb71d9
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 | 276k | — | ~640 | Automated safety check: Pass | MIT | |
| Ant Design Vue UIlazzyfu/goInsight | 729 | — | ~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 | |
| 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
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…
Generate Theme
wot-ui/wot-ui
为 wot-ui 生成单文件主题 SCSS，并在 App.vue 中挂载语义变量. An agent skill from wot-ui/wot-ui.
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
Questions about UI To Vue
What does UI To Vue do?
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。. UI To Vue is an agent skill from affaan-m/ECC.
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 (docs/ja-JP/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 (docs/ja-JP/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 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, 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 640 tokens (SKILL.md is roughly 2.6k 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: Ant Design Vue UI (lazzyfu/goInsight, 729 stars), Mas Frontend UI (AUTO-MAS-Project/AUTO-MAS, 711 stars), Generate Theme (wot-ui/wot-ui, 387 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,111 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 10, 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.