From a0da46b8891bc774c16bde7b77d3b648a4e3c88f Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 14:56:32 +0900
Subject: [PATCH 01/15] feat: implement website wizard shell with navigation
 and state management

---
 .agents/prompts/phase-06/step-1.md            | 329 ++++++++++++++++++
 apps/web/app/layout.tsx                       |   4 +-
 apps/web/app/page.tsx                         |   8 +-
 apps/web/components/builder/builder-shell.tsx | 107 ++++++
 .../components/builder/wizard-navigation.tsx  |  34 ++
 .../components/builder/wizard-progress.tsx    |  45 +++
 .../components/builder/wizard-step-panel.tsx  |  40 +++
 apps/web/lib/builder/builder-state.ts         |  14 +
 apps/web/lib/builder/steps.ts                 |  74 ++++
 apps/web/package.json                         |   1 +
 context/progress-tracker.md                   | 121 ++++++-
 package-lock.json                             |   1 +
 12 files changed, 768 insertions(+), 10 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-1.md
 create mode 100644 apps/web/components/builder/builder-shell.tsx
 create mode 100644 apps/web/components/builder/wizard-navigation.tsx
 create mode 100644 apps/web/components/builder/wizard-progress.tsx
 create mode 100644 apps/web/components/builder/wizard-step-panel.tsx
 create mode 100644 apps/web/lib/builder/builder-state.ts
 create mode 100644 apps/web/lib/builder/steps.ts

