Ui To Vue
- 2.3k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/everything-claude-code
ui-to-vue is an agent skill for UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
About
The ui-to-vue skill UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。 It covers ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。. Key workflows include ターゲットアプリケーションがVue 3のとき。. Developers invoke ui-to-vue when the task matches the triggers and reference files in SKILL.md for grounded, stepwise execution. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, a.
- ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。
- ターゲットアプリケーションがVue 3のとき。
- ユーザーがページコンポーネント、共有コンポーネント、ルーター配線の最初の変換を希望するとき。
- ユーザーがVant、Element Plus、またはAnt Design Vueをコンポーネントライブラリとして指定するとき。
- ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。
Ui To Vue by the numbers
- 2,332 all-time installs (skills.sh)
- +221 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #351 of 2,153 Testing & QA skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ui-to-vue capabilities & compatibility
- Capabilities
- ユーザーがデザインスクリーンショットまたはデザインエクスポート画像のディレクトリを提供するとき。 · ターゲットアプリケーションがvue 3のとき。 · ユーザーがページコンポーネント、共有コンポーネント、ルーター配線の最初の変換を希望するとき。 · ユーザーがvant、element plus、またはant design vueをコンポーネント · ユーザーがスクリーンショット1枚のみで、特定のコンポーネントを希望するとき。
- Use cases
- documentation
What ui-to-vue says it does
description: UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
UIデザインのスクリーンショットをVue 3 Composition APIコンポーネントコードに一括変換します。
npx skills add https://github.com/affaan-m/everything-claude-code --skill ui-to-vueAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 2.3k |
|---|---|
| repo stars | ★ 238k |
| Security audit | 1 / 3 scanners passed |
| Last updated | August 5, 2026 |
| Repository | affaan-m/everything-claude-code ↗ |
What problem does ui-to-vue solve for developers using the documented workflows?
UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
Who is it for?
Developers working with ui-to-vue patterns described in the skill documentation.
Skip if: Skip when docs are empty or the task is outside the skill documented scope.
When should I use this skill?
Use when UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
What you get
Actionable ui-to-vue guidance grounded in SKILL.md workflows and reference files.
- Vue 3 components
- router configuration
- shared component modules
By the numbers
- Supports 3 Vue component libraries: Vant, Element Plus, and Ant Design Vue
- Outputs page components, shared components, and router wiring per batch run
Files
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
Related skills
TddFollow test-driven development with a strict red-green-refactor loop when creating reliable features or fixing bugs.544k196k
Test Driven DevelopmentEnforce writing failing tests before any production implementation code.181k264kQaRun conversational QA sessions that turn user-reported bugs into well-written, domain-aware GitHub issues without manual ticket writing.179k196kMigrate To ShoehornAutomatically update TypeScript test files that rely on unsafe `as` type assertions by replacing them with type-safe partial objects from @total-typescript/shoehorn.164k196k
Webapp TestingVerify frontend behavior, debug UI issues, capture screenshots, and inspect logs of a running local web application using Playwright.123k165k
Playwright CliRun browser automation, generate element snapshots, inspect DOM attributes, and execute Playwright tests from the terminal.102k12.3kForks & variants (1)
Ui To Vue has 1 known copy in the catalog totaling 1.4k installs. They canonicalize to this original listing.
- affaan-m - 1.4k installs
How it compares
Use ui-to-vue for batch Vue 3 screenshot conversion with major UI libraries; use frontend-design when you need aesthetic direction rather than design-to-code scaffolding.
FAQ
Who is ui-to-vue for?
Developers and software engineers working with ui-to-vue patterns described in the skill documentation.
When should I use ui-to-vue?
When UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。.
Is ui-to-vue safe to install?
Review the Security Audits panel on this page before installing in production.