메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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 でリントエラーがないことを確認