# Step 0: Scaffold the Project

## Your Task

Create a complete Next.js 15 + Tailwind 4 + shadcn/ui project structure before cloning.

## Why This Step

A clone needs more than just components - it needs:
- `package.json` with correct dependencies
- `next.config.ts` for Next.js configuration
- `tsconfig.json` for TypeScript
- `components.json` for shadcn/ui
- `globals.css` with Tailwind 4 @theme
- `lib/utils.ts` for the `cn()` helper

## How to Execute

### Option 1: Use the scaffolding function

```ts
import {createProjectStructure, scaffoldProject} from './plugin';

// Create directory structure
await createProjectStructure('./output');

// Copy boilerplate files from templates
await scaffoldProject('./output', './templates');
```

### Option 2: Manual scaffolding

Copy these files from `templates/` to your output directory:

```
templates/
├── package.json          → output/package.json
├── next.config.ts        → output/next.config.ts
├── tsconfig.json         → output/tsconfig.json
├── components.json       → output/components.json
├── postcss.config.mjs    → output/postcss.config.mjs
├── eslint.config.mjs     → output/eslint.config.mjs
├── .gitignore            → output/.gitignore
└── src/
    ├── lib/utils.ts      → output/src/lib/utils.ts
    ├── app/layout.tsx    → output/src/app/layout.tsx
    ├── app/globals.css   → output/src/app/globals.css
    └── components/ui/button.tsx → output/src/components/ui/button.tsx
```

## Installing shadcn/ui Components

After scaffolding, you can add more shadcn components:

```ts
import {installShadcnComponents} from './plugin';

await installShadcnComponents('./output', [
  'button',
  'card',
  'input',
  'dialog',
  'dropdown-menu',
]);
```

Or manually:

```bash
cd output
npm install
npx shadcn@latest add button card input dialog dropdown-menu --yes
```

## Output Structure After Scaffolding

```
output/
├── package.json
├── next.config.ts
├── tsconfig.json
├── components.json
├── postcss.config.mjs
├── eslint.config.mjs
├── .gitignore
├── public/
│   ├── assets/        (empty, ready for downloaded assets)
│   └── fonts/         (empty, ready for fonts)
└── src/
    ├── app/
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx   (you'll create this)
    ├── components/
    │   ├── ui/
    │   │   └── button.tsx
    │   └── sections/  (you'll create these)
    └── lib/
        └── utils.ts
```

## Completion Criteria

- [ ] All boilerplate files copied
- [ ] Directory structure created
- [ ] Ready to run `npm install`

## Next Step

Proceed to [step1-render.md](step1-render.md)