Web Project Scaffolder
Create a properly structured web project with modern tooling and best practices.
Process
Step 1: Gather Requirements
Ask about:
- Type: Static site, SPA, SSR app, landing page, dashboard, portfolio?
- Tech: React/Next.js, Vue/Nuxt, Svelte/SvelteKit, vanilla HTML/CSS/JS?
- Styling: Tailwind, CSS Modules, vanilla CSS, styled-components?
- Features needed: Auth, database, API, forms, payments?
- Deployment target: Vercel, Netlify, self-hosted, static hosting?
Step 2: Create Structure
Adapt to chosen tech. Example for Next.js + Tailwind:
project/
├── src/
│ ├── app/ # App router pages
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ └── globals.css # Global styles
│ ├── components/ # Reusable components
│ │ └── ui/ # Base UI components
│ └── lib/ # Utilities and helpers
├── public/ # Static assets
├── CLAUDE.md # Project-specific Claude instructions
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── .gitignore
Step 3: Implement Foundation
Create with:
- Semantic HTML: Proper landmarks, heading hierarchy
- Responsive base: Mobile-first with fluid breakpoints
- Accessible defaults: Focus styles, ARIA labels, skip nav
- Performance: Proper font loading, image optimization setup
- Type safety: TypeScript configured properly
- Development tooling: Linting, formatting configured
Step 4: Create CLAUDE.md
Generate a lean CLAUDE.md for the new project with:
- Tech stack and commands
- Project-specific conventions
- File organization rules
Step 5: Verify
- Project builds without errors
- Development server starts
- Basic page renders correctly
- No accessibility violations in base template
1---2name: web-starter3description: Scaffold a new web project with modern best practices. Use when the user says "create a website", "new web project", "landing page", "scaffold", "starter", or "set up a web app".4---56# Web Project Scaffolder78Create a properly structured web project with modern tooling and best practices.910## Process1112### Step 1: Gather Requirements13Ask about:141. **Type**: Static site, SPA, SSR app, landing page, dashboard, portfolio?152. **Tech**: React/Next.js, Vue/Nuxt, Svelte/SvelteKit, vanilla HTML/CSS/JS?163. **Styling**: Tailwind, CSS Modules, vanilla CSS, styled-components?174. **Features needed**: Auth, database, API, forms, payments?185. **Deployment target**: Vercel, Netlify, self-hosted, static hosting?1920### Step 2: Create Structure21Adapt to chosen tech. Example for Next.js + Tailwind:22```23project/24├── src/25│ ├── app/ # App router pages26│ │ ├── layout.tsx # Root layout27│ │ ├── page.tsx # Home page28│ │ └── globals.css # Global styles29│ ├── components/ # Reusable components30│ │ └── ui/ # Base UI components31│ └── lib/ # Utilities and helpers32├── public/ # Static assets33├── CLAUDE.md # Project-specific Claude instructions34├── package.json35├── tsconfig.json36├── tailwind.config.ts37└── .gitignore38```3940### Step 3: Implement Foundation41Create with:42- **Semantic HTML**: Proper landmarks, heading hierarchy43- **Responsive base**: Mobile-first with fluid breakpoints44- **Accessible defaults**: Focus styles, ARIA labels, skip nav45- **Performance**: Proper font loading, image optimization setup46- **Type safety**: TypeScript configured properly47- **Development tooling**: Linting, formatting configured4849### Step 4: Create CLAUDE.md50Generate a lean CLAUDE.md for the new project with:51- Tech stack and commands52- Project-specific conventions53- File organization rules5455### Step 5: Verify56- Project builds without errors57- Development server starts58- Basic page renders correctly59- No accessibility violations in base template
mfielding92