svelte-scaffold — Claude Code command: SvelteKit project scaffolding
Builds out a new SvelteKit project, feature module or component library with a ready folder layout and config files. Handy when you want a starting point without wiring it by hand.
npx claude-code-templates@latest --command svelte/svelte-scaffoldWhat svelte-scaffold does
The command acts as a scaffolding agent. For a fresh project it runs npx sv create, asks about TypeScript or JSDoc, picks a testing framework and integrations such as Tailwind and ESLint, then sets up a Git repository. For features you can ask for authentication, an admin dashboard, a blog or CMS, e-commerce pieces, or API integrations.
The layout it produces is predictable: src/routes with (app), (auth) and api groups, src/lib holding components, stores, utils and server, plus hooks.server.ts and app.html. Alongside come svelte.config.js, vite.config.js, playwright.config.js, tailwind.config.js if you picked styling, .env.example and docker-compose.yml. Starter code covers a layout with navigation, an auth flow, protected routes, form examples and state setup.
One thing to plan for: npx sv create pulls packages from the network, so on an air-gapped machine the command stalls against an unreachable registry. Set up an npm mirror first. Libraries like Lucia, Auth.js, Stripe, Prisma or Drizzle get added on request, not by default.
What it helps with
- spin up a new SvelteKit project from scratch
- add an authentication module to an existing app
- lay out an admin dashboard or blog structure
- set up a component library with Storybook
- prepare Vite, Playwright and Tailwind configs
Example prompts for the agent
- /svelte:scaffold create a new SvelteKit project with TypeScript and Tailwind
- /svelte:scaffold add an auth module and protected routes
- /svelte:scaffold scaffold a SaaS starter with payments and a dashboard
How to install svelte-scaffold
1claude-code-templates
npx claude-code-templates@latest --command svelte/svelte-scaffold2Manually: put the files in place
.claude/commands/svelte-scaffold.mdCall it with /svelte-scaffold. For all projects use ~/.claude/commands/
Manually: put the files in place
~/.codex/prompts/svelte-scaffold.mdCall it with /prompts:svelte-scaffold. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.github/prompts/svelte-scaffold.prompt.mdManually: put the files in place
.gemini/commands/svelte-scaffold.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
Questions about svelte-scaffold
How do I install svelte-scaffold in Claude?
Run npx claude-code-templates@latest --command svelte/svelte-scaffold, then check that .claude/commands/svelte-scaffold.md is in place.
What does svelte-scaffold do?
It scaffolds a SvelteKit project, a single feature module or a component library: folder structure, config files and starter code with navigation and authentication.
What does it need to run?
It relies on npx sv create, so npm registry access is required. Specific libraries such as Lucia, Auth.js, Stripe, Prisma or Drizzle are added when you ask for them.
Source text
svelte-scaffold.md · MIT
--- description: "Scaffold new SvelteKit projects, features, or modules with best practices and optimal project structure." --- # /svelte:scaffold Scaffold new SvelteKit projects, features, or modules with best practices and optimal project structure. ## Instructions You are acting as the Svelte Development Agent focused on project scaffolding. When scaffolding: 1. **Project Types**: **New SvelteKit Project**: - Use `npx sv create` with appropriate options - Select TypeScript/JSDoc preference - Choose testing framework - Add essential integrations (Tailwind, ESLint, etc.) - Set up Git repository **Feature Modules**: - Authentication system - Admin dashboard - Blog/CMS - E-commerce features - API integrations **Component Libraries**: - Design system setup - Storybook integration - Component documentation - Publishing configuration 2. **Project Structure**: ``` project/ ├── src/ │ ├── routes/ │ │ ├── (app)/ │ │ ├── (auth)/ │ │ └── api/ │ ├── lib/ │ │ ├── components/ │ │ ├── stores/ │ │ ├── utils/ │ │ └── server/ │ ├── hooks.server.ts │ └── app.html ├── tests/ ├── static/ └── [config files] ``` 3. **Essential Features**: - Environment variable setup - Database configuration - Authentication scaffolding - API route templates - Error handling - Logging setup - Deployment configuration 4. **Configuration Files**: - `svelte.config.js` - Optimized settings - `vite.config.js` - Build optimization - `playwright.config.js` - E2E testing - `tailwind.config.js` - Styling (if selected) - `.env.example` - Environment template - `docker-compose.yml` - Container setup 5. **Starter Code**: - Layout with navigation - Authentication flow - Protected routes - Form examples - API integration patterns - State management setup ## Example Usage User: "Scaffold a new SaaS starter with auth and payments" Assistant will: - Create SvelteKit project with TypeScript - Set up authentication (Lucia/Auth.js) - Add payment integration (Stripe) - Create user dashboard structure - Set up database (Prisma/Drizzle) - Add email service - Configure deployment - Create example protected routes - Add subscription management
© davila7 · MIT · davila7/claude-code-templates
