Add create-next-shadcn command to automate Next.js app scaffolding with AIDD

ai/commands/index.md

@@ -52,6 +52,12 @@ This index provides an overview of the contents in this directory.
 
 *No description available*
 
+### 🏗️ Scaffold
+
+**File:** `scaffold.md`
+
+*No description available*
+
 ### task
 
 **File:** `task.md`

ai/commands/scaffold.md

@@ -0,0 +1,98 @@
+---
+description: Scaffold design system and shadcn components after Phase 1 automation
+globs: **/app/**,**/components/**,**/stories/**
+alwaysApply: false
+---
+
+# 🏗️ Scaffold
+
+Use this command after running `npx aidd create-next-shadcn` to complete Phase 2 of the setup: adding shadcn UI and building a baseline design system.
+
+## Prerequisites
+
+You should have already run:
+```bash
+npx aidd create-next-shadcn [project-name]
+```
+
+This command completes Phase 1 (deterministic setup) and gives you a working Next.js app with:
+- TypeScript & ESM
+- Vitest + Riteway for unit tests
+- Playwright for E2E tests
+- Storybook
+- AIDD framework installed
+
+## Phase 2: Design System with shadcn
+
+Now you'll add shadcn UI and build a baseline design system.
+
+### Step 1: Install shadcn
+
+First, search for the latest official shadcn installation instructions for Next.js App Router.
+
+Then follow the current recommended setup. Document the exact commands you run.
+
+Typically this looks like:
+```bash
+npx shadcn@latest init
+```
+
+### Step 2: Build Baseline Design System
+
+Create a simple design system story that includes:
+
+**Components to build:**
+- Standard button components (variants, sizes, disabled, loading)
+- Toggle switch
+- Input elements (text, textarea, select if applicable)
+- Semantic colors: error, warning, success, primary
+- Focus and hover states for all interactive components
+
+**Location:**
+- Place design system stories under `src/stories/design-system`
+- Use Storybook CSF format
+
+### Step 3: Responsive Primary Actions
+
+Implement primary actions in two responsive styles:
+- **Mobile**: centered circular primary action
+- **Desktop**: primary action button
+
+### Step 4: TDD Process
+
+- Use TDD for any custom components you create
+- Follow `ai/rules/tdd.mdc` carefully
+- Follow JavaScript best practices in `ai/rules/javascript`
+
+### Step 5: Style Guidance
+
+Before starting implementation, prompt the user for guidance on the visual look and feel of the application.
+
+After they respond, continue with the task epic, then present it for feedback.
+
+### Step 6: Review
+
+Use your own `/review` of your changes as the approval gate before moving to the next step in the TDD process.
+
+## Exit Criteria
+
+Before considering this complete:
+
+- [ ] Storybook shows all components and states listed above
+- [ ] Visual and interaction a11y basics: keyboard nav, visible focus, acceptable contrast
+- [ ] All tests pass (`npm test`)
+- [ ] E2E tests pass (`npm run test:e2e`)
+
+## Final Review
+
+Once all work is complete, `/review` the code:
+
+- Reduce duplication
+- Ensure the TDD process was carefully adhered to, identify and fix any gaps
+- Present findings and ask for advice before any further work
+
+## References
+
+- Phase 1 setup details: `docs/new-project-setup-nextjs-shadcn.md`
+- JavaScript style guide: `ai/rules/javascript`
+- TDD guide: `ai/rules/tdd.mdc`

bin/aidd.js

@@ -3,6 +3,7 @@
 import { Command } from "commander";
 import { executeClone } from "../lib/cli-core.js";
 import { generateAllIndexes } from "../lib/index-generator.js";
+import { executeCreateNextShadcn } from "../lib/create-next-shadcn.js";
 import { readFileSync } from "fs";
 import { fileURLToPath } from "url";
 import path from "path";
@@ -35,7 +36,7 @@ const [, handleCliErrors] = errorCauses({
 const createCli = () => {
   const program = new Command();
 
-  return program
+  program
     .name("aidd")
     .description("AI Driven Development - Install the AIDD Framework")
     .version(packageJson.version)
@@ -104,6 +105,10 @@ To install for Cursor:
 Install without Cursor integration:
 
   npx aidd my-project
+
+Scaffold a new Next.js app with tests and AIDD:
+
+  npx aidd create-next-shadcn [project-name]
 `,
     )
     .addHelpText(
@@ -205,6 +210,25 @@ https://paralleldrive.com
         process.exit(result.success ? 0 : 1);
       },
     );
+
+  // Add create-next-shadcn command
+  program
+    .command("create-next-shadcn [project-name]")
+    .description(
+      "Scaffold a new Next.js app with AIDD, tests, and baseline setup",
+    )
+    .action(async (projectName = "my-app") => {
+      const result = await executeCreateNextShadcn(projectName);
+
+      if (!result.success) {
+        console.error(chalk.red(`\n❌ ${result.error}`));
+        process.exit(1);
+      }
+
+      process.exit(0);
+    });
+
+  return program;
 };
 
 // Execute CLI

bin/create-next-shadcn-e2e.test.js

@@ -0,0 +1,51 @@
+import { assert } from "riteway/vitest";
+import { describe, test } from "vitest";
+import { exec } from "child_process";
+import { promisify } from "util";
+import { fileURLToPath } from "url";
+import path from "path";
+
+const execAsync = promisify(exec);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const cliPath = path.join(__dirname, "./aidd.js");
+
+describe("CLI create-next-shadcn command", () => {
+  test("help output includes create-next-shadcn command", async () => {
+    const { stdout } = await execAsync(`node ${cliPath} --help`);
+
+    assert({
+      given: "CLI help command is run",
+      should: "include create-next-shadcn in Quick Start section",
+      actual: stdout.includes("create-next-shadcn"),
+      expected: true,
+    });
+  });
+
+  test("create-next-shadcn command has help", async () => {
+    const { stdout } = await execAsync(
+      `node ${cliPath} create-next-shadcn --help`,
+    );
+
+    assert({
+      given: "create-next-shadcn help is requested",
+      should: "show command description",
+      actual:
+        stdout.includes("create-next-shadcn") && stdout.includes("Next.js"),
+      expected: true,
+    });
+  });
+
+  test("create-next-shadcn accepts project name argument", async () => {
+    const { stdout } = await execAsync(
+      `node ${cliPath} create-next-shadcn --help`,
+    );
+
+    assert({
+      given: "create-next-shadcn help is requested",
+      should: "show project-name argument",
+      actual: stdout.includes("[project-name]"),
+      expected: true,
+    });
+  });
+});