메뉴
ドキュメント内のNuxt UI v3記法を検出し、v4記法への修正を支援します。「ドキュメントをチェックして」「Nuxt UI v4の記法を確認」などで呼び出されます。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | check-nuxt-ui-v4 |
| description | ドキュメント内のNuxt UI v3記法を検出し、v4記法への修正を支援します。「ドキュメントをチェックして」「Nuxt UI v4の記法を確認」などで呼び出されます。 |
このスキルは、プロジェクト内のMarkdownドキュメント（特に docs/working/ 配下）をスキャンし、Nuxt UI v3 の古い記法を検出して、v4 記法への修正を支援します。
| パターン | 問題 | 修正方法 |
|---|---|---|
UFormGroup | v3 のコンポーネント名 | UFormField に置換 |
:options= または options= | v3 の属性名 | :items= に置換 |
v-bind:options= | v3 の属性名 | :items= に置換 |
UButtonGroup | v4 では非推奨 | UFieldGroup に置換 |
docs/working/**/*.md - 開発作業ドキュメントdocs/**/*.md - 永続化ドキュメント（オプション）.claude/skills/**/SKILL.md - スキルドキュメント（オプション）このスキルが呼び出されたら、以下の手順で実行してください：
ユーザーに確認します：
指定がない場合は docs/working/ をデフォルトとします。
対象ディレクトリ内の .md ファイルを検索します：
find docs/working -name "*.md" -type f
各ファイルに対して、以下のパターンを検索します：
UFormGroup の使用箇所options= または :options= の使用箇所v-bind:options= の使用箇所UButtonGroup の使用箇所検出には grep コマンドまたは Grep ツールを使用します。
検出結果を以下の形式でユーザーに報告します：
## チェック結果
### 検出された問題
#### ファイル: docs/working/20251230_example/design.md
**問題1: UFormGroup の使用（行123）**
```vue
<!-- 現在 -->
<UFormGroup label="データベース">
<USelect v-model="selected" :options="databases" />
</UFormGroup>
<!-- 修正案 -->
<UFormField label="データベース" name="database">
<USelect v-model="selected" :items="databases" />
</UFormField>
問題2: options 属性の使用（行156）
<!-- 現在 -->
<USelectMenu v-model="selected" :options="items" />
<!-- 修正案 -->
<USelectMenu v-model="selected" :items="items" />
### 5. 修正オプションの提示
ユーザーに以下のオプションを提示します：
1. **自動修正** - 検出された問題を自動で修正する
2. **手動修正** - ファイルパスと行番号を提示し、ユーザーが手動で修正
3. **スキップ** - チェックのみ実行し、修正は行わない
### 6. 自動修正（選択された場合）
ユーザーが自動修正を選択した場合：
1. 各ファイルに対して Edit ツールを使用
2. `UFormGroup` → `UFormField` に置換
3. `:options=` → `:items=` に置換
4. `options=` → `items=` に置換
5. `UButtonGroup` → `UFieldGroup` に置換
6. 修正完了をユーザーに報告
**注意**:
- コードブロック内のみを対象とし、説明文は変更しない
- 文脈を確認し、誤検出を避ける
- バックアップを推奨する
## チェックロジック
### 検出時の考慮事項
1. **コードブロック内のみ対象**
- ` ```vue ` ブロック内のコードを優先的にチェック
- Markdown のコードブロック外の説明文は慎重に扱う
2. **誤検出の回避**
- `UFormGroup` が「v3の例」として意図的に記載されている場合は除外
- コメントで `<!-- v3 の例 -->` などと明記されている場合は除外
3. **文脈の確認**
- `options` が Nuxt UI コンポーネントの属性として使用されているか確認
- 他の用途（変数名、プロパティ名など）との区別
## 使用例
詳細は [examples.md](examples.md) を参照してください。
## 関連ドキュメント
- `.claude/skills/generate-working-docs/SKILL.md` - ドキュメント生成スキル
- `CLAUDE.md` - プロジェクトガイドライン
## Nuxt UI v4 記法リファレンス
### v3 → v4 移行対応表
| v3（検出対象） | v4（修正後） | 説明 |
|---------------|-------------|------|
| `UFormGroup` | `UFormField` | フォームフィールドラッパー |
| `options` 属性 | `items` 属性 | USelect, USelectMenu等の選択肢 |
| `UButtonGroup` | `UFieldGroup` | ボタングループラッパー（v4では非推奨） |
### 正しい記法（v4）
```vue
<template>
<!-- ✅ 正しい: UFormField を使用 -->
<UFormField label="データベース" name="database">
<USelect v-model="selected" :items="databases" />
</UFormField>
<!-- ✅ 正しい: items 属性を使用 -->
<USelectMenu v-model="selected" :items="options" />
<!-- ✅ 正しい: UFieldGroup を使用してボタンをグループ化 -->
<UFieldGroup>
<UButton color="primary">INSERT</UButton>
<UButton color="gray">UPDATE</UButton>
<UButton color="gray">DELETE</UButton>
</UFieldGroup>
</template>
<template>
<!-- ❌ 検出される: UFormGroup（v3） -->
<UFormGroup label="データベース">
<USelect v-model="selected" :options="databases" />
</UFormGroup>
<!-- ❌ 検出される: options 属性（v3） -->
<USelectMenu v-model="selected" :options="options" />
<!-- ❌ 検出される: UButtonGroup（v4では非推奨） -->
<UButtonGroup>
<UButton color="primary">INSERT</UButton>
<UButton color="gray">UPDATE</UButton>
<UButton color="gray">DELETE</UButton>
</UButtonGroup>
</template>
開発作業の設計書（design.md）を単体で生成・再生成します。全ドキュメントの一括生成には generate-working-docs（新規機能開発）または generate-performance-docs（パフォーマンス改善）を使用してください。
パフォーマンス改善作業の開発ドキュメントを自動生成します。YYYYMMDD_要件名の形式でディレクトリを作成し、requirements.md、design.md、tasklist.md、testing.mdを生成します。「パフォーマンス改善のドキュメント作って」「最適化作業のドキュメント」「高速化のドキュメント生成」などで呼び出されます。
開発作業の要件定義書（requirements.md）を単体で生成・再生成します。全ドキュメントの一括生成には generate-working-docs（新規機能開発）または generate-performance-docs（パフォーマンス改善）を使用してください。
開発作業のタスクリスト（tasklist.md）を単体で生成・再生成します。全ドキュメントの一括生成には generate-working-docs（新規機能開発）または generate-performance-docs（パフォーマンス改善）を使用してください。
開発作業のテスト手順書（testing.md）を単体で生成・再生成します。全ドキュメントの一括生成には generate-working-docs（新規機能開発）または generate-performance-docs（パフォーマンス改善）を使用してください。
新規機能開発の作業ドキュメントを自動生成します。YYYYMMDD_要件名の形式でディレクトリを作成し、requirements.md、design.md、tasklist.md、testing.mdを生成します。「開発作業ドキュメント作成」「新規開発のドキュメント作って」「ドキュメント生成」などで呼び出されます。パフォーマンス改善作業には generate-performance-docs を使用してください。