Svelte Scaffold Dispatcher

Scaffold new SvelteKit projects, feature modules, or architectural layers with best-practice file structures, configuration, and starter code.

When to Use This Command

Run this command when...

• You are starting a new SvelteKit project and want optimal defaults for TypeScript, routing, styling, and deployment configuration
• You need to add a complete feature module with its route, layout, components, stores, and API endpoints in the correct directory structure
• Your project requires architectural scaffolding like authentication flows, database integration layers, or API route hierarchies

Do NOT use this command when...

• You need to create a single component -- use the component creation command instead
• You want to modify existing scaffolding rather than generate new structures

Quick Start

Copy
# .claude/commands/svelte-scaffold-dispatcher.md
# Scaffold SvelteKit structures
Scaffold: $ARGUMENTS

Copy
# Run the command
claude "svelte-scaffold-dispatcher authentication module with login, register, password reset, and OAuth"

Expected output:
- Route group (auth) with login, register, reset pages
- Layout with auth-specific navigation
- Server-side form actions for each flow
- Auth store with session management
- Middleware hook for route protection

Core Concepts

Concept	Description
Project Structure	SvelteKit file-based routing with +page, +layout, and +server files
Route Groups	Parenthesized directories (auth) that share layouts without affecting URLs
Form Actions	Server-side form handling with progressive enhancement
Hooks	Server and client hooks for authentication, logging, and request processing
Adapter Config	Deployment target configuration (auto, node, static, Vercel, Cloudflare)

Scaffold Architecture:

  src/
  |-- routes/
  |   |-- (auth)/
  |   |   |-- login/+page.svelte
  |   |   |-- register/+page.svelte
  |   |   |-- +layout.svelte
  |   |-- (app)/
  |       |-- dashboard/+page.svelte
  |       |-- +layout.svelte
  |-- lib/
  |   |-- stores/auth.ts
  |   |-- server/db.ts
  |   |-- components/
  |-- hooks.server.ts

Configuration

Parameter	Default	Description
TypeScript	Enabled	TypeScript with strict mode for type safety
CSS Framework	None (scoped)	Tailwind, Skeleton UI, or scoped CSS
Adapter	Auto	Deployment adapter selection
Testing	Vitest + Playwright	Unit and E2E testing framework setup
Package Manager	Auto-detect	npm, pnpm, or yarn based on lockfile presence

Best Practices

1. State your full feature scope -- list all pages, forms, and API endpoints the module needs upfront so the scaffold creates a complete, connected structure
2. Mention your deployment target -- "deploying to Vercel" or "static site on Cloudflare Pages" affects adapter selection and server-side code generation
3. Specify your CSS approach -- if you use Tailwind, say so upfront to get utility classes in generated components rather than scoped style blocks
4. Request route groups -- organize related routes under groups like (auth) and (app) for shared layouts without polluting URL paths
5. Review the hooks file -- the generated hooks.server.ts contains authentication and request processing logic that directly affects your application's security model

Common Issues

1. Scaffold conflicts with existing files -- the command checks for existing files but may miss edge cases. Back up or commit before scaffolding into an existing project
2. Wrong adapter selected -- if your deployment target is not obvious from the project, specify it explicitly to avoid generating incompatible server-side code
3. Missing environment variables -- scaffolded auth or database modules reference environment variables. Create a .env file with the required keys before running the application