メニュー
Generates a new Next.js application with Tailwind, TypeScript, and modern dependencies based on audit specifications. Use when beginning the scaffolding phase of a greenfield codebase rewrite.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | scaffolding-nextjs-foundation |
| description | Generates a new Next.js application with Tailwind, TypeScript, and modern dependencies based on audit specifications. Use when beginning the scaffolding phase of a greenfield codebase rewrite. |
Establish the baseline directory structure and dependencies for the modern rewrite of the legacy application.
Copy this checklist and track your progress:
Task Progress:
- [ ] Step 1: Initialize Next.js
- [ ] Step 2: Initialize UI
- [ ] Step 3: Install Core Dependencies
- [ ] Step 4: Clean the Scaffold
- [ ] Step 5: Verification
Execute the create-next-app command in the designated modernization directory (usually the root of the new repo).
* Command: npx -y create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
* Note: Ensure you are running this in the correct output directory (e.g., modern-app/) and not inside the legacy legacy-app/ folder.
Run npx shadcn@latest init to set up Tailwind CSS and the components directory.
Evaluate the Business_Logic_Rules.md artifact (found in docs/legacy-audit/). Based on those rules, install the necessary modern replacements explicitly using the @latest tag so the 10-year old versions are avoided.
* MongoDB & Auth Connection: If connecting to legacy MongoDB, install mongodb@latest.
* Connection Secret: Plan for the .env.local initialization.
* CRITICAL: When the modern-app runs on the host (e.g., npm run dev), it cannot resolve internal Docker hostnames like mongo. You MUST use localhost (e.g., mongodb://localhost:27017/db_name) to bridge onto the exposed container port.
* Auth Strategy Selection:
* If mongodb@7+ is used: Do NOT install @auth/mongodb-adapter (it currently has peer conflicts with v7). Instead, use a JWT strategy (next-auth@latest) and the native driver for manual account/user lookups in the authorize callback.
* If mongodb@^6 is acceptable: Install mongodb@^6 and @auth/mongodb-adapter@latest.
* Additional Packages:
* For payload validation, install zod@latest.
* For legacy Mongoose methods like password hashing, install bcrypt@latest and -D @types/bcrypt@latest.
* Command Example (MongoDB 7 / JWT): npm install next-auth@latest mongodb@latest zod@latest bcrypt@latest && npm install -D @types/bcrypt@latest
Remove default boilerplate from src/app/page.tsx and src/app/globals.css to create a blank canvas for the next subagents.
Ensure npm run build succeeds on the empty foundation.
Enforces data governance by verifying Knowledge Catalog Aspects before recommending BigQuery tables.
Ensures the game has a fun easter egg that turns the screen black and white, sepia or gameboy monotone colours. Use when creating or modifying a game.
Ensures platformer games have polished movement, responsive controls, and balanced jump mechanics. Use ONLY when the game type is "platformer".
Guides the creation of a new game and is the high-level orchestrator skill that MUST be invoked first. Use when tasked with creating a new game.
Arcade game must have a retro asthetic. Use when creating or modifying a game to ensure that the game looks retro and maintains a consistent look and feel with all games.
Game will always use the same control scheme/buttons and mapping of the gamepad and keyboard. Use when creating or modifying a game.