diff --git a/.agents/prompts/phase-06/step-1.md b/.agents/prompts/phase-06/step-1.md
new file mode 100644
index 0000000..7d7ad0b
--- /dev/null
+++ b/.agents/prompts/phase-06/step-1.md
@@ -0,0 +1,329 @@
+# Phase 6 Step 1: Create Website Wizard Shell
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 5 is complete and Phase 6 is ready.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 2.
+Do not implement the individual wizard step forms yet.
+Do not implement the preview step yet.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Create the website wizard shell for the LaunchKit MVP.
+
+This step should establish the main builder interface, wizard navigation, shared page layout, and client-side selection state shape. The individual step contents will be implemented in later Phase 6 steps.
+
+The first screen should be the product builder experience, not a marketing-only landing page.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Create or update the app home page and supporting components for the wizard shell.
+
+Recommended structure:
+
+```txt
+apps/web/
+  app/
+    page.tsx
+  components/
+    builder/
+      builder-shell.tsx
+      wizard-progress.tsx
+      wizard-navigation.tsx
+      wizard-step-panel.tsx
+  lib/
+    builder/
+      steps.ts
+      builder-state.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Wizard Flow
+
+The wizard should define these steps:
+
+```txt
+1. Project
+2. Framework
+3. Styling and UI
+4. Database
+5. ORM
+6. Auth
+7. Extras
+8. Preview
+9. Download
+```
+
+For this step, each step can render placeholder content only.
+
+Do not implement real option controls yet.
+
+## Requirements
+
+### 1. Builder Shell
+
+Create a main builder shell that includes:
+
+- LaunchKit title or compact product identity.
+- Step progress indicator.
+- Current step panel.
+- Back and Next navigation.
+- Disabled Back button on the first step.
+- Disabled Next button on the last step.
+- Responsive layout for desktop and mobile.
+
+Keep the UI practical and developer-tool focused.
+
+Avoid a marketing hero.
+Avoid oversized decorative sections.
+Avoid decorative gradient blobs/orbs.
+
+### 2. Step State
+
+Create a client-side state shape for the selected LaunchKit config.
+
+Use the schema/default config from:
+
+```txt
+@launchkit/schema
+```
+
+If the web app cannot yet import the package due to workspace config issues, fix the workspace/package wiring narrowly.
+
+Do not duplicate the schema manually inside `apps/web`.
+
+Recommended state:
+
+```ts
+LaunchKitConfig;
+```
+
+Initialize from:
+
+```ts
+defaultLaunchKitConfig;
+```
+
+### 3. Step Definitions
+
+Create a shared step definition list.
+
+Example:
+
+```ts
+export type BuilderStepId =
+  | "project"
+  | "framework"
+  | "styling-ui"
+  | "database"
+  | "orm"
+  | "auth"
+  | "extras"
+  | "preview"
+  | "download";
+```
+
+Each step should have:
+
+```txt
+id
+label
+short label if useful
+```
+
+### 4. Placeholder Step Panels
+
+For now, render clear placeholder panels for each step.
+
+Examples:
+
+```txt
+Project step coming next.
+Framework step coming next.
+Preview step coming later.
+```
+
+Do not add visible instructional text about keyboard shortcuts or internal implementation details.
+
+### 5. Visual Direction
+
+Use the established LaunchKit UI direction:
+
+- Minimal
+- Fast to scan
+- Practical
+- Trustworthy
+- Technical without clutter
+- Green accent theme inspired by Supabase and Neon
+- Token-based styling
+
+Prefer token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated one-off hardcoded color classes:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+### 6. shadcn/ui
+
+Use existing shadcn/ui components if they already exist in `apps/web`.
+
+Good candidates:
+
+```txt
+Button
+Card only for actual framed tool panels if already used
+Separator
+Badge
+Progress
+```
+
+Do not add new shadcn components unless needed and consistent with the existing app setup.
+
+Do not nest cards inside cards.
+
+### 7. Generator Boundary
+
+Do not import generator logic into UI components yet unless the current architecture already requires it for type-only preview data.
+
+This step should not call:
+
+```txt
+@launchkit/generator
+```
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Wizard renders all step labels.
+- Back button is disabled on the first step.
+- Next button moves to the next step.
+- Back button returns to the previous step.
+- Last step disables Next.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 1 completed: Create website wizard shell
+
+Changes made:
+- Created or updated the LaunchKit builder home page.
+- Added wizard shell layout.
+- Added wizard step definitions.
+- Added current-step navigation state.
+- Initialized builder config from @launchkit/schema default config.
+- Added placeholder panels for all wizard steps.
+
+Files changed:
+- apps/web/app/page.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/components/builder/wizard-progress.tsx
+- apps/web/components/builder/wizard-navigation.tsx
+- apps/web/components/builder/wizard-step-panel.tsx
+- apps/web/lib/builder/steps.ts
+- apps/web/lib/builder/builder-state.ts
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 2: Create project step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- The website home page shows the LaunchKit builder shell.
+- The wizard has all 9 planned steps.
+- Step progress is visible.
+- Back/Next navigation works.
+- Placeholder content renders for each step.
+- Builder config state is initialized from `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 32700d5..7a71755 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "LaunchKit",
+  description: "Build and download TypeScript project starters.",
 };
 
 export default function RootLayout({
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 2abb688..451692d 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,7 +1,5 @@
+import { BuilderShell } from "@/components/builder/builder-shell";
+
 export default function Home() {
-  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <button className="text-primary">Hello</button>
-    </div>
-  );
+  return <BuilderShell />;
 }
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
new file mode 100644
index 0000000..240b753
--- /dev/null
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { createInitialBuilderState } from "@/lib/builder/builder-state";
+import { builderSteps } from "@/lib/builder/steps";
+import { WizardNavigation } from "./wizard-navigation";
+import { WizardProgress } from "./wizard-progress";
+import { WizardStepPanel } from "./wizard-step-panel";
+
+export function BuilderShell() {
+  const [builderState] = useState(createInitialBuilderState);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+
+  const currentStep = builderSteps[currentStepIndex];
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === builderSteps.length - 1;
+
+  const selectedStack = useMemo(
+    () => [
+      ["Framework", builderState.config.framework],
+      ["Language", builderState.config.language],
+      ["Styling", builderState.config.styling],
+      ["UI", builderState.config.ui],
+      ["Database", builderState.config.database],
+      ["ORM", builderState.config.orm],
+      ["Auth", builderState.config.auth],
+      ["Docker", builderState.config.docker],
+      ["Package manager", builderState.config.packageManager],
+    ],
+    [builderState.config],
+  );
+
+  function goBack() {
+    setCurrentStepIndex((stepIndex) => Math.max(stepIndex - 1, 0));
+  }
+
+  function goNext() {
+    setCurrentStepIndex((stepIndex) =>
+      Math.min(stepIndex + 1, builderSteps.length - 1),
+    );
+  }
+
+  return (
+    <main className="flex-1 bg-background">
+      <div className="mx-auto flex min-h-dvh w-full max-w-7xl flex-col px-4 py-5 sm:px-6 lg:px-8">
+        <header className="mb-5 flex flex-col gap-4 border-b border-border pb-5 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="text-sm font-medium text-muted-foreground">
+              LaunchKit
+            </p>
+            <h1 className="mt-1 text-2xl font-semibold text-foreground">
+              Project builder
+            </h1>
+          </div>
+          <div className="rounded-md border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
+            {builderState.config.name}
+          </div>
+        </header>
+
+        <div className="space-y-5">
+          <WizardProgress currentStepId={currentStep.id} />
+
+          <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
+            <div className="space-y-5">
+              <WizardStepPanel
+                step={currentStep}
+                stepNumber={currentStepIndex + 1}
+                totalSteps={builderSteps.length}
+              />
+              <WizardNavigation
+                isFirstStep={isFirstStep}
+                isLastStep={isLastStep}
+                onBack={goBack}
+                onNext={goNext}
+              />
+            </div>
+
+            <aside className="rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm">
+              <div className="mb-4">
+                <h2 className="text-base font-semibold text-foreground">
+                  Current selection
+                </h2>
+                <p className="mt-1 text-sm text-muted-foreground">
+                  Starting configuration for this project.
+                </p>
+              </div>
+              <dl className="space-y-3">
+                {selectedStack.map(([label, value]) => (
+                  <div
+                    key={label}
+                    className="flex items-center justify-between gap-4 border-b border-border pb-3 last:border-b-0 last:pb-0"
+                  >
+                    <dt className="text-sm text-muted-foreground">{label}</dt>
+                    <dd className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-foreground">
+                      {value}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/components/builder/wizard-navigation.tsx b/apps/web/components/builder/wizard-navigation.tsx
new file mode 100644
index 0000000..70479e9
--- /dev/null
+++ b/apps/web/components/builder/wizard-navigation.tsx
@@ -0,0 +1,34 @@
+type WizardNavigationProps = {
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  onBack: () => void;
+  onNext: () => void;
+};
+
+export function WizardNavigation({
+  isFirstStep,
+  isLastStep,
+  onBack,
+  onNext,
+}: WizardNavigationProps) {
+  return (
+    <div className="flex flex-col-reverse gap-3 border-t border-border pt-5 sm:flex-row sm:items-center sm:justify-between">
+      <button
+        type="button"
+        onClick={onBack}
+        disabled={isFirstStep}
+        className="inline-flex h-10 items-center justify-center rounded-md border border-border bg-background px-4 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45"
+      >
+        Back
+      </button>
+      <button
+        type="button"
+        onClick={onNext}
+        disabled={isLastStep}
+        className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45"
+      >
+        Next
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/components/builder/wizard-progress.tsx b/apps/web/components/builder/wizard-progress.tsx
new file mode 100644
index 0000000..268c035
--- /dev/null
+++ b/apps/web/components/builder/wizard-progress.tsx
@@ -0,0 +1,45 @@
+import { builderSteps, type BuilderStepId } from "@/lib/builder/steps";
+
+type WizardProgressProps = {
+  currentStepId: BuilderStepId;
+};
+
+export function WizardProgress({ currentStepId }: WizardProgressProps) {
+  const currentIndex = builderSteps.findIndex((step) => step.id === currentStepId);
+
+  return (
+    <nav aria-label="Builder progress" className="min-w-0">
+      <ol className="grid grid-cols-3 gap-2 sm:grid-cols-5 lg:grid-cols-9">
+        {builderSteps.map((step, index) => {
+          const isCurrent = step.id === currentStepId;
+          const isComplete = index < currentIndex;
+
+          return (
+            <li key={step.id} className="min-w-0">
+              <div
+                aria-current={isCurrent ? "step" : undefined}
+                className={[
+                  "flex min-h-14 flex-col justify-center rounded-md border px-3 py-2 text-left transition-colors",
+                  isCurrent
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-card text-foreground",
+                  isComplete ? "text-muted-foreground" : "",
+                ].join(" ")}
+              >
+                <span className="text-xs font-medium text-muted-foreground">
+                  {String(index + 1).padStart(2, "0")}
+                </span>
+                <span className="truncate text-sm font-semibold">
+                  <span className="hidden sm:inline lg:hidden">
+                    {step.shortLabel}
+                  </span>
+                  <span className="sm:hidden lg:inline">{step.label}</span>
+                </span>
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
diff --git a/apps/web/components/builder/wizard-step-panel.tsx b/apps/web/components/builder/wizard-step-panel.tsx
new file mode 100644
index 0000000..f214d46
--- /dev/null
+++ b/apps/web/components/builder/wizard-step-panel.tsx
@@ -0,0 +1,40 @@
+import type { BuilderStep } from "@/lib/builder/steps";
+
+type WizardStepPanelProps = {
+  step: BuilderStep;
+  stepNumber: number;
+  totalSteps: number;
+};
+
+export function WizardStepPanel({
+  step,
+  stepNumber,
+  totalSteps,
+}: WizardStepPanelProps) {
+  return (
+    <section
+      aria-labelledby="builder-step-title"
+      className="rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm sm:p-6"
+    >
+      <div className="mb-10 flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-muted-foreground">
+            Step {stepNumber} of {totalSteps}
+          </p>
+          <h1
+            id="builder-step-title"
+            className="mt-2 text-2xl font-semibold text-foreground"
+          >
+            {step.label}
+          </h1>
+        </div>
+        <span className="rounded-md border border-border bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+          {step.shortLabel}
+        </span>
+      </div>
+      <div className="rounded-md border border-dashed border-border bg-background p-5">
+        <p className="text-sm text-muted-foreground">{step.placeholder}</p>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/lib/builder/builder-state.ts b/apps/web/lib/builder/builder-state.ts
new file mode 100644
index 0000000..145f2b3
--- /dev/null
+++ b/apps/web/lib/builder/builder-state.ts
@@ -0,0 +1,14 @@
+import {
+  defaultLaunchKitConfig,
+  type LaunchKitConfig,
+} from "@launchkit/schema";
+
+export type BuilderState = {
+  config: LaunchKitConfig;
+};
+
+export function createInitialBuilderState(): BuilderState {
+  return {
+    config: { ...defaultLaunchKitConfig },
+  };
+}
diff --git a/apps/web/lib/builder/steps.ts b/apps/web/lib/builder/steps.ts
new file mode 100644
index 0000000..f921cbc
--- /dev/null
+++ b/apps/web/lib/builder/steps.ts
@@ -0,0 +1,74 @@
+export type BuilderStepId =
+  | "project"
+  | "framework"
+  | "styling-ui"
+  | "database"
+  | "orm"
+  | "auth"
+  | "extras"
+  | "preview"
+  | "download";
+
+export type BuilderStep = {
+  id: BuilderStepId;
+  label: string;
+  shortLabel: string;
+  placeholder: string;
+};
+
+export const builderSteps = [
+  {
+    id: "project",
+    label: "Project",
+    shortLabel: "Project",
+    placeholder: "Project step coming next.",
+  },
+  {
+    id: "framework",
+    label: "Framework",
+    shortLabel: "Stack",
+    placeholder: "Framework step coming next.",
+  },
+  {
+    id: "styling-ui",
+    label: "Styling and UI",
+    shortLabel: "UI",
+    placeholder: "Styling and UI step coming next.",
+  },
+  {
+    id: "database",
+    label: "Database",
+    shortLabel: "Data",
+    placeholder: "Database step coming next.",
+  },
+  {
+    id: "orm",
+    label: "ORM",
+    shortLabel: "ORM",
+    placeholder: "ORM step coming next.",
+  },
+  {
+    id: "auth",
+    label: "Auth",
+    shortLabel: "Auth",
+    placeholder: "Auth step coming next.",
+  },
+  {
+    id: "extras",
+    label: "Extras",
+    shortLabel: "Extras",
+    placeholder: "Extras step coming next.",
+  },
+  {
+    id: "preview",
+    label: "Preview",
+    shortLabel: "Preview",
+    placeholder: "Preview step coming later.",
+  },
+  {
+    id: "download",
+    label: "Download",
+    shortLabel: "ZIP",
+    placeholder: "Download step coming later.",
+  },
+] as const satisfies readonly BuilderStep[];
diff --git a/apps/web/package.json b/apps/web/package.json
index f3d7146..0542e60 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,6 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@launchkit/schema": "0.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 378d6e4..ebe3ec4 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -7,8 +7,8 @@ Use this file to track development progress, changes made, decisions, notes, blo
 ```txt
 Project: LaunchKit
 Stage: Foundation setup
-Current phase: Phase 5 complete
-Primary focus: Phase 6 website wizard shell is ready to begin
+Current phase: Phase 6 in progress
+Primary focus: Phase 6 project step is ready to begin
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 website wizard shell is ready to begin
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | Ready       | Ready to create the website wizard shell, preview, and download flow without duplicating generator logic. |
+| Phase 6 | Website MVP                           | In Progress | Step 1 created the website wizard shell; ready to add the project step without duplicating generator logic. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,121 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 1 completed: Create website wizard shell
+
+Changes made:
+
+- Created the LaunchKit builder home page in `apps/web/app/page.tsx`.
+- Added a client-side builder shell with current-step navigation state.
+- Added wizard progress, navigation, and placeholder step panel components.
+- Added shared wizard step definitions for all 9 MVP steps.
+- Added builder state initialization from `@launchkit/schema` `defaultLaunchKitConfig`.
+- Added a compact current-selection panel using the initialized builder config.
+- Updated app metadata from the default Create Next App copy to LaunchKit.
+- Added `@launchkit/schema` as an explicit `apps/web` workspace dependency and updated `package-lock.json`.
+- Confirmed no `@launchkit/generator` import, API route, zip download flow, CLI work, or individual wizard step forms were added.
+
+Files changed:
+
+- `apps/web/app/page.tsx`
+- `apps/web/app/layout.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/components/builder/wizard-progress.tsx`
+- `apps/web/components/builder/wizard-navigation.tsx`
+- `apps/web/components/builder/wizard-step-panel.tsx`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/lib/builder/builder-state.ts`
+- `apps/web/package.json`
+- `package-lock.json`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,220p' context/progress-tracker.md
+sed -n '1,360p' .agents/prompts/phase-06/step-1.md
+rg --files apps/web
+cat apps/web/package.json
+cat package.json
+sed -n '1,260p' context/project-overview.md
+sed -n '1,260p' context/architecture.md
+sed -n '1,260p' context/build-plan.md
+sed -n '1,260p' context/ui-rules.md
+sed -n '1,220p' apps/web/app/page.tsx
+sed -n '1,260p' apps/web/app/globals.css
+sed -n '1,220p' packages/schema/src/index.ts
+cat packages/schema/package.json
+sed -n '1,220p' packages/schema/src/defaults.ts
+sed -n '1,260p' packages/schema/src/config.ts
+cat apps/web/tsconfig.json
+sed -n '1,220p' apps/web/app/layout.tsx
+sed -n '1,160p' apps/web/lib/utils.ts
+rg '"@launchkit/schema"|workspace:' package-lock.json package.json apps packages
+sed -n '261,620p' context/project-overview.md
+sed -n '261,620p' context/architecture.md
+sed -n '261,620p' context/build-plan.md
+sed -n '261,620p' context/ui-rules.md
+mkdir -p apps/web/components/builder apps/web/lib/builder
+npm install --package-lock-only
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+git status --short
+git diff --stat
+git diff -- apps/web/app/page.tsx apps/web/app/layout.tsx apps/web/components/builder/builder-shell.tsx apps/web/components/builder/wizard-progress.tsx apps/web/components/builder/wizard-navigation.tsx apps/web/components/builder/wizard-step-panel.tsx apps/web/lib/builder/steps.ts apps/web/lib/builder/builder-state.ts apps/web/package.json package-lock.json
+npm run dev -- --hostname 127.0.0.1 --port 3000
+npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3000
+```
+
+Verification:
+
+- [x] Website home page renders the LaunchKit builder shell.
+- [x] Wizard defines all 9 planned steps: Project, Framework, Styling and UI, Database, ORM, Auth, Extras, Preview, Download.
+- [x] Step progress is visible.
+- [x] Back and Next navigation state is implemented.
+- [x] Back is disabled on the first step.
+- [x] Next is disabled on the last step.
+- [x] Placeholder content renders for each step.
+- [x] Builder config state initializes from `@launchkit/schema`.
+- [x] No generator logic was added to `apps/web`.
+- [x] No API route or download flow was implemented.
+- [x] No CLI functionality was added.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not left running because sandboxed localhost binding failed and the elevated dev-server rerun was not approved.
+
+Next suggested step:
+
+- Phase 6 Step 2: Create project step.
+
 Phase 5 Step 9 completed: Verify Phase 5 completion
 
 Changes made:
diff --git a/package-lock.json b/package-lock.json
index 4350c9a..12869f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
     "apps/web": {
       "version": "0.1.0",
       "dependencies": {
+        "@launchkit/schema": "0.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^1.21.0",

From fe894935239a30f674c795215618255eafc85154 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 15:06:52 +0900
Subject: [PATCH 02/15] feat: implement Project step in website wizard with
 validation and state management

---
 .agents/prompts/phase-06/step-2.md            | 319 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  32 +-
 .../components/builder/steps/project-step.tsx | 111 ++++++
 .../components/builder/wizard-navigation.tsx  |   4 +-
 .../components/builder/wizard-step-panel.tsx  |   7 +-
 apps/web/lib/builder/builder-state.ts         |  15 +
 apps/web/lib/builder/validation.ts            |  55 +++
 context/progress-tracker.md                   | 113 ++++++-
 8 files changed, 649 insertions(+), 7 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-2.md
 create mode 100644 apps/web/components/builder/steps/project-step.tsx
 create mode 100644 apps/web/lib/builder/validation.ts

diff --git a/.agents/prompts/phase-06/step-2.md b/.agents/prompts/phase-06/step-2.md
new file mode 100644
index 0000000..d2fa120
--- /dev/null
+++ b/.agents/prompts/phase-06/step-2.md
@@ -0,0 +1,319 @@
+# Phase 6 Step 2: Create Project Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 1 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 3.
+Do not implement framework, styling/UI, database, ORM, auth, extras, preview, or download steps yet.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Project step in the LaunchKit website wizard.
+
+This step should let users configure the generated project identity and package manager:
+
+```txt
+name
+packageManager
+```
+
+Use the shared schema package for validation and metadata.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/project-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Project Name Input
+
+Add a project name input for:
+
+```ts
+config.name;
+```
+
+Project name rules must match `@launchkit/schema`:
+
+Allowed:
+
+```txt
+lowercase letters
+numbers
+hyphens
+```
+
+Examples:
+
+```txt
+my-app
+launchkit-demo
+app123
+```
+
+Disallowed:
+
+```txt
+empty string
+spaces
+uppercase letters
+path separators
+special characters
+```
+
+Do not duplicate validation rules manually if the schema exports a parser or validator.
+
+Use:
+
+```txt
+LaunchKitConfigSchema
+```
+
+or another exported schema helper from:
+
+```txt
+@launchkit/schema
+```
+
+### 2. Validation UX
+
+Show validation feedback near the input.
+
+Requirements:
+
+- Invalid project names should show a concise error.
+- Valid project names should not show an error.
+- The user should not be able to advance from the Project step with an invalid project name.
+- Do not use blocking browser alerts.
+- Do not show noisy validation before the field has been edited unless the initial default is invalid.
+
+### 3. Package Manager Control
+
+Add a package manager selector for:
+
+```ts
+config.packageManager;
+```
+
+Supported values:
+
+```txt
+npm
+pnpm
+```
+
+Use metadata from `@launchkit/schema` if available.
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Two-option toggle
+
+Do not use a plain text input.
+
+Remember:
+
+- The LaunchKit repo itself uses npm.
+- Generated projects may support npm and pnpm instructions.
+
+### 4. State Updates
+
+Update the shared builder config state created in Phase 6 Step 1.
+
+When the user edits the project name or package manager:
+
+- Update the current `LaunchKitConfig`.
+- Preserve all other selected config values.
+- Keep state local to the builder for now.
+
+Do not write to local storage unless the existing UX plan already requires it.
+
+### 5. Navigation Behavior
+
+The Project step should gate the Next button.
+
+If the Project step has validation errors:
+
+- Disable Next, or
+- Keep Next enabled but prevent navigation and show the error.
+
+Prefer disabling Next when invalid.
+
+Do not add validation gates for future steps yet.
+
+### 6. Visual Direction
+
+Keep the UI practical and compact.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+Input
+Label
+Button
+RadioGroup
+Alert or small inline message
+```
+
+Do not nest cards inside cards.
+
+### 7. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only updates website state and validation.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Project step renders the default project name.
+- Editing the project name updates state.
+- Invalid names show validation feedback.
+- Invalid names prevent moving to the next step.
+- Package manager selector updates `packageManager`.
+- Supported package manager options come from schema metadata if available.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 2 completed: Create project step
+
+Changes made:
+- Added Project step UI.
+- Added project name input.
+- Added project name validation using @launchkit/schema.
+- Added package manager selector.
+- Connected Project step to shared builder config state.
+- Gated Next navigation when the Project step is invalid.
+
+Files changed:
+- apps/web/components/builder/steps/project-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/builder-state.ts
+- apps/web/lib/builder/validation.ts, if added
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 3: Create framework step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Project step renders in the wizard.
+- Project name input is connected to builder config state.
+- Project name validation uses `@launchkit/schema`.
+- Invalid project names show useful feedback.
+- Invalid project names prevent advancing from the Project step.
+- Package manager selector supports `npm` and `pnpm`.
+- Package manager selection updates builder config state.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 240b753..e736237 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -2,19 +2,28 @@
 
 import { useMemo, useState } from "react";
 
-import { createInitialBuilderState } from "@/lib/builder/builder-state";
+import { ProjectStep } from "@/components/builder/steps/project-step";
+import {
+  createInitialBuilderState,
+  type BuilderConfigPatch,
+  updateBuilderConfig,
+} from "@/lib/builder/builder-state";
 import { builderSteps } from "@/lib/builder/steps";
+import { validateProjectStep } from "@/lib/builder/validation";
 import { WizardNavigation } from "./wizard-navigation";
 import { WizardProgress } from "./wizard-progress";
 import { WizardStepPanel } from "./wizard-step-panel";
 
 export function BuilderShell() {
-  const [builderState] = useState(createInitialBuilderState);
+  const [builderState, setBuilderState] = useState(createInitialBuilderState);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
 
   const currentStep = builderSteps[currentStepIndex];
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === builderSteps.length - 1;
+  const projectStepValidation = validateProjectStep(builderState.config);
+  const isProjectStep = currentStep.id === "project";
+  const isNextDisabled = isProjectStep && !projectStepValidation.isValid;
 
   const selectedStack = useMemo(
     () => [
@@ -36,11 +45,19 @@ export function BuilderShell() {
   }
 
   function goNext() {
+    if (isNextDisabled) {
+      return;
+    }
+
     setCurrentStepIndex((stepIndex) =>
       Math.min(stepIndex + 1, builderSteps.length - 1),
     );
   }
 
+  function updateConfig(patch: BuilderConfigPatch) {
+    setBuilderState((state) => updateBuilderConfig(state, patch));
+  }
+
   return (
     <main className="flex-1 bg-background">
       <div className="mx-auto flex min-h-dvh w-full max-w-7xl flex-col px-4 py-5 sm:px-6 lg:px-8">
@@ -67,10 +84,19 @@ export function BuilderShell() {
                 step={currentStep}
                 stepNumber={currentStepIndex + 1}
                 totalSteps={builderSteps.length}
-              />
+              >
+                {isProjectStep ? (
+                  <ProjectStep
+                    config={builderState.config}
+                    validation={projectStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
+              </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
                 isLastStep={isLastStep}
+                isNextDisabled={isNextDisabled}
                 onBack={goBack}
                 onNext={goNext}
               />
diff --git a/apps/web/components/builder/steps/project-step.tsx b/apps/web/components/builder/steps/project-step.tsx
new file mode 100644
index 0000000..009b6a7
--- /dev/null
+++ b/apps/web/components/builder/steps/project-step.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+
+import {
+  packageManagerMetadata,
+  type LaunchKitConfig,
+  type PackageManagerOption,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { ProjectStepValidation } from "@/lib/builder/validation";
+
+type ProjectStepProps = {
+  config: LaunchKitConfig;
+  validation: ProjectStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+export function ProjectStep({
+  config,
+  validation,
+  onConfigChange,
+}: ProjectStepProps) {
+  const [nameTouched, setNameTouched] = useState(false);
+  const showNameError = nameTouched && validation.errors.name;
+
+  function updateProjectName(name: string) {
+    setNameTouched(true);
+    onConfigChange({ name });
+  }
+
+  function updatePackageManager(packageManager: PackageManagerOption) {
+    onConfigChange({ packageManager });
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <label htmlFor="project-name" className="text-sm font-medium">
+          Project name
+        </label>
+        <input
+          id="project-name"
+          name="project-name"
+          type="text"
+          value={config.name}
+          onBlur={() => setNameTouched(true)}
+          onChange={(event) => updateProjectName(event.target.value)}
+          aria-invalid={showNameError ? "true" : "false"}
+          aria-describedby="project-name-help project-name-error"
+          className="h-10 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          placeholder="my-app"
+        />
+        <p id="project-name-help" className="text-sm text-muted-foreground">
+          Use lowercase letters, numbers, and hyphen-separated words.
+        </p>
+        <p
+          id="project-name-error"
+          aria-live="polite"
+          className="min-h-5 text-sm text-destructive"
+        >
+          {showNameError ? validation.errors.name : ""}
+        </p>
+      </div>
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium">Package manager</legend>
+        <div className="grid gap-3 sm:grid-cols-2" role="radiogroup">
+          {packageManagerMetadata.map((option) => {
+            const isSelected = config.packageManager === option.value;
+
+            return (
+              <label
+                key={option.value}
+                className={[
+                  "flex cursor-pointer flex-col gap-1 rounded-md border p-4 transition-colors",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground hover:bg-muted",
+                ].join(" ")}
+              >
+                <span className="flex items-center justify-between gap-3">
+                  <span className="text-sm font-semibold">{option.label}</span>
+                  {option.recommended ? (
+                    <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                      Recommended
+                    </span>
+                  ) : null}
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                <input
+                  type="radio"
+                  name="package-manager"
+                  value={option.value}
+                  checked={isSelected}
+                  onChange={() =>
+                    updatePackageManager(option.value as PackageManagerOption)
+                  }
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
diff --git a/apps/web/components/builder/wizard-navigation.tsx b/apps/web/components/builder/wizard-navigation.tsx
index 70479e9..3aca3b1 100644
--- a/apps/web/components/builder/wizard-navigation.tsx
+++ b/apps/web/components/builder/wizard-navigation.tsx
@@ -1,6 +1,7 @@
 type WizardNavigationProps = {
   isFirstStep: boolean;
   isLastStep: boolean;
+  isNextDisabled?: boolean;
   onBack: () => void;
   onNext: () => void;
 };
@@ -8,6 +9,7 @@ type WizardNavigationProps = {
 export function WizardNavigation({
   isFirstStep,
   isLastStep,
+  isNextDisabled = false,
   onBack,
   onNext,
 }: WizardNavigationProps) {
@@ -24,7 +26,7 @@ export function WizardNavigation({
       <button
         type="button"
         onClick={onNext}
-        disabled={isLastStep}
+        disabled={isLastStep || isNextDisabled}
         className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45"
       >
         Next
diff --git a/apps/web/components/builder/wizard-step-panel.tsx b/apps/web/components/builder/wizard-step-panel.tsx
index f214d46..f3b6e81 100644
--- a/apps/web/components/builder/wizard-step-panel.tsx
+++ b/apps/web/components/builder/wizard-step-panel.tsx
@@ -1,15 +1,18 @@
 import type { BuilderStep } from "@/lib/builder/steps";
+import type { ReactNode } from "react";
 
 type WizardStepPanelProps = {
   step: BuilderStep;
   stepNumber: number;
   totalSteps: number;
+  children?: ReactNode;
 };
 
 export function WizardStepPanel({
   step,
   stepNumber,
   totalSteps,
+  children,
 }: WizardStepPanelProps) {
   return (
     <section
@@ -33,7 +36,9 @@ export function WizardStepPanel({
         </span>
       </div>
       <div className="rounded-md border border-dashed border-border bg-background p-5">
-        <p className="text-sm text-muted-foreground">{step.placeholder}</p>
+        {children ?? (
+          <p className="text-sm text-muted-foreground">{step.placeholder}</p>
+        )}
       </div>
     </section>
   );
diff --git a/apps/web/lib/builder/builder-state.ts b/apps/web/lib/builder/builder-state.ts
index 145f2b3..ecf2a03 100644
--- a/apps/web/lib/builder/builder-state.ts
+++ b/apps/web/lib/builder/builder-state.ts
@@ -7,8 +7,23 @@ export type BuilderState = {
   config: LaunchKitConfig;
 };
 
+export type BuilderConfigPatch = Partial<LaunchKitConfig>;
+
 export function createInitialBuilderState(): BuilderState {
   return {
     config: { ...defaultLaunchKitConfig },
   };
 }
+
+export function updateBuilderConfig(
+  state: BuilderState,
+  patch: BuilderConfigPatch,
+): BuilderState {
+  return {
+    ...state,
+    config: {
+      ...state.config,
+      ...patch,
+    },
+  };
+}
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
new file mode 100644
index 0000000..d0a30a5
--- /dev/null
+++ b/apps/web/lib/builder/validation.ts
@@ -0,0 +1,55 @@
+import {
+  LaunchKitConfigSchema,
+  type LaunchKitConfig,
+} from "@launchkit/schema";
+
+type ValidationErrors = Partial<Record<keyof LaunchKitConfig, string>>;
+
+export type ProjectStepValidation = {
+  isValid: boolean;
+  errors: Pick<ValidationErrors, "name" | "packageManager">;
+};
+
+export function validateBuilderConfig(config: LaunchKitConfig): {
+  isValid: boolean;
+  errors: ValidationErrors;
+} {
+  const result = LaunchKitConfigSchema.safeParse(config);
+
+  if (result.success) {
+    return {
+      isValid: true,
+      errors: {},
+    };
+  }
+
+  const errors: ValidationErrors = {};
+
+  for (const issue of result.error.issues) {
+    const field = issue.path[0];
+
+    if (typeof field === "string" && !(field in errors)) {
+      errors[field as keyof LaunchKitConfig] = issue.message;
+    }
+  }
+
+  return {
+    isValid: false,
+    errors,
+  };
+}
+
+export function validateProjectStep(
+  config: LaunchKitConfig,
+): ProjectStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    name: validation.errors.name,
+    packageManager: validation.errors.packageManager,
+  };
+
+  return {
+    isValid: !errors.name && !errors.packageManager,
+    errors,
+  };
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index ebe3ec4..df8ae02 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 project step is ready to begin
+Primary focus: Phase 6 framework step is ready to begin
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 project step is ready to begin
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 1 created the website wizard shell; ready to add the project step without duplicating generator logic. |
+| Phase 6 | Website MVP                           | In Progress | Step 2 added the Project step; ready to add the Framework step without duplicating generator logic. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,115 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 2 completed: Create project step
+
+Changes made:
+
+- Added Project step UI for generated project identity.
+- Added a project name input connected to shared builder config state.
+- Added project name validation using `@launchkit/schema` `LaunchKitConfigSchema`.
+- Added inline validation feedback for edited invalid project names.
+- Added a package manager selector using `@launchkit/schema` package manager metadata.
+- Connected package manager selection to shared builder config state.
+- Added builder config patch/update helpers.
+- Gated Next navigation when the Project step config is invalid.
+- Kept future wizard steps as placeholders.
+- Confirmed no `@launchkit/generator` import, API route, zip download flow, CLI work, or later step implementation was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/project-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/components/builder/wizard-navigation.tsx`
+- `apps/web/components/builder/wizard-step-panel.tsx`
+- `apps/web/lib/builder/builder-state.ts`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,220p' context/progress-tracker.md
+sed -n '1,360p' .agents/prompts/phase-06/step-2.md
+rg --files apps/web/components apps/web/lib apps/web/app packages/schema/src
+git status --short
+sed -n '1,260p' context/architecture.md
+sed -n '1,340p' context/build-plan.md
+sed -n '1,260p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '261,980p' context/architecture.md
+sed -n '341,1120p' context/build-plan.md
+sed -n '261,760p' context/project-overview.md
+sed -n '281,520p' context/ui-rules.md
+sed -n '1,260p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,240p' apps/web/components/builder/wizard-step-panel.tsx
+sed -n '1,220p' apps/web/components/builder/wizard-navigation.tsx
+sed -n '1,260p' packages/schema/src/metadata.ts
+sed -n '1,220p' packages/schema/src/options.ts
+sed -n '1,220p' packages/schema/src/config.ts
+sed -n '1,220p' packages/schema/src/__tests__/config.test.ts
+sed -n '1,220p' packages/schema/src/__tests__/metadata.test.ts
+cat apps/web/tsconfig.json
+mkdir -p apps/web/components/builder/steps
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+git status --short
+git diff --stat
+rg '@launchkit/generator|app/api|createProjectZip|download|node:test|node --test' apps/web
+git diff -- apps/web/components/builder apps/web/lib/builder
+```
+
+Verification:
+
+- [x] Project step renders in the wizard.
+- [x] Project name input is connected to builder config state.
+- [x] Project name validation uses `@launchkit/schema`.
+- [x] Invalid edited project names show concise feedback.
+- [x] Invalid project names prevent advancing from the Project step.
+- [x] Package manager selector supports `npm` and `pnpm`.
+- [x] Package manager options come from schema metadata.
+- [x] Package manager selection updates builder config state.
+- [x] No generator logic was added to `apps/web`.
+- [x] No API route or download flow was implemented.
+- [x] No CLI functionality was added.
+- [x] Future steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 3: Create framework step.
+
 Phase 6 Step 1 completed: Create website wizard shell
 
 Changes made:

From c31656ab427012ce24c26419450ed04b56d2607d Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 15:16:19 +0900
Subject: [PATCH 03/15] feat: add Framework step to website wizard with
 validation and UI display

---
 .agents/prompts/phase-06/step-3.md            | 311 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  18 +-
 .../builder/steps/framework-step.tsx          | 107 ++++++
 apps/web/lib/builder/validation.ts            |  29 ++
 context/progress-tracker.md                   |  97 +++++-
 5 files changed, 558 insertions(+), 4 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-3.md
 create mode 100644 apps/web/components/builder/steps/framework-step.tsx

diff --git a/.agents/prompts/phase-06/step-3.md b/.agents/prompts/phase-06/step-3.md
new file mode 100644
index 0000000..a2842f3
--- /dev/null
+++ b/.agents/prompts/phase-06/step-3.md
@@ -0,0 +1,311 @@
+# Phase 6 Step 3: Create Framework Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 2 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 4.
+Do not implement styling/UI, database, ORM, auth, extras, preview, or download steps yet.
+Do not add unsupported frameworks, languages, routers, or project structures.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Framework step in the LaunchKit website wizard.
+
+For the MVP, this step should communicate and confirm the fixed technical foundation for generated projects:
+
+```txt
+framework: "next"
+language: "typescript"
+router: "app"
+projectStructure: "no-src"
+```
+
+This step should not introduce unsupported choices.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/framework-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Display MVP Framework Choices
+
+Show the current generated-project foundation:
+
+```txt
+Next.js
+TypeScript
+App Router
+No src/ directory
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+frameworkMetadata
+languageMetadata
+routerMetadata
+projectStructureMetadata
+```
+
+Do not duplicate labels/descriptions manually if metadata is exported.
+
+### 2. Keep Options Fixed
+
+The MVP supports only:
+
+```txt
+frameworkOptions: ["next"]
+languageOptions: ["typescript"]
+routerOptions: ["app"]
+projectStructureOptions: ["no-src"]
+```
+
+Do not add UI choices for:
+
+```txt
+React Router
+Remix
+Astro
+Vue
+Svelte
+JavaScript
+Pages Router
+src/ folder
+```
+
+Because there is only one supported option in each category, this step may render them as selected fixed options rather than interactive controls.
+
+### 3. State Consistency
+
+Ensure the shared builder config state contains:
+
+```ts
+{
+  framework: "next",
+  language: "typescript",
+  router: "app",
+  projectStructure: "no-src"
+}
+```
+
+Do not let this step change those values to unsupported values.
+
+If the state was initialized from `defaultLaunchKitConfig`, this should already be true.
+
+### 4. Validation
+
+Use:
+
+```txt
+LaunchKitConfigSchema
+```
+
+or exported schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to ensure the current config remains valid.
+
+This step should not introduce additional validation gates beyond confirming the current fixed framework values are valid.
+
+### 5. Navigation Behavior
+
+The user should be able to move Back and Next through this step if the config is valid.
+
+Do not block navigation because the framework choices are fixed.
+
+If the config somehow contains invalid framework values, show a concise error and prevent moving forward.
+
+### 6. Visual Direction
+
+Keep the UI compact and useful.
+
+Recommended presentation:
+
+- A concise stack summary.
+- Four fixed selected rows or tiles.
+- Small descriptions from schema metadata.
+- A subtle note that more frameworks may come later, if appropriate.
+
+Do not make this a marketing section.
+Do not use a large hero.
+Do not use decorative gradient blobs/orbs.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available, if not add them and use:
+
+```txt
+Badge
+Separator
+Button
+```
+
+Do not nest cards inside cards.
+
+### 7. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and validates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Framework step renders Next.js.
+- Framework step renders TypeScript.
+- Framework step renders App Router.
+- Framework step renders no `src/` structure.
+- Framework step does not render unsupported framework options.
+- User can continue when the default config is valid.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 3 completed: Create framework step
+
+Changes made:
+- Added Framework step UI.
+- Displayed fixed MVP framework foundation.
+- Used @launchkit/schema metadata where available.
+- Confirmed framework config remains Next.js, TypeScript, App Router, no-src.
+- Confirmed unsupported framework choices are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/framework-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 4: Create styling and UI step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Framework step renders in the wizard.
+- The step shows Next.js.
+- The step shows TypeScript.
+- The step shows App Router.
+- The step shows no `src/` project structure.
+- Unsupported framework/language/router/structure choices are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- User can continue with the default config.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index e736237..d6c2e68 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 
+import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { ProjectStep } from "@/components/builder/steps/project-step";
 import {
   createInitialBuilderState,
@@ -9,7 +10,10 @@ import {
   updateBuilderConfig,
 } from "@/lib/builder/builder-state";
 import { builderSteps } from "@/lib/builder/steps";
-import { validateProjectStep } from "@/lib/builder/validation";
+import {
+  validateFrameworkStep,
+  validateProjectStep,
+} from "@/lib/builder/validation";
 import { WizardNavigation } from "./wizard-navigation";
 import { WizardProgress } from "./wizard-progress";
 import { WizardStepPanel } from "./wizard-step-panel";
@@ -22,8 +26,12 @@ export function BuilderShell() {
   const isFirstStep = currentStepIndex === 0;
   const isLastStep = currentStepIndex === builderSteps.length - 1;
   const projectStepValidation = validateProjectStep(builderState.config);
+  const frameworkStepValidation = validateFrameworkStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
-  const isNextDisabled = isProjectStep && !projectStepValidation.isValid;
+  const isFrameworkStep = currentStep.id === "framework";
+  const isNextDisabled =
+    (isProjectStep && !projectStepValidation.isValid) ||
+    (isFrameworkStep && !frameworkStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -92,6 +100,12 @@ export function BuilderShell() {
                     onConfigChange={updateConfig}
                   />
                 ) : null}
+                {isFrameworkStep ? (
+                  <FrameworkStep
+                    config={builderState.config}
+                    validation={frameworkStepValidation}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/steps/framework-step.tsx b/apps/web/components/builder/steps/framework-step.tsx
new file mode 100644
index 0000000..7dc70ec
--- /dev/null
+++ b/apps/web/components/builder/steps/framework-step.tsx
@@ -0,0 +1,107 @@
+import {
+  frameworkMetadata,
+  languageMetadata,
+  projectStructureMetadata,
+  routerMetadata,
+  type LaunchKitConfig,
+  type OptionMetadata,
+} from "@launchkit/schema";
+
+import type { FrameworkStepValidation } from "@/lib/builder/validation";
+
+type FrameworkStepProps = {
+  config: LaunchKitConfig;
+  validation: FrameworkStepValidation;
+};
+
+type FrameworkSummaryItem = {
+  label: string;
+  value: string;
+  metadata: OptionMetadata;
+};
+
+function findMetadata<TValue extends string>(
+  metadata: readonly OptionMetadata<TValue>[],
+  value: TValue,
+): OptionMetadata<TValue> {
+  return metadata.find((item) => item.value === value) ?? metadata[0];
+}
+
+export function FrameworkStep({ config, validation }: FrameworkStepProps) {
+  const summaryItems: FrameworkSummaryItem[] = [
+    {
+      label: "Framework",
+      value: config.framework,
+      metadata: findMetadata(frameworkMetadata, config.framework),
+    },
+    {
+      label: "Language",
+      value: config.language,
+      metadata: findMetadata(languageMetadata, config.language),
+    },
+    {
+      label: "Router",
+      value: config.router,
+      metadata: findMetadata(routerMetadata, config.router),
+    },
+    {
+      label: "Project structure",
+      value: config.projectStructure,
+      metadata: findMetadata(projectStructureMetadata, config.projectStructure),
+    },
+  ];
+
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-md border border-border bg-muted p-4">
+        <h2 className="text-base font-semibold text-foreground">
+          Fixed MVP foundation
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Generated projects start from one supported Next.js TypeScript setup.
+        </p>
+      </div>
+
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        {summaryItems.map((item) => (
+          <div
+            key={item.label}
+            className="rounded-md border border-primary bg-accent p-4 text-accent-foreground"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {item.label}
+                </p>
+                <h3 className="mt-1 text-base font-semibold">
+                  {item.metadata.label}
+                </h3>
+              </div>
+              <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                Selected
+              </span>
+            </div>
+            <p className="mt-3 text-sm text-muted-foreground">
+              {item.metadata.description}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Additional foundations can be added after the MVP.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index d0a30a5..15688ba 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -10,6 +10,14 @@ export type ProjectStepValidation = {
   errors: Pick<ValidationErrors, "name" | "packageManager">;
 };
 
+export type FrameworkStepValidation = {
+  isValid: boolean;
+  errors: Pick<
+    ValidationErrors,
+    "framework" | "language" | "router" | "projectStructure"
+  >;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
@@ -53,3 +61,24 @@ export function validateProjectStep(
     errors,
   };
 }
+
+export function validateFrameworkStep(
+  config: LaunchKitConfig,
+): FrameworkStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    framework: validation.errors.framework,
+    language: validation.errors.language,
+    router: validation.errors.router,
+    projectStructure: validation.errors.projectStructure,
+  };
+
+  return {
+    isValid:
+      !errors.framework &&
+      !errors.language &&
+      !errors.router &&
+      !errors.projectStructure,
+    errors,
+  };
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index df8ae02..33d1f4d 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 framework step is ready to begin
+Primary focus: Phase 6 styling and UI step is ready to begin
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 framework step is ready to begin
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 2 added the Project step; ready to add the Framework step without duplicating generator logic. |
+| Phase 6 | Website MVP                           | In Progress | Step 3 added the fixed Framework step; ready to add the Styling and UI step without duplicating generator logic. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,99 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 3 completed: Create framework step
+
+Changes made:
+
+- Added Framework step UI for the fixed generated-project foundation.
+- Displayed the MVP framework stack: Next.js, TypeScript, App Router, and no `src/` project structure.
+- Used `@launchkit/schema` metadata for framework, language, router, and project structure labels/descriptions.
+- Added framework-step validation using `@launchkit/schema` through the existing builder config validation path.
+- Gated Next navigation only if the fixed framework config is somehow invalid.
+- Confirmed the default config remains `framework: "next"`, `language: "typescript"`, `router: "app"`, and `projectStructure: "no-src"`.
+- Confirmed unsupported framework, language, router, and structure choices are not exposed.
+- Confirmed no `@launchkit/generator` import, API route, zip download flow, CLI work, or later step implementation was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/framework-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,220p' context/progress-tracker.md
+sed -n '1,360p' .agents/prompts/phase-06/step-3.md
+git status --short
+rg --files apps/web/components apps/web/lib packages/schema/src
+sed -n '1,1040p' context/architecture.md
+sed -n '1,1120p' context/build-plan.md
+sed -n '1,760p' context/project-overview.md
+sed -n '1,520p' context/ui-rules.md
+sed -n '1,260p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/lib/builder/validation.ts
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+git status --short
+git diff --stat
+rg '@launchkit/generator|app/api|createProjectZip|node:test|node --test|React Router|Remix|Astro|Vue|Svelte|JavaScript|Pages Router|src/' apps/web
+git diff -- apps/web/components/builder apps/web/lib/builder
+```
+
+Verification:
+
+- [x] Framework step renders in the wizard.
+- [x] Framework step shows Next.js.
+- [x] Framework step shows TypeScript.
+- [x] Framework step shows App Router.
+- [x] Framework step shows no `src/` project structure.
+- [x] Framework step uses schema metadata.
+- [x] Unsupported framework/language/router/structure choices are not exposed.
+- [x] Current config remains valid according to `@launchkit/schema`.
+- [x] User can continue with the default config.
+- [x] No generator logic was added to `apps/web`.
+- [x] No API route or download flow was implemented.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 4: Create styling and UI step.
+
 Phase 6 Step 2 completed: Create project step
 
 Changes made:

From 549cc2e74d42b5023d3ca6b4d1b2d21bfcbb6eaa Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 17:11:36 +0900
Subject: [PATCH 04/15] feat: complete Phase 6 implementation with website
 wizard steps for project and framework

---
 memory.md | 120 +++++++++++++++++++++++++++---------------------------
 1 file changed, 60 insertions(+), 60 deletions(-)

diff --git a/memory.md b/memory.md
index 197189b..03fc0a3 100644
--- a/memory.md
+++ b/memory.md
@@ -1,79 +1,79 @@
-# Memory - LaunchKit Phase 5 Complete
+# Memory - LaunchKit Phase 6 Step 3 Complete
 
-Last updated: 2026-07-02 13:02 JST
+Last updated: 2026-07-02 17:10 JST
 
 ## What was built
 
-- Completed Phase 5 Step 7: Auth.js credentials template.
-  - Added `packages/templates/features/authjs-credentials/auth.ts`.
-  - Added `packages/templates/features/authjs-credentials/app/api/auth/[...nextauth]/route.ts`.
-  - Added `packages/templates/features/authjs-credentials/README.md`.
-  - Added `authjsCredentialsTemplateId`.
-  - Auth.js credentials feature now contributes `next-auth`, `AUTH_SECRET`, template file references, and generated README notes.
-  - Tests cover Auth.js feature selection, generated files, env/dependency contributions, README warnings, and compatibility.
-- Completed Phase 5 Step 8: Docker PostgreSQL template.
-  - Added `packages/templates/features/docker-postgres/docker-compose.yml`.
-  - Added `packages/templates/features/docker-postgres/README.md`.
-  - Added `dockerPostgresTemplateId`.
-  - Docker PostgreSQL feature now contributes `docker-compose.yml` and generated README notes without npm dependencies or env vars.
-  - Tests cover Docker feature selection, generated file output, README guidance, no dependency contribution, and separation from Prisma/Auth.js.
-- Completed Phase 5 Step 9: Phase 5 completion verification.
-  - Added `packages/generator/src/__tests__/phase-5-completion.test.ts`.
-  - Verified real `packages/templates` files compose through the generator template-loader interface for default, shadcn, PostgreSQL, PostgreSQL + Prisma, Auth.js credentials, PostgreSQL + Docker, and full MVP selections.
-  - Updated `context/progress-tracker.md`: Phase 5 is now `Complete`; Phase 6 is `Ready`.
-- Small in-scope fixes from Step 9 verification:
-  - `generateProject` now loads the base `base/next` template when a `TemplateLoader` is provided.
-  - Generated files are merged by normalized path so later generated files override duplicate template paths predictably.
-  - Base Next.js package metadata is now contributed declaratively by `nextFeature`: Next, React, React DOM, TypeScript, app scripts, and version.
-  - Generated `package.json` now renders `version`.
-  - Generated README no longer says real templates will be added later.
+- Completed Phase 6 Step 1: website wizard shell.
+  - Added the LaunchKit builder home page in `apps/web/app/page.tsx`.
+  - Added builder shell, wizard progress, navigation, and reusable step panel components under `apps/web/components/builder/`.
+  - Added shared builder step definitions and initial builder state under `apps/web/lib/builder/`.
+  - Initialized builder config from `@launchkit/schema` `defaultLaunchKitConfig`.
+  - Added `@launchkit/schema` as an explicit `apps/web` dependency.
+- Completed Phase 6 Step 2: Project step.
+  - Added `apps/web/components/builder/steps/project-step.tsx`.
+  - Added project name input connected to shared builder config state.
+  - Added project name validation through `@launchkit/schema` `LaunchKitConfigSchema`.
+  - Added inline validation feedback and Next-button gating for invalid project names.
+  - Added package manager selector using `@launchkit/schema` package manager metadata for `npm` and `pnpm`.
+  - Added builder config patch/update helpers and `apps/web/lib/builder/validation.ts`.
+- Completed Phase 6 Step 3: Framework step.
+  - Added `apps/web/components/builder/steps/framework-step.tsx`.
+  - Displayed fixed MVP generated-project foundation: Next.js, TypeScript, App Router, and no `src/` project structure.
+  - Used `@launchkit/schema` metadata for framework, language, router, and project structure labels/descriptions.
+  - Added framework-step validation through the existing schema-backed builder validation path.
+  - Gated Next only if the fixed framework config is somehow invalid.
+- Updated `context/progress-tracker.md`: Phase 6 is in progress and Phase 6 Step 4 is next.
 
 ## Decisions made
 
-- Phase 5 is complete only after verifying real template files compose through the existing injected `TemplateLoader`; no production filesystem template loader was added in this phase.
-- Keep Phase 6 as the next boundary. Do not start website UI, CLI work, new product options, or unsupported stacks before the Phase 6 prompt.
-- Keep Auth.js credentials scaffold intentionally non-production-complete. Developers must add real user lookup and secure password verification.
-- Keep Docker PostgreSQL as a local development helper only. It must require PostgreSQL and must not add npm dependencies or conflicting env vars.
-- Keep Prisma v7 setup from earlier work: `prisma.config.ts`, generated client output, ESM package type when Prisma is selected, and `@prisma/adapter-pg`.
+- Keep Phase 6 implementation step-scoped. Steps 1-3 did not implement styling/UI, database, ORM, auth, extras, preview, download, API route, zip behavior, or CLI functionality.
+- Keep all UI validation and option display tied to `@launchkit/schema` exports where available.
+- Keep generated-project foundation fixed for MVP: `framework: "next"`, `language: "typescript"`, `router: "app"`, `projectStructure: "no-src"`.
+- Do not expose unsupported framework/language/router/structure choices in the website.
+- Keep generator logic out of `apps/web`; no `@launchkit/generator` imports were added during these website UI steps.
+- Do not add a frontend component test stack yet because `apps/web` has no existing frontend test pattern or app test script.
 
 ## Problems solved
 
-- Step 9 verification found that generated projects with a template loader loaded feature templates but not the base Next.js template. Fixed by loading `base/${plan.baseTemplate}` before selected feature templates.
-- Step 9 verification found generated `package.json` lacked base Next/React/TypeScript metadata. Fixed by moving base package metadata into the declarative `nextFeature` contribution.
-- Step 9 verification found `version` was merged into the package patch but not rendered into generated `package.json`. Fixed renderer output.
-- The workspace build still fails inside the sandbox because Turbopack cannot create/bind a worker process. Rerunning `npm run build` with elevated permissions passes.
+- Builder state now has a narrow patch/update helper so steps can update shared config while preserving the rest of the selected stack.
+- Project-step navigation is blocked when schema validation rejects the project name.
+- Framework-step navigation validates the fixed schema fields without introducing interactive unsupported choices.
+- The known sandbox build issue remains: Next/Turbopack fails inside the sandbox because it cannot create/bind a worker process. Rerunning `npm run build` and app build commands with elevated permissions passes.
 
 ## Current state
 
-- `context/progress-tracker.md` says Phase 5 is complete and Phase 6 is ready.
-- Phase 5 template layers are implemented and verified:
-  - Base Next.js
-  - Tailwind
-  - shadcn/ui
-  - PostgreSQL
-  - Prisma
-  - Auth.js credentials
-  - Docker PostgreSQL
-- Verification passed:
-  - `npm run typecheck -w @launchkit/generator`
-  - `npm test -w @launchkit/generator` (111 tests)
-  - `npm run typecheck -w @launchkit/templates`
-  - `npm test -w @launchkit/templates` (51 tests)
-  - `npm run typecheck -w @launchkit/schema`
-  - `npm test -w @launchkit/schema` (73 tests)
-  - `npm run typecheck`
-  - `npm run test`
-  - `npm run lint`
-  - `git diff --check`
-  - `npm run build` passed when rerun outside the sandbox after the known Turbopack sandbox failure.
-- `rg "node:test|node --test" packages apps package.json` returned no matches.
-- At the time of saving, the latest tracker state and memory save should be treated as the handoff source of truth.
+- `context/progress-tracker.md` says:
+  - Current phase: Phase 6 in progress.
+  - Primary focus: Phase 6 styling and UI step is ready to begin.
+  - Phase 6 Step 3 is complete.
+- Implemented website wizard steps:
+  - Project step: project name and package manager.
+  - Framework step: fixed Next.js/TypeScript/App Router/no-src foundation.
+- Remaining Phase 6 wizard steps are still placeholders:
+  - Styling and UI
+  - Database
+  - ORM
+  - Auth
+  - Extras
+  - Preview
+  - Download
+- Verification recorded in the tracker:
+  - `npm run typecheck -w apps/web` passed.
+  - `npm run lint -w apps/web` passed.
+  - `npm run typecheck` passed.
+  - `npm run test` passed: generator 111 tests, schema 73 tests, templates 51 tests.
+  - `npm run lint` passed.
+  - `git diff --check` passed.
+  - `npm run build -w apps/web` and `npm run build` pass when rerun outside the sandbox after the known Turbopack sandbox failure.
+- No local dev server was left running; the user said they will run it themselves.
+- `git status --short` was clean at the time of this memory save.
 
 ## Next session starts with
 
-Run `/remember restore`, then read `context/progress-tracker.md` and the next Phase 6 prompt. Start Phase 6 Step 1: create the website wizard shell. Keep generator logic in `packages/generator`; the website should import shared schema/options and call generator APIs rather than duplicating generation rules.
+Run `/remember restore`, then read `context/progress-tracker.md` and the next Phase 6 prompt. Continue with Phase 6 Step 4: create the Styling and UI step. Keep the implementation inside `apps/web`, use `@launchkit/schema` metadata/options, and do not add generator/API/download/CLI behavior.
 
 ## Open questions
 
-- Phase 6 prompt is not yet loaded in this memory. Confirm the exact `.agents/prompts/phase-06/...` file before implementing.
-- Decide in Phase 6 whether the preview is computed directly from schema/feature metadata or via a lightweight generator preview path, while preserving the architecture boundary.
+- `.agents/prompts/phase-06/step-4.md` was not present at save time; only steps 1 through 3 existed under `.agents/prompts/phase-06/`. Confirm or add the exact Step 4 prompt before implementing.
+- Later Phase 6 still needs a decision on whether preview is computed directly from schema/feature metadata or via a lightweight generator preview path while preserving the architecture boundary.

From 3c619564701d9943711735193c499d2046d15a55 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 22:32:21 +0900
Subject: [PATCH 05/15] feat: implement Styling and UI step in website wizard
 with validation and state management

---
 .agents/prompts/phase-06/step-4.md            | 325 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  14 +-
 .../builder/steps/styling-ui-step.tsx         | 136 ++++++++
 apps/web/lib/builder/validation.ts            |  43 ++-
 context/progress-tracker.md                   | 127 ++++++-
 5 files changed, 636 insertions(+), 9 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-4.md
 create mode 100644 apps/web/components/builder/steps/styling-ui-step.tsx

diff --git a/.agents/prompts/phase-06/step-4.md b/.agents/prompts/phase-06/step-4.md
new file mode 100644
index 0000000..c93256f
--- /dev/null
+++ b/.agents/prompts/phase-06/step-4.md
@@ -0,0 +1,325 @@
+# Phase 6 Step 4: Create Styling and UI Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 3 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 5.
+Do not implement database, ORM, auth, extras, preview, or download steps yet.
+Do not add unsupported styling systems or UI libraries.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Styling and UI step in the LaunchKit website wizard.
+
+For the MVP, generated projects always use:
+
+```txt
+styling: "tailwind"
+```
+
+Users can choose:
+
+```txt
+ui: "none"
+ui: "shadcn"
+```
+
+This step should let users decide whether to include shadcn/ui in the generated project.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/styling-ui-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Show Tailwind as Fixed Styling
+
+Display Tailwind CSS as the fixed MVP styling choice:
+
+```txt
+styling: "tailwind"
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+stylingMetadata
+```
+
+Do not expose unsupported styling options such as:
+
+```txt
+CSS Modules
+Sass
+Styled Components
+Panda CSS
+UnoCSS
+```
+
+### 2. Add UI Library Selector
+
+Add a selector for:
+
+```ts
+config.ui;
+```
+
+Supported values:
+
+```txt
+none
+shadcn
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+uiMetadata
+```
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Selectable option rows
+
+Do not use a plain text input.
+
+### 3. State Updates
+
+When the user changes the UI option:
+
+- Update `config.ui`.
+- Preserve all other builder config values.
+- Keep `config.styling` as `"tailwind"`.
+
+Do not write to local storage unless the existing UX plan already requires it.
+
+### 4. Compatibility
+
+The schema should already have this compatibility rule:
+
+```txt
+shadcn/ui requires Tailwind CSS.
+```
+
+Since Tailwind is fixed in the MVP, selecting shadcn should normally be valid.
+
+Use schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to validate the current config if the builder shell already supports validation.
+
+Do not duplicate compatibility rules manually in UI code unless the existing architecture has a small UI helper for displaying schema issues.
+
+### 5. Navigation Behavior
+
+The user should be able to move Back and Next when:
+
+```txt
+styling: "tailwind"
+ui: "none" or "shadcn"
+```
+
+If the current config somehow violates schema compatibility, show a concise error and prevent moving forward.
+
+Do not add validation gates for future steps yet.
+
+### 6. Visual Direction
+
+Keep the UI compact and scannable.
+
+Recommended presentation:
+
+- A fixed Tailwind summary row.
+- Two selectable UI rows: "No component library" and "shadcn/ui".
+- Short descriptions from schema metadata.
+- A recommended indicator for shadcn/ui if metadata marks it recommended.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+RadioGroup
+Badge
+Button
+Separator
+```
+
+Do not nest cards inside cards.
+
+### 7. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and updates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Styling/UI step renders Tailwind as fixed.
+- Styling/UI step renders `none` and `shadcn` UI options.
+- Selecting shadcn updates `config.ui`.
+- Selecting none updates `config.ui`.
+- Unsupported styling systems are not rendered.
+- Unsupported UI libraries are not rendered.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 4 completed: Create styling and UI step
+
+Changes made:
+- Added Styling and UI step UI.
+- Displayed Tailwind CSS as the fixed MVP styling choice.
+- Added UI selector for none and shadcn/ui.
+- Used @launchkit/schema metadata where available.
+- Connected UI selection to shared builder config state.
+- Confirmed unsupported styling systems and UI libraries are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/styling-ui-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- apps/web/lib/builder/validation.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 5: Create database step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Styling and UI step renders in the wizard.
+- Tailwind CSS is shown as the fixed styling option.
+- UI selector supports `none` and `shadcn`.
+- Selecting a UI option updates builder config state.
+- Unsupported styling systems are not exposed.
+- Unsupported UI libraries are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index d6c2e68..9d803db 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { ProjectStep } from "@/components/builder/steps/project-step";
+import { StylingUiStep } from "@/components/builder/steps/styling-ui-step";
 import {
   createInitialBuilderState,
   type BuilderConfigPatch,
@@ -13,6 +14,7 @@ import { builderSteps } from "@/lib/builder/steps";
 import {
   validateFrameworkStep,
   validateProjectStep,
+  validateStylingUiStep,
 } from "@/lib/builder/validation";
 import { WizardNavigation } from "./wizard-navigation";
 import { WizardProgress } from "./wizard-progress";
@@ -27,11 +29,14 @@ export function BuilderShell() {
   const isLastStep = currentStepIndex === builderSteps.length - 1;
   const projectStepValidation = validateProjectStep(builderState.config);
   const frameworkStepValidation = validateFrameworkStep(builderState.config);
+  const stylingUiStepValidation = validateStylingUiStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
   const isFrameworkStep = currentStep.id === "framework";
+  const isStylingUiStep = currentStep.id === "styling-ui";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
-    (isFrameworkStep && !frameworkStepValidation.isValid);
+    (isFrameworkStep && !frameworkStepValidation.isValid) ||
+    (isStylingUiStep && !stylingUiStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -106,6 +111,13 @@ export function BuilderShell() {
                     validation={frameworkStepValidation}
                   />
                 ) : null}
+                {isStylingUiStep ? (
+                  <StylingUiStep
+                    config={builderState.config}
+                    validation={stylingUiStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/steps/styling-ui-step.tsx b/apps/web/components/builder/steps/styling-ui-step.tsx
new file mode 100644
index 0000000..924f622
--- /dev/null
+++ b/apps/web/components/builder/steps/styling-ui-step.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import {
+  stylingMetadata,
+  uiMetadata,
+  type LaunchKitConfig,
+  type OptionMetadata,
+  type UiOption,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { StylingUiStepValidation } from "@/lib/builder/validation";
+
+type StylingUiStepProps = {
+  config: LaunchKitConfig;
+  validation: StylingUiStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+function findMetadata<TValue extends string>(
+  metadata: readonly OptionMetadata<TValue>[],
+  value: TValue,
+): OptionMetadata<TValue> {
+  return metadata.find((item) => item.value === value) ?? metadata[0];
+}
+
+function getUiOptionLabel(option: OptionMetadata<UiOption>): string {
+  if (option.value === "none") {
+    return "No component library";
+  }
+
+  return option.label;
+}
+
+export function StylingUiStep({
+  config,
+  validation,
+  onConfigChange,
+}: StylingUiStepProps) {
+  const styling = findMetadata(stylingMetadata, config.styling);
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+
+  function updateUi(ui: UiOption) {
+    onConfigChange({ styling: "tailwind", ui });
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-md border border-primary bg-accent p-4 text-accent-foreground">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="text-sm font-medium text-muted-foreground">
+              Fixed styling
+            </p>
+            <h2 className="mt-1 text-base font-semibold">{styling.label}</h2>
+          </div>
+          <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+            Selected
+          </span>
+        </div>
+        <p className="mt-3 text-sm text-muted-foreground">
+          {styling.description}
+        </p>
+      </div>
+
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">
+          UI library
+        </legend>
+        <div className="grid gap-3" role="radiogroup">
+          {uiMetadata.map((option) => {
+            const isSelected = config.ui === option.value;
+
+            return (
+              <label
+                key={option.value}
+                className={[
+                  "flex cursor-pointer flex-col gap-2 rounded-md border p-4 transition-colors",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground hover:bg-muted",
+                ].join(" ")}
+              >
+                <span className="flex items-start justify-between gap-3">
+                  <span className="text-sm font-semibold">
+                    {getUiOptionLabel(option)}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2">
+                    {option.recommended ? (
+                      <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                        Recommended
+                      </span>
+                    ) : null}
+                    <span
+                      className={[
+                        "grid size-4 place-items-center rounded-full border",
+                        isSelected
+                          ? "border-primary bg-primary"
+                          : "border-border bg-background",
+                      ].join(" ")}
+                      aria-hidden="true"
+                    >
+                      {isSelected ? (
+                        <span className="size-1.5 rounded-full bg-primary-foreground" />
+                      ) : null}
+                    </span>
+                  </span>
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                <input
+                  type="radio"
+                  name="ui-library"
+                  value={option.value}
+                  checked={isSelected}
+                  onChange={() => updateUi(option.value)}
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index 15688ba..c8a1504 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -1,5 +1,6 @@
 import {
   LaunchKitConfigSchema,
+  validateCompatibility,
   type LaunchKitConfig,
 } from "@launchkit/schema";
 
@@ -18,23 +19,38 @@ export type FrameworkStepValidation = {
   >;
 };
 
+export type StylingUiStepValidation = {
+  isValid: boolean;
+  errors: Pick<ValidationErrors, "styling" | "ui">;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
 } {
   const result = LaunchKitConfigSchema.safeParse(config);
 
-  if (result.success) {
+  if (!result.success) {
+    const errors: ValidationErrors = {};
+
+    for (const issue of result.error.issues) {
+      const field = issue.path[0];
+
+      if (typeof field === "string" && !(field in errors)) {
+        errors[field as keyof LaunchKitConfig] = issue.message;
+      }
+    }
+
     return {
-      isValid: true,
-      errors: {},
+      isValid: false,
+      errors,
     };
   }
 
   const errors: ValidationErrors = {};
 
-  for (const issue of result.error.issues) {
-    const field = issue.path[0];
+  for (const issue of validateCompatibility(result.data)) {
+    const field = issue.path?.[0];
 
     if (typeof field === "string" && !(field in errors)) {
       errors[field as keyof LaunchKitConfig] = issue.message;
@@ -42,7 +58,7 @@ export function validateBuilderConfig(config: LaunchKitConfig): {
   }
 
   return {
-    isValid: false,
+    isValid: Object.keys(errors).length === 0,
     errors,
   };
 }
@@ -82,3 +98,18 @@ export function validateFrameworkStep(
     errors,
   };
 }
+
+export function validateStylingUiStep(
+  config: LaunchKitConfig,
+): StylingUiStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    styling: validation.errors.styling,
+    ui: validation.errors.ui,
+  };
+
+  return {
+    isValid: !errors.styling && !errors.ui,
+    errors,
+  };
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 33d1f4d..994af82 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 styling and UI step is ready to begin
+Primary focus: Phase 6 Styling and UI step is complete; Database step is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 styling and UI step is ready to begin
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 3 added the fixed Framework step; ready to add the Styling and UI step without duplicating generator logic. |
+| Phase 6 | Website MVP                           | In Progress | Step 4 added the fixed Tailwind summary and UI library selector; Database step is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,129 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 4 completed: Create Styling and UI step
+
+Changes made:
+
+- Added Styling and UI step UI to the website wizard.
+- Displayed Tailwind CSS as the fixed MVP styling choice using `@launchkit/schema` styling metadata.
+- Added a UI library selector for `ui: "none"` and `ui: "shadcn"` using `@launchkit/schema` UI metadata.
+- Added the recommended indicator for shadcn/ui from schema metadata.
+- Connected UI library selection to shared builder config state.
+- Kept `config.styling` fixed as `"tailwind"` whenever the UI option changes.
+- Extended builder validation to include schema compatibility issues through `validateCompatibility()` from `@launchkit/schema`.
+- Gated Next navigation on the Styling and UI step only if styling/UI schema or compatibility validation fails.
+- Confirmed unsupported styling systems are not exposed.
+- Confirmed no `@launchkit/generator` import, API route, zip download flow, CLI work, or later step implementation was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/styling-ui-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,240p' context/progress-tracker.md
+sed -n '1,240p' .agents/prompts/phase-06/step-4.md
+rg --files
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1120p' context/build-plan.md
+sed -n '1,260p' context/project-overview.md
+sed -n '261,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,260p' context/ui-rules.md
+sed -n '261,620p' context/ui-rules.md
+sed -n '241,900p' context/progress-tracker.md
+sed -n '901,1600p' context/progress-tracker.md
+sed -n '1601,2300p' context/progress-tracker.md
+sed -n '2301,3000p' context/progress-tracker.md
+sed -n '3001,3700p' context/progress-tracker.md
+git status --short
+sed -n '1,320p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/components/builder/steps/framework-step.tsx
+sed -n '1,260p' apps/web/components/builder/steps/project-step.tsx
+sed -n '1,260p' apps/web/lib/builder/builder-state.ts
+sed -n '1,260p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' apps/web/lib/builder/steps.ts
+sed -n '1,260p' apps/web/components/builder/wizard-step-panel.tsx
+sed -n '1,360p' packages/schema/src/metadata.ts
+sed -n '1,320p' packages/schema/src/config.ts
+sed -n '1,320p' packages/schema/src/compatibility.ts
+cat apps/web/package.json
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+rg '@launchkit/generator|app/api|createProjectZip|download|CSS Modules|Sass|Styled Components|Panda CSS|UnoCSS|node:test|node --test' apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3000
+git status --short
+git diff --stat
+sed -n '1,220p' context/progress-tracker.md
+sed -n '1,240p' apps/web/components/builder/steps/styling-ui-step.tsx
+```
+
+Verification:
+
+- [x] Styling and UI step renders in the wizard.
+- [x] Tailwind CSS is displayed as the fixed styling choice.
+- [x] Tailwind styling metadata comes from `@launchkit/schema`.
+- [x] UI options are limited to `none` and `shadcn`.
+- [x] UI option metadata comes from `@launchkit/schema`.
+- [x] shadcn/ui recommended indicator is shown from metadata.
+- [x] Selecting a UI option updates `config.ui`.
+- [x] UI updates preserve all other builder config values.
+- [x] UI updates keep `config.styling` as `"tailwind"`.
+- [x] Styling/UI validation uses schema parsing and compatibility helpers.
+- [x] Valid `styling: "tailwind"` with `ui: "none"` or `ui: "shadcn"` can advance.
+- [x] Unsupported styling systems are not rendered.
+- [x] No generator logic was added to `apps/web`.
+- [x] No API route or download flow was implemented.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+- `npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3000` failed in the sandbox because binding to `127.0.0.1:3000` was not permitted. The elevated rerun was rejected because the user will run the dev server locally.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server is not running; the user said they will run it themselves.
+
+Next suggested step:
+
+- Phase 6 Step 5: Create database step.
+
 Phase 6 Step 3 completed: Create framework step
 
 Changes made:

From c0898daadca3a0aa1c107f43cf555759fbc13e9b Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 22:39:59 +0900
Subject: [PATCH 06/15] feat: add Database step to website wizard with
 validation and UI integration

---
 .agents/prompts/phase-06/step-5.md            | 313 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  14 +-
 .../builder/steps/database-step.tsx           | 126 +++++++
 apps/web/lib/builder/validation.ts            |  29 +-
 context/progress-tracker.md                   | 123 ++++++-
 5 files changed, 599 insertions(+), 6 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-5.md
 create mode 100644 apps/web/components/builder/steps/database-step.tsx

diff --git a/.agents/prompts/phase-06/step-5.md b/.agents/prompts/phase-06/step-5.md
new file mode 100644
index 0000000..ca8b5c5
--- /dev/null
+++ b/.agents/prompts/phase-06/step-5.md
@@ -0,0 +1,313 @@
+# Phase 6 Step 5: Create Database Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 4 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 6.
+Do not implement ORM, auth, extras, preview, or download steps yet.
+Do not add unsupported databases.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Database step in the LaunchKit website wizard.
+
+Users should be able to choose:
+
+```txt
+database: "none"
+database: "postgres"
+```
+
+This step should only select the database layer. Prisma, Auth.js, and Docker options are handled in later steps.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/database-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Add Database Selector
+
+Add a selector for:
+
+```ts
+config.database;
+```
+
+Supported values:
+
+```txt
+none
+postgres
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+databaseMetadata
+```
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Selectable option rows
+
+Do not use a plain text input.
+
+### 2. State Updates
+
+When the user changes the database option:
+
+- Update `config.database`.
+- Preserve all other builder config values unless a dependent value would become invalid.
+
+If changing from PostgreSQL to none would make existing selections invalid, apply the smallest clear reset needed.
+
+Recommended behavior:
+
+```txt
+If database becomes "none":
+  - set orm to "none" if it was "prisma"
+  - set docker to "none" if it was "postgres"
+  - keep auth unchanged, because authjs-credentials may work without a database
+```
+
+This preserves compatibility while avoiding hidden invalid config.
+
+### 3. Compatibility Awareness
+
+The schema should already have these compatibility rules:
+
+```txt
+Prisma requires PostgreSQL.
+PostgreSQL Docker Compose is only available when PostgreSQL is selected.
+Auth.js credentials scaffold may work without a database.
+```
+
+Use schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to validate compatibility if the builder shell already supports compatibility issue display.
+
+Do not duplicate compatibility rules manually in UI code unless needed for dependent-field reset behavior.
+
+### 4. Do Not Implement Later Steps
+
+Do not add controls for:
+
+```txt
+orm
+auth
+docker
+```
+
+Those belong to later Phase 6 steps.
+
+This step may reset invalid dependent values when database changes, but it should not render the dependent controls.
+
+### 5. Navigation Behavior
+
+The user should be able to move Back and Next when:
+
+```txt
+database: "none" or "postgres"
+```
+
+If the current config somehow violates schema compatibility, show a concise error and prevent moving forward.
+
+Do not add validation gates for future steps beyond compatibility issues caused by database selection.
+
+### 6. Visual Direction
+
+Keep the UI practical and compact.
+
+Recommended presentation:
+
+- Two selectable rows: "No database" and "PostgreSQL".
+- Short descriptions from schema metadata.
+- Recommended indicator for PostgreSQL if metadata marks it recommended.
+- Optional small note that Prisma and Docker are configured later.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+RadioGroup
+Badge
+Button
+Separator
+```
+
+Do not nest cards inside cards.
+
+### 7. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and updates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Database step renders `none` and `postgres` options.
+- Selecting PostgreSQL updates `config.database`.
+- Selecting no database updates `config.database`.
+- Selecting no database resets Prisma ORM to none if previously selected.
+- Selecting no database resets Docker PostgreSQL to none if previously selected.
+- Selecting no database does not reset Auth.js credentials.
+- Unsupported databases are not rendered.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 5 completed: Create database step
+
+Changes made:
+- Added Database step UI.
+- Added database selector for none and PostgreSQL.
+- Used @launchkit/schema metadata where available.
+- Connected database selection to shared builder config state.
+- Added dependent reset behavior for Prisma and Docker when PostgreSQL is disabled.
+- Confirmed unsupported databases are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/database-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- apps/web/lib/builder/validation.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 6: Create ORM step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Database step renders in the wizard.
+- Database selector supports `none` and `postgres`.
+- Selecting a database option updates builder config state.
+- Selecting `database: "none"` resets incompatible Prisma and Docker selections.
+- Selecting `database: "none"` does not reset Auth.js credentials.
+- Unsupported databases are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 9d803db..450be58 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 
+import { DatabaseStep } from "@/components/builder/steps/database-step";
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { ProjectStep } from "@/components/builder/steps/project-step";
 import { StylingUiStep } from "@/components/builder/steps/styling-ui-step";
@@ -12,6 +13,7 @@ import {
 } from "@/lib/builder/builder-state";
 import { builderSteps } from "@/lib/builder/steps";
 import {
+  validateDatabaseStep,
   validateFrameworkStep,
   validateProjectStep,
   validateStylingUiStep,
@@ -30,13 +32,16 @@ export function BuilderShell() {
   const projectStepValidation = validateProjectStep(builderState.config);
   const frameworkStepValidation = validateFrameworkStep(builderState.config);
   const stylingUiStepValidation = validateStylingUiStep(builderState.config);
+  const databaseStepValidation = validateDatabaseStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
   const isFrameworkStep = currentStep.id === "framework";
   const isStylingUiStep = currentStep.id === "styling-ui";
+  const isDatabaseStep = currentStep.id === "database";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
     (isFrameworkStep && !frameworkStepValidation.isValid) ||
-    (isStylingUiStep && !stylingUiStepValidation.isValid);
+    (isStylingUiStep && !stylingUiStepValidation.isValid) ||
+    (isDatabaseStep && !databaseStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -118,6 +123,13 @@ export function BuilderShell() {
                     onConfigChange={updateConfig}
                   />
                 ) : null}
+                {isDatabaseStep ? (
+                  <DatabaseStep
+                    config={builderState.config}
+                    validation={databaseStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/steps/database-step.tsx b/apps/web/components/builder/steps/database-step.tsx
new file mode 100644
index 0000000..5bc0558
--- /dev/null
+++ b/apps/web/components/builder/steps/database-step.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  databaseMetadata,
+  type DatabaseOption,
+  type LaunchKitConfig,
+  type OptionMetadata,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { DatabaseStepValidation } from "@/lib/builder/validation";
+
+type DatabaseStepProps = {
+  config: LaunchKitConfig;
+  validation: DatabaseStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+function getDatabaseOptionLabel(option: OptionMetadata<DatabaseOption>): string {
+  if (option.value === "none") {
+    return "No database";
+  }
+
+  return option.label;
+}
+
+export function DatabaseStep({
+  config,
+  validation,
+  onConfigChange,
+}: DatabaseStepProps) {
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+
+  function updateDatabase(database: DatabaseOption) {
+    const patch: BuilderConfigPatch = { database };
+
+    if (database === "none") {
+      if (config.orm === "prisma") {
+        patch.orm = "none";
+      }
+
+      if (config.docker === "postgres") {
+        patch.docker = "none";
+      }
+    }
+
+    onConfigChange(patch);
+  }
+
+  return (
+    <div className="space-y-5">
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">
+          Database
+        </legend>
+        <div className="grid gap-3" role="radiogroup">
+          {databaseMetadata.map((option) => {
+            const isSelected = config.database === option.value;
+
+            return (
+              <label
+                key={option.value}
+                className={[
+                  "flex cursor-pointer flex-col gap-2 rounded-md border p-4 transition-colors",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground hover:bg-muted",
+                ].join(" ")}
+              >
+                <span className="flex items-start justify-between gap-3">
+                  <span className="text-sm font-semibold">
+                    {getDatabaseOptionLabel(option)}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2">
+                    {option.recommended ? (
+                      <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                        Recommended
+                      </span>
+                    ) : null}
+                    <span
+                      className={[
+                        "grid size-4 place-items-center rounded-full border",
+                        isSelected
+                          ? "border-primary bg-primary"
+                          : "border-border bg-background",
+                      ].join(" ")}
+                      aria-hidden="true"
+                    >
+                      {isSelected ? (
+                        <span className="size-1.5 rounded-full bg-primary-foreground" />
+                      ) : null}
+                    </span>
+                  </span>
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                <input
+                  type="radio"
+                  name="database"
+                  value={option.value}
+                  checked={isSelected}
+                  onChange={() => updateDatabase(option.value)}
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+
+      <p className="text-sm text-muted-foreground">
+        Prisma and Docker are configured in later steps.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index c8a1504..ca5315f 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -24,6 +24,11 @@ export type StylingUiStepValidation = {
   errors: Pick<ValidationErrors, "styling" | "ui">;
 };
 
+export type DatabaseStepValidation = {
+  isValid: boolean;
+  errors: Pick<ValidationErrors, "database" | "orm" | "docker">;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
@@ -50,10 +55,12 @@ export function validateBuilderConfig(config: LaunchKitConfig): {
   const errors: ValidationErrors = {};
 
   for (const issue of validateCompatibility(result.data)) {
-    const field = issue.path?.[0];
+    const fields = issue.path ?? [];
 
-    if (typeof field === "string" && !(field in errors)) {
-      errors[field as keyof LaunchKitConfig] = issue.message;
+    for (const field of fields) {
+      if (typeof field === "string" && !(field in errors)) {
+        errors[field as keyof LaunchKitConfig] = issue.message;
+      }
     }
   }
 
@@ -113,3 +120,19 @@ export function validateStylingUiStep(
     errors,
   };
 }
+
+export function validateDatabaseStep(
+  config: LaunchKitConfig,
+): DatabaseStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    database: validation.errors.database,
+    orm: validation.errors.orm,
+    docker: validation.errors.docker,
+  };
+
+  return {
+    isValid: !errors.database && !errors.orm && !errors.docker,
+    errors,
+  };
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 994af82..647353b 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Styling and UI step is complete; Database step is next
+Primary focus: Phase 6 Database step is complete; ORM step is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Styling and UI step is complete; Database step is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 4 added the fixed Tailwind summary and UI library selector; Database step is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 5 added the Database step with PostgreSQL selection and dependent resets; ORM step is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,125 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 5 completed: Create database step
+
+Changes made:
+
+- Added Database step UI to the website wizard.
+- Added a database selector for `database: "none"` and `database: "postgres"`.
+- Used `@launchkit/schema` `databaseMetadata` for database option labels, descriptions, and the PostgreSQL recommended indicator.
+- Connected database selection to shared builder config state.
+- Added dependent reset behavior when switching to `database: "none"`:
+  - resets `orm: "prisma"` to `orm: "none"`;
+  - resets `docker: "postgres"` to `docker: "none"`;
+  - leaves `auth` unchanged because Auth.js credentials may work without a database.
+- Extended builder compatibility error mapping so schema compatibility issues are available on every related field path.
+- Added database-step validation using schema parsing and compatibility helpers through the existing builder validation path.
+- Gated Next navigation on the Database step only when database-related schema or compatibility validation fails.
+- Confirmed unsupported databases are not exposed.
+- Confirmed no ORM, auth, Docker, preview, download, API route, generator logic, or CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/database-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,260p' context/progress-tracker.md
+sed -n '1,260p' .agents/prompts/phase-06/step-5.md
+rg --files apps/web/components apps/web/lib packages/schema/src context
+sed -n '261,520p' .agents/prompts/phase-06/step-5.md
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1120p' context/build-plan.md
+sed -n '1,260p' context/project-overview.md
+sed -n '261,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,260p' context/ui-rules.md
+sed -n '261,620p' context/ui-rules.md
+sed -n '261,900p' context/progress-tracker.md
+sed -n '901,1700p' context/progress-tracker.md
+sed -n '1701,2600p' context/progress-tracker.md
+git status --short
+sed -n '1,340p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' apps/web/components/builder/steps/styling-ui-step.tsx
+sed -n '1,220p' packages/schema/src/metadata.ts
+sed -n '1,240p' packages/schema/src/options.ts
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+rg '@launchkit/generator|app/api|createProjectZip|download|MySQL|SQLite|Mongo|Supabase|PlanetScale|node:test|node --test' apps/web/components apps/web/lib apps/web/app
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+git status --short
+git diff --stat
+git diff -- apps/web/components/builder/builder-shell.tsx apps/web/components/builder/steps/database-step.tsx apps/web/lib/builder/validation.ts
+sed -n '1,220p' context/progress-tracker.md
+```
+
+Verification:
+
+- [x] Database step renders in the wizard.
+- [x] Database selector supports `none` and `postgres`.
+- [x] Database options come from schema metadata.
+- [x] PostgreSQL recommended indicator is shown from metadata.
+- [x] Selecting PostgreSQL updates `config.database`.
+- [x] Selecting no database updates `config.database`.
+- [x] Selecting no database resets Prisma ORM to none when needed.
+- [x] Selecting no database resets PostgreSQL Docker Compose to none when needed.
+- [x] Selecting no database does not reset Auth.js credentials.
+- [x] Database validation uses schema parsing and compatibility helpers.
+- [x] Unsupported databases are not rendered.
+- [x] No ORM controls were added.
+- [x] No auth controls were added.
+- [x] No Docker controls were added.
+- [x] No generator logic was added to `apps/web`.
+- [x] No API route or download flow was implemented.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 6: Create ORM step.
+
 Phase 6 Step 4 completed: Create Styling and UI step
 
 Changes made:

From 456e9d8c0adc829342ef49a220ab424b83b25b02 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 22:57:01 +0900
Subject: [PATCH 07/15] feat: implement ORM step in website wizard with
 validation and UI integration

---
 .agents/prompts/phase-06/step-6.md            | 343 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  14 +-
 .../web/components/builder/steps/orm-step.tsx | 139 +++++++
 apps/web/lib/builder/steps.ts                 |   2 +-
 apps/web/lib/builder/validation.ts            |  18 +
 context/progress-tracker.md                   | 129 ++++++-
 memory.md                                     |  96 ++---
 7 files changed, 677 insertions(+), 64 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-6.md
 create mode 100644 apps/web/components/builder/steps/orm-step.tsx

diff --git a/.agents/prompts/phase-06/step-6.md b/.agents/prompts/phase-06/step-6.md
new file mode 100644
index 0000000..13c2ccf
--- /dev/null
+++ b/.agents/prompts/phase-06/step-6.md
@@ -0,0 +1,343 @@
+# Phase 6 Step 6: Create ORM Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 5 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 7.
+Do not implement auth, extras, preview, or download steps yet.
+Do not add unsupported ORMs.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the ORM step in the LaunchKit website wizard.
+
+Users should be able to choose:
+
+```txt
+orm: "none"
+orm: "prisma"
+```
+
+Prisma should only be available when:
+
+```txt
+database: "postgres"
+```
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/orm-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Add ORM Selector
+
+Add a selector for:
+
+```ts
+config.orm;
+```
+
+Supported values:
+
+```txt
+none
+prisma
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+ormMetadata
+```
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Selectable option rows
+
+Do not use a plain text input.
+
+### 2. PostgreSQL Dependency
+
+Prisma requires PostgreSQL.
+
+If:
+
+```txt
+config.database !== "postgres"
+```
+
+then the Prisma option should be disabled or unavailable.
+
+Recommended behavior:
+
+- Show `No ORM` as selected.
+- Show Prisma as disabled with a concise reason: `Requires PostgreSQL`.
+- Keep `config.orm` as `"none"`.
+
+Do not silently enable PostgreSQL when Prisma is selected.
+
+### 3. State Updates
+
+When the user changes the ORM option:
+
+- Update `config.orm`.
+- Preserve all other builder config values.
+
+If selecting Prisma:
+
+- Only allow it when `config.database === "postgres"`.
+- Keep `database` unchanged.
+
+If selecting none:
+
+- Set `config.orm` to `"none"`.
+- Preserve database, auth, and docker selections unless the existing validation helper requires a narrow compatibility fix.
+
+### 4. Compatibility
+
+The schema should already have this compatibility rule:
+
+```txt
+Prisma requires PostgreSQL.
+```
+
+Use schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to validate compatibility if the builder shell already supports compatibility issue display.
+
+Do not duplicate compatibility rules manually except for UI affordances such as disabling the Prisma option when PostgreSQL is not selected.
+
+### 5. Do Not Implement Later Steps
+
+Do not add controls for:
+
+```txt
+auth
+docker
+preview
+download
+```
+
+Those belong to later Phase 6 steps.
+
+### 6. Navigation Behavior
+
+The user should be able to move Back and Next when:
+
+```txt
+orm: "none"
+```
+
+or:
+
+```txt
+database: "postgres"
+orm: "prisma"
+```
+
+If the current config somehow has:
+
+```txt
+database: "none"
+orm: "prisma"
+```
+
+show a concise error and prevent moving forward.
+
+### 7. Visual Direction
+
+Keep the UI practical and compact.
+
+Recommended presentation:
+
+- Two selectable rows: "No ORM" and "Prisma".
+- Short descriptions from schema metadata.
+- Recommended indicator for Prisma if metadata marks it recommended.
+- Disabled state for Prisma when PostgreSQL is not selected.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+RadioGroup
+Badge
+Button
+Separator
+```
+
+Do not nest cards inside cards.
+
+### 8. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and updates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- ORM step renders `none` and `prisma` options.
+- Prisma option is disabled when database is `none`.
+- Prisma option is enabled when database is `postgres`.
+- Selecting Prisma updates `config.orm` only when PostgreSQL is selected.
+- Selecting no ORM updates `config.orm`.
+- Unsupported ORMs are not rendered.
+- Invalid config with Prisma and no PostgreSQL prevents moving forward.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 6 completed: Create ORM step
+
+Changes made:
+- Added ORM step UI.
+- Added ORM selector for none and Prisma.
+- Used @launchkit/schema metadata where available.
+- Connected ORM selection to shared builder config state.
+- Disabled Prisma unless PostgreSQL is selected.
+- Confirmed unsupported ORMs are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/orm-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- apps/web/lib/builder/validation.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 7: Create auth step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- ORM step renders in the wizard.
+- ORM selector supports `none` and `prisma`.
+- Prisma is disabled or unavailable when PostgreSQL is not selected.
+- Prisma can be selected when PostgreSQL is selected.
+- Selecting an ORM option updates builder config state.
+- Unsupported ORMs are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 450be58..7ac7652 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 
 import { DatabaseStep } from "@/components/builder/steps/database-step";
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
+import { OrmStep } from "@/components/builder/steps/orm-step";
 import { ProjectStep } from "@/components/builder/steps/project-step";
 import { StylingUiStep } from "@/components/builder/steps/styling-ui-step";
 import {
@@ -15,6 +16,7 @@ import { builderSteps } from "@/lib/builder/steps";
 import {
   validateDatabaseStep,
   validateFrameworkStep,
+  validateOrmStep,
   validateProjectStep,
   validateStylingUiStep,
 } from "@/lib/builder/validation";
@@ -33,15 +35,18 @@ export function BuilderShell() {
   const frameworkStepValidation = validateFrameworkStep(builderState.config);
   const stylingUiStepValidation = validateStylingUiStep(builderState.config);
   const databaseStepValidation = validateDatabaseStep(builderState.config);
+  const ormStepValidation = validateOrmStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
   const isFrameworkStep = currentStep.id === "framework";
   const isStylingUiStep = currentStep.id === "styling-ui";
   const isDatabaseStep = currentStep.id === "database";
+  const isOrmStep = currentStep.id === "orm";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
     (isFrameworkStep && !frameworkStepValidation.isValid) ||
     (isStylingUiStep && !stylingUiStepValidation.isValid) ||
-    (isDatabaseStep && !databaseStepValidation.isValid);
+    (isDatabaseStep && !databaseStepValidation.isValid) ||
+    (isOrmStep && !ormStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -130,6 +135,13 @@ export function BuilderShell() {
                     onConfigChange={updateConfig}
                   />
                 ) : null}
+                {isOrmStep ? (
+                  <OrmStep
+                    config={builderState.config}
+                    validation={ormStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/steps/orm-step.tsx b/apps/web/components/builder/steps/orm-step.tsx
new file mode 100644
index 0000000..c58ab8e
--- /dev/null
+++ b/apps/web/components/builder/steps/orm-step.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import {
+  ormMetadata,
+  type LaunchKitConfig,
+  type OptionMetadata,
+  type OrmOption,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { OrmStepValidation } from "@/lib/builder/validation";
+
+type OrmStepProps = {
+  config: LaunchKitConfig;
+  validation: OrmStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+function getOrmOptionLabel(option: OptionMetadata<OrmOption>): string {
+  if (option.value === "none") {
+    return "No ORM";
+  }
+
+  return option.label;
+}
+
+export function OrmStep({
+  config,
+  validation,
+  onConfigChange,
+}: OrmStepProps) {
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+  const hasPostgres = config.database === "postgres";
+  const selectedOrm: OrmOption = hasPostgres ? config.orm : "none";
+
+  function updateOrm(orm: OrmOption) {
+    if (orm === "prisma" && !hasPostgres) {
+      return;
+    }
+
+    onConfigChange({ orm });
+  }
+
+  return (
+    <div className="space-y-5">
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">ORM</legend>
+        <div className="grid gap-3" role="radiogroup">
+          {ormMetadata.map((option) => {
+            const isPrisma = option.value === "prisma";
+            const isDisabled = isPrisma && !hasPostgres;
+            const isSelected = selectedOrm === option.value;
+
+            return (
+              <label
+                key={option.value}
+                aria-disabled={isDisabled ? "true" : undefined}
+                onClick={(event) => {
+                  if (isDisabled) {
+                    event.preventDefault();
+                    return;
+                  }
+
+                  updateOrm(option.value);
+                }}
+                className={[
+                  "flex flex-col gap-2 rounded-md border p-4 transition-colors",
+                  isDisabled
+                    ? "cursor-not-allowed border-border bg-muted text-muted-foreground opacity-70"
+                    : "cursor-pointer",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground",
+                  !isSelected && !isDisabled ? "hover:bg-muted" : "",
+                ].join(" ")}
+              >
+                <span className="flex items-start justify-between gap-3">
+                  <span className="text-sm font-semibold">
+                    {getOrmOptionLabel(option)}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2">
+                    {option.recommended ? (
+                      <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                        Recommended
+                      </span>
+                    ) : null}
+                    <span
+                      className={[
+                        "grid size-4 place-items-center rounded-full border",
+                        isSelected
+                          ? "border-primary bg-primary"
+                          : "border-border bg-background",
+                      ].join(" ")}
+                      aria-hidden="true"
+                    >
+                      {isSelected ? (
+                        <span className="size-1.5 rounded-full bg-primary-foreground" />
+                      ) : null}
+                    </span>
+                  </span>
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                {isDisabled ? (
+                  <span className="text-sm font-medium text-muted-foreground">
+                    Requires PostgreSQL
+                  </span>
+                ) : null}
+                <input
+                  type="radio"
+                  name="orm"
+                  value={option.value}
+                  checked={isSelected}
+                  disabled={isDisabled}
+                  onChange={() => updateOrm(option.value)}
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+
+      <p className="text-sm text-muted-foreground">
+        Prisma is available after PostgreSQL is selected in the Database step.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/steps.ts b/apps/web/lib/builder/steps.ts
index f921cbc..78f3366 100644
--- a/apps/web/lib/builder/steps.ts
+++ b/apps/web/lib/builder/steps.ts
@@ -45,7 +45,7 @@ export const builderSteps = [
     id: "orm",
     label: "ORM",
     shortLabel: "ORM",
-    placeholder: "ORM step coming next.",
+    placeholder: "Choose ORM setup.",
   },
   {
     id: "auth",
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index ca5315f..d569790 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -29,6 +29,11 @@ export type DatabaseStepValidation = {
   errors: Pick<ValidationErrors, "database" | "orm" | "docker">;
 };
 
+export type OrmStepValidation = {
+  isValid: boolean;
+  errors: Pick<ValidationErrors, "orm" | "database">;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
@@ -136,3 +141,16 @@ export function validateDatabaseStep(
     errors,
   };
 }
+
+export function validateOrmStep(config: LaunchKitConfig): OrmStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    orm: validation.errors.orm,
+    database: validation.errors.database,
+  };
+
+  return {
+    isValid: !errors.orm && !errors.database,
+    errors,
+  };
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 647353b..a24e275 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Database step is complete; ORM step is next
+Primary focus: Phase 6 ORM step is complete; Auth step is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Database step is complete; ORM step is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 5 added the Database step with PostgreSQL selection and dependent resets; ORM step is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 6 added the ORM step with Prisma selection gated by PostgreSQL; Auth step is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,131 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 6 completed: Create ORM step
+
+Changes made:
+
+- Added ORM step UI to the website wizard.
+- Added an ORM selector for `orm: "none"` and `orm: "prisma"`.
+- Used `@launchkit/schema` `ormMetadata` for ORM option labels, descriptions, and the Prisma recommended indicator.
+- Disabled the Prisma option unless `database: "postgres"` is selected.
+- Shows the disabled reason `Requires PostgreSQL` when Prisma is unavailable.
+- Shows `No ORM` as the effective selection when PostgreSQL is not selected.
+- Connected ORM selection to shared builder config state.
+- Preserved all other builder config values when changing ORM selection.
+- Guarded Prisma state updates so Prisma cannot be selected without PostgreSQL.
+- Added ORM-step validation using the existing schema parsing and compatibility helper path.
+- Gated Next navigation on the ORM step when an invalid `database: "none"` plus `orm: "prisma"` config is present.
+- Confirmed unsupported ORMs are not exposed.
+- Confirmed no auth, Docker, preview, download, API route, generator logic, or CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/orm-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,240p' context/progress-tracker.md
+sed -n '1,260p' .agents/prompts/phase-06/step-6.md
+rg --files
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '1,280p' context/project-overview.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+sed -n '1,360p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,280p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' apps/web/components/builder/steps/database-step.tsx
+sed -n '1,280p' apps/web/components/builder/steps/styling-ui-step.tsx
+sed -n '1,240p' apps/web/lib/builder/builder-state.ts
+sed -n '1,220p' apps/web/lib/builder/steps.ts
+sed -n '1,340p' packages/schema/src/metadata.ts
+sed -n '1,320p' packages/schema/src/compatibility.ts
+sed -n '1,260p' apps/web/components/builder/wizard-step-panel.tsx
+sed -n '1,260p' apps/web/components/builder/steps/framework-step.tsx
+sed -n '1,260p' apps/web/components/builder/steps/project-step.tsx
+cat apps/web/package.json
+git status --short
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+rg '@launchkit/generator|app/api|createProjectZip|download|Drizzle|typeorm|sequelize|SQLite|MySQL|Mongo|Supabase|PlanetScale|node:test|node --test' apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build
+npm run build
+git diff --check
+git diff -- apps/web/components/builder/builder-shell.tsx apps/web/components/builder/steps/orm-step.tsx apps/web/lib/builder/steps.ts apps/web/lib/builder/validation.ts
+git diff --stat
+git status --short
+sed -n '1,220p' context/progress-tracker.md
+```
+
+Verification:
+
+- [x] ORM step renders in the wizard.
+- [x] ORM selector supports `none` and `prisma`.
+- [x] ORM options come from schema metadata.
+- [x] Prisma recommended indicator is shown from metadata.
+- [x] Prisma is disabled when `database !== "postgres"`.
+- [x] Prisma disabled state shows `Requires PostgreSQL`.
+- [x] No ORM is shown as selected when PostgreSQL is not selected.
+- [x] Selecting Prisma updates `config.orm` only when PostgreSQL is selected.
+- [x] Selecting Prisma does not modify `config.database`.
+- [x] Selecting no ORM sets `config.orm` to `"none"`.
+- [x] ORM updates preserve database, auth, Docker, and other config values.
+- [x] Invalid Prisma without PostgreSQL uses schema compatibility validation and prevents Next on the ORM step.
+- [x] Unsupported ORMs are not rendered.
+- [x] No auth controls were added.
+- [x] No Docker controls were added.
+- [x] No preview or download flow was implemented.
+- [x] No API route was added.
+- [x] No generator logic was added to `apps/web`.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed after rerunning outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` failed in the sandbox for the same Turbopack process/port restriction. Rerunning with elevated permissions passed across all workspaces.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 7: Create Auth step.
+
 Phase 6 Step 5 completed: Create database step
 
 Changes made:
diff --git a/memory.md b/memory.md
index 03fc0a3..8b8b01a 100644
--- a/memory.md
+++ b/memory.md
@@ -1,79 +1,55 @@
-# Memory - LaunchKit Phase 6 Step 3 Complete
+# Memory - LaunchKit Phase 6 Website MVP
 
-Last updated: 2026-07-02 17:10 JST
+Last updated: 2026-07-02 22:42 JST
 
 ## What was built
 
-- Completed Phase 6 Step 1: website wizard shell.
-  - Added the LaunchKit builder home page in `apps/web/app/page.tsx`.
-  - Added builder shell, wizard progress, navigation, and reusable step panel components under `apps/web/components/builder/`.
-  - Added shared builder step definitions and initial builder state under `apps/web/lib/builder/`.
-  - Initialized builder config from `@launchkit/schema` `defaultLaunchKitConfig`.
-  - Added `@launchkit/schema` as an explicit `apps/web` dependency.
-- Completed Phase 6 Step 2: Project step.
-  - Added `apps/web/components/builder/steps/project-step.tsx`.
-  - Added project name input connected to shared builder config state.
-  - Added project name validation through `@launchkit/schema` `LaunchKitConfigSchema`.
-  - Added inline validation feedback and Next-button gating for invalid project names.
-  - Added package manager selector using `@launchkit/schema` package manager metadata for `npm` and `pnpm`.
-  - Added builder config patch/update helpers and `apps/web/lib/builder/validation.ts`.
-- Completed Phase 6 Step 3: Framework step.
-  - Added `apps/web/components/builder/steps/framework-step.tsx`.
-  - Displayed fixed MVP generated-project foundation: Next.js, TypeScript, App Router, and no `src/` project structure.
-  - Used `@launchkit/schema` metadata for framework, language, router, and project structure labels/descriptions.
-  - Added framework-step validation through the existing schema-backed builder validation path.
-  - Gated Next only if the fixed framework config is somehow invalid.
-- Updated `context/progress-tracker.md`: Phase 6 is in progress and Phase 6 Step 4 is next.
+- Completed Phase 6 Step 4: Styling and UI step.
+  - Added `apps/web/components/builder/steps/styling-ui-step.tsx`.
+  - Wired it into `apps/web/components/builder/builder-shell.tsx`.
+  - Extended `apps/web/lib/builder/validation.ts` to use schema compatibility checks.
+  - The step shows fixed Tailwind CSS and lets users choose `ui: "none"` or `ui: "shadcn"` from schema metadata.
+- Completed Phase 6 Step 5: Database step.
+  - Added `apps/web/components/builder/steps/database-step.tsx`.
+  - Wired it into `apps/web/components/builder/builder-shell.tsx`.
+  - Extended `apps/web/lib/builder/validation.ts` with database-step validation.
+  - The step lets users choose `database: "none"` or `database: "postgres"` from schema metadata.
+  - Switching database to `none` resets `orm: "prisma"` to `none` and `docker: "postgres"` to `none`, while leaving auth unchanged.
+- Updated `context/progress-tracker.md` after each completed step.
 
 ## Decisions made
 
-- Keep Phase 6 implementation step-scoped. Steps 1-3 did not implement styling/UI, database, ORM, auth, extras, preview, download, API route, zip behavior, or CLI functionality.
-- Keep all UI validation and option display tied to `@launchkit/schema` exports where available.
-- Keep generated-project foundation fixed for MVP: `framework: "next"`, `language: "typescript"`, `router: "app"`, `projectStructure: "no-src"`.
-- Do not expose unsupported framework/language/router/structure choices in the website.
-- Keep generator logic out of `apps/web`; no `@launchkit/generator` imports were added during these website UI steps.
-- Do not add a frontend component test stack yet because `apps/web` has no existing frontend test pattern or app test script.
+- Keep website wizard steps thin and schema-driven. UI uses `@launchkit/schema` metadata and compatibility helpers rather than duplicating option lists or compatibility rules.
+- Keep generator/API/download/CLI work out of current Phase 6 step work until the relevant later prompts.
+- Do not add a frontend component test stack yet because `apps/web` has no existing frontend/component test pattern.
+- Do not start or leave a dev server running; the developer will run it locally.
 
 ## Problems solved
 
-- Builder state now has a narrow patch/update helper so steps can update shared config while preserving the rest of the selected stack.
-- Project-step navigation is blocked when schema validation rejects the project name.
-- Framework-step navigation validates the fixed schema fields without introducing interactive unsupported choices.
-- The known sandbox build issue remains: Next/Turbopack fails inside the sandbox because it cannot create/bind a worker process. Rerunning `npm run build` and app build commands with elevated permissions passes.
+- The builder validation now maps schema compatibility issues to every field in each issue path. This lets a database-related compatibility issue be shown on the Database step even if the schema issue also involves ORM or Docker.
+- Repeated Next/Turbopack builds fail inside the sandbox because the worker process cannot bind a port. Elevated `npm run build -w apps/web` and elevated workspace `npm run build` pass.
 
 ## Current state
 
-- `context/progress-tracker.md` says:
-  - Current phase: Phase 6 in progress.
-  - Primary focus: Phase 6 styling and UI step is ready to begin.
-  - Phase 6 Step 3 is complete.
-- Implemented website wizard steps:
-  - Project step: project name and package manager.
-  - Framework step: fixed Next.js/TypeScript/App Router/no-src foundation.
-- Remaining Phase 6 wizard steps are still placeholders:
-  - Styling and UI
-  - Database
-  - ORM
-  - Auth
-  - Extras
-  - Preview
-  - Download
-- Verification recorded in the tracker:
-  - `npm run typecheck -w apps/web` passed.
-  - `npm run lint -w apps/web` passed.
-  - `npm run typecheck` passed.
-  - `npm run test` passed: generator 111 tests, schema 73 tests, templates 51 tests.
-  - `npm run lint` passed.
-  - `git diff --check` passed.
-  - `npm run build -w apps/web` and `npm run build` pass when rerun outside the sandbox after the known Turbopack sandbox failure.
-- No local dev server was left running; the user said they will run it themselves.
-- `git status --short` was clean at the time of this memory save.
+- Phase 6 is in progress.
+- Phase 6 Step 5 is complete.
+- The tracker says the next step is Phase 6 Step 6: Create ORM step.
+- Latest verified commands passed:
+  - `npm run typecheck -w apps/web`
+  - `npm run lint -w apps/web`
+  - `npm run build -w apps/web` after elevated rerun
+  - `npm run typecheck`
+  - `npm run test`
+  - `npm run lint`
+  - `npm run build` after elevated rerun
+  - `git diff --check`
+- Current working tree note: `.agents/prompts/phase-06/step-6.md` is untracked and likely the next prompt to implement.
+- No local dev server is running.
 
 ## Next session starts with
 
-Run `/remember restore`, then read `context/progress-tracker.md` and the next Phase 6 prompt. Continue with Phase 6 Step 4: create the Styling and UI step. Keep the implementation inside `apps/web`, use `@launchkit/schema` metadata/options, and do not add generator/API/download/CLI behavior.
+Read `context/progress-tracker.md`, then implement `.agents/prompts/phase-06/step-6.md` for the ORM step. Stay inside the prompt scope: do not implement auth, extras, preview, download, API route, generator integration, or CLI work unless the prompt explicitly asks for it.
 
 ## Open questions
 
-- `.agents/prompts/phase-06/step-4.md` was not present at save time; only steps 1 through 3 existed under `.agents/prompts/phase-06/`. Confirm or add the exact Step 4 prompt before implementing.
-- Later Phase 6 still needs a decision on whether preview is computed directly from schema/feature metadata or via a lightweight generator preview path while preserving the architecture boundary.
+- No new open questions from this session.

From e942498f99f322474c66f7c186c46d853e7f2dbd Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 23:08:09 +0900
Subject: [PATCH 08/15] feat: add Auth step to website wizard with validation
 and UI integration

---
 .agents/prompts/phase-06/step-7.md            | 339 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  14 +-
 .../components/builder/steps/auth-step.tsx    | 117 ++++++
 apps/web/lib/builder/steps.ts                 |   2 +-
 apps/web/lib/builder/validation.ts            |   9 +
 context/progress-tracker.md                   | 127 ++++++-
 6 files changed, 604 insertions(+), 4 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-7.md
 create mode 100644 apps/web/components/builder/steps/auth-step.tsx

diff --git a/.agents/prompts/phase-06/step-7.md b/.agents/prompts/phase-06/step-7.md
new file mode 100644
index 0000000..9ccb934
--- /dev/null
+++ b/.agents/prompts/phase-06/step-7.md
@@ -0,0 +1,339 @@
+# Phase 6 Step 7: Create Auth Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 6 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 8.
+Do not implement extras, preview, or download steps yet.
+Do not add unsupported auth providers.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Auth step in the LaunchKit website wizard.
+
+Users should be able to choose:
+
+```txt
+auth: "none"
+auth: "authjs-credentials"
+```
+
+The Auth.js credentials option is a scaffold only. The UI should not imply production-ready authentication.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/auth-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Add Auth Selector
+
+Add a selector for:
+
+```ts
+config.auth;
+```
+
+Supported values:
+
+```txt
+none
+authjs-credentials
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+authMetadata
+```
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Selectable option rows
+
+Do not use a plain text input.
+
+### 2. Auth.js Credentials Messaging
+
+The Auth.js credentials option should clearly communicate that it is a scaffold.
+
+It should not imply:
+
+- Production-ready auth.
+- Complete user management.
+- Secure password verification out of the box.
+- A complete sign-in UI.
+
+Use concise wording such as:
+
+```txt
+Adds Auth.js credentials structure that you connect to your user model and password verification.
+```
+
+Do not over-explain implementation details in the UI.
+
+### 3. State Updates
+
+When the user changes the auth option:
+
+- Update `config.auth`.
+- Preserve all other builder config values.
+
+Auth.js credentials may work without a database, so do not force PostgreSQL on when auth is selected.
+
+Do not reset database or ORM when auth changes unless the current schema validation requires a narrow compatibility fix.
+
+### 4. Compatibility
+
+The schema should already represent these rules:
+
+```txt
+Auth.js credentials scaffold may work without a database.
+Auth.js credentials scaffold with Prisma requires PostgreSQL and Prisma.
+Prisma requires PostgreSQL.
+```
+
+Verify the UI allows:
+
+```txt
+auth: "authjs-credentials", database: "none", orm: "none"
+auth: "authjs-credentials", database: "postgres", orm: "none"
+auth: "authjs-credentials", database: "postgres", orm: "prisma"
+```
+
+Use schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to validate compatibility if the builder shell already supports compatibility issue display.
+
+Do not duplicate compatibility rules manually in UI code unless needed for a small UI affordance.
+
+### 5. Do Not Implement Later Steps
+
+Do not add controls for:
+
+```txt
+docker
+preview
+download
+```
+
+Those belong to later Phase 6 steps.
+
+### 6. Navigation Behavior
+
+The user should be able to move Back and Next when:
+
+```txt
+auth: "none"
+```
+
+or:
+
+```txt
+auth: "authjs-credentials"
+```
+
+as long as the full config is schema-compatible.
+
+If the current config somehow violates compatibility, show a concise error and prevent moving forward.
+
+### 7. Visual Direction
+
+Keep the UI practical and compact.
+
+Recommended presentation:
+
+- Two selectable rows: "No auth" and "Auth.js credentials scaffold".
+- Short descriptions from schema metadata.
+- A small scaffold warning for Auth.js credentials.
+- No marketing-style auth provider grid.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+RadioGroup
+Badge
+Button
+Separator
+Alert
+```
+
+Do not nest cards inside cards.
+
+### 8. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and updates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Auth step renders `none` and `authjs-credentials` options.
+- Selecting Auth.js credentials updates `config.auth`.
+- Selecting no auth updates `config.auth`.
+- Auth.js credentials can be selected without PostgreSQL.
+- Auth.js credentials can be selected with PostgreSQL.
+- Auth.js credentials can be selected with PostgreSQL and Prisma.
+- Unsupported auth providers are not rendered.
+- Auth.js option includes scaffold messaging.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 7 completed: Create auth step
+
+Changes made:
+- Added Auth step UI.
+- Added auth selector for none and Auth.js credentials scaffold.
+- Used @launchkit/schema metadata where available.
+- Connected auth selection to shared builder config state.
+- Confirmed Auth.js credentials can be selected without forcing a database.
+- Added concise scaffold messaging.
+- Confirmed unsupported auth providers are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/auth-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- apps/web/lib/builder/validation.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 8: Create extras step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Auth step renders in the wizard.
+- Auth selector supports `none` and `authjs-credentials`.
+- Selecting an auth option updates builder config state.
+- Auth.js credentials can be selected without PostgreSQL.
+- Auth.js credentials does not force database or ORM changes.
+- Auth.js credentials option has clear scaffold messaging.
+- Unsupported auth providers are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 7ac7652..1db12bf 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from "react";
 
+import { AuthStep } from "@/components/builder/steps/auth-step";
 import { DatabaseStep } from "@/components/builder/steps/database-step";
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { OrmStep } from "@/components/builder/steps/orm-step";
@@ -14,6 +15,7 @@ import {
 } from "@/lib/builder/builder-state";
 import { builderSteps } from "@/lib/builder/steps";
 import {
+  validateAuthStep,
   validateDatabaseStep,
   validateFrameworkStep,
   validateOrmStep,
@@ -36,17 +38,20 @@ export function BuilderShell() {
   const stylingUiStepValidation = validateStylingUiStep(builderState.config);
   const databaseStepValidation = validateDatabaseStep(builderState.config);
   const ormStepValidation = validateOrmStep(builderState.config);
+  const authStepValidation = validateAuthStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
   const isFrameworkStep = currentStep.id === "framework";
   const isStylingUiStep = currentStep.id === "styling-ui";
   const isDatabaseStep = currentStep.id === "database";
   const isOrmStep = currentStep.id === "orm";
+  const isAuthStep = currentStep.id === "auth";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
     (isFrameworkStep && !frameworkStepValidation.isValid) ||
     (isStylingUiStep && !stylingUiStepValidation.isValid) ||
     (isDatabaseStep && !databaseStepValidation.isValid) ||
-    (isOrmStep && !ormStepValidation.isValid);
+    (isOrmStep && !ormStepValidation.isValid) ||
+    (isAuthStep && !authStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -142,6 +147,13 @@ export function BuilderShell() {
                     onConfigChange={updateConfig}
                   />
                 ) : null}
+                {isAuthStep ? (
+                  <AuthStep
+                    config={builderState.config}
+                    validation={authStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/steps/auth-step.tsx b/apps/web/components/builder/steps/auth-step.tsx
new file mode 100644
index 0000000..15d65fb
--- /dev/null
+++ b/apps/web/components/builder/steps/auth-step.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import {
+  authMetadata,
+  type AuthOption,
+  type LaunchKitConfig,
+  type OptionMetadata,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { AuthStepValidation } from "@/lib/builder/validation";
+
+type AuthStepProps = {
+  config: LaunchKitConfig;
+  validation: AuthStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+function getAuthOptionLabel(option: OptionMetadata<AuthOption>): string {
+  if (option.value === "none") {
+    return "No auth";
+  }
+
+  return option.label;
+}
+
+export function AuthStep({
+  config,
+  validation,
+  onConfigChange,
+}: AuthStepProps) {
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+
+  function updateAuth(auth: AuthOption) {
+    onConfigChange({ auth });
+  }
+
+  return (
+    <div className="space-y-5">
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">Auth</legend>
+        <div className="grid gap-3" role="radiogroup">
+          {authMetadata.map((option) => {
+            const isSelected = config.auth === option.value;
+            const isAuthJsCredentials = option.value === "authjs-credentials";
+            const isRecommended =
+              "recommended" in option && option.recommended;
+
+            return (
+              <label
+                key={option.value}
+                className={[
+                  "flex cursor-pointer flex-col gap-2 rounded-md border p-4 transition-colors",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground hover:bg-muted",
+                ].join(" ")}
+              >
+                <span className="flex items-start justify-between gap-3">
+                  <span className="text-sm font-semibold">
+                    {getAuthOptionLabel(option)}
+                  </span>
+                  <span className="flex shrink-0 items-center gap-2">
+                    {isRecommended ? (
+                      <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                        Recommended
+                      </span>
+                    ) : null}
+                    <span
+                      className={[
+                        "grid size-4 place-items-center rounded-full border",
+                        isSelected
+                          ? "border-primary bg-primary"
+                          : "border-border bg-background",
+                      ].join(" ")}
+                      aria-hidden="true"
+                    >
+                      {isSelected ? (
+                        <span className="size-1.5 rounded-full bg-primary-foreground" />
+                      ) : null}
+                    </span>
+                  </span>
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                {isAuthJsCredentials ? (
+                  <span className="rounded-md border border-border bg-muted px-3 py-2 text-sm text-muted-foreground">
+                    Scaffold only: connect this to your user model and password
+                    verification.
+                  </span>
+                ) : null}
+                <input
+                  type="radio"
+                  name="auth"
+                  value={option.value}
+                  checked={isSelected}
+                  onChange={() => updateAuth(option.value)}
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/steps.ts b/apps/web/lib/builder/steps.ts
index 78f3366..1c85280 100644
--- a/apps/web/lib/builder/steps.ts
+++ b/apps/web/lib/builder/steps.ts
@@ -51,7 +51,7 @@ export const builderSteps = [
     id: "auth",
     label: "Auth",
     shortLabel: "Auth",
-    placeholder: "Auth step coming next.",
+    placeholder: "Choose auth scaffold.",
   },
   {
     id: "extras",
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index d569790..a04b377 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -34,6 +34,11 @@ export type OrmStepValidation = {
   errors: Pick<ValidationErrors, "orm" | "database">;
 };
 
+export type AuthStepValidation = {
+  isValid: boolean;
+  errors: Partial<Record<keyof LaunchKitConfig, string>>;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
@@ -154,3 +159,7 @@ export function validateOrmStep(config: LaunchKitConfig): OrmStepValidation {
     errors,
   };
 }
+
+export function validateAuthStep(config: LaunchKitConfig): AuthStepValidation {
+  return validateBuilderConfig(config);
+}
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index a24e275..cb0fe80 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 ORM step is complete; Auth step is next
+Primary focus: Phase 6 Auth step is complete; Extras step is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 ORM step is complete; Auth step is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 6 added the ORM step with Prisma selection gated by PostgreSQL; Auth step is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 7 added the Auth step with Auth.js credentials scaffold selection; Extras step is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,129 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 7 completed: Create Auth step
+
+Changes made:
+
+- Added Auth step UI to the website wizard.
+- Added an auth selector for `auth: "none"` and `auth: "authjs-credentials"`.
+- Used `@launchkit/schema` `authMetadata` for auth option labels and descriptions.
+- Displayed `No auth` and `Auth.js credentials scaffold` as the two supported auth choices.
+- Added concise scaffold messaging for Auth.js credentials:
+  - communicates that it is scaffold only;
+  - tells users to connect it to their user model and password verification;
+  - avoids implying production-ready auth, complete user management, secure password verification, or a sign-in UI.
+- Connected auth selection to shared builder config state.
+- Auth changes preserve database, ORM, Docker, and all other builder config values.
+- Auth.js credentials can be selected without PostgreSQL.
+- Auth.js credentials can be selected with PostgreSQL and no ORM.
+- Auth.js credentials can be selected with PostgreSQL and Prisma.
+- Added Auth-step validation using the existing schema parsing and compatibility helper path.
+- Gated Next navigation on the Auth step when the full config is not schema-compatible.
+- Confirmed unsupported auth providers are not exposed.
+- Confirmed no Docker controls, preview, download, API route, generator logic, or CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/auth-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,260p' context/progress-tracker.md
+sed -n '1,280p' .agents/prompts/phase-06/step-7.md
+rg --files context apps/web packages/schema/src .agents/prompts/phase-06
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '1,280p' context/project-overview.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+sed -n '1,360p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/components/builder/steps/orm-step.tsx
+sed -n '1,260p' apps/web/lib/builder/validation.ts
+sed -n '1,240p' apps/web/lib/builder/steps.ts
+sed -n '1,320p' packages/schema/src/metadata.ts
+sed -n '1,320p' packages/schema/src/compatibility.ts
+sed -n '1,280p' packages/schema/src/config.ts
+git status --short
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+rg '@launchkit/generator|app/api|createProjectZip|download|Clerk|Supabase Auth|NextAuth provider|OAuth|docker|preview|node:test|node --test' apps/web
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+git diff --check
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build -w apps/web
+npm run build
+git diff -- apps/web/components/builder/builder-shell.tsx apps/web/components/builder/steps/auth-step.tsx apps/web/lib/builder/steps.ts apps/web/lib/builder/validation.ts
+git status --short
+git diff --stat
+```
+
+Verification:
+
+- [x] Auth step renders in the wizard.
+- [x] Auth selector supports `none` and `authjs-credentials`.
+- [x] Auth options come from schema metadata.
+- [x] Selecting Auth.js credentials updates `config.auth`.
+- [x] Selecting no auth updates `config.auth`.
+- [x] Auth updates preserve database, ORM, Docker, and other config values.
+- [x] Auth.js credentials can be selected without PostgreSQL.
+- [x] Auth.js credentials can be selected with PostgreSQL and no ORM.
+- [x] Auth.js credentials can be selected with PostgreSQL and Prisma.
+- [x] Auth.js credentials option includes concise scaffold messaging.
+- [x] Auth-step validation uses schema parsing and compatibility helpers.
+- [x] Incompatible full config state prevents Next on the Auth step.
+- [x] Unsupported auth providers are not rendered.
+- [x] No Docker controls were added.
+- [x] No preview or download flow was implemented.
+- [x] No API route was added.
+- [x] No generator logic was added to `apps/web`.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` initially failed because `authMetadata` has no `recommended` field in the current schema metadata. The Auth step was updated to guard the optional recommended badge. Rerunning passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` passed across all workspaces when run with elevated permissions for the known Turbopack process/port restriction.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 8: Create Extras step.
+
 Phase 6 Step 6 completed: Create ORM step
 
 Changes made:

From ef6714872c90d5778fbd589dcb5164ca0496d11d Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 23:39:12 +0900
Subject: [PATCH 09/15] feat: Implement Phase 6 Steps 8 and 9 - Extras and
 Preview Steps

- Added Extras step UI to manage Docker setup for PostgreSQL development.
- Implemented Docker selector with metadata-driven options and validation.
- Created Preview step to display selected stack summary, dependencies, scripts, environment variables, and generated file tree.
- Introduced new components for displaying dependencies, environment variables, scripts, and file tree in the Preview step.
- Integrated builder preview logic to derive dependencies and scripts from the generation plan.
- Updated progress tracker with completion notes for Steps 8 and 9.
---
 .agents/prompts/phase-06/step-8.md            | 345 +++++++++++++++++
 .agents/prompts/phase-06/step-9.md            | 359 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |  25 +-
 .../builder/preview/dependency-list.tsx       |  41 ++
 .../builder/preview/env-var-list.tsx          |  43 +++
 .../builder/preview/file-tree-preview.tsx     |  51 +++
 .../builder/preview/script-list.tsx           |  27 ++
 .../builder/preview/stack-summary.tsx         |  29 ++
 .../components/builder/steps/extras-step.tsx  | 133 +++++++
 .../components/builder/steps/preview-step.tsx |  57 +++
 apps/web/lib/builder/preview.ts               | 159 ++++++++
 apps/web/lib/builder/steps.ts                 |   4 +-
 apps/web/lib/builder/validation.ts            |  31 ++
 apps/web/package.json                         |   1 +
 context/progress-tracker.md                   | 286 +++++++++++++-
 memory.md                                     |  63 +--
 package-lock.json                             |   1 +
 17 files changed, 1620 insertions(+), 35 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-8.md
 create mode 100644 .agents/prompts/phase-06/step-9.md
 create mode 100644 apps/web/components/builder/preview/dependency-list.tsx
 create mode 100644 apps/web/components/builder/preview/env-var-list.tsx
 create mode 100644 apps/web/components/builder/preview/file-tree-preview.tsx
 create mode 100644 apps/web/components/builder/preview/script-list.tsx
 create mode 100644 apps/web/components/builder/preview/stack-summary.tsx
 create mode 100644 apps/web/components/builder/steps/extras-step.tsx
 create mode 100644 apps/web/components/builder/steps/preview-step.tsx
 create mode 100644 apps/web/lib/builder/preview.ts

diff --git a/.agents/prompts/phase-06/step-8.md b/.agents/prompts/phase-06/step-8.md
new file mode 100644
index 0000000..4bf4023
--- /dev/null
+++ b/.agents/prompts/phase-06/step-8.md
@@ -0,0 +1,345 @@
+# Phase 6 Step 8: Create Extras Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 7 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 9.
+Do not implement preview or download steps yet.
+Do not implement the API generate route yet.
+Do not implement zip download behavior yet.
+Do not add unsupported extras.
+Do not add CLI functionality.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Extras step in the LaunchKit website wizard.
+
+For the MVP, Extras controls the optional Docker Compose setup for local PostgreSQL development:
+
+```txt
+docker: "none"
+docker: "postgres"
+```
+
+Docker PostgreSQL should only be available when:
+
+```txt
+database: "postgres"
+```
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/extras-step.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/steps.ts
+apps/web/lib/builder/builder-state.ts
+apps/web/lib/builder/validation.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Add Docker Selector
+
+Add a selector for:
+
+```ts
+config.docker;
+```
+
+Supported values:
+
+```txt
+none
+postgres
+```
+
+Use metadata from:
+
+```txt
+@launchkit/schema
+```
+
+where available:
+
+```txt
+dockerMetadata
+```
+
+Recommended UI:
+
+- Segmented control
+- Radio group
+- Selectable option rows
+- Toggle with clear label
+
+Do not use a plain text input.
+
+### 2. PostgreSQL Dependency
+
+Docker PostgreSQL requires PostgreSQL.
+
+If:
+
+```txt
+config.database !== "postgres"
+```
+
+then the Docker PostgreSQL option should be disabled or unavailable.
+
+Recommended behavior:
+
+- Show `No Docker setup` as selected.
+- Show Docker PostgreSQL as disabled with a concise reason: `Requires PostgreSQL`.
+- Keep `config.docker` as `"none"`.
+
+Do not silently enable PostgreSQL when Docker PostgreSQL is selected.
+
+### 3. State Updates
+
+When the user changes the Docker option:
+
+- Update `config.docker`.
+- Preserve all other builder config values.
+
+If selecting Docker PostgreSQL:
+
+- Only allow it when `config.database === "postgres"`.
+- Keep `database` unchanged.
+
+If selecting none:
+
+- Set `config.docker` to `"none"`.
+- Preserve database, ORM, auth, and UI selections.
+
+### 4. Compatibility
+
+The schema should already have this compatibility rule:
+
+```txt
+PostgreSQL Docker Compose is only available when PostgreSQL is selected.
+```
+
+Use schema helpers from:
+
+```txt
+@launchkit/schema
+```
+
+to validate compatibility if the builder shell already supports compatibility issue display.
+
+Do not duplicate compatibility rules manually except for UI affordances such as disabling Docker PostgreSQL when PostgreSQL is not selected.
+
+### 5. Do Not Implement Later Steps
+
+Do not add:
+
+```txt
+preview generation
+download generation
+API route
+zip creation
+```
+
+Those belong to later Phase 6 steps.
+
+### 6. Navigation Behavior
+
+The user should be able to move Back and Next when:
+
+```txt
+docker: "none"
+```
+
+or:
+
+```txt
+database: "postgres"
+docker: "postgres"
+```
+
+If the current config somehow has:
+
+```txt
+database: "none"
+docker: "postgres"
+```
+
+show a concise error and prevent moving forward.
+
+### 7. Visual Direction
+
+Keep the UI practical and compact.
+
+Recommended presentation:
+
+- Two selectable rows: "No Docker setup" and "PostgreSQL Docker Compose".
+- Short descriptions from schema metadata.
+- Disabled state for Docker PostgreSQL when PostgreSQL is not selected.
+- Small note that Docker Compose is for local development.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+RadioGroup
+Badge
+Button
+Separator
+Switch
+```
+
+Do not nest cards inside cards.
+
+### 8. Generator Boundary
+
+Do not call:
+
+```txt
+@launchkit/generator
+```
+
+This step only renders and updates builder state.
+
+The API route and generator integration belong to later Phase 6 steps.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Extras step renders `none` and Docker PostgreSQL options.
+- Docker PostgreSQL option is disabled when database is `none`.
+- Docker PostgreSQL option is enabled when database is `postgres`.
+- Selecting Docker PostgreSQL updates `config.docker` only when PostgreSQL is selected.
+- Selecting no Docker updates `config.docker`.
+- Unsupported extras are not rendered.
+- Invalid config with Docker PostgreSQL and no PostgreSQL prevents moving forward.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 8 completed: Create extras step
+
+Changes made:
+- Added Extras step UI.
+- Added Docker selector for none and PostgreSQL Docker Compose.
+- Used @launchkit/schema metadata where available.
+- Connected Docker selection to shared builder config state.
+- Disabled Docker PostgreSQL unless PostgreSQL is selected.
+- Confirmed unsupported extras are not exposed.
+
+Files changed:
+- apps/web/components/builder/steps/extras-step.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/steps.ts, if changed
+- apps/web/lib/builder/builder-state.ts, if changed
+- apps/web/lib/builder/validation.ts, if changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 9: Create preview step
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Extras step renders in the wizard.
+- Docker selector supports `none` and `postgres`.
+- Docker PostgreSQL is disabled or unavailable when PostgreSQL is not selected.
+- Docker PostgreSQL can be selected when PostgreSQL is selected.
+- Selecting a Docker option updates builder config state.
+- Unsupported extras are not exposed.
+- Current config remains valid according to `@launchkit/schema`.
+- No generator logic is placed in `apps/web`.
+- No API route or download flow is implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/.agents/prompts/phase-06/step-9.md b/.agents/prompts/phase-06/step-9.md
new file mode 100644
index 0000000..276276e
--- /dev/null
+++ b/.agents/prompts/phase-06/step-9.md
@@ -0,0 +1,359 @@
+# Phase 6 Step 9: Create Preview Step
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 8 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 10.
+Do not implement the API generate route yet unless the existing architecture already exposes a safe server-side preview helper.
+Do not implement zip download behavior yet.
+Do not add CLI functionality.
+Do not put generator logic directly in UI components.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the Preview step in the LaunchKit website wizard.
+
+The Preview step should help users inspect what will be generated before download.
+
+It should show:
+
+```txt
+Selected stack summary
+Dependencies
+Dev dependencies
+Scripts
+Environment variables
+Generated file tree
+```
+
+Full file content preview is optional later and should not be implemented in this step unless the existing generator already makes it trivial.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/preview-step.tsx
+apps/web/components/builder/preview/stack-summary.tsx
+apps/web/components/builder/preview/dependency-list.tsx
+apps/web/components/builder/preview/script-list.tsx
+apps/web/components/builder/preview/env-var-list.tsx
+apps/web/components/builder/preview/file-tree-preview.tsx
+apps/web/components/builder/builder-shell.tsx
+apps/web/lib/builder/preview.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Selected Stack Summary
+
+Show a compact summary of the current builder config:
+
+```txt
+Project name
+Framework
+Language
+Router
+Project structure
+Styling
+UI
+Database
+ORM
+Auth
+Docker
+Package manager
+```
+
+Use labels from `@launchkit/schema` metadata where available.
+
+Do not expose raw enum values as the primary display text if metadata labels exist.
+
+### 2. Dependencies and Dev Dependencies
+
+Show dependencies that will be included in the generated project.
+
+Preferred source:
+
+```txt
+@launchkit/generator
+```
+
+If the generator exports a safe planning helper such as:
+
+```ts
+createGenerationPlan(config);
+```
+
+or similar, use it to derive dependencies and dev dependencies.
+
+Do not duplicate package dependency logic manually in `apps/web` if generator plan data exists.
+
+If the current generator only exposes async generation, do not call it directly from a client component if it depends on server-only APIs. In that case, create a small server-safe preview helper or defer full generator integration to Step 10 and show a schema-based selected stack summary only, documenting the limitation in `progress-tracker.md`.
+
+### 3. Scripts
+
+Show generated `package.json` scripts.
+
+Examples:
+
+```txt
+dev
+build
+start
+typecheck
+db:generate
+db:push
+db:studio
+```
+
+Only show scripts that are actually contributed by the selected config.
+
+Use generator plan data if available.
+
+### 4. Environment Variables
+
+Show generated environment variables.
+
+Examples:
+
+```txt
+DATABASE_URL
+AUTH_SECRET
+```
+
+Do not display real secrets.
+
+Do not imply generated secrets are production-ready.
+
+Use generator plan data if available.
+
+### 5. Generated File Tree
+
+Show a generated file tree preview.
+
+Examples:
+
+```txt
+app/layout.tsx
+app/page.tsx
+app/globals.css
+components/ui/button.tsx
+lib/utils.ts
+lib/db.ts
+prisma/schema.prisma
+docker-compose.yml
+package.json
+.env.example
+README.md
+```
+
+Only show files that match the selected config.
+
+Do not show files for unselected optional features.
+
+No generated file tree should include:
+
+```txt
+src/
+```
+
+### 6. Compatibility and Errors
+
+Before showing the preview, validate the current config with:
+
+```txt
+@launchkit/schema
+```
+
+If there are schema or compatibility errors:
+
+- Show concise errors.
+- Disable moving to the Download step.
+- Do not attempt generation.
+
+### 7. Client/Server Boundary
+
+Do not place Node-only generator logic in client components.
+
+Acceptable approaches:
+
+- Use pure exported generator planning helpers if they are browser-safe.
+- Use a server component wrapper if the route architecture supports it.
+- Use a server action or API route only if it already exists and is in scope.
+
+Do not create the final generate/download API route in this step. That belongs to Step 10.
+
+### 8. Visual Direction
+
+Keep the preview dense, structured, and scannable.
+
+Recommended presentation:
+
+- Stack summary section.
+- Dependencies and dev dependencies in compact lists.
+- Scripts in a compact list.
+- Environment variables in a compact list.
+- File tree in a monospace block or structured tree.
+
+Do not use a marketing layout.
+Do not use a large hero.
+Do not use decorative gradient blobs/orbs.
+Do not nest cards inside cards.
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+Tabs
+Badge
+Separator
+ScrollArea
+Alert
+```
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests only if the app already has a frontend test pattern.
+
+Possible tests:
+
+- Preview step renders selected stack summary.
+- Preview step uses schema metadata labels where available.
+- Preview step shows dependencies for selected features.
+- Preview step shows env vars for PostgreSQL/Auth.js selections.
+- Preview step shows Prisma files only when Prisma is selected.
+- Preview step shows Docker files only when Docker PostgreSQL is selected.
+- Preview step does not show `src/`.
+- Invalid config prevents moving to Download.
+
+If the repo does not yet have frontend component testing configured, do not add a large new test stack in this step. Document that in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 9 completed: Create preview step
+
+Changes made:
+- Added Preview step UI.
+- Added selected stack summary.
+- Added dependencies/dev dependencies preview.
+- Added scripts preview.
+- Added environment variables preview.
+- Added generated file tree preview.
+- Added compatibility/error display for preview.
+- Confirmed preview does not implement download behavior.
+
+Files changed:
+- apps/web/components/builder/steps/preview-step.tsx
+- apps/web/components/builder/preview/stack-summary.tsx
+- apps/web/components/builder/preview/dependency-list.tsx
+- apps/web/components/builder/preview/script-list.tsx
+- apps/web/components/builder/preview/env-var-list.tsx
+- apps/web/components/builder/preview/file-tree-preview.tsx
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/lib/builder/preview.ts
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 10: Create API generate route
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Preview step renders in the wizard.
+- Preview shows selected stack summary.
+- Preview shows dependencies and dev dependencies when available.
+- Preview shows scripts when available.
+- Preview shows environment variables when available.
+- Preview shows generated file tree.
+- Preview excludes unselected optional feature files.
+- Preview does not show any `src/` path.
+- Invalid config shows concise errors and prevents moving to Download.
+- Generator logic is not placed directly in client UI components.
+- Final API generate route is not implemented yet.
+- Zip download behavior is not implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 1db12bf..1f4d58c 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -4,8 +4,10 @@ import { useMemo, useState } from "react";
 
 import { AuthStep } from "@/components/builder/steps/auth-step";
 import { DatabaseStep } from "@/components/builder/steps/database-step";
+import { ExtrasStep } from "@/components/builder/steps/extras-step";
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { OrmStep } from "@/components/builder/steps/orm-step";
+import { PreviewStep } from "@/components/builder/steps/preview-step";
 import { ProjectStep } from "@/components/builder/steps/project-step";
 import { StylingUiStep } from "@/components/builder/steps/styling-ui-step";
 import {
@@ -17,8 +19,10 @@ import { builderSteps } from "@/lib/builder/steps";
 import {
   validateAuthStep,
   validateDatabaseStep,
+  validateExtrasStep,
   validateFrameworkStep,
   validateOrmStep,
+  validatePreviewStep,
   validateProjectStep,
   validateStylingUiStep,
 } from "@/lib/builder/validation";
@@ -39,19 +43,25 @@ export function BuilderShell() {
   const databaseStepValidation = validateDatabaseStep(builderState.config);
   const ormStepValidation = validateOrmStep(builderState.config);
   const authStepValidation = validateAuthStep(builderState.config);
+  const extrasStepValidation = validateExtrasStep(builderState.config);
+  const previewStepValidation = validatePreviewStep(builderState.config);
   const isProjectStep = currentStep.id === "project";
   const isFrameworkStep = currentStep.id === "framework";
   const isStylingUiStep = currentStep.id === "styling-ui";
   const isDatabaseStep = currentStep.id === "database";
   const isOrmStep = currentStep.id === "orm";
   const isAuthStep = currentStep.id === "auth";
+  const isExtrasStep = currentStep.id === "extras";
+  const isPreviewStep = currentStep.id === "preview";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
     (isFrameworkStep && !frameworkStepValidation.isValid) ||
     (isStylingUiStep && !stylingUiStepValidation.isValid) ||
     (isDatabaseStep && !databaseStepValidation.isValid) ||
     (isOrmStep && !ormStepValidation.isValid) ||
-    (isAuthStep && !authStepValidation.isValid);
+    (isAuthStep && !authStepValidation.isValid) ||
+    (isExtrasStep && !extrasStepValidation.isValid) ||
+    (isPreviewStep && !previewStepValidation.isValid);
 
   const selectedStack = useMemo(
     () => [
@@ -154,6 +164,19 @@ export function BuilderShell() {
                     onConfigChange={updateConfig}
                   />
                 ) : null}
+                {isExtrasStep ? (
+                  <ExtrasStep
+                    config={builderState.config}
+                    validation={extrasStepValidation}
+                    onConfigChange={updateConfig}
+                  />
+                ) : null}
+                {isPreviewStep ? (
+                  <PreviewStep
+                    config={builderState.config}
+                    validation={previewStepValidation}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/preview/dependency-list.tsx b/apps/web/components/builder/preview/dependency-list.tsx
new file mode 100644
index 0000000..86e6c1e
--- /dev/null
+++ b/apps/web/components/builder/preview/dependency-list.tsx
@@ -0,0 +1,41 @@
+type DependencyEntry = {
+  name: string;
+  version: string;
+};
+
+type DependencyListProps = {
+  title: string;
+  dependencies: DependencyEntry[];
+};
+
+export function DependencyList({ title, dependencies }: DependencyListProps) {
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+        <span className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+          {dependencies.length}
+        </span>
+      </div>
+      {dependencies.length > 0 ? (
+        <ul className="space-y-2">
+          {dependencies.map((dependency) => (
+            <li
+              key={dependency.name}
+              className="flex min-w-0 items-center justify-between gap-3 text-sm"
+            >
+              <span className="truncate font-mono text-foreground">
+                {dependency.name}
+              </span>
+              <span className="shrink-0 font-mono text-xs text-muted-foreground">
+                {dependency.version}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-sm text-muted-foreground">None</p>
+      )}
+    </section>
+  );
+}
diff --git a/apps/web/components/builder/preview/env-var-list.tsx b/apps/web/components/builder/preview/env-var-list.tsx
new file mode 100644
index 0000000..5fb9fac
--- /dev/null
+++ b/apps/web/components/builder/preview/env-var-list.tsx
@@ -0,0 +1,43 @@
+import type { EnvVarPreviewItem } from "@/lib/builder/preview";
+
+type EnvVarListProps = {
+  envVars: EnvVarPreviewItem[];
+};
+
+export function EnvVarList({ envVars }: EnvVarListProps) {
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <h3 className="mb-3 text-sm font-semibold text-foreground">
+        Environment variables
+      </h3>
+      {envVars.length > 0 ? (
+        <ul className="space-y-3">
+          {envVars.map((envVar) => (
+            <li key={envVar.name} className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="truncate font-mono text-sm text-foreground">
+                  {envVar.name}
+                </span>
+                {envVar.required ? (
+                  <span className="shrink-0 rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                    Required
+                  </span>
+                ) : null}
+              </div>
+              {envVar.description ? (
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {envVar.description}
+                </p>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-sm text-muted-foreground">None</p>
+      )}
+      <p className="mt-3 text-xs text-muted-foreground">
+        Values are placeholders in `.env.example`; set real secrets yourself.
+      </p>
+    </section>
+  );
+}
diff --git a/apps/web/components/builder/preview/file-tree-preview.tsx b/apps/web/components/builder/preview/file-tree-preview.tsx
new file mode 100644
index 0000000..03beb8f
--- /dev/null
+++ b/apps/web/components/builder/preview/file-tree-preview.tsx
@@ -0,0 +1,51 @@
+type FileTreePreviewProps = {
+  projectName: string;
+  filePaths: string[];
+};
+
+export function FileTreePreview({
+  projectName,
+  filePaths,
+}: FileTreePreviewProps) {
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <h3 className="text-sm font-semibold text-foreground">
+          Generated file tree
+        </h3>
+        <span className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+          {filePaths.length}
+        </span>
+      </div>
+      <pre className="max-h-96 overflow-auto rounded-md border border-border bg-muted p-3 text-xs leading-6 text-foreground">
+        <code>{formatFileTree(projectName, filePaths)}</code>
+      </pre>
+    </section>
+  );
+}
+
+function formatFileTree(projectName: string, filePaths: string[]): string {
+  const lines = [`${projectName}/`];
+  const seenDirectories = new Set<string>();
+
+  for (const filePath of filePaths) {
+    const segments = filePath.split("/");
+
+    segments.forEach((segment, index) => {
+      const isFile = index === segments.length - 1;
+      const directoryKey = segments.slice(0, index + 1).join("/");
+
+      if (!isFile) {
+        if (seenDirectories.has(directoryKey)) {
+          return;
+        }
+
+        seenDirectories.add(directoryKey);
+      }
+
+      lines.push(`${"  ".repeat(index + 1)}${segment}${isFile ? "" : "/"}`);
+    });
+  }
+
+  return lines.join("\n");
+}
diff --git a/apps/web/components/builder/preview/script-list.tsx b/apps/web/components/builder/preview/script-list.tsx
new file mode 100644
index 0000000..c2ff950
--- /dev/null
+++ b/apps/web/components/builder/preview/script-list.tsx
@@ -0,0 +1,27 @@
+import type { ScriptPreviewItem } from "@/lib/builder/preview";
+
+type ScriptListProps = {
+  scripts: ScriptPreviewItem[];
+};
+
+export function ScriptList({ scripts }: ScriptListProps) {
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <h3 className="mb-3 text-sm font-semibold text-foreground">Scripts</h3>
+      {scripts.length > 0 ? (
+        <dl className="space-y-2">
+          {scripts.map((script) => (
+            <div key={script.name} className="min-w-0 text-sm">
+              <dt className="font-mono text-foreground">{script.name}</dt>
+              <dd className="mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-xs text-muted-foreground">
+                {script.command}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : (
+        <p className="text-sm text-muted-foreground">None</p>
+      )}
+    </section>
+  );
+}
diff --git a/apps/web/components/builder/preview/stack-summary.tsx b/apps/web/components/builder/preview/stack-summary.tsx
new file mode 100644
index 0000000..2243a60
--- /dev/null
+++ b/apps/web/components/builder/preview/stack-summary.tsx
@@ -0,0 +1,29 @@
+import type { StackSummaryItem } from "@/lib/builder/preview";
+
+type StackSummaryProps = {
+  items: StackSummaryItem[];
+};
+
+export function StackSummary({ items }: StackSummaryProps) {
+  return (
+    <section className="rounded-md border border-border bg-background p-4">
+      <div className="mb-3">
+        <h3 className="text-sm font-semibold text-foreground">
+          Selected stack summary
+        </h3>
+      </div>
+      <dl className="grid gap-x-4 gap-y-2 sm:grid-cols-2">
+        {items.map((item) => (
+          <div key={item.label} className="min-w-0">
+            <dt className="text-xs font-medium text-muted-foreground">
+              {item.label}
+            </dt>
+            <dd className="mt-0.5 truncate text-sm text-foreground">
+              {item.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}
diff --git a/apps/web/components/builder/steps/extras-step.tsx b/apps/web/components/builder/steps/extras-step.tsx
new file mode 100644
index 0000000..b6f191c
--- /dev/null
+++ b/apps/web/components/builder/steps/extras-step.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import {
+  dockerMetadata,
+  type DockerOption,
+  type LaunchKitConfig,
+  type OptionMetadata,
+} from "@launchkit/schema";
+
+import type { BuilderConfigPatch } from "@/lib/builder/builder-state";
+import type { ExtrasStepValidation } from "@/lib/builder/validation";
+
+type ExtrasStepProps = {
+  config: LaunchKitConfig;
+  validation: ExtrasStepValidation;
+  onConfigChange: (patch: BuilderConfigPatch) => void;
+};
+
+function getDockerOptionLabel(option: OptionMetadata<DockerOption>): string {
+  if (option.value === "none") {
+    return "No Docker setup";
+  }
+
+  return option.label;
+}
+
+export function ExtrasStep({
+  config,
+  validation,
+  onConfigChange,
+}: ExtrasStepProps) {
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+  const hasPostgres = config.database === "postgres";
+  const selectedDocker: DockerOption = hasPostgres ? config.docker : "none";
+
+  function updateDocker(docker: DockerOption) {
+    if (docker === "postgres" && !hasPostgres) {
+      return;
+    }
+
+    onConfigChange({ docker });
+  }
+
+  return (
+    <div className="space-y-5">
+      {errorMessages.length > 0 ? (
+        <div
+          role="alert"
+          className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+        >
+          {errorMessages[0]}
+        </div>
+      ) : null}
+
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">Docker</legend>
+        <div className="grid gap-3" role="radiogroup">
+          {dockerMetadata.map((option) => {
+            const isPostgresDocker = option.value === "postgres";
+            const isDisabled = isPostgresDocker && !hasPostgres;
+            const isSelected = selectedDocker === option.value;
+
+            return (
+              <label
+                key={option.value}
+                aria-disabled={isDisabled ? "true" : undefined}
+                onClick={(event) => {
+                  if (isDisabled) {
+                    event.preventDefault();
+                    return;
+                  }
+
+                  updateDocker(option.value);
+                }}
+                className={[
+                  "flex flex-col gap-2 rounded-md border p-4 transition-colors",
+                  isDisabled
+                    ? "cursor-not-allowed border-border bg-muted text-muted-foreground opacity-70"
+                    : "cursor-pointer",
+                  isSelected
+                    ? "border-primary bg-accent text-accent-foreground"
+                    : "border-border bg-background text-foreground",
+                  !isSelected && !isDisabled ? "hover:bg-muted" : "",
+                ].join(" ")}
+              >
+                <span className="flex items-start justify-between gap-3">
+                  <span className="text-sm font-semibold">
+                    {getDockerOptionLabel(option)}
+                  </span>
+                  <span
+                    className={[
+                      "grid size-4 place-items-center rounded-full border",
+                      isSelected
+                        ? "border-primary bg-primary"
+                        : "border-border bg-background",
+                    ].join(" ")}
+                    aria-hidden="true"
+                  >
+                    {isSelected ? (
+                      <span className="size-1.5 rounded-full bg-primary-foreground" />
+                    ) : null}
+                  </span>
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {option.description}
+                </span>
+                {isDisabled ? (
+                  <span className="text-sm font-medium text-muted-foreground">
+                    Requires PostgreSQL
+                  </span>
+                ) : null}
+                <input
+                  type="radio"
+                  name="docker"
+                  value={option.value}
+                  checked={isSelected}
+                  disabled={isDisabled}
+                  onChange={() => updateDocker(option.value)}
+                  className="sr-only"
+                />
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+
+      <p className="text-sm text-muted-foreground">
+        Docker Compose is for local PostgreSQL development. README and
+        `.env.example` are included by default.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/components/builder/steps/preview-step.tsx b/apps/web/components/builder/steps/preview-step.tsx
new file mode 100644
index 0000000..eaceb9b
--- /dev/null
+++ b/apps/web/components/builder/steps/preview-step.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import type { LaunchKitConfig } from "@launchkit/schema";
+
+import { DependencyList } from "@/components/builder/preview/dependency-list";
+import { EnvVarList } from "@/components/builder/preview/env-var-list";
+import { FileTreePreview } from "@/components/builder/preview/file-tree-preview";
+import { ScriptList } from "@/components/builder/preview/script-list";
+import { StackSummary } from "@/components/builder/preview/stack-summary";
+import { createBuilderPreview } from "@/lib/builder/preview";
+import type { PreviewStepValidation } from "@/lib/builder/validation";
+
+type PreviewStepProps = {
+  config: LaunchKitConfig;
+  validation: PreviewStepValidation;
+};
+
+export function PreviewStep({ config, validation }: PreviewStepProps) {
+  const errorMessages = Object.values(validation.errors).filter(Boolean);
+
+  if (!validation.isValid) {
+    return (
+      <div
+        role="alert"
+        className="rounded-md border border-destructive bg-background p-4 text-sm text-destructive"
+      >
+        {errorMessages[0] ?? "Fix the selected stack before previewing."}
+      </div>
+    );
+  }
+
+  const preview = createBuilderPreview(config);
+
+  return (
+    <div className="space-y-4">
+      <StackSummary items={preview.stackSummary} />
+      <div className="grid gap-4 xl:grid-cols-2">
+        <DependencyList
+          title="Dependencies"
+          dependencies={preview.dependencies}
+        />
+        <DependencyList
+          title="Dev dependencies"
+          dependencies={preview.devDependencies}
+        />
+      </div>
+      <div className="grid gap-4 xl:grid-cols-2">
+        <ScriptList scripts={preview.scripts} />
+        <EnvVarList envVars={preview.envVars} />
+      </div>
+      <FileTreePreview
+        projectName={config.name}
+        filePaths={preview.filePaths}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/lib/builder/preview.ts b/apps/web/lib/builder/preview.ts
new file mode 100644
index 0000000..0e352b0
--- /dev/null
+++ b/apps/web/lib/builder/preview.ts
@@ -0,0 +1,159 @@
+import { createGenerationPlan } from "@launchkit/generator";
+import {
+  authMetadata,
+  databaseMetadata,
+  dockerMetadata,
+  frameworkMetadata,
+  languageMetadata,
+  ormMetadata,
+  packageManagerMetadata,
+  projectStructureMetadata,
+  routerMetadata,
+  stylingMetadata,
+  uiMetadata,
+  type LaunchKitConfig,
+  type OptionMetadata,
+} from "@launchkit/schema";
+
+type PackageEntry = {
+  name: string;
+  version: string;
+};
+
+export type StackSummaryItem = {
+  label: string;
+  value: string;
+};
+
+export type ScriptPreviewItem = {
+  name: string;
+  command: string;
+};
+
+export type EnvVarPreviewItem = {
+  name: string;
+  description?: string;
+  required: boolean;
+};
+
+export type BuilderPreview = {
+  stackSummary: StackSummaryItem[];
+  dependencies: PackageEntry[];
+  devDependencies: PackageEntry[];
+  scripts: ScriptPreviewItem[];
+  envVars: EnvVarPreviewItem[];
+  filePaths: string[];
+};
+
+const baseNextPreviewFiles = [
+  ".gitignore",
+  "app/layout.tsx",
+  "app/page.tsx",
+  "next.config.ts",
+  "tsconfig.json",
+] as const;
+
+const generatedSupportFiles = ["package.json", ".env.example", "README.md"] as const;
+
+export function createBuilderPreview(config: LaunchKitConfig): BuilderPreview {
+  const plan = createGenerationPlan(config);
+  const packageJson = plan.packageJson;
+
+  return {
+    stackSummary: createStackSummary(config),
+    dependencies: mapPackageEntries(packageJson.dependencies),
+    devDependencies: mapPackageEntries(packageJson.devDependencies),
+    scripts: mapScriptEntries(packageJson.scripts),
+    envVars: plan.env.map((envVar) => ({
+      name: envVar.name,
+      description: envVar.description,
+      required: envVar.required ?? false,
+    })),
+    filePaths: createPreviewFilePaths([
+      ...baseNextPreviewFiles,
+      ...plan.templateFiles.map((file) => file.targetPath),
+      ...plan.generatedFiles.map((file) => file.path),
+      ...generatedSupportFiles,
+    ]),
+  };
+}
+
+function createStackSummary(config: LaunchKitConfig): StackSummaryItem[] {
+  return [
+    {
+      label: "Project name",
+      value: config.name,
+    },
+    {
+      label: "Framework",
+      value: getMetadataLabel(frameworkMetadata, config.framework),
+    },
+    {
+      label: "Language",
+      value: getMetadataLabel(languageMetadata, config.language),
+    },
+    {
+      label: "Router",
+      value: getMetadataLabel(routerMetadata, config.router),
+    },
+    {
+      label: "Project structure",
+      value: getMetadataLabel(projectStructureMetadata, config.projectStructure),
+    },
+    {
+      label: "Styling",
+      value: getMetadataLabel(stylingMetadata, config.styling),
+    },
+    {
+      label: "UI",
+      value: getMetadataLabel(uiMetadata, config.ui),
+    },
+    {
+      label: "Database",
+      value: getMetadataLabel(databaseMetadata, config.database),
+    },
+    {
+      label: "ORM",
+      value: getMetadataLabel(ormMetadata, config.orm),
+    },
+    {
+      label: "Auth",
+      value: getMetadataLabel(authMetadata, config.auth),
+    },
+    {
+      label: "Docker",
+      value: getMetadataLabel(dockerMetadata, config.docker),
+    },
+    {
+      label: "Package manager",
+      value: getMetadataLabel(packageManagerMetadata, config.packageManager),
+    },
+  ];
+}
+
+function getMetadataLabel<TValue extends string>(
+  metadata: readonly OptionMetadata<TValue>[],
+  value: TValue,
+): string {
+  return metadata.find((option) => option.value === value)?.label ?? value;
+}
+
+function mapPackageEntries(packages: Record<string, string> = {}): PackageEntry[] {
+  return Object.entries(packages).map(([name, version]) => ({
+    name,
+    version,
+  }));
+}
+
+function mapScriptEntries(scripts: Record<string, string> = {}): ScriptPreviewItem[] {
+  return Object.entries(scripts).map(([name, command]) => ({
+    name,
+    command,
+  }));
+}
+
+function createPreviewFilePaths(paths: readonly string[]): string[] {
+  return [...new Set(paths)].sort((firstPath, secondPath) =>
+    firstPath.localeCompare(secondPath),
+  );
+}
diff --git a/apps/web/lib/builder/steps.ts b/apps/web/lib/builder/steps.ts
index 1c85280..6d3f84a 100644
--- a/apps/web/lib/builder/steps.ts
+++ b/apps/web/lib/builder/steps.ts
@@ -57,13 +57,13 @@ export const builderSteps = [
     id: "extras",
     label: "Extras",
     shortLabel: "Extras",
-    placeholder: "Extras step coming next.",
+    placeholder: "Choose optional extras.",
   },
   {
     id: "preview",
     label: "Preview",
     shortLabel: "Preview",
-    placeholder: "Preview step coming later.",
+    placeholder: "Inspect generated project details.",
   },
   {
     id: "download",
diff --git a/apps/web/lib/builder/validation.ts b/apps/web/lib/builder/validation.ts
index a04b377..ddd2eee 100644
--- a/apps/web/lib/builder/validation.ts
+++ b/apps/web/lib/builder/validation.ts
@@ -39,6 +39,16 @@ export type AuthStepValidation = {
   errors: Partial<Record<keyof LaunchKitConfig, string>>;
 };
 
+export type ExtrasStepValidation = {
+  isValid: boolean;
+  errors: Pick<ValidationErrors, "docker" | "database">;
+};
+
+export type PreviewStepValidation = {
+  isValid: boolean;
+  errors: ValidationErrors;
+};
+
 export function validateBuilderConfig(config: LaunchKitConfig): {
   isValid: boolean;
   errors: ValidationErrors;
@@ -163,3 +173,24 @@ export function validateOrmStep(config: LaunchKitConfig): OrmStepValidation {
 export function validateAuthStep(config: LaunchKitConfig): AuthStepValidation {
   return validateBuilderConfig(config);
 }
+
+export function validateExtrasStep(
+  config: LaunchKitConfig,
+): ExtrasStepValidation {
+  const validation = validateBuilderConfig(config);
+  const errors = {
+    docker: validation.errors.docker,
+    database: validation.errors.database,
+  };
+
+  return {
+    isValid: !errors.docker && !errors.database,
+    errors,
+  };
+}
+
+export function validatePreviewStep(
+  config: LaunchKitConfig,
+): PreviewStepValidation {
+  return validateBuilderConfig(config);
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 0542e60..69b042f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,6 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@launchkit/generator": "0.0.0",
     "@launchkit/schema": "0.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index cb0fe80..cc0f53e 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Auth step is complete; Extras step is next
+Primary focus: Phase 6 Preview step is complete; Generate API route is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Auth step is complete; Extras step is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 7 added the Auth step with Auth.js credentials scaffold selection; Extras step is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 9 added the Preview step using generator plan data for package, script, env, and feature file details; Generate API route is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,288 @@ Add entries in reverse chronological order.
 
 ### 2026-07-02
 
+Phase 6 Step 9 completed: Create Preview step
+
+Changes made:
+
+- Added the Preview step UI to the website wizard.
+- Added selected stack summary with metadata labels from `@launchkit/schema`.
+- Added dependency and dev dependency preview sections from `@launchkit/generator` `createGenerationPlan(config)`.
+- Added generated package script preview from generator plan data.
+- Added environment variable preview from generator plan data.
+- Environment variables show names, descriptions, and required state only; no real secret values are displayed.
+- Added generated file tree preview with compact monospace formatting.
+- File tree preview includes selected optional feature files from generator plan data.
+- File tree preview excludes unselected optional feature files.
+- File tree preview includes no `src/` paths.
+- Added Preview-step validation using the existing schema parsing and compatibility helper path.
+- Gated Next navigation on the Preview step when the full config is invalid.
+- Avoided full file content preview.
+- Added `@launchkit/generator` as an explicit `apps/web` dependency for the planning helper import.
+- Kept generator planning logic isolated in `apps/web/lib/builder/preview.ts`; UI components only render preview data.
+- Confirmed no generate/download API route was added.
+- Confirmed no zip download behavior was added.
+- Confirmed no CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/preview/dependency-list.tsx`
+- `apps/web/components/builder/preview/env-var-list.tsx`
+- `apps/web/components/builder/preview/file-tree-preview.tsx`
+- `apps/web/components/builder/preview/script-list.tsx`
+- `apps/web/components/builder/preview/stack-summary.tsx`
+- `apps/web/components/builder/steps/preview-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/preview.ts`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/lib/builder/validation.ts`
+- `apps/web/package.json`
+- `package-lock.json`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,240p' context/progress-tracker.md
+sed -n '1,240p' .agents/prompts/phase-06/step-9.md
+git status --short
+rg --files context | sort
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '1,260p' context/progress-tracker.md
+sed -n '261,700p' context/progress-tracker.md
+sed -n '1,280p' context/project-overview.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+rg --files apps/web/components/builder apps/web/lib/builder apps/web/app packages/generator/src packages/schema/src
+sed -n '1,420p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/lib/builder/steps.ts
+sed -n '1,320p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' packages/generator/src/index.ts
+sed -n '1,360p' packages/generator/src/generation-plan.ts
+sed -n '1,380p' packages/generator/src/features/registry.ts
+sed -n '1,320p' packages/generator/src/generate-project.ts
+sed -n '1,460p' packages/generator/src/features/definitions.ts
+cat apps/web/package.json
+cat packages/generator/package.json
+sed -n '1,320p' packages/generator/src/template-loader.ts
+sed -n '1,320p' packages/generator/src/file-tree.ts
+sed -n '1,420p' packages/schema/src/metadata.ts
+sed -n '1,320p' packages/schema/src/config.ts
+sed -n '1,220p' apps/web/lib/builder/builder-state.ts
+sed -n '1,260p' apps/web/components/builder/wizard-step-panel.tsx
+sed -n '1,320p' apps/web/components/builder/steps/extras-step.tsx
+sed -n '1,320p' apps/web/components/builder/steps/auth-step.tsx
+sed -n '1,320p' apps/web/components/builder/steps/project-step.tsx
+sed -n '1,220p' apps/web/components/builder/wizard-navigation.tsx
+rg --files packages/templates | sort
+cat packages/templates/package.json
+sed -n '1,260p' packages/templates/src/index.ts
+ls package-lock.json
+sed -n '1,220p' package-lock.json
+find node_modules/@launchkit -maxdepth 1 -type l -o -type d -print
+ls -la node_modules/@launchkit
+rg 'node_modules\/\@launchkit\/(generator|schema|templates|shared)' package-lock.json
+sed -n '/node_modules\/\@launchkit\/generator/,+18p' package-lock.json
+find packages/templates/base/next -maxdepth 2 -type f | sort
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+git diff --check
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+rg '@launchkit/generator|app/api|createProjectZip|download|node:test|node --test|src/' apps/web
+npm run build
+git status --short
+git diff --stat
+git diff -- apps/web/lib/builder/preview.ts apps/web/components/builder/steps/preview-step.tsx apps/web/components/builder/builder-shell.tsx apps/web/lib/builder/validation.ts apps/web/package.json package-lock.json
+sed -n '1,120p' context/progress-tracker.md
+git diff --check
+git status --short
+git diff --stat
+sed -n '1,220p' context/progress-tracker.md
+lsof -nP -iTCP:3000 -sTCP:LISTEN
+npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3001
+npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3001
+```
+
+Verification:
+
+- [x] Preview step renders in the wizard.
+- [x] Selected stack summary includes project name, framework, language, router, project structure, styling, UI, database, ORM, auth, Docker, and package manager.
+- [x] Stack summary uses schema metadata labels when metadata exists.
+- [x] Dependencies come from `@launchkit/generator` plan data.
+- [x] Dev dependencies come from `@launchkit/generator` plan data.
+- [x] Scripts come from `@launchkit/generator` plan data.
+- [x] Environment variables come from `@launchkit/generator` plan data.
+- [x] Environment variable preview does not display real secrets.
+- [x] File tree preview shows selected optional feature files only.
+- [x] File tree preview includes no `src/` paths.
+- [x] Invalid schema or compatibility state shows a concise Preview-step error.
+- [x] Invalid schema or compatibility state prevents moving from Preview to Download.
+- [x] No full file content preview was added.
+- [x] No generate/download API route was added.
+- [x] No zip download behavior was added.
+- [x] No CLI functionality was added.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `git diff --check` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` passed across all workspaces when run with elevated permissions for the known Turbopack process/port restriction.
+- `lsof -nP -iTCP:3000 -sTCP:LISTEN` showed port 3000 was already in use by a local Node process.
+- `npm run dev -w apps/web -- --hostname 127.0.0.1 --port 3001` failed in the sandbox because binding to `127.0.0.1:3001` was not permitted. The elevated rerun was rejected, so no dev server is running from this step.
+
+Notes/blockers:
+
+- The generator plan currently exposes selected feature file references, dependencies, dev dependencies, scripts, and environment variables, but it does not expose a base template file manifest. The Preview helper therefore keeps a small local list of MVP base Next.js file paths until the generator exports base template file references.
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; port 3000 was already occupied, the sandbox blocked port 3001, and the elevated rerun was rejected.
+
+Next suggested step:
+
+- Phase 6 Step 10: Build generate API route.
+
+Phase 6 Step 8 completed: Create extras step
+
+Changes made:
+
+- Added Extras step UI to the website wizard.
+- Added a Docker selector for `docker: "none"` and `docker: "postgres"`.
+- Used `@launchkit/schema` `dockerMetadata` for Docker option labels and descriptions.
+- Displayed `No Docker setup` and `PostgreSQL Docker Compose` as the two supported Docker choices.
+- Disabled PostgreSQL Docker Compose unless `database: "postgres"` is selected.
+- Shows the disabled reason `Requires PostgreSQL` when Docker PostgreSQL is unavailable.
+- Shows `No Docker setup` as the effective selection when PostgreSQL is not selected.
+- Connected Docker selection to shared builder config state.
+- Guarded Docker state updates so PostgreSQL Docker Compose cannot be selected without PostgreSQL.
+- Docker changes preserve database, ORM, auth, UI, and all other builder config values.
+- Added Extras-step validation using the existing schema parsing and compatibility helper path.
+- Gated Next navigation on the Extras step when an invalid `database: "none"` plus `docker: "postgres"` config is present.
+- Added a concise note that Docker Compose is for local PostgreSQL development and README plus `.env.example` are included by default.
+- Confirmed unsupported extras are not exposed.
+- Confirmed no preview, download, API route, generator logic, or CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/steps/extras-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/lib/builder/validation.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,260p' context/progress-tracker.md
+sed -n '1,300p' .agents/prompts/phase-06/step-8.md
+rg --files context apps/web packages/schema/src .agents/prompts/phase-06
+sed -n '301,620p' .agents/prompts/phase-06/step-8.md
+sed -n '1,260p' context/architecture.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '1,280p' context/project-overview.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+sed -n '1,380p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,280p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' apps/web/components/builder/steps/database-step.tsx
+sed -n '1,260p' apps/web/components/builder/steps/orm-step.tsx
+sed -n '1,240p' apps/web/lib/builder/steps.ts
+sed -n '1,340p' packages/schema/src/metadata.ts
+sed -n '1,220p' packages/schema/src/options.ts
+sed -n '1,240p' packages/schema/src/compatibility.ts
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+rg '@launchkit/generator|app/api|createProjectZip|download|preview|Redis|Sentry|analytics|Stripe|Clerk|node:test|node --test' apps/web
+git diff --check
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+npm run build -w apps/web
+npm run build
+git diff -- apps/web/components/builder/builder-shell.tsx apps/web/components/builder/steps/extras-step.tsx apps/web/lib/builder/steps.ts apps/web/lib/builder/validation.ts
+git status --short
+git diff --stat
+```
+
+Verification:
+
+- [x] Extras step renders in the wizard.
+- [x] Docker selector supports `none` and `postgres`.
+- [x] Docker options come from schema metadata.
+- [x] Docker PostgreSQL is disabled when `database !== "postgres"`.
+- [x] Docker PostgreSQL disabled state shows `Requires PostgreSQL`.
+- [x] No Docker setup is shown as selected when PostgreSQL is not selected.
+- [x] Selecting Docker PostgreSQL updates `config.docker` only when PostgreSQL is selected.
+- [x] Selecting Docker PostgreSQL does not modify `config.database`.
+- [x] Selecting no Docker sets `config.docker` to `"none"`.
+- [x] Docker updates preserve database, ORM, auth, UI, and other config values.
+- [x] Invalid Docker PostgreSQL without PostgreSQL uses schema compatibility validation and prevents Next on the Extras step.
+- [x] Unsupported extras are not rendered.
+- [x] No preview or download flow was implemented.
+- [x] No API route was added.
+- [x] No generator logic was added to `apps/web`.
+- [x] No CLI functionality was added.
+- [x] Later steps remain placeholders.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` passed across all workspaces when run with elevated permissions for the known Turbopack process/port restriction.
+- `git diff --check` passed.
+
+Notes/blockers:
+
+- No frontend component test pattern or app test script exists for `apps/web`, so no new component test stack was added in this step.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 9: Create Preview step.
+
 Phase 6 Step 7 completed: Create Auth step
 
 Changes made:
diff --git a/memory.md b/memory.md
index 8b8b01a..2fefe09 100644
--- a/memory.md
+++ b/memory.md
@@ -1,55 +1,58 @@
-# Memory - LaunchKit Phase 6 Website MVP
+# Memory - LaunchKit Phase 6 Website Wizard
 
-Last updated: 2026-07-02 22:42 JST
+Last updated: 2026-07-02 23:27 JST
 
 ## What was built
 
-- Completed Phase 6 Step 4: Styling and UI step.
-  - Added `apps/web/components/builder/steps/styling-ui-step.tsx`.
-  - Wired it into `apps/web/components/builder/builder-shell.tsx`.
-  - Extended `apps/web/lib/builder/validation.ts` to use schema compatibility checks.
-  - The step shows fixed Tailwind CSS and lets users choose `ui: "none"` or `ui: "shadcn"` from schema metadata.
-- Completed Phase 6 Step 5: Database step.
-  - Added `apps/web/components/builder/steps/database-step.tsx`.
-  - Wired it into `apps/web/components/builder/builder-shell.tsx`.
-  - Extended `apps/web/lib/builder/validation.ts` with database-step validation.
-  - The step lets users choose `database: "none"` or `database: "postgres"` from schema metadata.
-  - Switching database to `none` resets `orm: "prisma"` to `none` and `docker: "postgres"` to `none`, while leaving auth unchanged.
-- Updated `context/progress-tracker.md` after each completed step.
+Phase 6 Website MVP wizard is complete through Step 8, Extras.
+
+Completed recent steps:
+
+- Step 6 ORM: added `apps/web/components/builder/steps/orm-step.tsx`, wired `orm: "none" | "prisma"` into `builder-shell.tsx`, and added ORM validation in `apps/web/lib/builder/validation.ts`.
+- Step 7 Auth: added `apps/web/components/builder/steps/auth-step.tsx`, wired `auth: "none" | "authjs-credentials"` into `builder-shell.tsx`, and added Auth-step validation.
+- Step 8 Extras: added `apps/web/components/builder/steps/extras-step.tsx`, wired `docker: "none" | "postgres"` into `builder-shell.tsx`, added Extras-step validation, and updated `apps/web/lib/builder/steps.ts`.
+- `context/progress-tracker.md` is updated through Phase 6 Step 8 and says the next suggested step is Phase 6 Step 9: Create Preview step.
 
 ## Decisions made
 
-- Keep website wizard steps thin and schema-driven. UI uses `@launchkit/schema` metadata and compatibility helpers rather than duplicating option lists or compatibility rules.
-- Keep generator/API/download/CLI work out of current Phase 6 step work until the relevant later prompts.
-- Do not add a frontend component test stack yet because `apps/web` has no existing frontend/component test pattern.
-- Do not start or leave a dev server running; the developer will run it locally.
+- Website wizard steps use shared `@launchkit/schema` metadata and compatibility validation rather than duplicating compatibility rules in UI code.
+- UI may use local affordances to disable invalid options, such as Prisma or PostgreSQL Docker Compose requiring PostgreSQL.
+- Auth.js credentials is presented as a scaffold only and does not force database or ORM selections.
+- Database selection still owns narrow dependent resets: selecting no database resets Prisma ORM and PostgreSQL Docker Compose to none.
+- No generator logic, API route, zip creation, download flow, preview generation, or CLI functionality has been added to `apps/web` during these wizard option steps.
 
 ## Problems solved
 
-- The builder validation now maps schema compatibility issues to every field in each issue path. This lets a database-related compatibility issue be shown on the Database step even if the schema issue also involves ORM or Docker.
-- Repeated Next/Turbopack builds fail inside the sandbox because the worker process cannot bind a port. Elevated `npm run build -w apps/web` and elevated workspace `npm run build` pass.
+- Turbopack builds consistently fail inside the sandbox because worker process or port binding is not permitted. The same `npm run build -w apps/web` and root `npm run build` pass when rerun with elevated permissions.
+- `authMetadata` currently has no `recommended` property, so the Auth step guards optional recommended badge rendering instead of assuming the field exists.
+- Extras and ORM steps show the valid effective selection as `none` when PostgreSQL is unavailable, while still preventing invalid state updates.
 
 ## Current state
 
-- Phase 6 is in progress.
-- Phase 6 Step 5 is complete.
-- The tracker says the next step is Phase 6 Step 6: Create ORM step.
-- Latest verified commands passed:
+- Current tracker status: Phase 6 in progress; Extras step complete; Preview step next.
+- Modified/untracked working tree from the latest step includes:
+  - `apps/web/components/builder/steps/extras-step.tsx`
+  - `apps/web/components/builder/builder-shell.tsx`
+  - `apps/web/lib/builder/steps.ts`
+  - `apps/web/lib/builder/validation.ts`
+  - `context/progress-tracker.md`
+  - `.agents/prompts/phase-06/step-8.md` is untracked context input.
+- Verification for Step 8 passed:
   - `npm run typecheck -w apps/web`
   - `npm run lint -w apps/web`
-  - `npm run build -w apps/web` after elevated rerun
+  - `npm run build -w apps/web` outside sandbox
   - `npm run typecheck`
   - `npm run test`
   - `npm run lint`
-  - `npm run build` after elevated rerun
+  - `npm run build` outside sandbox
   - `git diff --check`
-- Current working tree note: `.agents/prompts/phase-06/step-6.md` is untracked and likely the next prompt to implement.
-- No local dev server is running.
+- No frontend component test setup exists in `apps/web`, so no new component test stack was added.
 
 ## Next session starts with
 
-Read `context/progress-tracker.md`, then implement `.agents/prompts/phase-06/step-6.md` for the ORM step. Stay inside the prompt scope: do not implement auth, extras, preview, download, API route, generator integration, or CLI work unless the prompt explicitly asks for it.
+Implement Phase 6 Step 9: Create Preview step. Start by reading `context/progress-tracker.md` and the Step 9 prompt in `.agents/prompts/phase-06/` if present. Keep the same boundaries: no API generate route, zip download behavior, or CLI unless the Step 9 prompt explicitly says otherwise.
 
 ## Open questions
 
-- No new open questions from this session.
+- The Preview step implementation details are not yet loaded. Need inspect the Step 9 prompt to determine whether preview is schema/metadata-derived only or whether it should use any existing generator preview helpers.
+- Decide whether to keep using the current manual selectable-row pattern or introduce shared option-row components after the Preview/Download steps, if duplication becomes painful.
diff --git a/package-lock.json b/package-lock.json
index 12869f1..7f31246 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
     "apps/web": {
       "version": "0.1.0",
       "dependencies": {
+        "@launchkit/generator": "0.0.0",
         "@launchkit/schema": "0.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",

From 3e761c4288bbc9d297e4810d139367e18650408a Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Thu, 2 Jul 2026 23:41:06 +0900
Subject: [PATCH 10/15] feat: Complete Phase 6 Step 9 - Implement Preview Step
 with UI and Validation

---
 memory.md | 67 ++++++++++++++++++++++++++++++-------------------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/memory.md b/memory.md
index 2fefe09..e0fb564 100644
--- a/memory.md
+++ b/memory.md
@@ -1,58 +1,65 @@
-# Memory - LaunchKit Phase 6 Website Wizard
+# Memory — LaunchKit Phase 6 Preview Step
 
-Last updated: 2026-07-02 23:27 JST
+Last updated: 2026-07-02 23:40 JST
 
 ## What was built
 
-Phase 6 Website MVP wizard is complete through Step 8, Extras.
+Phase 6 Website MVP wizard is complete through Step 9, Preview.
 
-Completed recent steps:
+Completed this session:
 
-- Step 6 ORM: added `apps/web/components/builder/steps/orm-step.tsx`, wired `orm: "none" | "prisma"` into `builder-shell.tsx`, and added ORM validation in `apps/web/lib/builder/validation.ts`.
-- Step 7 Auth: added `apps/web/components/builder/steps/auth-step.tsx`, wired `auth: "none" | "authjs-credentials"` into `builder-shell.tsx`, and added Auth-step validation.
-- Step 8 Extras: added `apps/web/components/builder/steps/extras-step.tsx`, wired `docker: "none" | "postgres"` into `builder-shell.tsx`, added Extras-step validation, and updated `apps/web/lib/builder/steps.ts`.
-- `context/progress-tracker.md` is updated through Phase 6 Step 8 and says the next suggested step is Phase 6 Step 9: Create Preview step.
+- Added Preview step UI in `apps/web/components/builder/steps/preview-step.tsx`.
+- Added preview rendering components under `apps/web/components/builder/preview/`:
+  - `stack-summary.tsx`
+  - `dependency-list.tsx`
+  - `script-list.tsx`
+  - `env-var-list.tsx`
+  - `file-tree-preview.tsx`
+- Added `apps/web/lib/builder/preview.ts` to derive preview data.
+- Wired Preview into `apps/web/components/builder/builder-shell.tsx`.
+- Added Preview-step validation in `apps/web/lib/builder/validation.ts`.
+- Updated `apps/web/lib/builder/steps.ts` Preview placeholder.
+- Added `@launchkit/generator` as an explicit `apps/web` dependency in `apps/web/package.json` and `package-lock.json`.
+- Updated `context/progress-tracker.md` through Phase 6 Step 9. It now says the next suggested step is Phase 6 Step 10: Build generate API route.
 
 ## Decisions made
 
-- Website wizard steps use shared `@launchkit/schema` metadata and compatibility validation rather than duplicating compatibility rules in UI code.
-- UI may use local affordances to disable invalid options, such as Prisma or PostgreSQL Docker Compose requiring PostgreSQL.
-- Auth.js credentials is presented as a scaffold only and does not force database or ORM selections.
-- Database selection still owns narrow dependent resets: selecting no database resets Prisma ORM and PostgreSQL Docker Compose to none.
-- No generator logic, API route, zip creation, download flow, preview generation, or CLI functionality has been added to `apps/web` during these wizard option steps.
+- Preview data uses `@launchkit/generator` `createGenerationPlan(config)` for dependencies, dev dependencies, scripts, environment variables, and selected optional feature file paths.
+- Generator planning is isolated in `apps/web/lib/builder/preview.ts`; React components render data only.
+- Selected stack labels use `@launchkit/schema` metadata instead of raw enum values where metadata exists.
+- Environment variable preview shows names, descriptions, and required status only. It does not show generated placeholder values or imply production-ready secrets.
+- Full file content preview remains out of scope for Step 9.
+- No generate/download API route, zip download behavior, or CLI functionality was added.
 
 ## Problems solved
 
-- Turbopack builds consistently fail inside the sandbox because worker process or port binding is not permitted. The same `npm run build -w apps/web` and root `npm run build` pass when rerun with elevated permissions.
-- `authMetadata` currently has no `recommended` property, so the Auth step guards optional recommended badge rendering instead of assuming the field exists.
-- Extras and ORM steps show the valid effective selection as `none` when PostgreSQL is unavailable, while still preventing invalid state updates.
+- Turbopack builds still fail inside the sandbox because worker process or port binding is not permitted. The same web and workspace builds pass when rerun with elevated permissions.
+- The generator plan exposes selected feature file references but not a base template file manifest. `apps/web/lib/builder/preview.ts` currently keeps a small local list of MVP base Next.js file paths until the generator exports base template file references.
+- Port 3000 was already occupied by a local Node process. A sandboxed attempt to start the dev server on port 3001 failed with `listen EPERM`; the user said they will run the dev server themselves.
 
 ## Current state
 
-- Current tracker status: Phase 6 in progress; Extras step complete; Preview step next.
-- Modified/untracked working tree from the latest step includes:
-  - `apps/web/components/builder/steps/extras-step.tsx`
-  - `apps/web/components/builder/builder-shell.tsx`
-  - `apps/web/lib/builder/steps.ts`
-  - `apps/web/lib/builder/validation.ts`
-  - `context/progress-tracker.md`
-  - `.agents/prompts/phase-06/step-8.md` is untracked context input.
-- Verification for Step 8 passed:
+- Current tracker status: Phase 6 in progress; Preview step complete; Generate API route next.
+- Step 9 verification passed:
   - `npm run typecheck -w apps/web`
   - `npm run lint -w apps/web`
+  - `git diff --check`
   - `npm run build -w apps/web` outside sandbox
   - `npm run typecheck`
   - `npm run test`
   - `npm run lint`
   - `npm run build` outside sandbox
-  - `git diff --check`
-- No frontend component test setup exists in `apps/web`, so no new component test stack was added.
+- Workspace has uncommitted changes from recent Phase 6 work, including Step 8 and Step 9 files.
+- `memory.md` is now saved for the next session.
+- No local dev server is running from this session.
 
 ## Next session starts with
 
-Implement Phase 6 Step 9: Create Preview step. Start by reading `context/progress-tracker.md` and the Step 9 prompt in `.agents/prompts/phase-06/` if present. Keep the same boundaries: no API generate route, zip download behavior, or CLI unless the Step 9 prompt explicitly says otherwise.
+Implement Phase 6 Step 10: Build generate API route. Start by reading `context/progress-tracker.md` and the Step 10 prompt in `.agents/prompts/phase-06/` if present.
+
+Keep the same boundaries unless Step 10 explicitly changes them: use `@launchkit/schema` for validation, call `@launchkit/generator` from server-side code, do not put generator logic in UI components, do not add CLI functionality, and keep zip/download behavior limited to the Step 10 prompt scope.
 
 ## Open questions
 
-- The Preview step implementation details are not yet loaded. Need inspect the Step 9 prompt to determine whether preview is schema/metadata-derived only or whether it should use any existing generator preview helpers.
-- Decide whether to keep using the current manual selectable-row pattern or introduce shared option-row components after the Preview/Download steps, if duplication becomes painful.
+- The Step 10 prompt has not been loaded yet.
+- Decide whether Step 10 should also improve generator base template manifest exposure, or leave the Preview helper's local base file list in place until a later generator cleanup step.

From 42f5af59ecfc6d3e6e444d40eaf5cfdc44c06a5a Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Fri, 3 Jul 2026 09:19:46 +0900
Subject: [PATCH 11/15] style: Format code for better readability in
 WizardProgress component

---
 apps/web/components/builder/wizard-progress.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/builder/wizard-progress.tsx b/apps/web/components/builder/wizard-progress.tsx
index 268c035..74b0f1a 100644
--- a/apps/web/components/builder/wizard-progress.tsx
+++ b/apps/web/components/builder/wizard-progress.tsx
@@ -5,7 +5,9 @@ type WizardProgressProps = {
 };
 
 export function WizardProgress({ currentStepId }: WizardProgressProps) {
-  const currentIndex = builderSteps.findIndex((step) => step.id === currentStepId);
+  const currentIndex = builderSteps.findIndex(
+    (step) => step.id === currentStepId,
+  );
 
   return (
     <nav aria-label="Builder progress" className="min-w-0">

From d2df2f0aa99487520a5b39a7172962f3fe5961fb Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Fri, 3 Jul 2026 11:28:55 +0900
Subject: [PATCH 12/15] feat: Implement API generate route with validation and
 project generation logic

---
 .agents/prompts/phase-06/step-10.md | 349 ++++++++++++++++++++++++++++
 apps/web/app/api/generate/route.ts  |  12 +
 apps/web/lib/api/generate.test.ts   | 226 ++++++++++++++++++
 apps/web/lib/api/generate.ts        | 255 ++++++++++++++++++++
 apps/web/lib/api/response.ts        |  29 +++
 apps/web/lib/api/template-loader.ts |  98 ++++++++
 apps/web/package.json               |   1 +
 context/progress-tracker.md         | 157 ++++++++++++-
 8 files changed, 1125 insertions(+), 2 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-10.md
 create mode 100644 apps/web/app/api/generate/route.ts
 create mode 100644 apps/web/lib/api/generate.test.ts
 create mode 100644 apps/web/lib/api/generate.ts
 create mode 100644 apps/web/lib/api/response.ts
 create mode 100644 apps/web/lib/api/template-loader.ts

diff --git a/.agents/prompts/phase-06/step-10.md b/.agents/prompts/phase-06/step-10.md
new file mode 100644
index 0000000..83e4bc3
--- /dev/null
+++ b/.agents/prompts/phase-06/step-10.md
@@ -0,0 +1,349 @@
+# Phase 6 Step 10: Create API Generate Route
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 9 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 11.
+Do not implement final browser download UI yet.
+Do not implement CLI functionality.
+Do not put generator logic in UI components.
+Do not run generated project code on the LaunchKit server.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Create the server-side API route that validates a LaunchKit config and generates project output using the shared generator.
+
+This route should be the server boundary between the website and:
+
+```txt
+@launchkit/schema
+@launchkit/generator
+```
+
+It should prepare the website for the download flow in Phase 6 Step 11.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/app/api/generate/route.ts
+apps/web/lib/api/generate.ts
+apps/web/lib/api/errors.ts
+apps/web/lib/api/response.ts
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. API Route
+
+Create a Next.js App Router API route:
+
+```txt
+apps/web/app/api/generate/route.ts
+```
+
+It should handle:
+
+```txt
+POST /api/generate
+```
+
+The request body should be JSON containing a LaunchKit config.
+
+Do not support GET for generation.
+
+### 2. Request Validation
+
+Validate the request body using:
+
+```txt
+@launchkit/schema
+```
+
+Use:
+
+```txt
+LaunchKitConfigSchema
+```
+
+and compatibility validation helpers such as:
+
+```txt
+validateCompatibility
+```
+
+or the equivalent exports from the schema package.
+
+Do not duplicate schema rules inside the API route.
+
+### 3. Generator Integration
+
+Call the shared generator package:
+
+```txt
+@launchkit/generator
+```
+
+Use the existing generator function, likely:
+
+```ts
+generateProject(config);
+```
+
+or the equivalent exported API.
+
+Do not place generator logic in `apps/web`.
+Do not duplicate template logic in the route.
+Do not import from `packages/templates` directly unless the generator API already requires that integration.
+
+### 4. Response Shape
+
+Return generated project data in a shape the website can use in Step 11.
+
+Recommended JSON response:
+
+```ts
+type GenerateProjectResponse = {
+  project: {
+    name: string;
+    packageManager: "npm" | "pnpm";
+    files: Array<{
+      path: string;
+      contents: string;
+      encoding: "utf8" | "base64";
+    }>;
+  };
+};
+```
+
+If the generator can return `Uint8Array` contents, encode binary files as base64.
+
+For MVP template files, most contents should be UTF-8 strings.
+
+Do not return Node `Buffer` objects directly in JSON.
+
+### 5. Error Responses
+
+Return structured JSON errors.
+
+Recommended shape:
+
+```ts
+type ApiErrorResponse = {
+  error: {
+    code: string;
+    message: string;
+    issues?: unknown[];
+  };
+};
+```
+
+Use appropriate HTTP statuses:
+
+```txt
+400 invalid JSON or invalid config
+422 compatibility failure
+405 unsupported method, if needed
+500 unexpected generation failure
+```
+
+Do not leak stack traces or internal filesystem paths to the client.
+
+### 6. Request Size And Safety
+
+Add basic request safety.
+
+Requirements:
+
+- Reject non-JSON content where practical.
+- Reject malformed JSON.
+- Reject request bodies that are too large.
+- Do not write generated files to disk.
+- Do not execute generated project code.
+- Do not install generated project dependencies.
+- Do not run shell commands from API input.
+
+Recommended maximum request body size:
+
+```txt
+64 KB
+```
+
+Use the simplest safe approach that works in Next.js App Router.
+
+### 7. Path Safety
+
+The generator should already enforce safe generated paths from Phase 4.
+
+Still, before returning files from the API, verify generated file paths are safe:
+
+- relative paths only
+- no leading `/`
+- no `..`
+- no empty path segments
+- no `src/` directory
+
+If the generator exports a path normalization/helper, use it.
+
+Do not duplicate complex path logic if the generator already has a helper.
+
+### 8. No Zip Yet
+
+Do not create the zip archive in this step unless the earlier architecture explicitly decided the API route returns a zip directly.
+
+Preferred Phase 6 flow:
+
+```txt
+Step 10: API returns generated project data safely.
+Step 11: Download flow turns generated project data into a downloadable zip.
+```
+
+If the project architecture already expects the route to return a zip, document that decision in `progress-tracker.md` and keep the implementation minimal and server-side.
+
+### 9. Website Integration
+
+Do not wire the final Download button yet.
+
+It is acceptable to add a small typed client helper if useful:
+
+```txt
+apps/web/lib/api/client.ts
+```
+
+But the visible download flow belongs to Phase 6 Step 11.
+
+## Tests
+
+Use Vitest only.
+
+Add route/helper tests if the repo already has a pattern for testing Next.js route handlers.
+
+Recommended tests:
+
+- Valid config returns generated project data.
+- Invalid config returns `400`.
+- Incompatible config returns `422`.
+- Malformed JSON returns `400`.
+- Oversized body returns an error.
+- Response does not include unsafe file paths.
+- Response does not include `src/` paths.
+- Unexpected generator failure returns structured `500` without leaking stack traces.
+
+If route-handler testing is not already configured, add focused tests for extracted pure helpers instead of introducing a large new test stack.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+If generator/schema package tests may be affected, run:
+
+```bash
+npm test -w @launchkit/schema
+npm test -w @launchkit/generator
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 10 completed: Create API generate route
+
+Changes made:
+- Added POST /api/generate route.
+- Added request validation using @launchkit/schema.
+- Added compatibility validation.
+- Connected route to @launchkit/generator.
+- Added structured success and error responses.
+- Added basic request size and JSON safety checks.
+- Added generated path safety checks before response.
+- Confirmed no generated project code is executed.
+- Confirmed no generated project dependencies are installed.
+- Confirmed zip download UI remains for the next step.
+
+Files changed:
+- apps/web/app/api/generate/route.ts
+- apps/web/lib/api/generate.ts, if added
+- apps/web/lib/api/errors.ts, if added
+- apps/web/lib/api/response.ts, if added
+- apps/web/lib/api/client.ts, if added
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 11: Create download flow
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- `POST /api/generate` exists.
+- The route validates request JSON using `@launchkit/schema`.
+- The route validates compatibility using shared schema helpers.
+- The route calls `@launchkit/generator`.
+- Valid configs return generated project data.
+- Invalid configs return structured errors.
+- Compatibility failures return structured errors.
+- Malformed or oversized requests are handled safely.
+- The route does not write generated files to disk.
+- The route does not execute generated project code.
+- The route does not install generated project dependencies.
+- Generated paths are checked before response.
+- No generated `src/` paths are returned.
+- Final zip download UI is not implemented yet.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/app/api/generate/route.ts b/apps/web/app/api/generate/route.ts
new file mode 100644
index 0000000..b453a4e
--- /dev/null
+++ b/apps/web/app/api/generate/route.ts
@@ -0,0 +1,12 @@
+import {
+  handleGenerateProjectRequest,
+  methodNotAllowedResponse,
+} from "../../../lib/api/generate";
+
+export async function POST(request: Request): Promise<Response> {
+  return handleGenerateProjectRequest(request);
+}
+
+export function GET(): Response {
+  return methodNotAllowedResponse();
+}
diff --git a/apps/web/lib/api/generate.test.ts b/apps/web/lib/api/generate.test.ts
new file mode 100644
index 0000000..90f83bf
--- /dev/null
+++ b/apps/web/lib/api/generate.test.ts
@@ -0,0 +1,226 @@
+import { describe, expect, it } from "vitest";
+
+import { defaultLaunchKitConfig, type LaunchKitConfig } from "@launchkit/schema";
+
+import {
+  MAX_GENERATE_REQUEST_BYTES,
+  handleGenerateProjectRequest,
+  serializeGeneratedProject,
+} from "./generate";
+
+describe("generate API helpers", () => {
+  it("returns generated project data for a valid config", async () => {
+    const response = await handleGenerateProjectRequest(jsonRequest(defaultLaunchKitConfig));
+    const body = await readJson(response);
+
+    expect(response.status).toBe(200);
+    expect(body.project).toMatchObject({
+      name: defaultLaunchKitConfig.name,
+      packageManager: defaultLaunchKitConfig.packageManager,
+    });
+    expect(body.project!.files).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: "app/layout.tsx",
+          encoding: "utf8",
+        }),
+        expect.objectContaining({
+          path: "package.json",
+          encoding: "utf8",
+        }),
+      ]),
+    );
+  });
+
+  it("returns 400 for invalid configs", async () => {
+    const response = await handleGenerateProjectRequest(
+      jsonRequest({
+        ...defaultLaunchKitConfig,
+        name: "Invalid Name",
+      }),
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(400);
+    expect(body.error).toMatchObject({
+      code: "invalid_config",
+    });
+    expect(body.error!.issues).toEqual(expect.any(Array));
+  });
+
+  it("returns 422 for incompatible configs", async () => {
+    const response = await handleGenerateProjectRequest(
+      jsonRequest({
+        ...defaultLaunchKitConfig,
+        database: "none",
+        orm: "prisma",
+      }),
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(422);
+    expect(body.error).toMatchObject({
+      code: "incompatible_config",
+    });
+    expect(body.error!.issues).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          code: "prisma_requires_postgresql",
+        }),
+      ]),
+    );
+  });
+
+  it("returns 400 for malformed JSON", async () => {
+    const response = await handleGenerateProjectRequest(
+      new Request("http://localhost/api/generate", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: "{",
+      }),
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(400);
+    expect(body.error).toMatchObject({
+      code: "invalid_json",
+    });
+  });
+
+  it("returns 400 for oversized request bodies", async () => {
+    const response = await handleGenerateProjectRequest(
+      new Request("http://localhost/api/generate", {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          ...defaultLaunchKitConfig,
+          extra: "x".repeat(MAX_GENERATE_REQUEST_BYTES),
+        }),
+      }),
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(400);
+    expect(body.error).toMatchObject({
+      code: "request_too_large",
+    });
+  });
+
+  it("returns 400 for non-JSON requests", async () => {
+    const response = await handleGenerateProjectRequest(
+      new Request("http://localhost/api/generate", {
+        method: "POST",
+        headers: {
+          "content-type": "text/plain",
+        },
+        body: JSON.stringify(defaultLaunchKitConfig),
+      }),
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(400);
+    expect(body.error).toMatchObject({
+      code: "unsupported_content_type",
+    });
+  });
+
+  it("rejects unsafe generated paths before response serialization", () => {
+    expect(() =>
+      serializeGeneratedProject({
+        name: "unsafe",
+        packageManager: "npm",
+        files: [
+          {
+            path: "../outside.txt",
+            contents: "bad",
+          },
+        ],
+      }),
+    ).toThrow("Unsafe generated path");
+  });
+
+  it("rejects generated src directory paths before response serialization", () => {
+    expect(() =>
+      serializeGeneratedProject({
+        name: "unsafe",
+        packageManager: "npm",
+        files: [
+          {
+            path: "src/app/page.tsx",
+            contents: "bad",
+          },
+        ],
+      }),
+    ).toThrow("Unsafe generated path");
+  });
+
+  it("returns structured 500 errors without stack traces", async () => {
+    const response = await handleGenerateProjectRequest(
+      jsonRequest(defaultLaunchKitConfig),
+      {
+        generate: async () => {
+          throw new Error("/internal/path/secret.ts exploded");
+        },
+      },
+    );
+    const body = await readJson(response);
+
+    expect(response.status).toBe(500);
+    expect(body.error).toEqual({
+      code: "generation_failed",
+      message: "Project generation failed.",
+    });
+  });
+
+  it("serializes binary file contents as base64", () => {
+    const project = serializeGeneratedProject({
+      name: "binary-demo",
+      packageManager: "pnpm",
+      files: [
+        {
+          path: "public/icon.bin",
+          contents: new Uint8Array([1, 2, 3]),
+        },
+      ],
+    });
+
+    expect(project.files).toEqual([
+      {
+        path: "public/icon.bin",
+        contents: "AQID",
+        encoding: "base64",
+      },
+    ]);
+  });
+});
+
+function jsonRequest(config: LaunchKitConfig | Record<string, unknown>): Request {
+  return new Request("http://localhost/api/generate", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(config),
+  });
+}
+
+type TestJsonBody = {
+  project?: {
+    name?: string;
+    packageManager?: string;
+    files?: unknown[];
+  };
+  error?: {
+    code?: string;
+    message?: string;
+    issues?: unknown[];
+  };
+};
+
+async function readJson(response: Response): Promise<TestJsonBody> {
+  return response.json();
+}
diff --git a/apps/web/lib/api/generate.ts b/apps/web/lib/api/generate.ts
new file mode 100644
index 0000000..1b4a5cf
--- /dev/null
+++ b/apps/web/lib/api/generate.ts
@@ -0,0 +1,255 @@
+import {
+  createGenerationPlan,
+  generateProject,
+  normalizeGeneratedPath,
+  type GeneratedProject,
+} from "@launchkit/generator";
+import {
+  LaunchKitCompatibilityError,
+  LaunchKitConfigSchema,
+  validateCompatibility,
+  type LaunchKitConfig,
+} from "@launchkit/schema";
+
+import { jsonErrorResponse, jsonResponse } from "./response";
+import { createWebTemplateLoader } from "./template-loader";
+
+export const MAX_GENERATE_REQUEST_BYTES = 64 * 1024;
+
+export type GenerateProjectResponse = {
+  project: {
+    name: string;
+    packageManager: "npm" | "pnpm";
+    files: Array<{
+      path: string;
+      contents: string;
+      encoding: "utf8" | "base64";
+    }>;
+  };
+};
+
+export type GenerateProjectHandlerOptions = {
+  generate?: (config: LaunchKitConfig) => Promise<GeneratedProject>;
+};
+
+export async function handleGenerateProjectRequest(
+  request: Request,
+  options: GenerateProjectHandlerOptions = {},
+): Promise<Response> {
+  const parsedBody = await readJsonRequestBody(request);
+
+  if (!parsedBody.ok) {
+    return parsedBody.response;
+  }
+
+  const parsedConfig = LaunchKitConfigSchema.safeParse(parsedBody.value);
+
+  if (!parsedConfig.success) {
+    return jsonErrorResponse({
+      status: 400,
+      code: "invalid_config",
+      message: "Request body must be a valid LaunchKit config.",
+      issues: parsedConfig.error.issues,
+    });
+  }
+
+  const compatibilityIssues = validateCompatibility(parsedConfig.data);
+
+  if (compatibilityIssues.length > 0) {
+    return jsonErrorResponse({
+      status: 422,
+      code: "incompatible_config",
+      message: "Selected stack options are not compatible.",
+      issues: compatibilityIssues,
+    });
+  }
+
+  try {
+    const project = await (options.generate ?? generateProjectFromConfig)(
+      parsedConfig.data,
+    );
+
+    return jsonResponse<GenerateProjectResponse>(
+      {
+        project: serializeGeneratedProject(project),
+      },
+      200,
+    );
+  } catch (error) {
+    if (error instanceof LaunchKitCompatibilityError) {
+      return jsonErrorResponse({
+        status: 422,
+        code: "incompatible_config",
+        message: "Selected stack options are not compatible.",
+        issues: error.issues,
+      });
+    }
+
+    if (isZodError(error)) {
+      return jsonErrorResponse({
+        status: 400,
+        code: "invalid_config",
+        message: "Request body must be a valid LaunchKit config.",
+        issues: error.issues,
+      });
+    }
+
+    if (error instanceof UnsafeGeneratedPathError) {
+      return jsonErrorResponse({
+        status: 500,
+        code: "unsafe_generated_path",
+        message: "Generated project contained unsafe file paths.",
+      });
+    }
+
+    return jsonErrorResponse({
+      status: 500,
+      code: "generation_failed",
+      message: "Project generation failed.",
+    });
+  }
+}
+
+export function methodNotAllowedResponse(): Response {
+  return jsonErrorResponse({
+    status: 405,
+    code: "method_not_allowed",
+    message: "Use POST to generate a project.",
+  });
+}
+
+export async function generateProjectFromConfig(
+  config: LaunchKitConfig,
+): Promise<GeneratedProject> {
+  const plan = createGenerationPlan(config);
+
+  return generateProject(config, {
+    templateLoader: createWebTemplateLoader(plan),
+  });
+}
+
+export function serializeGeneratedProject(
+  project: GeneratedProject,
+): GenerateProjectResponse["project"] {
+  return {
+    name: project.name,
+    packageManager: project.packageManager,
+    files: project.files.map((file) => ({
+      path: assertSafeGeneratedResponsePath(file.path),
+      contents:
+        typeof file.contents === "string"
+          ? file.contents
+          : Buffer.from(file.contents).toString("base64"),
+      encoding: typeof file.contents === "string" ? "utf8" : "base64",
+    })),
+  };
+}
+
+function assertSafeGeneratedResponsePath(path: string): string {
+  let normalizedPath: string;
+
+  try {
+    normalizedPath = normalizeGeneratedPath(path);
+  } catch {
+    throw new UnsafeGeneratedPathError(path);
+  }
+
+  const segments = normalizedPath.split("/");
+
+  if (segments.includes("src")) {
+    throw new UnsafeGeneratedPathError(path);
+  }
+
+  return normalizedPath;
+}
+
+async function readJsonRequestBody(
+  request: Request,
+): Promise<{ ok: true; value: unknown } | { ok: false; response: Response }> {
+  const contentType = request.headers.get("content-type");
+
+  if (!isJsonContentType(contentType)) {
+    return {
+      ok: false,
+      response: jsonErrorResponse({
+        status: 400,
+        code: "unsupported_content_type",
+        message: "Request body must use application/json.",
+      }),
+    };
+  }
+
+  const contentLength = request.headers.get("content-length");
+
+  if (
+    contentLength &&
+    Number.isFinite(Number(contentLength)) &&
+    Number(contentLength) > MAX_GENERATE_REQUEST_BYTES
+  ) {
+    return {
+      ok: false,
+      response: jsonErrorResponse({
+        status: 400,
+        code: "request_too_large",
+        message: "Request body must be 64 KB or smaller.",
+      }),
+    };
+  }
+
+  const text = await request.text();
+
+  if (new TextEncoder().encode(text).byteLength > MAX_GENERATE_REQUEST_BYTES) {
+    return {
+      ok: false,
+      response: jsonErrorResponse({
+        status: 400,
+        code: "request_too_large",
+        message: "Request body must be 64 KB or smaller.",
+      }),
+    };
+  }
+
+  try {
+    return {
+      ok: true,
+      value: JSON.parse(text) as unknown,
+    };
+  } catch {
+    return {
+      ok: false,
+      response: jsonErrorResponse({
+        status: 400,
+        code: "invalid_json",
+        message: "Request body must be valid JSON.",
+      }),
+    };
+  }
+}
+
+function isJsonContentType(contentType: string | null): boolean {
+  if (!contentType) {
+    return false;
+  }
+
+  const mediaType = contentType.split(";")[0]?.trim().toLowerCase();
+
+  return mediaType === "application/json" || mediaType.endsWith("+json");
+}
+
+class UnsafeGeneratedPathError extends Error {
+  constructor(path: string) {
+    super(`Unsafe generated path: ${path}`);
+    this.name = "UnsafeGeneratedPathError";
+  }
+}
+
+function isZodError(error: unknown): error is { issues: unknown[] } {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "name" in error &&
+    error.name === "ZodError" &&
+    "issues" in error &&
+    Array.isArray(error.issues)
+  );
+}
diff --git a/apps/web/lib/api/response.ts b/apps/web/lib/api/response.ts
new file mode 100644
index 0000000..92e6723
--- /dev/null
+++ b/apps/web/lib/api/response.ts
@@ -0,0 +1,29 @@
+export type ApiErrorResponse = {
+  error: {
+    code: string;
+    message: string;
+    issues?: unknown[];
+  };
+};
+
+export function jsonResponse<TBody>(body: TBody, status: number): Response {
+  return Response.json(body, { status });
+}
+
+export function jsonErrorResponse(input: {
+  status: number;
+  code: string;
+  message: string;
+  issues?: unknown[];
+}): Response {
+  return jsonResponse<ApiErrorResponse>(
+    {
+      error: {
+        code: input.code,
+        message: input.message,
+        ...(input.issues ? { issues: input.issues } : {}),
+      },
+    },
+    input.status,
+  );
+}
diff --git a/apps/web/lib/api/template-loader.ts b/apps/web/lib/api/template-loader.ts
new file mode 100644
index 0000000..b702b61
--- /dev/null
+++ b/apps/web/lib/api/template-loader.ts
@@ -0,0 +1,98 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+
+import {
+  applyTemplatePlaceholders,
+  normalizeGeneratedPath,
+  type GenerationPlan,
+  type TemplateContext,
+  type TemplateFile,
+  type TemplateLoader,
+} from "@launchkit/generator";
+
+const templatesRoot = join(process.cwd(), "..", "..", "packages", "templates");
+
+export function createWebTemplateLoader(plan: GenerationPlan): TemplateLoader {
+  const targetPathBySourcePath = new Map(
+    plan.templateFiles.map((file) => [file.sourcePath, file.targetPath]),
+  );
+
+  return {
+    async loadTemplateFiles(input) {
+      const templateId = normalizeGeneratedPath(input.templateId);
+
+      if (templateId === `base/${plan.baseTemplate}`) {
+        return loadTemplateDirectory(templateId, input.context);
+      }
+
+      const targetPath = targetPathBySourcePath.get(templateId);
+
+      if (!targetPath) {
+        throw new Error("Generator requested an unexpected template file.");
+      }
+
+      return [
+        await loadTemplateFile({
+          sourcePath: templateId,
+          targetPath,
+          context: input.context,
+        }),
+      ];
+    },
+  };
+}
+
+async function loadTemplateDirectory(
+  templateId: string,
+  context: TemplateContext,
+): Promise<TemplateFile[]> {
+  const root = join(templatesRoot, templateId);
+  const filePaths = await listFiles(root);
+
+  return Promise.all(
+    filePaths.map((filePath) => {
+      const targetPath = relative(root, filePath).replaceAll("\\", "/");
+
+      return loadTemplateFile({
+        sourcePath: `${templateId}/${targetPath}`,
+        targetPath,
+        context,
+      });
+    }),
+  );
+}
+
+async function loadTemplateFile(input: {
+  sourcePath: string;
+  targetPath: string;
+  context: TemplateContext;
+}): Promise<TemplateFile> {
+  const safeSourcePath = normalizeGeneratedPath(input.sourcePath);
+  const safeTargetPath = normalizeGeneratedPath(input.targetPath);
+  const contents = await readFile(join(templatesRoot, safeSourcePath), "utf8");
+
+  return {
+    sourcePath: safeSourcePath,
+    targetPath: normalizeGeneratedPath(
+      applyTemplatePlaceholders(safeTargetPath, input.context),
+    ),
+    contents: applyTemplatePlaceholders(contents, input.context),
+  };
+}
+
+async function listFiles(root: string): Promise<string[]> {
+  const entries = await readdir(root, { withFileTypes: true });
+  const files: string[] = [];
+
+  for (const entry of entries) {
+    const entryPath = join(root, entry.name);
+
+    if (entry.isDirectory()) {
+      files.push(...(await listFiles(entryPath)));
+    } else {
+      files.push(entryPath);
+    }
+  }
+
+  return files;
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 69b042f..91b11f0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index cc0f53e..ee3524a 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Preview step is complete; Generate API route is next
+Primary focus: Phase 6 Generate API route is complete; Download flow is next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Preview step is complete; Generate API route is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 9 added the Preview step using generator plan data for package, script, env, and feature file details; Generate API route is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 10 added `POST /api/generate` with schema validation, compatibility checks, generator integration, JSON project output, and path safety checks; Download flow is next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -29,6 +29,159 @@ Primary focus: Phase 6 Preview step is complete; Generate API route is next
 
 Add entries in reverse chronological order.
 
+### 2026-07-03
+
+Phase 6 Step 10 completed: Create API generate route
+
+Changes made:
+
+- Added `POST /api/generate` App Router API route.
+- Added a structured `GET /api/generate` method-not-allowed response.
+- Added request parsing for JSON bodies.
+- Rejects non-JSON request content.
+- Rejects malformed JSON.
+- Rejects request bodies over 64 KB.
+- Added request validation using `@launchkit/schema` `LaunchKitConfigSchema`.
+- Added compatibility validation using `@launchkit/schema` `validateCompatibility`.
+- Connected the route to `@launchkit/generator` `generateProject`.
+- Added a server-side web template loader that reads template files and passes them through the generator `TemplateLoader` API.
+- Kept template composition and feature decisions inside `@launchkit/generator`.
+- Added JSON success response shape with project name, package manager, generated file paths, contents, and `utf8`/`base64` encoding metadata.
+- Encodes `Uint8Array` file contents as base64 instead of returning Node `Buffer` objects.
+- Added structured error responses for invalid JSON, invalid config, incompatible config, oversized requests, unsupported content type, unsafe generated paths, and unexpected generation failures.
+- Added generated path safety checks before responding:
+  - relative paths only;
+  - no leading `/`;
+  - no `..`;
+  - no empty path segments;
+  - no generated `src/` directory paths.
+- Added focused Vitest coverage for API helper behavior.
+- Added `test` script to `apps/web` so root `npm run test` includes web API tests.
+- Confirmed no generated project files are written to disk.
+- Confirmed no generated project code is executed.
+- Confirmed no generated project dependencies are installed.
+- Confirmed no zip archive or final browser download UI was added.
+- Followed the Step 10 prompt's JSON-response handoff for Step 11, despite older architecture notes describing the eventual API as zip-returning.
+
+Files changed:
+
+- `apps/web/app/api/generate/route.ts`
+- `apps/web/lib/api/generate.ts`
+- `apps/web/lib/api/generate.test.ts`
+- `apps/web/lib/api/response.ts`
+- `apps/web/lib/api/template-loader.ts`
+- `apps/web/package.json`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,260p' context/progress-tracker.md
+sed -n '1,300p' .agents/prompts/phase-06/step-10.md
+git status --short
+sed -n '301,620p' .agents/prompts/phase-06/step-10.md
+sed -n '1,260p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '1,280p' context/project-overview.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+rg --files apps/web packages/generator/src packages/templates/src packages/schema/src | sort
+sed -n '1,360p' packages/generator/src/generate-project.ts
+sed -n '1,260p' packages/generator/src/template-loader.ts
+cat apps/web/package.json
+sed -n '1,260p' packages/generator/src/__tests__/generate-project.test.ts
+sed -n '1,260p' packages/generator/src/__tests__/phase-5-completion.test.ts
+sed -n '1,220p' packages/schema/src/compatibility.ts
+sed -n '1,180p' packages/schema/src/index.ts
+cat apps/web/tsconfig.json
+cat package.json
+cat packages/generator/tsconfig.json
+sed -n '1,220p' packages/generator/src/file-tree.ts
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run test -w apps/web
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run test -w apps/web
+git diff --check
+cat packages/schema/package.json
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run test -w apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+rg 'createProjectZip|Generate ZIP|download\(|app/api/generate|child_process|exec\(|spawn\(|npm install|pnpm install|packages/cli|node:test|node --test' apps/web packages -g '!dist/**'
+git diff -- apps/web/app/api/generate/route.ts apps/web/lib/api/generate.ts apps/web/lib/api/template-loader.ts apps/web/lib/api/response.ts apps/web/lib/api/generate.test.ts apps/web/package.json
+git diff --check
+npm run build
+```
+
+Verification:
+
+- [x] `POST /api/generate` exists.
+- [x] Route validates request JSON using `@launchkit/schema`.
+- [x] Route validates compatibility using shared schema helpers.
+- [x] Route calls `@launchkit/generator`.
+- [x] Valid config returns generated project data.
+- [x] Invalid config returns structured `400`.
+- [x] Incompatible config returns structured `422`.
+- [x] Malformed JSON returns structured `400`.
+- [x] Non-JSON content returns structured `400`.
+- [x] Oversized body returns structured `400`.
+- [x] Unexpected generator failure returns structured `500` without stack traces or internal paths.
+- [x] Binary generated file contents serialize as base64.
+- [x] Generated file paths are checked before response.
+- [x] Unsafe generated paths are rejected before response serialization.
+- [x] Generated `src/` directory paths are rejected before response serialization.
+- [x] No generated `src/` paths are returned for the valid generated project.
+- [x] No generated project code is executed.
+- [x] No generated project dependencies are installed.
+- [x] No generated project files are written to disk.
+- [x] No zip archive was created.
+- [x] No final browser download UI was implemented.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app tests passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run test -w apps/web` passed: 1 test file, 10 tests.
+- `git diff --check` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed and listed `/api/generate` as a dynamic route.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: web app ran 10 tests, generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` passed across all workspaces when run with elevated permissions for the known Turbopack process/port restriction.
+- Source search found no API shell execution, CLI work, zip creation, or browser download implementation. It only found generated README install-command text and related generator tests.
+
+Notes/blockers:
+
+- Step 10 intentionally returns generated project JSON instead of a zip. Step 11 should consume this API response and implement the final browser download flow.
+- The web API template loader reads template files from the monorepo `packages/templates` directory through the generator `TemplateLoader` API because the generator package does not yet expose a production filesystem template loader.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 11: Create download flow.
+
 ### 2026-07-02
 
 Phase 6 Step 9 completed: Create Preview step

From 0cc4c203695fbb7398bb843aa6eae78c6d6f5ae6 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Fri, 3 Jul 2026 11:47:02 +0900
Subject: [PATCH 13/15] feat: implement download flow for generated projects

- Added Download step UI to the wizard, displaying project name, package manager, and stack summary.
- Created a typed API client for POST /api/generate to handle project generation requests.
- Implemented zip creation functionality using jszip, ensuring safe file paths and proper encoding.
- Triggered browser download of the generated zip file after successful project generation.
- Added loading, success, and error states to the download process.
- Included client-side validation before API calls to prevent invalid configurations.
- Updated tests for the API client and zip creation logic to ensure correctness and safety.
- Added relevant types for API responses and project files.
---
 .agents/prompts/phase-06/step-11.md           | 380 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |   8 +
 .../builder/download/download-button.tsx      |  20 +
 .../builder/download/download-status.tsx      |  38 ++
 .../builder/steps/download-step.tsx           | 148 +++++++
 apps/web/lib/api/client.test.ts               |  69 ++++
 apps/web/lib/api/client.ts                    |  51 +++
 apps/web/lib/api/generate.ts                  |  13 +-
 apps/web/lib/api/response.ts                  |   8 +-
 apps/web/lib/api/types.ts                     |  21 +
 apps/web/lib/builder/steps.ts                 |   2 +-
 .../lib/download/create-project-zip.test.ts   |  93 +++++
 apps/web/lib/download/create-project-zip.ts   |  76 ++++
 apps/web/package.json                         |   1 +
 context/progress-tracker.md                   | 170 +++++++-
 package-lock.json                             |  88 ++++
 16 files changed, 1164 insertions(+), 22 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-11.md
 create mode 100644 apps/web/components/builder/download/download-button.tsx
 create mode 100644 apps/web/components/builder/download/download-status.tsx
 create mode 100644 apps/web/components/builder/steps/download-step.tsx
 create mode 100644 apps/web/lib/api/client.test.ts
 create mode 100644 apps/web/lib/api/client.ts
 create mode 100644 apps/web/lib/api/types.ts
 create mode 100644 apps/web/lib/download/create-project-zip.test.ts
 create mode 100644 apps/web/lib/download/create-project-zip.ts

diff --git a/.agents/prompts/phase-06/step-11.md b/.agents/prompts/phase-06/step-11.md
new file mode 100644
index 0000000..0e1edb4
--- /dev/null
+++ b/.agents/prompts/phase-06/step-11.md
@@ -0,0 +1,380 @@
+# Phase 6 Step 11: Create Download Flow
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Step 10 is complete.
+4. Read this step prompt.
+5. Implement only this step.
+
+Do not move to Phase 6 Step 12.
+Do not add CLI functionality.
+Do not put generator logic in UI components.
+Do not run generated project code on the LaunchKit server.
+Do not install generated project dependencies.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Implement the website download flow for generated LaunchKit projects.
+
+Users should be able to:
+
+1. Review their selected config.
+2. Click a generate/download button.
+3. Receive a zip file containing the generated project.
+
+The flow should use the API route from Phase 6 Step 10:
+
+```txt
+POST /api/generate
+```
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Recommended files:
+
+```txt
+apps/web/components/builder/steps/download-step.tsx
+apps/web/components/builder/download/download-button.tsx
+apps/web/components/builder/download/download-status.tsx
+apps/web/lib/download/create-project-zip.ts
+apps/web/lib/api/client.ts
+apps/web/components/builder/builder-shell.tsx
+```
+
+Adjust paths to match the existing app structure and conventions.
+
+## Requirements
+
+### 1. Download Step UI
+
+Implement the Download step in the wizard.
+
+It should show:
+
+- Project name.
+- Selected package manager.
+- Short selected stack summary.
+- Generate/download button.
+- Loading state.
+- Success state.
+- Error state.
+
+Keep the UI compact and practical.
+
+Do not make this a marketing confirmation page.
+
+### 2. API Client
+
+Create or update a typed client helper for:
+
+```txt
+POST /api/generate
+```
+
+It should:
+
+- Send the current `LaunchKitConfig`.
+- Handle non-2xx responses.
+- Parse structured API errors.
+- Return generated project data.
+
+Do not duplicate generator logic in the client.
+
+### 3. Zip Creation
+
+Create a zip file from the generated project response.
+
+Preferred browser-side approach:
+
+- Use a small zip library if already installed.
+- If no zip library exists, add one only if appropriate for the repo.
+
+Good option:
+
+```txt
+jszip
+```
+
+If adding a dependency, add it to the correct workspace package:
+
+```txt
+apps/web
+```
+
+Do not add zip logic to `@launchkit/generator` unless the existing architecture already planned a zip adapter there.
+
+### 4. Zip Contents
+
+The zip should contain generated files under a top-level project folder:
+
+```txt
+{{projectName}}/
+  package.json
+  app/page.tsx
+  ...
+```
+
+Example zip file name:
+
+```txt
+{{projectName}}.zip
+```
+
+File contents should come from the API response.
+
+For each file:
+
+- Use `utf8` contents as text.
+- Use `base64` contents for binary files if present.
+
+Do not include unsafe paths.
+Do not include absolute paths.
+Do not include paths containing `..`.
+Do not include empty path segments.
+Do not include `src/`.
+
+### 5. Browser Download
+
+Trigger the browser download after zip creation.
+
+Use a safe browser approach:
+
+- Create a Blob.
+- Create an object URL.
+- Create/click a temporary anchor.
+- Revoke the object URL after use.
+
+Do not write files to the server filesystem.
+
+### 6. State Handling
+
+The download flow should handle:
+
+```txt
+idle
+generating
+success
+error
+```
+
+Disable the download button while generating.
+
+Show a concise error message if:
+
+- API validation fails.
+- Compatibility validation fails.
+- Generation fails.
+- Zip creation fails.
+
+Do not leak stack traces.
+
+### 7. Validation Before Download
+
+Before calling the API, validate the current config using:
+
+```txt
+@launchkit/schema
+```
+
+If invalid:
+
+- Show concise errors.
+- Do not call the API.
+
+The API should still validate again server-side.
+
+### 8. No Generated Code Execution
+
+The download flow must not:
+
+- Run generated project code.
+- Install generated dependencies.
+- Execute shell commands.
+- Upload generated code anywhere.
+
+It should only request generated file data and package it as a zip.
+
+### 9. Visual Direction
+
+Use token-based styling:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Avoid repeated hardcoded color utilities:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Use existing shadcn/ui components if available:
+
+```txt
+Button
+Alert
+Badge
+Separator
+Progress
+```
+
+Do not nest cards inside cards.
+
+## Tests
+
+Use the test setup already present in the repo.
+
+Add or update focused tests where practical.
+
+Possible tests:
+
+- Download step renders project summary.
+- Download button is disabled while generating.
+- Invalid config prevents API call.
+- API errors render concise messages.
+- Zip helper rejects unsafe paths.
+- Zip helper rejects `src/` paths.
+- Zip helper includes files under the top-level project folder.
+- Zip helper handles UTF-8 file contents.
+- Zip helper handles base64 file contents if supported.
+
+If browser download behavior is hard to test in the current setup, test the pure zip/path helper and document UI manual verification in `progress-tracker.md`.
+
+## Verification
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+If adding a dependency, run:
+
+```bash
+npm install
+```
+
+or the appropriate workspace install command for the existing repo setup.
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Manual Verification
+
+If the app can be run locally, manually verify:
+
+1. Start the web app.
+2. Complete the wizard with the default config.
+3. Go to Download.
+4. Click download.
+5. Confirm a zip downloads.
+6. Confirm the zip contains a top-level project folder.
+7. Confirm the zip contains expected generated files.
+8. Confirm no `src/` folder exists.
+
+If local app startup is not possible, document why in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After implementation, update `progress-tracker.md` with:
+
+```txt
+Phase 6 Step 11 completed: Create download flow
+
+Changes made:
+- Added Download step UI.
+- Added API client for POST /api/generate.
+- Added zip creation helper.
+- Added browser download trigger.
+- Added loading, success, and error states.
+- Added client-side validation before generation.
+- Added path safety checks for zip contents.
+- Confirmed generated code is not executed or installed.
+
+Files changed:
+- apps/web/components/builder/steps/download-step.tsx
+- apps/web/components/builder/download/download-button.tsx
+- apps/web/components/builder/download/download-status.tsx
+- apps/web/lib/download/create-project-zip.ts
+- apps/web/lib/api/client.ts
+- apps/web/components/builder/builder-shell.tsx
+- apps/web/package.json, if a dependency was added
+- package-lock.json, if dependencies changed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Manual verification:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 6 Step 12: Responsive UI polish and Phase 6 verification
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- Download step renders in the wizard.
+- Download button calls `POST /api/generate`.
+- Generated project data is turned into a zip.
+- Zip downloads in the browser.
+- Zip contains a top-level project folder.
+- Zip contains only safe relative paths.
+- Zip does not include `src/`.
+- Invalid config prevents API calls.
+- API errors are shown clearly.
+- Loading, success, and error states work.
+- No generator logic is duplicated in UI components.
+- Generated project code is not executed.
+- Generated project dependencies are not installed.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass if configured, or missing/unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index 1f4d58c..fe8bbe1 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 
 import { AuthStep } from "@/components/builder/steps/auth-step";
 import { DatabaseStep } from "@/components/builder/steps/database-step";
+import { DownloadStep } from "@/components/builder/steps/download-step";
 import { ExtrasStep } from "@/components/builder/steps/extras-step";
 import { FrameworkStep } from "@/components/builder/steps/framework-step";
 import { OrmStep } from "@/components/builder/steps/orm-step";
@@ -53,6 +54,7 @@ export function BuilderShell() {
   const isAuthStep = currentStep.id === "auth";
   const isExtrasStep = currentStep.id === "extras";
   const isPreviewStep = currentStep.id === "preview";
+  const isDownloadStep = currentStep.id === "download";
   const isNextDisabled =
     (isProjectStep && !projectStepValidation.isValid) ||
     (isFrameworkStep && !frameworkStepValidation.isValid) ||
@@ -177,6 +179,12 @@ export function BuilderShell() {
                     validation={previewStepValidation}
                   />
                 ) : null}
+                {isDownloadStep ? (
+                  <DownloadStep
+                    config={builderState.config}
+                    validation={previewStepValidation}
+                  />
+                ) : null}
               </WizardStepPanel>
               <WizardNavigation
                 isFirstStep={isFirstStep}
diff --git a/apps/web/components/builder/download/download-button.tsx b/apps/web/components/builder/download/download-button.tsx
new file mode 100644
index 0000000..07c159a
--- /dev/null
+++ b/apps/web/components/builder/download/download-button.tsx
@@ -0,0 +1,20 @@
+type DownloadButtonProps = {
+  isGenerating: boolean;
+  onClick: () => void;
+};
+
+export function DownloadButton({
+  isGenerating,
+  onClick,
+}: DownloadButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={isGenerating}
+      className="inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-45 sm:w-auto"
+    >
+      {isGenerating ? "Generating..." : "Generate ZIP"}
+    </button>
+  );
+}
diff --git a/apps/web/components/builder/download/download-status.tsx b/apps/web/components/builder/download/download-status.tsx
new file mode 100644
index 0000000..9805399
--- /dev/null
+++ b/apps/web/components/builder/download/download-status.tsx
@@ -0,0 +1,38 @@
+type DownloadStatusProps = {
+  status: "idle" | "generating" | "success" | "error";
+  message?: string;
+};
+
+export function DownloadStatus({ status, message }: DownloadStatusProps) {
+  if (status === "idle") {
+    return null;
+  }
+
+  const isError = status === "error";
+
+  return (
+    <div
+      role={isError ? "alert" : "status"}
+      className={[
+        "rounded-md border bg-background p-4 text-sm",
+        isError
+          ? "border-destructive text-destructive"
+          : "border-border text-muted-foreground",
+      ].join(" ")}
+    >
+      {message ?? getDefaultMessage(status)}
+    </div>
+  );
+}
+
+function getDefaultMessage(status: DownloadStatusProps["status"]): string {
+  if (status === "generating") {
+    return "Generating project...";
+  }
+
+  if (status === "success") {
+    return "Download started.";
+  }
+
+  return "";
+}
diff --git a/apps/web/components/builder/steps/download-step.tsx b/apps/web/components/builder/steps/download-step.tsx
new file mode 100644
index 0000000..348111c
--- /dev/null
+++ b/apps/web/components/builder/steps/download-step.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import type { LaunchKitConfig } from "@launchkit/schema";
+
+import { DownloadButton } from "@/components/builder/download/download-button";
+import { DownloadStatus } from "@/components/builder/download/download-status";
+import {
+  GenerateProjectApiError,
+  generateProjectRequest,
+} from "@/lib/api/client";
+import { createBuilderPreview } from "@/lib/builder/preview";
+import type { PreviewStepValidation } from "@/lib/builder/validation";
+import { createProjectZip } from "@/lib/download/create-project-zip";
+
+type DownloadStatusState = "idle" | "generating" | "success" | "error";
+
+type DownloadStepProps = {
+  config: LaunchKitConfig;
+  validation: PreviewStepValidation;
+};
+
+export function DownloadStep({ config, validation }: DownloadStepProps) {
+  const [status, setStatus] = useState<DownloadStatusState>("idle");
+  const [message, setMessage] = useState<string | undefined>();
+  const preview = useMemo(() => createBuilderPreview(config), [config]);
+  const summaryItems = preview.stackSummary.filter((item) =>
+    ["Framework", "UI", "Database", "ORM", "Auth", "Docker"].includes(
+      item.label,
+    ),
+  );
+  const isGenerating = status === "generating";
+
+  async function downloadProject() {
+    if (!validation.isValid) {
+      setStatus("error");
+      setMessage(getValidationMessage(validation.errors));
+      return;
+    }
+
+    setStatus("generating");
+    setMessage("Generating project...");
+
+    try {
+      const response = await generateProjectRequest(config);
+      const zipBlob = await createProjectZip(response.project);
+
+      triggerBrowserDownload(zipBlob, `${response.project.name}.zip`);
+      setStatus("success");
+      setMessage("Download started.");
+    } catch (error) {
+      setStatus("error");
+      setMessage(getErrorMessage(error));
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <section className="rounded-md border border-border bg-background p-4">
+        <h3 className="text-sm font-semibold text-foreground">
+          Project summary
+        </h3>
+        <dl className="mt-3 grid gap-3 sm:grid-cols-2">
+          <div>
+            <dt className="text-xs font-medium text-muted-foreground">
+              Project name
+            </dt>
+            <dd className="mt-0.5 font-mono text-sm text-foreground">
+              {config.name}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-xs font-medium text-muted-foreground">
+              Package manager
+            </dt>
+            <dd className="mt-0.5 font-mono text-sm text-foreground">
+              {config.packageManager}
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section className="rounded-md border border-border bg-background p-4">
+        <h3 className="text-sm font-semibold text-foreground">Selected stack</h3>
+        <dl className="mt-3 grid gap-x-4 gap-y-2 sm:grid-cols-2">
+          {summaryItems.map((item) => (
+            <div key={item.label} className="min-w-0">
+              <dt className="text-xs font-medium text-muted-foreground">
+                {item.label}
+              </dt>
+              <dd className="mt-0.5 truncate text-sm text-foreground">
+                {item.value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-sm text-muted-foreground">
+          Creates `{config.name}.zip` in your browser. Generated code is not run
+          or installed.
+        </p>
+        <DownloadButton
+          isGenerating={isGenerating}
+          onClick={() => void downloadProject()}
+        />
+      </div>
+
+      <DownloadStatus status={status} message={message} />
+    </div>
+  );
+}
+
+function getValidationMessage(
+  errors: PreviewStepValidation["errors"],
+): string {
+  return (
+    Object.values(errors).find((error): error is string => Boolean(error)) ??
+    "Fix the selected stack before generating."
+  );
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof GenerateProjectApiError) {
+    return error.message;
+  }
+
+  if (error instanceof Error && error.name === "UnsafeZipPathError") {
+    return "Generated project contained unsafe file paths.";
+  }
+
+  return "Could not create the ZIP file.";
+}
+
+function triggerBrowserDownload(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+
+  anchor.href = url;
+  anchor.download = fileName;
+  anchor.rel = "noopener";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
diff --git a/apps/web/lib/api/client.test.ts b/apps/web/lib/api/client.test.ts
new file mode 100644
index 0000000..416f5f0
--- /dev/null
+++ b/apps/web/lib/api/client.test.ts
@@ -0,0 +1,69 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { defaultLaunchKitConfig } from "@launchkit/schema";
+
+import {
+  GenerateProjectApiError,
+  generateProjectRequest,
+} from "./client";
+
+describe("generateProjectRequest", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns generated project data from a successful response", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        Response.json({
+          project: {
+            name: "my-app",
+            packageManager: "npm",
+            files: [],
+          },
+        }),
+      ),
+    );
+
+    await expect(generateProjectRequest(defaultLaunchKitConfig)).resolves.toEqual({
+      project: {
+        name: "my-app",
+        packageManager: "npm",
+        files: [],
+      },
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/generate",
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify(defaultLaunchKitConfig),
+      }),
+    );
+  });
+
+  it("throws structured API errors for non-2xx responses", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(
+        Response.json(
+          {
+            error: {
+              code: "invalid_config",
+              message: "Request body must be a valid LaunchKit config.",
+              issues: [{ path: ["name"] }],
+            },
+          },
+          { status: 400 },
+        ),
+      ),
+    );
+
+    await expect(generateProjectRequest(defaultLaunchKitConfig)).rejects.toMatchObject({
+      code: "invalid_config",
+      status: 400,
+      message: "Request body must be a valid LaunchKit config.",
+      issues: [{ path: ["name"] }],
+    } satisfies Partial<GenerateProjectApiError>);
+  });
+});
diff --git a/apps/web/lib/api/client.ts b/apps/web/lib/api/client.ts
new file mode 100644
index 0000000..15b3477
--- /dev/null
+++ b/apps/web/lib/api/client.ts
@@ -0,0 +1,51 @@
+import type { LaunchKitConfig } from "@launchkit/schema";
+
+import type { ApiErrorResponse, GenerateProjectResponse } from "./types";
+
+export class GenerateProjectApiError extends Error {
+  readonly code: string;
+  readonly status: number;
+  readonly issues?: unknown[];
+
+  constructor(input: {
+    code: string;
+    message: string;
+    status: number;
+    issues?: unknown[];
+  }) {
+    super(input.message);
+    this.name = "GenerateProjectApiError";
+    this.code = input.code;
+    this.status = input.status;
+    this.issues = input.issues;
+  }
+}
+
+export async function generateProjectRequest(
+  config: LaunchKitConfig,
+): Promise<GenerateProjectResponse> {
+  const response = await fetch("/api/generate", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(config),
+  });
+
+  const body = (await response.json()) as
+    | GenerateProjectResponse
+    | ApiErrorResponse;
+
+  if (!response.ok) {
+    const error = "error" in body ? body.error : undefined;
+
+    throw new GenerateProjectApiError({
+      status: response.status,
+      code: error?.code ?? "request_failed",
+      message: error?.message ?? "Project generation failed.",
+      issues: error?.issues,
+    });
+  }
+
+  return body as GenerateProjectResponse;
+}
diff --git a/apps/web/lib/api/generate.ts b/apps/web/lib/api/generate.ts
index 1b4a5cf..2afc7de 100644
--- a/apps/web/lib/api/generate.ts
+++ b/apps/web/lib/api/generate.ts
@@ -13,21 +13,10 @@ import {
 
 import { jsonErrorResponse, jsonResponse } from "./response";
 import { createWebTemplateLoader } from "./template-loader";
+import type { GenerateProjectResponse } from "./types";
 
 export const MAX_GENERATE_REQUEST_BYTES = 64 * 1024;
 
-export type GenerateProjectResponse = {
-  project: {
-    name: string;
-    packageManager: "npm" | "pnpm";
-    files: Array<{
-      path: string;
-      contents: string;
-      encoding: "utf8" | "base64";
-    }>;
-  };
-};
-
 export type GenerateProjectHandlerOptions = {
   generate?: (config: LaunchKitConfig) => Promise<GeneratedProject>;
 };
diff --git a/apps/web/lib/api/response.ts b/apps/web/lib/api/response.ts
index 92e6723..5d1084e 100644
--- a/apps/web/lib/api/response.ts
+++ b/apps/web/lib/api/response.ts
@@ -1,10 +1,4 @@
-export type ApiErrorResponse = {
-  error: {
-    code: string;
-    message: string;
-    issues?: unknown[];
-  };
-};
+import type { ApiErrorResponse } from "./types";
 
 export function jsonResponse<TBody>(body: TBody, status: number): Response {
   return Response.json(body, { status });
diff --git a/apps/web/lib/api/types.ts b/apps/web/lib/api/types.ts
new file mode 100644
index 0000000..39cea7a
--- /dev/null
+++ b/apps/web/lib/api/types.ts
@@ -0,0 +1,21 @@
+export type ApiErrorResponse = {
+  error: {
+    code: string;
+    message: string;
+    issues?: unknown[];
+  };
+};
+
+export type GeneratedProjectFileResponse = {
+  path: string;
+  contents: string;
+  encoding: "utf8" | "base64";
+};
+
+export type GenerateProjectResponse = {
+  project: {
+    name: string;
+    packageManager: "npm" | "pnpm";
+    files: GeneratedProjectFileResponse[];
+  };
+};
diff --git a/apps/web/lib/builder/steps.ts b/apps/web/lib/builder/steps.ts
index 6d3f84a..c2f6e92 100644
--- a/apps/web/lib/builder/steps.ts
+++ b/apps/web/lib/builder/steps.ts
@@ -69,6 +69,6 @@ export const builderSteps = [
     id: "download",
     label: "Download",
     shortLabel: "ZIP",
-    placeholder: "Download step coming later.",
+    placeholder: "Generate and download the project ZIP.",
   },
 ] as const satisfies readonly BuilderStep[];
diff --git a/apps/web/lib/download/create-project-zip.test.ts b/apps/web/lib/download/create-project-zip.test.ts
new file mode 100644
index 0000000..8c5c5e2
--- /dev/null
+++ b/apps/web/lib/download/create-project-zip.test.ts
@@ -0,0 +1,93 @@
+import JSZip from "jszip";
+import { describe, expect, it } from "vitest";
+
+import { createProjectZip } from "./create-project-zip";
+
+describe("createProjectZip", () => {
+  it("includes files under the top-level project folder", async () => {
+    const zip = await loadZip(
+      await createProjectZip({
+        name: "my-app",
+        packageManager: "npm",
+        files: [
+          {
+            path: "package.json",
+            contents: "{}\n",
+            encoding: "utf8",
+          },
+          {
+            path: "app/page.tsx",
+            contents: "export default function Page() {}\n",
+            encoding: "utf8",
+          },
+        ],
+      }),
+    );
+
+    expect(Object.keys(zip.files)).toEqual(
+      expect.arrayContaining([
+        "my-app/package.json",
+        "my-app/app/page.tsx",
+      ]),
+    );
+    await expect(zip.file("my-app/package.json")?.async("text")).resolves.toBe(
+      "{}\n",
+    );
+  });
+
+  it("handles base64 file contents", async () => {
+    const zip = await loadZip(
+      await createProjectZip({
+        name: "binary-demo",
+        packageManager: "pnpm",
+        files: [
+          {
+            path: "public/icon.bin",
+            contents: "AQID",
+            encoding: "base64",
+          },
+        ],
+      }),
+    );
+
+    const bytes = await zip.file("binary-demo/public/icon.bin")?.async("uint8array");
+
+    expect(Array.from(bytes ?? [])).toEqual([1, 2, 3]);
+  });
+
+  it("rejects unsafe paths", async () => {
+    await expect(
+      createProjectZip({
+        name: "unsafe",
+        packageManager: "npm",
+        files: [
+          {
+            path: "../outside.txt",
+            contents: "bad",
+            encoding: "utf8",
+          },
+        ],
+      }),
+    ).rejects.toThrow("Unsafe zip path");
+  });
+
+  it("rejects generated src directory paths", async () => {
+    await expect(
+      createProjectZip({
+        name: "unsafe",
+        packageManager: "npm",
+        files: [
+          {
+            path: "src/app/page.tsx",
+            contents: "bad",
+            encoding: "utf8",
+          },
+        ],
+      }),
+    ).rejects.toThrow("Unsafe zip path");
+  });
+});
+
+async function loadZip(blob: Blob): Promise<JSZip> {
+  return JSZip.loadAsync(await blob.arrayBuffer());
+}
diff --git a/apps/web/lib/download/create-project-zip.ts b/apps/web/lib/download/create-project-zip.ts
new file mode 100644
index 0000000..96fddde
--- /dev/null
+++ b/apps/web/lib/download/create-project-zip.ts
@@ -0,0 +1,76 @@
+import JSZip from "jszip";
+
+import type { GenerateProjectResponse } from "@/lib/api/types";
+
+export class UnsafeZipPathError extends Error {
+  constructor(path: string) {
+    super(`Unsafe zip path: ${path}`);
+    this.name = "UnsafeZipPathError";
+  }
+}
+
+export async function createProjectZip(
+  project: GenerateProjectResponse["project"],
+): Promise<Blob> {
+  const zip = new JSZip();
+  const projectFolder = assertSafeProjectFolder(project.name);
+
+  for (const file of project.files) {
+    const safePath = assertSafeProjectFilePath(file.path);
+    const zipPath = `${projectFolder}/${safePath}`;
+
+    zip.file(
+      zipPath,
+      file.contents,
+      file.encoding === "base64" ? { base64: true } : undefined,
+    );
+  }
+
+  return zip.generateAsync({
+    type: "blob",
+    compression: "DEFLATE",
+  });
+}
+
+function assertSafeProjectFolder(name: string): string {
+  if (
+    name.length === 0 ||
+    name.trim().length === 0 ||
+    name.includes("/") ||
+    name.includes("\\") ||
+    name === "." ||
+    name === ".."
+  ) {
+    throw new UnsafeZipPathError(name);
+  }
+
+  return name;
+}
+
+function assertSafeProjectFilePath(path: string): string {
+  const normalizedPath = path.replaceAll("\\", "/");
+
+  if (
+    normalizedPath.length === 0 ||
+    normalizedPath.trim().length === 0 ||
+    normalizedPath === "." ||
+    normalizedPath === ".." ||
+    normalizedPath.startsWith("/") ||
+    /^[A-Za-z]:($|\/)/.test(normalizedPath)
+  ) {
+    throw new UnsafeZipPathError(path);
+  }
+
+  const segments = normalizedPath.split("/");
+
+  if (
+    segments.some(
+      (segment) => segment.length === 0 || segment === "." || segment === "..",
+    ) ||
+    segments.includes("src")
+  ) {
+    throw new UnsafeZipPathError(path);
+  }
+
+  return normalizedPath;
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 91b11f0..ff7c090 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
     "@launchkit/schema": "0.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jszip": "^3.10.1",
     "lucide-react": "^1.21.0",
     "next": "16.2.9",
     "radix-ui": "^1.6.0",
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index ee3524a..79808ca 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Generate API route is complete; Download flow is next
+Primary focus: Phase 6 Download flow is complete; Responsive UI polish and Phase 6 verification are next
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Generate API route is complete; Download flow is next
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 10 added `POST /api/generate` with schema validation, compatibility checks, generator integration, JSON project output, and path safety checks; Download flow is next. |
+| Phase 6 | Website MVP                           | In Progress | Step 11 added the Download step, API client, browser ZIP creation, browser download trigger, and download-state handling; responsive polish and Phase 6 verification are next. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,172 @@ Add entries in reverse chronological order.
 
 ### 2026-07-03
 
+Phase 6 Step 11 completed: Create download flow
+
+Changes made:
+
+- Added Download step UI to the website wizard.
+- Added compact project name and package manager summary.
+- Added short selected stack summary using existing schema/generator-derived preview labels.
+- Added `Generate ZIP` button.
+- Added loading, success, and error states.
+- Added client-side validation before calling the API.
+- Invalid config states show concise errors and do not call the API.
+- Added typed API client for `POST /api/generate`.
+- API client sends the current `LaunchKitConfig`.
+- API client parses structured API errors and throws concise client errors.
+- Added browser-side ZIP creation helper using `jszip`.
+- Added `jszip` to `apps/web` dependencies and updated `package-lock.json`.
+- ZIP helper puts generated files under a top-level `{{projectName}}/` folder.
+- ZIP helper supports UTF-8 file contents.
+- ZIP helper supports base64 file contents.
+- ZIP helper rejects unsafe paths:
+  - absolute paths;
+  - `..`;
+  - empty path segments;
+  - generated `src/` directory paths;
+  - unsafe top-level project folder names.
+- Added browser download trigger using `Blob`, object URL, temporary anchor click, and URL revocation.
+- Download flow only requests generated file data and packages it as a zip in the browser.
+- Confirmed no generated project code is executed.
+- Confirmed no generated project dependencies are installed.
+- Confirmed no generated files are written to the server filesystem.
+- Added focused Vitest coverage for the API client and ZIP helper.
+- Kept generator logic out of UI components.
+- Confirmed no CLI functionality was added.
+
+Files changed:
+
+- `apps/web/components/builder/download/download-button.tsx`
+- `apps/web/components/builder/download/download-status.tsx`
+- `apps/web/components/builder/steps/download-step.tsx`
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/lib/api/client.ts`
+- `apps/web/lib/api/client.test.ts`
+- `apps/web/lib/api/types.ts`
+- `apps/web/lib/api/generate.ts`
+- `apps/web/lib/api/response.ts`
+- `apps/web/lib/download/create-project-zip.ts`
+- `apps/web/lib/download/create-project-zip.test.ts`
+- `apps/web/lib/builder/steps.ts`
+- `apps/web/package.json`
+- `package-lock.json`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,280p' context/progress-tracker.md
+sed -n '1,340p' .agents/prompts/phase-06/step-11.md
+git status --short
+sed -n '341,680p' .agents/prompts/phase-06/step-11.md
+sed -n '1,260p' context/architecture.md
+sed -n '1,360p' context/build-plan.md
+sed -n '1,280p' context/project-overview.md
+sed -n '261,620p' context/architecture.md
+sed -n '621,1040p' context/architecture.md
+sed -n '361,760p' context/build-plan.md
+sed -n '761,1160p' context/build-plan.md
+sed -n '281,620p' context/project-overview.md
+sed -n '621,980p' context/project-overview.md
+sed -n '1,280p' context/ui-rules.md
+sed -n '281,620p' context/ui-rules.md
+rg 'jszip|fflate|zip' package.json package-lock.json apps/web/package.json packages -g '!dist/**'
+sed -n '1,260p' apps/web/components/builder/builder-shell.tsx
+sed -n '1,260p' apps/web/lib/api/generate.ts
+sed -n '1,220p' apps/web/lib/builder/preview.ts
+npm install jszip -w apps/web
+npm install jszip -w apps/web
+sed -n '1,260p' apps/web/lib/builder/validation.ts
+sed -n '1,260p' apps/web/lib/builder/steps.ts
+sed -n '1,220p' apps/web/components/builder/wizard-navigation.tsx
+cat apps/web/package.json
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run test -w apps/web
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run test -w apps/web
+git diff --check
+npm run build -w apps/web
+npm run build -w apps/web
+npm run typecheck
+npm run test
+npm run lint
+rg 'child_process|exec\(|spawn\(|npm install|pnpm install|packages/cli|node:test|node --test|writeFile|mkdir|fs/promises|createProjectZip' apps/web packages -g '!dist/**'
+git diff -- apps/web/components/builder/steps/download-step.tsx apps/web/lib/download/create-project-zip.ts apps/web/lib/api/client.ts apps/web/lib/api/types.ts apps/web/components/builder/builder-shell.tsx apps/web/package.json package-lock.json
+git diff --check
+npm run build
+git status --short
+git diff --stat
+git diff -- apps/web/components/builder/steps/download-step.tsx apps/web/lib/download/create-project-zip.ts apps/web/lib/api/client.ts apps/web/lib/api/types.ts apps/web/components/builder/builder-shell.tsx apps/web/package.json package-lock.json
+```
+
+Verification:
+
+- [x] Download step renders in the wizard.
+- [x] Download step shows project name.
+- [x] Download step shows selected package manager.
+- [x] Download step shows a short selected stack summary.
+- [x] Download button calls the typed `POST /api/generate` client helper.
+- [x] Invalid config prevents API calls in the Download step.
+- [x] API client handles non-2xx structured API errors.
+- [x] Generated project data is turned into a ZIP.
+- [x] ZIP contains files under the top-level project folder.
+- [x] ZIP helper handles UTF-8 file contents.
+- [x] ZIP helper handles base64 file contents.
+- [x] ZIP helper rejects unsafe paths.
+- [x] ZIP helper rejects generated `src/` paths.
+- [x] Browser download trigger uses a `Blob`, object URL, temporary anchor, and URL revocation.
+- [x] Download button is disabled while generating.
+- [x] Loading, success, and error states are implemented.
+- [x] API errors render concise messages.
+- [x] No generated project code is executed.
+- [x] No generated project dependencies are installed.
+- [x] No generated files are written to the server filesystem by the download flow.
+- [x] No generator logic is duplicated in UI components.
+- [x] No CLI functionality was added.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app tests passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] Workspace build passed outside the sandbox.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- Initial `npm install jszip -w apps/web` failed in the sandbox because the npm registry could not be resolved. Rerunning with elevated permissions succeeded, added 11 packages, and updated `package-lock.json`.
+- `npm install jszip -w apps/web` reported 2 moderate vulnerabilities in npm audit output. No `npm audit fix --force` was run because it would be an unrelated broad dependency change.
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run test -w apps/web` passed: 3 test files, 16 tests.
+- `git diff --check` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: web app ran 16 tests, generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `npm run build` passed across all workspaces when run with elevated permissions for the known Turbopack process/port restriction.
+- Source search found no generated-code execution, generated dependency install, CLI work, or Node test runner usage in the Step 11 implementation. It found expected template/test install text, existing server-side template file reads from Step 10, and the browser-side ZIP helper.
+
+Manual verification:
+
+- Local browser download QA was not run in this session because the user said they will run the dev server locally.
+- Automated ZIP tests verified the top-level project folder, UTF-8 contents, base64 contents, unsafe path rejection, and `src/` path rejection.
+
+Notes/blockers:
+
+- The browser-side ZIP flow depends on the Phase 6 Step 10 API returning generated project JSON.
+- The Turbopack sandbox failure remains an environment restriction; elevated builds pass.
+- `npm install` audit output currently reports 2 moderate vulnerabilities; this step did not attempt broad dependency remediation.
+- A local dev server was not started; the user will run it locally.
+
+Next suggested step:
+
+- Phase 6 Step 12: Responsive UI polish and Phase 6 verification.
+
 Phase 6 Step 10 completed: Create API generate route
 
 Changes made:
diff --git a/package-lock.json b/package-lock.json
index 7f31246..43eb1e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@launchkit/schema": "0.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "jszip": "^3.10.1",
         "lucide-react": "^1.21.0",
         "next": "16.2.9",
         "radix-ui": "^1.6.0",
@@ -6155,6 +6156,12 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cors": {
       "version": "2.8.6",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
@@ -8085,6 +8092,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -8882,6 +8895,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8935,6 +8960,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -9977,6 +10011,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -10275,6 +10315,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -10570,6 +10616,27 @@
         }
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/recast": {
       "version": "0.23.12",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.12.tgz",
@@ -10839,6 +10906,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -10989,6 +11062,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -11342,6 +11421,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",

From c110fe53a8acb8714264f262a732244d4c241291 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Fri, 3 Jul 2026 12:21:52 +0900
Subject: [PATCH 14/15] feat: Enhance responsive UI and verification for Phase
 6 wizard

- Updated various components to improve text wrapping and responsiveness across the wizard steps.
- Ensured that project names and selected options are displayed correctly without truncation.
- Added new tests to validate the wizard's functionality and ensure compliance with the defined schema.
- Created a new verification step to confirm the complete functionality of the website MVP.
- Documented changes and progress in the progress tracker.
---
 .agents/prompts/phase-06/step-12.md           | 410 ++++++++++++++++++
 apps/web/components/builder/builder-shell.tsx |   6 +-
 .../builder/preview/dependency-list.tsx       |   4 +-
 .../builder/preview/env-var-list.tsx          |   4 +-
 .../builder/preview/script-list.tsx           |   6 +-
 .../builder/preview/stack-summary.tsx         |   2 +-
 .../components/builder/steps/auth-step.tsx    |   2 +-
 .../builder/steps/database-step.tsx           |   2 +-
 .../builder/steps/download-step.tsx           |   4 +-
 .../components/builder/steps/extras-step.tsx  |   2 +-
 .../builder/steps/framework-step.tsx          |   2 +-
 .../web/components/builder/steps/orm-step.tsx |   2 +-
 .../components/builder/steps/project-step.tsx |   2 +-
 .../builder/steps/styling-ui-step.tsx         |   4 +-
 .../components/builder/wizard-progress.tsx    |   5 +-
 .../components/builder/wizard-step-panel.tsx  |  10 +-
 .../lib/builder/phase-6-verification.test.ts  | 162 +++++++
 context/progress-tracker.md                   | 140 +++++-
 memory.md                                     |  87 ++--
 19 files changed, 787 insertions(+), 69 deletions(-)
 create mode 100644 .agents/prompts/phase-06/step-12.md
 create mode 100644 apps/web/lib/builder/phase-6-verification.test.ts

diff --git a/.agents/prompts/phase-06/step-12.md b/.agents/prompts/phase-06/step-12.md
new file mode 100644
index 0000000..55a2810
--- /dev/null
+++ b/.agents/prompts/phase-06/step-12.md
@@ -0,0 +1,410 @@
+# Phase 6 Step 12: Responsive UI Polish and Phase 6 Verification
+
+You are working on LaunchKit.
+
+Before making changes:
+
+1. Read all files in `context/` in order.
+2. Read `progress-tracker.md`.
+3. Confirm that Phase 6 Steps 1-11 are complete.
+4. Read this step prompt.
+5. Implement only this verification and polish step.
+
+Do not start Phase 7.
+Do not add CLI functionality.
+Do not add new product options.
+Do not add unsupported frameworks, databases, ORMs, auth providers, UI libraries, or package managers.
+Do not put generator logic in `apps/web`.
+Use npm workspaces.
+Use Vitest for tests.
+Do not use Node's built-in test runner.
+
+## Goal
+
+Polish and verify the complete LaunchKit website MVP wizard.
+
+This step should make sure the website flow is usable, responsive, visually consistent, and correctly connected to schema, generator, preview, API generation, and download behavior.
+
+Phase 6 should only be marked complete if the website MVP genuinely works.
+
+## Scope
+
+Work inside:
+
+```txt
+apps/web/
+```
+
+Make small, focused fixes across the Phase 6 website files as needed.
+
+Do not perform unrelated refactors.
+
+## Required User Flow
+
+Verify the full website flow:
+
+```txt
+1. Project
+2. Framework
+3. Styling and UI
+4. Database
+5. ORM
+6. Auth
+7. Extras
+8. Preview
+9. Download
+```
+
+The user should be able to:
+
+1. Open the website.
+2. Enter a valid project name.
+3. Choose package manager.
+4. Review fixed framework choices.
+5. Choose UI option.
+6. Choose database option.
+7. Choose ORM option.
+8. Choose auth option.
+9. Choose Docker option.
+10. Preview generated output.
+11. Download a zip.
+
+## Verification Checklist
+
+### 1. Wizard Navigation
+
+Confirm:
+
+- All 9 steps render.
+- Back and Next work.
+- Back is disabled on the first step.
+- Next is disabled or replaced appropriately on the last step.
+- Step progress updates correctly.
+- Invalid current-step config prevents advancing.
+- Users can return to previous steps without losing selections.
+
+### 2. Project Step
+
+Confirm:
+
+- Project name input works.
+- Project name validation matches `@launchkit/schema`.
+- Invalid names show concise errors.
+- Invalid names prevent advancing.
+- Package manager selector supports `npm` and `pnpm`.
+
+### 3. Framework Step
+
+Confirm:
+
+- Next.js is shown.
+- TypeScript is shown.
+- App Router is shown.
+- No `src/` structure is shown.
+- Unsupported framework choices are not exposed.
+
+### 4. Styling and UI Step
+
+Confirm:
+
+- Tailwind CSS is shown as fixed.
+- UI selector supports `none` and `shadcn`.
+- Unsupported styling systems and UI libraries are not exposed.
+- shadcn selection remains compatible with Tailwind.
+
+### 5. Database Step
+
+Confirm:
+
+- Database selector supports `none` and `postgres`.
+- Selecting `database: "none"` resets incompatible Prisma and Docker selections.
+- Selecting `database: "none"` does not reset Auth.js credentials.
+- Unsupported databases are not exposed.
+
+### 6. ORM Step
+
+Confirm:
+
+- ORM selector supports `none` and `prisma`.
+- Prisma is disabled or unavailable unless PostgreSQL is selected.
+- Prisma can be selected when PostgreSQL is selected.
+- Unsupported ORMs are not exposed.
+
+### 7. Auth Step
+
+Confirm:
+
+- Auth selector supports `none` and `authjs-credentials`.
+- Auth.js credentials can be selected without PostgreSQL.
+- Auth.js credentials does not force database or ORM changes.
+- Auth.js credentials is clearly described as a scaffold.
+- Unsupported auth providers are not exposed.
+
+### 8. Extras Step
+
+Confirm:
+
+- Docker selector supports `none` and `postgres`.
+- Docker PostgreSQL is disabled or unavailable unless PostgreSQL is selected.
+- Docker PostgreSQL can be selected when PostgreSQL is selected.
+- Unsupported extras are not exposed.
+
+### 9. Preview Step
+
+Confirm preview shows:
+
+```txt
+Selected stack summary
+Dependencies
+Dev dependencies
+Scripts
+Environment variables
+Generated file tree
+```
+
+Confirm:
+
+- Preview matches selected options.
+- Preview excludes unselected optional feature files.
+- Preview does not show `src/`.
+- Invalid config shows concise errors.
+
+### 10. API Generate Route
+
+Confirm:
+
+- `POST /api/generate` validates config with `@launchkit/schema`.
+- Compatibility validation runs server-side.
+- The route calls `@launchkit/generator`.
+- Invalid config returns structured errors.
+- Incompatible config returns structured errors.
+- The route does not execute generated code.
+- The route does not install generated dependencies.
+- The route does not write generated project files to disk.
+- Generated paths are safe before response.
+
+### 11. Download Flow
+
+Confirm:
+
+- Download button calls the API route.
+- Loading state appears while generating.
+- Errors are displayed clearly.
+- A zip downloads on success.
+- Zip file is named from the project name.
+- Zip contains a top-level project folder.
+- Zip contains expected generated files.
+- Zip does not include `src/`.
+- Zip does not include unsafe paths.
+
+## Responsive UI Polish
+
+Verify and polish the UI at common viewport sizes:
+
+```txt
+mobile: 375px wide
+tablet: 768px wide
+desktop: 1280px wide
+wide desktop: 1440px+ wide
+```
+
+Fix issues such as:
+
+- Text overflow.
+- Button labels wrapping badly.
+- Step navigation crowding.
+- Panels becoming too narrow.
+- File tree overflowing without scroll handling.
+- Preview lists becoming unreadable.
+- Download state layout breaking.
+- Touch targets being too small on mobile.
+
+Use stable dimensions and responsive constraints where needed.
+
+Do not use viewport-width-based font sizing.
+Do not use negative letter spacing.
+Do not add decorative gradient blobs/orbs.
+Do not nest cards inside cards.
+
+## Visual Consistency
+
+Confirm the website still feels like a focused developer tool:
+
+- Minimal
+- Fast to scan
+- Practical
+- Trustworthy
+- Technical without clutter
+
+Use token-based classes:
+
+```txt
+bg-background
+text-foreground
+bg-primary
+text-primary-foreground
+border-border
+text-muted-foreground
+ring-ring
+bg-accent
+```
+
+Remove repeated one-off hardcoded color utilities where practical:
+
+```txt
+bg-green-500
+text-emerald-600
+border-lime-400
+```
+
+Do not redesign the whole app. Make focused polish fixes only.
+
+## Tests
+
+Use Vitest only.
+
+Add or update focused tests where the current test setup supports it.
+
+Recommended coverage:
+
+- Wizard navigation.
+- Project name validation.
+- Dependent option behavior.
+- Preview excludes unselected features.
+- API route validation.
+- Download zip path safety helper.
+
+Do not introduce a large new frontend test stack in this final verification step unless the repo already has the foundation for it.
+
+## Verification Commands
+
+Run the relevant checks available in the repo.
+
+Recommended:
+
+```bash
+npm run typecheck
+npm test
+npm run lint
+npm run build
+```
+
+If app-specific commands exist, also run:
+
+```bash
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+```
+
+If schema/generator packages may be affected, run:
+
+```bash
+npm test -w @launchkit/schema
+npm test -w @launchkit/generator
+```
+
+Use the actual workspace command names from the repo.
+
+If a command does not exist, record that clearly in `progress-tracker.md`.
+
+## Manual Verification
+
+If the web app can run locally, manually verify:
+
+1. Start the web app.
+2. Complete the wizard with default options.
+3. Preview the generated output.
+4. Download the zip.
+5. Inspect the zip contents.
+6. Repeat with all compatible MVP features selected:
+   - shadcn/ui
+   - PostgreSQL
+   - Prisma
+   - Auth.js credentials
+   - Docker PostgreSQL
+7. Confirm invalid combinations are prevented or explained.
+8. Check mobile, tablet, and desktop widths.
+
+If local app startup is not possible, document why in `progress-tracker.md`.
+
+## Progress Tracker Update
+
+After verification, update `progress-tracker.md`.
+
+If Phase 6 is complete, mark:
+
+```txt
+Phase 6: Complete
+Phase 7: Ready
+```
+
+Add an entry like:
+
+```txt
+Phase 6 Step 12 completed: Responsive UI polish and Phase 6 verification
+
+Changes made:
+- Verified full website wizard flow.
+- Verified all Phase 6 steps.
+- Polished responsive layout issues.
+- Verified API generation route.
+- Verified download flow.
+- Verified generated zip contents.
+- Fixed any small in-scope issues found during verification.
+
+Files changed:
+- apps/web/..., if polish fixes were needed
+- relevant test files, if added or changed
+- progress-tracker.md
+
+Commands run:
+- ...
+
+Verification result:
+- ...
+
+Manual verification:
+- ...
+
+Notes/blockers:
+- ...
+
+Next suggested step:
+- Phase 7 Step 1: Begin testing, validation, and hardening
+```
+
+If Phase 6 is not complete, do not mark it complete. Instead record:
+
+```txt
+Phase 6: In progress
+Blocked/missing:
+- ...
+
+Next suggested step:
+- Fix the listed Phase 6 blocker before starting Phase 7.
+```
+
+## Completion Criteria
+
+This step is complete when:
+
+- All 9 wizard steps work.
+- Builder state persists while navigating between steps.
+- Schema validation works in the UI.
+- Compatibility behavior works in the UI.
+- Preview accurately reflects selected options.
+- API generation route works.
+- Download flow produces a zip.
+- Zip contents are correct and safe.
+- No generated project contains `src/`.
+- The website is usable on mobile, tablet, and desktop.
+- No generator logic is duplicated in UI components.
+- No generated code is executed or installed by the website.
+- TypeScript checks pass, or unrelated failures are documented.
+- Tests pass, or unrelated failures are documented.
+- Build/lint pass if configured, or missing/unrelated failures are documented.
+- `progress-tracker.md` is updated.
+- Phase 6 is marked complete only if the website MVP genuinely works.
+
+Then stop.
diff --git a/apps/web/components/builder/builder-shell.tsx b/apps/web/components/builder/builder-shell.tsx
index fe8bbe1..e26222a 100644
--- a/apps/web/components/builder/builder-shell.tsx
+++ b/apps/web/components/builder/builder-shell.tsx
@@ -110,7 +110,7 @@ export function BuilderShell() {
               Project builder
             </h1>
           </div>
-          <div className="rounded-md border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
+          <div className="max-w-full rounded-md border border-border bg-card px-3 py-2 font-mono text-sm text-muted-foreground break-all">
             {builderState.config.name}
           </div>
         </header>
@@ -208,10 +208,10 @@ export function BuilderShell() {
                 {selectedStack.map(([label, value]) => (
                   <div
                     key={label}
-                    className="flex items-center justify-between gap-4 border-b border-border pb-3 last:border-b-0 last:pb-0"
+                    className="flex min-w-0 items-start justify-between gap-4 border-b border-border pb-3 last:border-b-0 last:pb-0"
                   >
                     <dt className="text-sm text-muted-foreground">{label}</dt>
-                    <dd className="rounded-md bg-muted px-2 py-1 font-mono text-xs text-foreground">
+                    <dd className="max-w-48 rounded-md bg-muted px-2 py-1 text-right font-mono text-xs text-foreground wrap-break-word">
                       {value}
                     </dd>
                   </div>
diff --git a/apps/web/components/builder/preview/dependency-list.tsx b/apps/web/components/builder/preview/dependency-list.tsx
index 86e6c1e..5fb6e02 100644
--- a/apps/web/components/builder/preview/dependency-list.tsx
+++ b/apps/web/components/builder/preview/dependency-list.tsx
@@ -22,9 +22,9 @@ export function DependencyList({ title, dependencies }: DependencyListProps) {
           {dependencies.map((dependency) => (
             <li
               key={dependency.name}
-              className="flex min-w-0 items-center justify-between gap-3 text-sm"
+              className="flex min-w-0 items-start justify-between gap-3 text-sm"
             >
-              <span className="truncate font-mono text-foreground">
+              <span className="min-w-0 font-mono text-foreground break-all">
                 {dependency.name}
               </span>
               <span className="shrink-0 font-mono text-xs text-muted-foreground">
diff --git a/apps/web/components/builder/preview/env-var-list.tsx b/apps/web/components/builder/preview/env-var-list.tsx
index 5fb9fac..2082932 100644
--- a/apps/web/components/builder/preview/env-var-list.tsx
+++ b/apps/web/components/builder/preview/env-var-list.tsx
@@ -14,8 +14,8 @@ export function EnvVarList({ envVars }: EnvVarListProps) {
         <ul className="space-y-3">
           {envVars.map((envVar) => (
             <li key={envVar.name} className="min-w-0">
-              <div className="flex items-center gap-2">
-                <span className="truncate font-mono text-sm text-foreground">
+              <div className="flex min-w-0 flex-wrap items-center gap-2">
+                <span className="font-mono text-sm text-foreground break-all">
                   {envVar.name}
                 </span>
                 {envVar.required ? (
diff --git a/apps/web/components/builder/preview/script-list.tsx b/apps/web/components/builder/preview/script-list.tsx
index c2ff950..68dd124 100644
--- a/apps/web/components/builder/preview/script-list.tsx
+++ b/apps/web/components/builder/preview/script-list.tsx
@@ -12,8 +12,10 @@ export function ScriptList({ scripts }: ScriptListProps) {
         <dl className="space-y-2">
           {scripts.map((script) => (
             <div key={script.name} className="min-w-0 text-sm">
-              <dt className="font-mono text-foreground">{script.name}</dt>
-              <dd className="mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap font-mono text-xs text-muted-foreground">
+              <dt className="font-mono text-foreground break-all">
+                {script.name}
+              </dt>
+              <dd className="mt-0.5 overflow-x-auto pb-1 font-mono text-xs text-muted-foreground whitespace-nowrap">
                 {script.command}
               </dd>
             </div>
diff --git a/apps/web/components/builder/preview/stack-summary.tsx b/apps/web/components/builder/preview/stack-summary.tsx
index 2243a60..773d0b3 100644
--- a/apps/web/components/builder/preview/stack-summary.tsx
+++ b/apps/web/components/builder/preview/stack-summary.tsx
@@ -18,7 +18,7 @@ export function StackSummary({ items }: StackSummaryProps) {
             <dt className="text-xs font-medium text-muted-foreground">
               {item.label}
             </dt>
-            <dd className="mt-0.5 truncate text-sm text-foreground">
+            <dd className="mt-0.5 text-sm text-foreground break-words">
               {item.value}
             </dd>
           </div>
diff --git a/apps/web/components/builder/steps/auth-step.tsx b/apps/web/components/builder/steps/auth-step.tsx
index 15d65fb..204574d 100644
--- a/apps/web/components/builder/steps/auth-step.tsx
+++ b/apps/web/components/builder/steps/auth-step.tsx
@@ -65,7 +65,7 @@ export function AuthStep({
                     : "border-border bg-background text-foreground hover:bg-muted",
                 ].join(" ")}
               >
-                <span className="flex items-start justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-3">
                   <span className="text-sm font-semibold">
                     {getAuthOptionLabel(option)}
                   </span>
diff --git a/apps/web/components/builder/steps/database-step.tsx b/apps/web/components/builder/steps/database-step.tsx
index 5bc0558..b4f56f8 100644
--- a/apps/web/components/builder/steps/database-step.tsx
+++ b/apps/web/components/builder/steps/database-step.tsx
@@ -76,7 +76,7 @@ export function DatabaseStep({
                     : "border-border bg-background text-foreground hover:bg-muted",
                 ].join(" ")}
               >
-                <span className="flex items-start justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-3">
                   <span className="text-sm font-semibold">
                     {getDatabaseOptionLabel(option)}
                   </span>
diff --git a/apps/web/components/builder/steps/download-step.tsx b/apps/web/components/builder/steps/download-step.tsx
index 348111c..28319e4 100644
--- a/apps/web/components/builder/steps/download-step.tsx
+++ b/apps/web/components/builder/steps/download-step.tsx
@@ -66,7 +66,7 @@ export function DownloadStep({ config, validation }: DownloadStepProps) {
             <dt className="text-xs font-medium text-muted-foreground">
               Project name
             </dt>
-            <dd className="mt-0.5 font-mono text-sm text-foreground">
+            <dd className="mt-0.5 font-mono text-sm text-foreground break-all">
               {config.name}
             </dd>
           </div>
@@ -89,7 +89,7 @@ export function DownloadStep({ config, validation }: DownloadStepProps) {
               <dt className="text-xs font-medium text-muted-foreground">
                 {item.label}
               </dt>
-              <dd className="mt-0.5 truncate text-sm text-foreground">
+              <dd className="mt-0.5 text-sm text-foreground break-words">
                 {item.value}
               </dd>
             </div>
diff --git a/apps/web/components/builder/steps/extras-step.tsx b/apps/web/components/builder/steps/extras-step.tsx
index b6f191c..3e1dc7a 100644
--- a/apps/web/components/builder/steps/extras-step.tsx
+++ b/apps/web/components/builder/steps/extras-step.tsx
@@ -83,7 +83,7 @@ export function ExtrasStep({
                   !isSelected && !isDisabled ? "hover:bg-muted" : "",
                 ].join(" ")}
               >
-                <span className="flex items-start justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-3">
                   <span className="text-sm font-semibold">
                     {getDockerOptionLabel(option)}
                   </span>
diff --git a/apps/web/components/builder/steps/framework-step.tsx b/apps/web/components/builder/steps/framework-step.tsx
index 7dc70ec..36144fe 100644
--- a/apps/web/components/builder/steps/framework-step.tsx
+++ b/apps/web/components/builder/steps/framework-step.tsx
@@ -79,7 +79,7 @@ export function FrameworkStep({ config, validation }: FrameworkStepProps) {
             key={item.label}
             className="rounded-md border border-primary bg-accent p-4 text-accent-foreground"
           >
-            <div className="flex items-start justify-between gap-3">
+            <div className="flex flex-wrap items-start justify-between gap-3">
               <div>
                 <p className="text-sm font-medium text-muted-foreground">
                   {item.label}
diff --git a/apps/web/components/builder/steps/orm-step.tsx b/apps/web/components/builder/steps/orm-step.tsx
index c58ab8e..ef8f3b0 100644
--- a/apps/web/components/builder/steps/orm-step.tsx
+++ b/apps/web/components/builder/steps/orm-step.tsx
@@ -83,7 +83,7 @@ export function OrmStep({
                   !isSelected && !isDisabled ? "hover:bg-muted" : "",
                 ].join(" ")}
               >
-                <span className="flex items-start justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-3">
                   <span className="text-sm font-semibold">
                     {getOrmOptionLabel(option)}
                   </span>
diff --git a/apps/web/components/builder/steps/project-step.tsx b/apps/web/components/builder/steps/project-step.tsx
index 009b6a7..0f28ea5 100644
--- a/apps/web/components/builder/steps/project-step.tsx
+++ b/apps/web/components/builder/steps/project-step.tsx
@@ -80,7 +80,7 @@ export function ProjectStep({
                     : "border-border bg-background text-foreground hover:bg-muted",
                 ].join(" ")}
               >
-                <span className="flex items-center justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-2">
                   <span className="text-sm font-semibold">{option.label}</span>
                   {option.recommended ? (
                     <span className="rounded-md border border-border bg-card px-2 py-0.5 text-xs font-medium text-muted-foreground">
diff --git a/apps/web/components/builder/steps/styling-ui-step.tsx b/apps/web/components/builder/steps/styling-ui-step.tsx
index 924f622..532d891 100644
--- a/apps/web/components/builder/steps/styling-ui-step.tsx
+++ b/apps/web/components/builder/steps/styling-ui-step.tsx
@@ -47,7 +47,7 @@ export function StylingUiStep({
   return (
     <div className="space-y-5">
       <div className="rounded-md border border-primary bg-accent p-4 text-accent-foreground">
-        <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-wrap items-start justify-between gap-3">
           <div>
             <p className="text-sm font-medium text-muted-foreground">
               Fixed styling
@@ -90,7 +90,7 @@ export function StylingUiStep({
                     : "border-border bg-background text-foreground hover:bg-muted",
                 ].join(" ")}
               >
-                <span className="flex items-start justify-between gap-3">
+                <span className="flex flex-wrap items-start justify-between gap-3">
                   <span className="text-sm font-semibold">
                     {getUiOptionLabel(option)}
                   </span>
diff --git a/apps/web/components/builder/wizard-progress.tsx b/apps/web/components/builder/wizard-progress.tsx
index 74b0f1a..6bb98e0 100644
--- a/apps/web/components/builder/wizard-progress.tsx
+++ b/apps/web/components/builder/wizard-progress.tsx
@@ -21,7 +21,7 @@ export function WizardProgress({ currentStepId }: WizardProgressProps) {
               <div
                 aria-current={isCurrent ? "step" : undefined}
                 className={[
-                  "flex min-h-14 flex-col justify-center rounded-md border px-3 py-2 text-left transition-colors",
+                  "flex min-h-12 flex-col justify-center rounded-md border px-2.5 py-2 text-left transition-colors sm:min-h-14 sm:px-3",
                   isCurrent
                     ? "border-primary bg-accent text-accent-foreground"
                     : "border-border bg-card text-foreground",
@@ -32,10 +32,11 @@ export function WizardProgress({ currentStepId }: WizardProgressProps) {
                   {String(index + 1).padStart(2, "0")}
                 </span>
                 <span className="truncate text-sm font-semibold">
+                  <span className="sm:hidden">{step.shortLabel}</span>
                   <span className="hidden sm:inline lg:hidden">
                     {step.shortLabel}
                   </span>
-                  <span className="sm:hidden lg:inline">{step.label}</span>
+                  <span className="hidden lg:inline">{step.label}</span>
                 </span>
               </div>
             </li>
diff --git a/apps/web/components/builder/wizard-step-panel.tsx b/apps/web/components/builder/wizard-step-panel.tsx
index f3b6e81..8c14c28 100644
--- a/apps/web/components/builder/wizard-step-panel.tsx
+++ b/apps/web/components/builder/wizard-step-panel.tsx
@@ -19,7 +19,7 @@ export function WizardStepPanel({
       aria-labelledby="builder-step-title"
       className="rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm sm:p-6"
     >
-      <div className="mb-10 flex items-start justify-between gap-4">
+      <div className="mb-8 flex items-start justify-between gap-4 sm:mb-10">
         <div className="min-w-0">
           <p className="text-sm font-medium text-muted-foreground">
             Step {stepNumber} of {totalSteps}
@@ -35,11 +35,9 @@ export function WizardStepPanel({
           {step.shortLabel}
         </span>
       </div>
-      <div className="rounded-md border border-dashed border-border bg-background p-5">
-        {children ?? (
-          <p className="text-sm text-muted-foreground">{step.placeholder}</p>
-        )}
-      </div>
+      {children ?? (
+        <p className="text-sm text-muted-foreground">{step.placeholder}</p>
+      )}
     </section>
   );
 }
diff --git a/apps/web/lib/builder/phase-6-verification.test.ts b/apps/web/lib/builder/phase-6-verification.test.ts
new file mode 100644
index 0000000..078b5ee
--- /dev/null
+++ b/apps/web/lib/builder/phase-6-verification.test.ts
@@ -0,0 +1,162 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  authOptions,
+  databaseOptions,
+  defaultLaunchKitConfig,
+  dockerOptions,
+  frameworkOptions,
+  languageOptions,
+  ormOptions,
+  packageManagerOptions,
+  projectStructureOptions,
+  routerOptions,
+  stylingOptions,
+  uiOptions,
+  type LaunchKitConfig,
+} from "@launchkit/schema";
+
+import { createBuilderPreview } from "./preview";
+import { builderSteps } from "./steps";
+import {
+  validateAuthStep,
+  validateBuilderConfig,
+  validateProjectStep,
+} from "./validation";
+
+describe("Phase 6 website wizard contract", () => {
+  it("renders the required MVP step order", () => {
+    expect(builderSteps.map((step) => step.id)).toEqual([
+      "project",
+      "framework",
+      "styling-ui",
+      "database",
+      "orm",
+      "auth",
+      "extras",
+      "preview",
+      "download",
+    ]);
+  });
+
+  it("exposes only the supported MVP option values", () => {
+    expect(frameworkOptions).toEqual(["next"]);
+    expect(languageOptions).toEqual(["typescript"]);
+    expect(routerOptions).toEqual(["app"]);
+    expect(projectStructureOptions).toEqual(["no-src"]);
+    expect(stylingOptions).toEqual(["tailwind"]);
+    expect(uiOptions).toEqual(["none", "shadcn"]);
+    expect(databaseOptions).toEqual(["none", "postgres"]);
+    expect(ormOptions).toEqual(["none", "prisma"]);
+    expect(authOptions).toEqual(["none", "authjs-credentials"]);
+    expect(dockerOptions).toEqual(["none", "postgres"]);
+    expect(packageManagerOptions).toEqual(["npm", "pnpm"]);
+  });
+
+  it("uses schema validation for project names and supported package managers", () => {
+    expect(
+      validateProjectStep({
+        ...defaultLaunchKitConfig,
+        name: "Invalid Name",
+      }).errors.name,
+    ).toBeTruthy();
+
+    expect(
+      validateProjectStep({
+        ...defaultLaunchKitConfig,
+        packageManager: "yarn",
+      } as unknown as LaunchKitConfig).errors.packageManager,
+    ).toBeTruthy();
+  });
+
+  it("keeps Auth.js credentials independent from database and ORM choices", () => {
+    expect(
+      validateAuthStep({
+        ...defaultLaunchKitConfig,
+        auth: "authjs-credentials",
+        database: "none",
+        orm: "none",
+      }).isValid,
+    ).toBe(true);
+  });
+
+  it("rejects Prisma and PostgreSQL Docker without PostgreSQL", () => {
+    expect(
+      validateBuilderConfig({
+        ...defaultLaunchKitConfig,
+        database: "none",
+        orm: "prisma",
+      }).errors.orm,
+    ).toBeTruthy();
+
+    expect(
+      validateBuilderConfig({
+        ...defaultLaunchKitConfig,
+        database: "none",
+        docker: "postgres",
+      }).errors.docker,
+    ).toBeTruthy();
+  });
+
+  it("previews the selected stack without unselected optional files or src paths", () => {
+    const preview = createBuilderPreview(defaultLaunchKitConfig);
+
+    expect(preview.stackSummary).toEqual(
+      expect.arrayContaining([
+        { label: "Framework", value: "Next.js" },
+        { label: "Project structure", value: "No src folder" },
+        { label: "UI", value: "None" },
+        { label: "Database", value: "None" },
+      ]),
+    );
+    expect(preview.filePaths).toEqual(
+      expect.arrayContaining(["app/layout.tsx", "app/page.tsx", "package.json"]),
+    );
+    expect(preview.filePaths).not.toEqual(
+      expect.arrayContaining([
+        "components.json",
+        "prisma/schema.prisma",
+        "docker-compose.yml",
+      ]),
+    );
+    expect(preview.filePaths.every((path) => !path.startsWith("src/"))).toBe(
+      true,
+    );
+  });
+
+  it("previews full selected stack additions", () => {
+    const preview = createBuilderPreview({
+      ...defaultLaunchKitConfig,
+      ui: "shadcn",
+      database: "postgres",
+      orm: "prisma",
+      auth: "authjs-credentials",
+      docker: "postgres",
+      packageManager: "pnpm",
+    });
+
+    expect(preview.dependencies.map((dependency) => dependency.name)).toEqual(
+      expect.arrayContaining(["@prisma/client", "next-auth"]),
+    );
+    expect(preview.devDependencies.map((dependency) => dependency.name)).toEqual(
+      expect.arrayContaining(["prisma"]),
+    );
+    expect(preview.scripts.map((script) => script.name)).toEqual(
+      expect.arrayContaining(["dev", "db:generate", "db:push"]),
+    );
+    expect(preview.envVars.map((envVar) => envVar.name)).toEqual(
+      expect.arrayContaining(["DATABASE_URL", "AUTH_SECRET"]),
+    );
+    expect(preview.filePaths).toEqual(
+      expect.arrayContaining([
+        "components.json",
+        "prisma/schema.prisma",
+        "app/api/auth/[...nextauth]/route.ts",
+        "docker-compose.yml",
+      ]),
+    );
+    expect(preview.filePaths.every((path) => !path.startsWith("src/"))).toBe(
+      true,
+    );
+  });
+});
diff --git a/context/progress-tracker.md b/context/progress-tracker.md
index 79808ca..809c194 100644
--- a/context/progress-tracker.md
+++ b/context/progress-tracker.md
@@ -8,7 +8,7 @@ Use this file to track development progress, changes made, decisions, notes, blo
 Project: LaunchKit
 Stage: Foundation setup
 Current phase: Phase 6 in progress
-Primary focus: Phase 6 Download flow is complete; Responsive UI polish and Phase 6 verification are next
+Primary focus: Phase 6 Step 12 responsive polish and automated verification are complete; user-run browser/download QA remains before marking Phase 6 complete
 ```
 
 ## Phase Progress
@@ -20,7 +20,7 @@ Primary focus: Phase 6 Download flow is complete; Responsive UI polish and Phase
 | Phase 3 | Shared Schema and Compatibility Rules | Complete    | Step 8 checkpoint verified schema package completeness, exports, Vitest coverage, and workspace checks. |
 | Phase 4 | Generator Core                        | Complete    | Step 10 checkpoint verified generator exports, source organization, tests, builds, and Node-loadable ESM package output. |
 | Phase 5 | Template Implementation               | Complete    | Step 9 verified all MVP template layers, real-template generator output, path safety, and compatibility behavior. |
-| Phase 6 | Website MVP                           | In Progress | Step 11 added the Download step, API client, browser ZIP creation, browser download trigger, and download-state handling; responsive polish and Phase 6 verification are next. |
+| Phase 6 | Website MVP                           | In Progress | Step 12 polished responsive wizard layout and added Phase 6 contract tests; manual browser/download QA remains before marking Phase 6 complete. |
 | Phase 7 | Testing, Validation, and Hardening    | Not Started | Will add tests, smoke checks, and API safety.                                                           |
 | Phase 8 | Launch Preparation                    | Not Started | Will prepare docs, deployment, and final MVP review.                                                    |
 | Phase 9 | Future CLI                            | Not Started | Deferred until website MVP is stable.                                                                   |
@@ -31,6 +31,142 @@ Add entries in reverse chronological order.
 
 ### 2026-07-03
 
+Phase 6 Step 12 completed: Responsive UI polish and Phase 6 verification
+
+Changes made:
+
+- Removed the extra dashed inner frame from wizard step content to avoid a card-within-card feel.
+- Tightened wizard step header spacing on small screens.
+- Updated progress cards to use short labels on mobile/tablet and full labels on large screens.
+- Improved project-name wrapping in the header and Download step.
+- Improved current-selection value wrapping and width constraints.
+- Updated option-card label rows to wrap badges and radio indicators cleanly on narrow viewports.
+- Updated preview stack and download stack values to wrap instead of truncating important labels.
+- Updated dependency names and environment variable names to wrap safely.
+- Updated script command rows to scroll horizontally when exact command text is too long.
+- Added focused Phase 6 wizard contract tests for step order, supported options, validation, compatibility, preview contents, optional file inclusion/exclusion, and `src/` path exclusion.
+- Confirmed no CLI functionality was added.
+- Confirmed no new product options were added.
+- Confirmed generator logic was not moved into UI components.
+
+Files changed:
+
+- `apps/web/components/builder/builder-shell.tsx`
+- `apps/web/components/builder/preview/dependency-list.tsx`
+- `apps/web/components/builder/preview/env-var-list.tsx`
+- `apps/web/components/builder/preview/script-list.tsx`
+- `apps/web/components/builder/preview/stack-summary.tsx`
+- `apps/web/components/builder/steps/auth-step.tsx`
+- `apps/web/components/builder/steps/database-step.tsx`
+- `apps/web/components/builder/steps/download-step.tsx`
+- `apps/web/components/builder/steps/extras-step.tsx`
+- `apps/web/components/builder/steps/framework-step.tsx`
+- `apps/web/components/builder/steps/orm-step.tsx`
+- `apps/web/components/builder/steps/project-step.tsx`
+- `apps/web/components/builder/steps/styling-ui-step.tsx`
+- `apps/web/components/builder/wizard-progress.tsx`
+- `apps/web/components/builder/wizard-step-panel.tsx`
+- `apps/web/lib/builder/phase-6-verification.test.ts`
+- `context/progress-tracker.md`
+
+Commands run:
+
+```bash
+sed -n '1,240p' context/progress-tracker.md
+sed -n '1,260p' .agents/prompts/phase-06/step-12.md
+git status --short
+rg --files context
+find apps/web -maxdepth 3 -type f | sort
+find packages -maxdepth 3 -type f | sort
+sed -n '1,260p' context/project-overview.md
+sed -n '261,620p' context/project-overview.md
+sed -n '1,320p' context/architecture.md
+sed -n '321,760p' context/architecture.md
+sed -n '1,320p' context/build-plan.md
+sed -n '321,820p' context/build-plan.md
+sed -n '821,1240p' context/build-plan.md
+sed -n '1,320p' context/ui-rules.md
+sed -n '321,700p' context/ui-rules.md
+npm run test -w apps/web
+npm run typecheck -w apps/web
+npm run lint -w apps/web
+npm run build -w apps/web
+npm run build -w apps/web
+npm run dev -w apps/web
+npm run dev -w apps/web
+npm ls playwright
+npm ls @playwright/test
+curl -I http://localhost:3000
+curl -I http://localhost:3000
+npm run typecheck
+npm run test
+npm run lint
+git diff --check
+git status --short
+git diff --stat
+```
+
+Verification:
+
+- [x] All 9 wizard steps are defined in the required order.
+- [x] Supported MVP option values are constrained to the documented choices.
+- [x] Project-name validation uses shared schema validation.
+- [x] Unsupported package managers are rejected.
+- [x] Auth.js credentials remains valid without PostgreSQL.
+- [x] Prisma without PostgreSQL is rejected.
+- [x] Docker PostgreSQL without PostgreSQL is rejected.
+- [x] Preview includes selected stack summary data.
+- [x] Preview includes dependencies and dev dependencies.
+- [x] Preview includes scripts.
+- [x] Preview includes environment variables.
+- [x] Preview includes generated file tree paths.
+- [x] Preview excludes unselected optional feature files.
+- [x] Preview excludes `src/` paths.
+- [x] Full-stack preview includes Prisma, Auth.js, shadcn, Docker, env, and script additions.
+- [x] Download flow code still uses the API client and browser ZIP helper from Step 11.
+- [x] Responsive polish addressed mobile progress labels, wrapping, and scroll handling.
+- [x] Web app typecheck passed.
+- [x] Web app lint passed.
+- [x] Web app tests passed.
+- [x] Web app build passed after rerunning outside the sandbox.
+- [x] Workspace typecheck passed.
+- [x] Workspace tests passed.
+- [x] Workspace lint passed.
+- [x] `git diff --check` passed.
+
+Verification result:
+
+- Initial `npm run test -w apps/web` failed because the new verification test expected `db:migrate`, while the current generator exposes `db:push`. The test was corrected to match the generator contract.
+- Initial `npm run typecheck -w apps/web` failed because an intentionally invalid package manager literal needed an `unknown` cast before casting to `LaunchKitConfig`. The test was corrected.
+- `npm run test -w apps/web` passed after fixes: 4 test files, 23 tests.
+- `npm run typecheck -w apps/web` passed.
+- `npm run lint -w apps/web` passed.
+- `npm run build -w apps/web` failed in the sandbox because Turbopack could not create/bind a worker process. Rerunning with elevated permissions passed.
+- `npm run typecheck` passed across all workspaces.
+- `npm run test` passed across workspaces: web app ran 23 tests, generator package ran 111 tests, schema package ran 73 tests, and templates package ran 51 tests.
+- `npm run lint` passed.
+- `git diff --check` passed.
+
+Manual verification:
+
+- Browser QA was not completed in this session.
+- The in-app browser connector failed before exposing a usable tab because the Node REPL tool returned an internal `sandbox-state-meta` error.
+- The workspace does not currently include Playwright or `@playwright/test`, so a local Playwright fallback was not available without adding dependencies.
+- A sandboxed `curl -I http://localhost:3000` could not connect.
+- An elevated localhost `curl` check was not allowed.
+- An elevated `npm run dev -w apps/web` attempt found another Next dev server lock/process and exited; the user said they will do manual browser/download verification themselves.
+
+Notes/blockers:
+
+- Phase 6 is intentionally still marked `In Progress` until user-run browser/download QA confirms the website MVP genuinely works end to end.
+- No CLI work was started.
+- No new stack options were added.
+- Pre-existing unrelated worktree changes remain: `memory.md` is modified and `.agents/prompts/phase-06/step-12.md` is untracked.
+
+Next suggested step:
+
+- User-run manual QA for the wizard at 375px, 768px, 1280px, and 1440px+ widths, including a real `Generate ZIP` download.
+
 Phase 6 Step 11 completed: Create download flow
 
 Changes made:
diff --git a/memory.md b/memory.md
index e0fb564..4538b56 100644
--- a/memory.md
+++ b/memory.md
@@ -1,65 +1,74 @@
-# Memory — LaunchKit Phase 6 Preview Step
+# Memory — LaunchKit Phase 6 Download Flow
 
-Last updated: 2026-07-02 23:40 JST
+Last updated: 2026-07-03 12:01 JST
 
 ## What was built
 
-Phase 6 Website MVP wizard is complete through Step 9, Preview.
-
-Completed this session:
-
-- Added Preview step UI in `apps/web/components/builder/steps/preview-step.tsx`.
-- Added preview rendering components under `apps/web/components/builder/preview/`:
-  - `stack-summary.tsx`
-  - `dependency-list.tsx`
-  - `script-list.tsx`
-  - `env-var-list.tsx`
-  - `file-tree-preview.tsx`
-- Added `apps/web/lib/builder/preview.ts` to derive preview data.
-- Wired Preview into `apps/web/components/builder/builder-shell.tsx`.
-- Added Preview-step validation in `apps/web/lib/builder/validation.ts`.
-- Updated `apps/web/lib/builder/steps.ts` Preview placeholder.
-- Added `@launchkit/generator` as an explicit `apps/web` dependency in `apps/web/package.json` and `package-lock.json`.
-- Updated `context/progress-tracker.md` through Phase 6 Step 9. It now says the next suggested step is Phase 6 Step 10: Build generate API route.
+Phase 6 Website MVP wizard is complete through Step 11, Download flow.
+
+Completed recent steps:
+
+- Step 10 API route:
+  - Added `apps/web/app/api/generate/route.ts`.
+  - Added server API helpers under `apps/web/lib/api/`.
+  - `POST /api/generate` validates JSON/config/compatibility, calls `@launchkit/generator`, uses a web template loader, returns generated project JSON, and rejects unsafe generated paths.
+  - Added focused API helper tests.
+- Step 11 Download flow:
+  - Added `apps/web/components/builder/steps/download-step.tsx`.
+  - Added `apps/web/components/builder/download/download-button.tsx`.
+  - Added `apps/web/components/builder/download/download-status.tsx`.
+  - Added typed API client in `apps/web/lib/api/client.ts`.
+  - Added shared API response types in `apps/web/lib/api/types.ts`.
+  - Added browser-side zip helper in `apps/web/lib/download/create-project-zip.ts`.
+  - Added API client and zip helper tests.
+  - Wired Download into `apps/web/components/builder/builder-shell.tsx`.
+  - Updated `apps/web/lib/builder/steps.ts`.
+  - Added `jszip` to `apps/web/package.json` and updated `package-lock.json`.
+  - Updated `context/progress-tracker.md` through Phase 6 Step 11. It now says the next suggested step is Phase 6 Step 12: Responsive UI polish and Phase 6 verification.
 
 ## Decisions made
 
-- Preview data uses `@launchkit/generator` `createGenerationPlan(config)` for dependencies, dev dependencies, scripts, environment variables, and selected optional feature file paths.
-- Generator planning is isolated in `apps/web/lib/builder/preview.ts`; React components render data only.
-- Selected stack labels use `@launchkit/schema` metadata instead of raw enum values where metadata exists.
-- Environment variable preview shows names, descriptions, and required status only. It does not show generated placeholder values or imply production-ready secrets.
-- Full file content preview remains out of scope for Step 9.
-- No generate/download API route, zip download behavior, or CLI functionality was added.
+- Step 10 API returns generated project JSON, and Step 11 creates the ZIP in the browser from that JSON response.
+- The browser download flow uses `Blob`, object URL, temporary anchor click, and URL revocation.
+- ZIP contents are always nested under a top-level project folder named after the generated project.
+- ZIP helper validates response paths again on the client even though the API already validates generated paths.
+- ZIP helper rejects absolute paths, `..`, empty segments, generated `src/` directory paths, and unsafe project folder names.
+- `jszip` is used only in `apps/web`; no ZIP logic was added to `@launchkit/generator`.
+- No generator logic belongs in UI components. UI calls the typed API client and browser ZIP helper only.
+- No CLI functionality has been added.
 
 ## Problems solved
 
-- Turbopack builds still fail inside the sandbox because worker process or port binding is not permitted. The same web and workspace builds pass when rerun with elevated permissions.
-- The generator plan exposes selected feature file references but not a base template file manifest. `apps/web/lib/builder/preview.ts` currently keeps a small local list of MVP base Next.js file paths until the generator exports base template file references.
-- Port 3000 was already occupied by a local Node process. A sandboxed attempt to start the dev server on port 3001 failed with `listen EPERM`; the user said they will run the dev server themselves.
+- `npm install jszip -w apps/web` failed in the sandbox because DNS could not resolve the npm registry. Rerunning with elevated permissions succeeded.
+- npm audit output after installing `jszip` reports 2 moderate vulnerabilities. No `npm audit fix --force` was run because that would be an unrelated broad dependency change.
+- Turbopack builds continue to fail inside the sandbox because worker process or port binding is not permitted. The same web and workspace builds pass when rerun with elevated permissions.
+- Local browser/manual download QA was not run because the user said they will run the dev server locally.
 
 ## Current state
 
-- Current tracker status: Phase 6 in progress; Preview step complete; Generate API route next.
-- Step 9 verification passed:
+- Current tracker status: Phase 6 in progress; Download flow complete; Responsive UI polish and Phase 6 verification next.
+- Step 11 verification passed:
   - `npm run typecheck -w apps/web`
   - `npm run lint -w apps/web`
+  - `npm run test -w apps/web` passed: 3 test files, 16 tests.
   - `git diff --check`
-  - `npm run build -w apps/web` outside sandbox
+  - `npm run build -w apps/web` passed outside sandbox.
   - `npm run typecheck`
-  - `npm run test`
+  - `npm run test` passed across workspaces: web 16 tests, generator 111, schema 73, templates 51.
   - `npm run lint`
-  - `npm run build` outside sandbox
-- Workspace has uncommitted changes from recent Phase 6 work, including Step 8 and Step 9 files.
-- `memory.md` is now saved for the next session.
+  - `npm run build` passed outside sandbox.
+- Source search found no generated-code execution, generated dependency installation, CLI work, or Node built-in test runner usage in the Step 11 implementation.
+- Workspace still has uncommitted Phase 6 changes and untracked Step prompt files.
 - No local dev server is running from this session.
 
 ## Next session starts with
 
-Implement Phase 6 Step 10: Build generate API route. Start by reading `context/progress-tracker.md` and the Step 10 prompt in `.agents/prompts/phase-06/` if present.
+Implement Phase 6 Step 12: Responsive UI polish and Phase 6 verification. Start by reading `context/progress-tracker.md` and the Step 12 prompt in `.agents/prompts/phase-06/` if present.
 
-Keep the same boundaries unless Step 10 explicitly changes them: use `@launchkit/schema` for validation, call `@launchkit/generator` from server-side code, do not put generator logic in UI components, do not add CLI functionality, and keep zip/download behavior limited to the Step 10 prompt scope.
+Manual browser QA is important next: run the app locally, complete the wizard, click Generate ZIP, confirm the ZIP downloads, inspect that it contains a top-level project folder, expected generated files, and no `src/` folder.
 
 ## Open questions
 
-- The Step 10 prompt has not been loaded yet.
-- Decide whether Step 10 should also improve generator base template manifest exposure, or leave the Preview helper's local base file list in place until a later generator cleanup step.
+- The Step 12 prompt has not been loaded yet.
+- Decide whether to address npm audit's 2 moderate vulnerabilities now, defer to Phase 7 hardening, or document them as a known dependency audit item.
+- The generator still does not expose a production filesystem template loader; the web API owns a server-side template loader under `apps/web/lib/api/template-loader.ts`.

From 7dd8e5bf0295b90962c1f2740a93cd4e69ada4f4 Mon Sep 17 00:00:00 2001
From: DavidAsrorxonov <dovudxon.asrorxonov@icloud.com>
Date: Fri, 3 Jul 2026 14:44:56 +0900
Subject: [PATCH 15/15] feat: Implement Phase 6 Step 12 - Apply responsive UI
 polish and add verification tests

---
 memory.md | 138 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 84 insertions(+), 54 deletions(-)

diff --git a/memory.md b/memory.md
index 4538b56..e6b4551 100644
--- a/memory.md
+++ b/memory.md
@@ -1,74 +1,104 @@
-# Memory — LaunchKit Phase 6 Download Flow
+# Memory - Phase 6 Step 12 Website Polish
 
-Last updated: 2026-07-03 12:01 JST
+Last updated: 2026-07-03 14:44 JST
 
 ## What was built
 
-Phase 6 Website MVP wizard is complete through Step 11, Download flow.
-
-Completed recent steps:
-
-- Step 10 API route:
-  - Added `apps/web/app/api/generate/route.ts`.
-  - Added server API helpers under `apps/web/lib/api/`.
-  - `POST /api/generate` validates JSON/config/compatibility, calls `@launchkit/generator`, uses a web template loader, returns generated project JSON, and rejects unsafe generated paths.
-  - Added focused API helper tests.
-- Step 11 Download flow:
-  - Added `apps/web/components/builder/steps/download-step.tsx`.
-  - Added `apps/web/components/builder/download/download-button.tsx`.
-  - Added `apps/web/components/builder/download/download-status.tsx`.
-  - Added typed API client in `apps/web/lib/api/client.ts`.
-  - Added shared API response types in `apps/web/lib/api/types.ts`.
-  - Added browser-side zip helper in `apps/web/lib/download/create-project-zip.ts`.
-  - Added API client and zip helper tests.
-  - Wired Download into `apps/web/components/builder/builder-shell.tsx`.
-  - Updated `apps/web/lib/builder/steps.ts`.
-  - Added `jszip` to `apps/web/package.json` and updated `package-lock.json`.
-  - Updated `context/progress-tracker.md` through Phase 6 Step 11. It now says the next suggested step is Phase 6 Step 12: Responsive UI polish and Phase 6 verification.
+Phase 6 Step 12 was implemented for the LaunchKit website MVP.
+
+Responsive polish was applied across the wizard:
+
+- `apps/web/components/builder/wizard-step-panel.tsx`: removed the extra dashed inner frame and tightened mobile header spacing.
+- `apps/web/components/builder/wizard-progress.tsx`: progress cards now use short labels on mobile/tablet and full labels on large screens.
+- `apps/web/components/builder/builder-shell.tsx`: improved project-name and current-selection wrapping.
+- Preview components now wrap long names or scroll exact command text safely:
+  - `dependency-list.tsx`
+  - `env-var-list.tsx`
+  - `script-list.tsx`
+  - `stack-summary.tsx`
+- Step option cards now wrap badges/radio indicators cleanly on narrow viewports:
+  - `project-step.tsx`
+  - `framework-step.tsx`
+  - `styling-ui-step.tsx`
+  - `database-step.tsx`
+  - `orm-step.tsx`
+  - `auth-step.tsx`
+  - `extras-step.tsx`
+- `apps/web/components/builder/steps/download-step.tsx`: project name and selected stack values wrap instead of truncating.
+
+Added `apps/web/lib/builder/phase-6-verification.test.ts` with focused Vitest coverage for:
+
+- required 9-step wizard order;
+- supported MVP option values only;
+- project-name validation;
+- unsupported package manager rejection;
+- Auth.js credentials compatibility without PostgreSQL;
+- Prisma and Docker PostgreSQL rejection without PostgreSQL;
+- preview data for selected stack, dependencies, dev dependencies, scripts, env vars, and file tree;
+- unselected optional feature exclusion;
+- `src/` path exclusion;
+- full-stack preview additions for shadcn, PostgreSQL, Prisma, Auth.js credentials, and Docker.
+
+Updated `context/progress-tracker.md` with the Step 12 change log, verification results, and manual-QA handoff.
 
 ## Decisions made
 
-- Step 10 API returns generated project JSON, and Step 11 creates the ZIP in the browser from that JSON response.
-- The browser download flow uses `Blob`, object URL, temporary anchor click, and URL revocation.
-- ZIP contents are always nested under a top-level project folder named after the generated project.
-- ZIP helper validates response paths again on the client even though the API already validates generated paths.
-- ZIP helper rejects absolute paths, `..`, empty segments, generated `src/` directory paths, and unsafe project folder names.
-- `jszip` is used only in `apps/web`; no ZIP logic was added to `@launchkit/generator`.
-- No generator logic belongs in UI components. UI calls the typed API client and browser ZIP helper only.
-- No CLI functionality has been added.
+Phase 6 remains `In Progress` until manual browser/download QA is completed by the user. Step 12 code and automated verification are complete, but the phase should not be marked complete until the user confirms the website MVP works end to end in a real browser.
+
+No CLI work was started. No new product options were added. Generator logic remains outside UI components.
+
+The new verification test follows the current generator contract: Prisma scripts include `db:push`, not `db:migrate`.
 
 ## Problems solved
 
-- `npm install jszip -w apps/web` failed in the sandbox because DNS could not resolve the npm registry. Rerunning with elevated permissions succeeded.
-- npm audit output after installing `jszip` reports 2 moderate vulnerabilities. No `npm audit fix --force` was run because that would be an unrelated broad dependency change.
-- Turbopack builds continue to fail inside the sandbox because worker process or port binding is not permitted. The same web and workspace builds pass when rerun with elevated permissions.
-- Local browser/manual download QA was not run because the user said they will run the dev server locally.
+The first Step 12 web test run failed because the new verification test expected `db:migrate`; the generator currently exposes `db:push`. The test was corrected.
+
+The first Step 12 web typecheck failed because an intentionally invalid `packageManager: "yarn"` test value needed to be cast through `unknown` before `LaunchKitConfig`. The test was corrected.
+
+`npm run build -w apps/web` fails inside the sandbox because Turbopack cannot create/bind worker processes. Rerunning the web build with elevated permissions passed.
+
+Browser QA could not be completed in-session:
+
+- the in-app browser connector failed with an internal `sandbox-state-meta` Node REPL error;
+- the workspace has no Playwright or `@playwright/test`;
+- sandboxed localhost `curl` could not connect;
+- elevated localhost `curl` was not allowed;
+- elevated `npm run dev -w apps/web` found another Next dev server lock/process;
+- the user said they will do manual browser/download QA themselves.
 
 ## Current state
 
-- Current tracker status: Phase 6 in progress; Download flow complete; Responsive UI polish and Phase 6 verification next.
-- Step 11 verification passed:
-  - `npm run typecheck -w apps/web`
-  - `npm run lint -w apps/web`
-  - `npm run test -w apps/web` passed: 3 test files, 16 tests.
-  - `git diff --check`
-  - `npm run build -w apps/web` passed outside sandbox.
-  - `npm run typecheck`
-  - `npm run test` passed across workspaces: web 16 tests, generator 111, schema 73, templates 51.
-  - `npm run lint`
-  - `npm run build` passed outside sandbox.
-- Source search found no generated-code execution, generated dependency installation, CLI work, or Node built-in test runner usage in the Step 11 implementation.
-- Workspace still has uncommitted Phase 6 changes and untracked Step prompt files.
-- No local dev server is running from this session.
+Automated verification passed:
+
+- `npm run test -w apps/web`: 4 files, 23 tests.
+- `npm run typecheck -w apps/web`.
+- `npm run lint -w apps/web`.
+- `npm run build -w apps/web` passed when rerun elevated after the sandbox Turbopack failure.
+- `npm run typecheck` across workspaces.
+- `npm run test` across workspaces: web 23 tests, generator 111 tests, schema 73 tests, templates 51 tests.
+- `npm run lint`.
+- `git diff --check`.
+
+The progress tracker says Phase 6 Step 12 responsive polish and automated verification are complete, but Phase 6 is still `In Progress` pending user-run manual browser/download QA.
+
+At the time memory was saved, `git status --short` was clean before writing this memory file.
 
 ## Next session starts with
 
-Implement Phase 6 Step 12: Responsive UI polish and Phase 6 verification. Start by reading `context/progress-tracker.md` and the Step 12 prompt in `.agents/prompts/phase-06/` if present.
+Wait for the user to report results from manual QA, or ask them to run the website flow at 375px, 768px, 1280px, and 1440px+ widths:
 
-Manual browser QA is important next: run the app locally, complete the wizard, click Generate ZIP, confirm the ZIP downloads, inspect that it contains a top-level project folder, expected generated files, and no `src/` folder.
+1. Enter a valid project name.
+2. Choose npm or pnpm.
+3. Walk through all 9 wizard steps.
+4. Try invalid project names and blocked Prisma/Docker combinations.
+5. Verify Preview content and no `src/` paths.
+6. Click `Generate ZIP`.
+7. Confirm the ZIP downloads, is named from the project name, contains a top-level folder, contains expected files, and excludes unsafe/`src/` paths.
+
+If manual QA passes, update `context/progress-tracker.md` to mark Phase 6 complete. If QA finds issues, make focused fixes in `apps/web/` only.
 
 ## Open questions
 
-- The Step 12 prompt has not been loaded yet.
-- Decide whether to address npm audit's 2 moderate vulnerabilities now, defer to Phase 7 hardening, or document them as a known dependency audit item.
-- The generator still does not expose a production filesystem template loader; the web API owns a server-side template loader under `apps/web/lib/api/template-loader.ts`.
+Did the user-run browser/download QA pass on mobile, tablet, desktop, and wide desktop?
+
+Should the repo add a browser automation dependency later for repeatable responsive/download QA, or keep this manual until Phase 7?