mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-05-19 23:33:07 +08:00
fix(ja-JP): address review feedback and add 5 missing skills
- Fix Chinese term '提炼' → '蒸留' in commands/rules-distill.md - Fix '重大な所見' (Critical→重大) in agents/opensource-sanitizer.md - Fix non-transactional persistence in swift-actor-persistence/SKILL.md: add rollback logic so cache stays consistent if disk write fails - Clarify anti-pattern wording: 'configurable file URL' → 'externally mutable after init' to remove internal inconsistency (P2) - Fix broken relative link in videodb/reference/api-reference.md: ../../../../../skills/... → ./editor.md - Add 5 previously missing SKILL.md translations: skill-scout, tinystruct-patterns, ui-to-vue, vite-patterns, windows-desktop-e2e
This commit is contained in:
86
docs/ja-JP/skills/ui-to-vue/SKILL.md
Normal file
86
docs/ja-JP/skills/ui-to-vue/SKILL.md
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
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.
|
||||
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` でコンバーターを実行します:
|
||||
|
||||
```bash
|
||||
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`
|
||||
Reference in New Issue
Block a user