메뉴
このテンプレートから新規プロジェクトを始める際に、技術スタックの変更点（フレームワーク・スタイリング・UI ライブラリ・デプロイ先・認証・DB・テスト等）を対話しながら決定し、不要なコードや依存関係を削除・置換するスキル。「テンプレートをカスタマイズしたい」「このテンプレートで新しいプロジェクトを始めたい」「不要な機能を削除したい」といった依頼で使用する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | customize-template |
| description | このテンプレートから新規プロジェクトを始める際に、技術スタックの変更点（フレームワーク・スタイリング・UI ライブラリ・デプロイ先・認証・DB・テスト等）を対話しながら決定し、不要なコードや依存関係を削除・置換するスキル。「テンプレートをカスタマイズしたい」「このテンプレートで新しいプロジェクトを始めたい」「不要な機能を削除したい」といった依頼で使用する。 |
このリポジトリは Next.js テンプレートであり、動作確認用のサンプルとしてタスク管理アプリが実装されています。このスキルは、新規プロジェクトの要件をユーザーと対話しながら確認し、テンプレートを要件に合わせて改変します。
| 項目 | 現在の実装 |
|---|---|
| フレームワーク | Next.js (App Router, Turbopack) |
| スタイリング | Tailwind CSS v4 |
| UI ライブラリ | Intent UI (react-aria-components ベース、src/components/ui/ に配置) |
| デプロイ先 | Vercel |
| 認証 | better-auth (src/lib/better-auth/) |
| DB / ORM | Turso DB (libsql) + Drizzle (src/lib/drizzle/, drizzle/, drizzle.config.ts) |
| 環境変数 | t3-env (src/lib/env.ts) |
| ユニットテスト | Vitest + Testing Library (tests/unit/, src/**/*.spec.{ts,tsx}) |
| E2E テスト | Playwright (tests/e2e/, playwright.config.ts) |
| サンプルアプリ | タスク管理 (src/features/task/, src/app/(protected)/) |
作業前に package.json と src/ 以下の構成を確認し、上記の表と実際の状態に差分がないかを確かめる。テンプレートは更新されるため、このスキルの記述より実際のコードを優先する。
AskUserQuestion ツールを使って以下を質問する。1 回の呼び出しで最大 4 問までのため、複数回に分けて質問する。推測で決めてはならず、必ずユーザーの回答を得ること。
1 回目: 基盤
2 回目: バックエンド・品質
3 回目: 自由記述
回答をもとに「削除するファイル一覧」「変更・置換する内容」「影響範囲」をまとめて提示し、明示的な承認を得てから実行する。ファイル削除はプロジェクトのガイドライン上、必ず事前承認が必要である。
各項目の対象は以下のとおり。削除する場合は依存関係・スクリプト・設定・参照元をすべて揃えて消すこと。
src/features/task/ 全体src/app/(protected)/ 以下のタスク関連ページsrc/app/page.tsx からタスク関連の参照を除去し、最小限のトップページに置き換えるsrc/lib/drizzle/schema/ のタスク用テーブル定義と drizzle/ の生成済みマイグレーションtests/e2e/ のタスク関連テストsrc/lib/better-auth/ と package.json の better-authsrc/lib/{方式名}/ に配置し、src/app/(public)/・(protected)/ のルートグループ構成は維持するsrc/lib/drizzle/, drizzle/, drizzle.config.tspackage.json の @libsql/client, drizzle-orm, drizzle-kit と db:* スクリプトsrc/lib/env.ts の TURSO_CONNECTION_URL, TURSO_AUTH_TOKEN と .env.example の同項目vitest.config.ts, tests/unit/, src/**/*.spec.{ts,tsx}, package.json の vitest・@testing-library/*・jsdom・@vitejs/plugin-react・vite・vite-tsconfig-paths と test・test:watch スクリプト、knip.json の関連 entryplaywright.config.ts, tests/e2e/, @playwright/test, test:e2e* スクリプト, .github/workflows/playwright.ymlsrc/components/ui/ の各コンポーネントpackage.json の react-aria-components, @react-aria/i18n, @internationalized/date, tailwindcss-react-aria-components, tailwind-variants, tailwind-merge（新スタックで使うものは残す）src/lib/primitive.ts と components.jsonsrc/components/ui/ の構成ルール（1 コンポーネント 1 ディレクトリ + index.ts）を維持する@tailwindcss/postcss, tailwindcss, postcss.config.mjs, src/app/globals.css の Tailwind ディレクティブ。Tailwind 依存の UI コンポーネントが残っていないか先に確認する{component-name}.module.css を各コンポーネントディレクトリに配置するsrc/lib/env.ts の NEXT_PUBLIC_VERCEL_BRANCH_URL などプラットフォーム固有の環境変数@opennextjs/cloudflare) の導入と wrangler.jsonc の追加を検討するNext.js から React Router / TanStack Start への移行は影響が全ファイルに及ぶため、このスキル内で完結させようとせず、以下を行う。
src/features/ の構成・コーディング規約など維持すべき資産を整理するREADME.md: 技術スタック一覧・セットアップ手順・環境変数の説明を新構成に合わせて書き換えるAGENTS.md: 技術スタック・プロジェクト構造・ガイドラインのうち、削除・変更した項目に関する記述を更新する.env.example: 不要な変数を削除し、新たに必要な変数を追加するpnpm install で lockfile を更新するpnpm run codecheck を実行し、エラーがあればすべて修正する（oxlintrc.json や tsconfig.json の変更による回避は禁止）pnpm run test を実行するpnpm run dev で起動し、トップページが表示されることを確認する変更内容のサマリー（削除した機能・変更した依存関係・更新したドキュメント）を提示し、残作業（外部サービスのセットアップ、環境変数の設定など）があれば案内する。