Menu
Add a new API resource end-to-end: types, composables, components, and pages. Use when adding a new backend resource, endpoint, or CRUD page set to the Nuxt frontend.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Playwright MCP を使ってブラウザを起動し、実際の画面スクリーンショットを根拠にした UI/UX レビューを行う際の標準手順。UX Review・UI Review v2 エージェントが読み込む。
Issue 対応が完了し PR を作成した後に、実装精度を高めるための振り返りを行う。 実装中に踏んだ罠・判断のブレ・チェック漏れを特定し、instructions.md・SKILL.md・copilot-instructions.md への具体的な改善提案に落とし込む。「ふりかえり」「振り返り」「retro」「改善案」などのキーワードで起動する。
ランタイム動作の不具合（再生制御、状態遷移、イベントタイミングなど）を調査・修正する際の標準手順。 外部 API や非同期イベントが絡む不具合に使う。コードを読むだけで確証が出ない場面に適用する。
| name | new-api-resource |
| description | Add a new API resource end-to-end: types, composables, components, and pages. Use when adding a new backend resource, endpoint, or CRUD page set to the Nuxt frontend. |
新しい API リソースをフロントエンドに追加する際の、型定義からページまでの一連のワークフロー。
以下の順序でファイルを作成・編集する。各ステップのテンプレートは references/ を参照。
app/types/index.ts）XxxBasic — 最小限のフィールド（他リソースへの埋め込み用）Xxx or XxxList / XxxDetail — 用途に応じた拡張型（extends XxxBasic）XxxsResponse / XxxResponse — dynamic-rest 形式のラッパー（複数形キー + meta?, 単数形キー）既存の app/types/index.ts に追記する。新ファイルは作らない。
app/composables/）useXxxs.ts — ページネーション・検索対応、useApiFetch<XxxsResponse>() 使用useXxx.ts — ID を受け取り単一リソースを返すapp/components/）— 必要に応じて既存の SongCard / SongListItem / VideoCard のパターンに従う。
app/pages/）pages/xxxs/index.vue — ヘッダー + ローディング（pending）/ コンテンツ の2状態 + ページネーションpages/xxxs/[id].vue — ローディング（pending）/ コンテンツ / not found の3状態pnpm build でビルドエラーがないことを確認pnpm lint でリントエラーがないことを確認