sveltekit-webappScaffold and configure a production-ready SvelteKit PWA with opinionated defaults. Use when: creating a new web application, setting up a SvelteKit project,...
Install via ClawdBot CLI:
clawdbot install leo3linbeck/sveltekit-webappScaffold production-ready SvelteKit PWAs with opinionated defaults and guided execution.
"Build me a task tracker with due dates and priority labels"
That's all I need to start. I'll ask follow-up questions if needed.
These CLIs must be available (the skill will verify during preflight):
| CLI | Purpose | Install |
|-----|---------|---------|
| sv | SvelteKit scaffolding | npm i -g sv (or use via pnpx) |
| pnpm | Package manager | npm i -g pnpm |
| gh | GitHub repo creation | cli.github.com |
| vercel | Deployment | npm i -g vercel |
Optional (if features require):
turso — Turso database CLIThis skill ships with sensible defaults that work well together. All defaults can be overridden via SKILL-CONFIG.json:
See User Configuration for override details.
Check ~/.openclaw/workspace/SKILL-CONFIG.json for user-specific defaults before using skill defaults. User config overrides skill defaults for:
A conversational, iterative approach to understanding what the user wants.
Start with an open question:
Let the user lead with what matters to them.
Ask for inspiration:
Share 1-3 sites you'd like this to feel like
(design, functionality, or both).
Examples:
- "Like Notion but simpler"
- "Fieldwire's mobile-first approach"
- "Linear's clean aesthetic""Show me what you like" communicates more than paragraphs of description.
If design references suggest custom branding, ask:
Any specific colors, fonts, or logos you want to use?
(I can pre-configure the Tailwind theme)Based on gaps in the description, ask specifically:
| Gap | Question |
|-----|----------|
| Users unclear | "Who's the primary user? (role, context)" |
| Core action unclear | "What's the ONE thing they must be able to do?" |
| Content unknown | "Any existing content/assets to incorporate?" |
| Scale unknown | "How many users do you expect? (ballpark)" |
| Timeline | "Any deadline driving this?" |
Only ask what's missing—don't interrogate.
Before proceeding, confirm understanding:
📝 PROJECT SUMMARY: [Name]
Purpose: [one sentence]
Primary user: [who]
Core action: [what they do]
Design inspiration: [references]
Visual identity: [colors/fonts if specified]
Key features:
• [feature 1]
• [feature 2]
• [feature 3]
Technical signals detected:
• Database: [yes/no] — [reason]
• Authentication: [yes/no] — [reason]
• Internationalization: [yes/no] — [reason]
Does this capture it? [Yes / Adjust]Iterate until the user confirms.
Generate a complete PRD with technical stack, user stories, and mock data strategy.
Always Included:
CLI: pnpx sv (fallback: npx sv)
Template: minimal
TypeScript: yes
Package manager: pnpm (fallback: npm)
Core add-ons (via sv add):
✓ eslint
✓ prettier
✓ mcp (claude-code)
✓ mdsvex
✓ tailwindcss (+ typography, forms plugins)
✓ vitest
✓ playwright
Post-scaffold:
✓ Skeleton (primary component library — Svelte 5 native, accessible)
✓ Bits UI (headless primitives — fallback for gaps/complex custom UI)
✓ vite-plugin-pwa (PWA support)
✓ Svelte 5 runes mode
✓ adapter-auto (auto-detects deployment target)Why Skeleton + Bits UI?
Inferred from Description:
drizzle → if needs database (ask: postgres/sqlite/turso)
lucia → if needs auth
paraglide → if needs i18n (ask: which languages)Follow Svelte 5 best practices (see https://svelte.dev/docs/kit/state-management):
$state() runes for reactive state$derived() for computed valuessetContext/getContext) for cross-component stateload functions → data propCheck SKILL-CONFIG.json for user preferences. Common patterns:
bind: over callbacks — For child→parent data flow, use bind:value instead of onchange callback props. More declarative, less boilerplate.onMount — Use $effect() for side effects. It's reactive and works with SSR.$state(), $derived(), $effect() over legacy stores and lifecycle hooks.sv create generates:
src/
├── routes/ # SvelteKit routes
├── app.html # HTML template
├── app.d.ts # Type declarations
└── app.css # Global styles
static/ # Static assetsWe add:
src/
├── lib/
│ ├── components/ # Reusable components (Skeleton + Bits UI)
│ ├── server/ # Server-only code (db client, auth)
│ ├── stores/ # Svelte stores (.svelte.ts for runes)
│ ├── utils/ # Helper functions
│ └── types/ # TypeScript types
static/
└── icons/ # PWA iconsStory structure:
{
"project": "ProjectName",
"branchName": "dev",
"description": "Brief description",
"userStories": [
{
"id": "US-001",
"title": "Scaffold project",
"description": "Set up the base SvelteKit project.",
"acceptanceCriteria": [...],
"priority": 1,
"passes": false,
"blocked": false,
"notes": ""
}
]
}Story sizing rule: Each story must fit in one context window. If it feels big, split it.
Standard story sequence:
pnpx sv create, add core add-onsIndex Page Checkpoint: After the index/home page is built (but before other pages), PAUSE execution and request user review. The index page establishes the visual direction—getting early feedback here avoids wasted work on subsequent pages.
See references/scaffold-stories.md for story templates.
Development uses mock data; production uses real database.
Mock data approach:
- Generate mock data per-story as needed
- Store in src/lib/server/mocks/ or use MSW for API mocking
- E2E tests run against mock data locally
- Stage 2+ switches to real databaseWhen drizzle is selected, include stories for:
Identify required credentials:
| Feature | Dependency | Required |
|---------|------------|----------|
| Any project | GitHub CLI | Yes |
| Deployment | Vercel CLI or adapter-auto | Yes |
| Database (postgres) | DATABASE_URL | For staging |
| Database (turso) | Turso CLI | For staging |
| OAuth providers | Client ID/Secret | For staging |
| Payments | Stripe API keys | For staging |
Dev uses mocks; staging/production need real credentials.
Present the PRD and refine until the user approves.
📋 PRD: [Project Name]
TECHNICAL STACK:
✅ Always: TypeScript, Tailwind, Skeleton + Bits UI, ESLint,
Prettier, Vitest, Playwright, PWA
🔍 Inferred:
[✓/✗] Database (drizzle) - [reason]
[✓/✗] Authentication (lucia) - [reason]
[✓/✗] Internationalization (paraglide) - [reason]
USER STORIES: [N] stories
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
US-001: Scaffold project (Setup)
US-002: Configure Skeleton + Bits UI (Setup)
US-003: Set up mock data (Setup)
US-004: Create root layout (Foundation)
[... feature stories ...]
US-XXX: Configure PWA manifest (Polish)
US-XXX: Add E2E tests (Tests)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔐 External dependencies:
• GitHub CLI (required now)
• Vercel CLI (required now)
• DATABASE_URL (required for staging)
• [others for staging]
[Approve / See full stories / Edit stories / Change stack]Expect refinement. Common adjustments:
Continue iterating until user explicitly approves.
When user approves:
✅ PRD CONFIRMED
[N] user stories ready for execution.
Proceeding to preflight checks...Verify all dependencies. Development can start with mocks; staging needs real credentials.
Verify authentication for required CLIs (GitHub, pnpm, Vercel, and optionally Turso). See references/cli-commands.md for specific commands.
┌─────────────────────────────────────────────┐
│ 🔐 PREFLIGHT CHECK │
├─────────────────────────────────────────────┤
│ For development (Stage 1): │
│ ✓ GitHub CLI authenticated │
│ ✓ pnpm installed │
│ ✓ Write access verified │
│ │
│ For staging (Stage 2): │
│ ✓ Vercel CLI authenticated │
│ ✗ DATABASE_URL not set │
│ │
│ ─────────────────────────────────────────── │
│ Development can start now. │
│ DATABASE_URL needed before Stage 2. │
│ │
│ [Start development / Resolve all first] │
└─────────────────────────────────────────────┘Guided build-deploy-verify cycle with user checkpoints and live progress updates.
EXECUTE
├── Stage 1: Development (local, dev branch, mock data)
│ └── Build all features, tests pass locally
│
├── Stage 2: Staging (main branch, preview URL, real data)
│ └── Deploy, fix environment issues, tests pass on preview
│
└── Stage 3: Production (permanent URL)
└── Connect domain, final verification, handoffLive progress updates: Report each completed story:
✅ US-001: Scaffold project
✅ US-002: Configure Skeleton + Bits UI
✅ US-003: Set up mock data
⏳ US-004: Create root layout (in progress)Build everything locally with mock data.
Initialize a git repository on a dev branch and create a progress.txt tracking file. See references/cli-commands.md for commands.
Use sessions_spawn to execute stories in parallel where dependencies allow.
Wave structure:
Sub-agent task template:
Implement user story [US-XXX] for SvelteKit project at [project_path].
Story: [title]
Description: [description]
Acceptance Criteria:
- [criterion 1]
- [criterion 2]
- Typecheck passes
Instructions:
1. Read progress.txt for codebase patterns
2. Implement with minimal, focused changes
3. Use Svelte 5 runes for state ($state, $derived, $effect)
4. Use context API for cross-component state
5. Follow Conventional Commits: "feat: [US-XXX] - [title]"
6. Run `pnpm check` to verify
7. Update prd.json: passes: true
8. Append learnings to progress.txtIf a story cannot be completed:
blocked: true in prd.jsonnotes fieldAll checks must pass before proceeding: TypeScript verification, unit tests, and E2E tests against the local dev server with mocks. See references/cli-commands.md for commands.
Push to main, deploy to preview, switch from mocks to real data.
Before proceeding, ensure all staging credentials are set:
If missing, pause and request from user.
One-time setup (recommended over CLI deploys):
Create a private GitHub repository, link to a Vercel project, and connect GitHub in the Vercel dashboard (Settings → Git → Connect Git Repository). Set the production branch to main. See references/cli-commands.md for commands.
Benefits of GitHub integration:
[project]-git-dev-[team].vercel.appDeploy to staging:
Merge the dev branch into main and push. The push triggers Vercel to build and deploy automatically. See references/cli-commands.md for commands.
Dev branch preview URL:
After connecting GitHub, the dev branch gets a persistent preview URL:
https://[project]-git-dev-[team].vercel.app
This URL stays the same across commits—great for sharing with stakeholders.
Common issues in deployed environments:
Smart retry logic:
pnpm installpnpm check outputE2E tests must pass against the Vercel preview URL. See references/cli-commands.md for commands.
Deploy to production URL and hand off to user.
With GitHub-Vercel integration, production deploys automatically when you push to main. Custom domains can be configured via the Vercel dashboard (Settings → Domains) or CLI. See references/cli-commands.md for commands.
Run E2E tests against the production URL to confirm everything works. See references/cli-commands.md for commands.
🚀 DEPLOYED
Repository: github.com/[user]/[project-name]
Live URL: https://[production-url]
Build Summary:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Stories completed: [N]/[N]
Blocked stories: [list if any]
Tests passing: [X] unit, [Y] E2E
Deployment: Vercel production
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
The app is live and ready for users.Provide lifecycle management documentation.
Create ADMIN.md in project root:
# [Project Name] — Administration Guide
## Running Locally
\`\`\`bash
pnpm install
pnpm dev # Start dev server at localhost:5173
\`\`\`
## Environment Variables
Copy `.env.example` to `.env` and configure:
- DATABASE_URL: [description]
- [other vars]
Set these in Vercel dashboard for production.
## Project Structure
\`\`\`
src/
├── routes/ # Pages and API routes
├── lib/components/ # UI components (Skeleton + Bits UI)
├── lib/server/ # Server-only code
└── lib/stores/ # State management
\`\`\`
## Adding New Pages
1. Create `src/routes/[page-name]/+page.svelte`
2. Add server data loading in `+page.server.ts`
3. Run `pnpm check` to verify types
## Database Migrations
\`\`\`bash
pnpm drizzle-kit generate # Generate migration
pnpm drizzle-kit push # Apply to database
\`\`\`
## Deployment
Push to `main` branch → auto-deploys to Vercel.
## Troubleshooting
- **Type errors**: Run `pnpm check`
- **Test failures**: Run `pnpm test:e2e --debug`
- **Build issues**: Check Vercel deployment logs📖 HANDOFF COMPLETE
Admin manual: ADMIN.md
- How to run locally
- Environment variable setup
- Project structure overview
- Adding new pages
- Database migrations
- Deployment workflow
- Troubleshooting guide
The project is ready for ongoing development.If any stage fails and cannot be automatically resolved:
pnpm installNever leave the project broken. If Stage 2/3 fails, dev branch still works.
For all CLI commands and auth checks, see references/cli-commands.md.
Use adapter-auto — automatically detects:
postgresql + postgres.js or neonsqlite + better-sqlite3 or libsqlturso + @libsql/clientGenerated Mar 1, 2026
A user wants to build a simple, visually appealing task tracker with due dates, priority labels, and drag-and-drop organization. The skill will scaffold a PWA with SvelteKit, Tailwind for styling, and Skeleton components for a clean interface, integrating local storage or a lightweight database like Turso for data persistence.
A small business owner needs a responsive online store to showcase products, manage inventory, and process orders. The skill sets up a SvelteKit app with Bits UI for custom product cards, integrates a database via Drizzle for product data, and configures Vercel deployment for fast, scalable hosting.
An organizer wants to create a web app for event sign-ups with attendee management, payment integration, and email notifications. The skill scaffolds the app with SvelteKit, adds Lucia for user authentication, and uses Playwright for testing registration flows to ensure reliability.
A team lead requests a dashboard to visualize sales metrics and team performance with interactive charts and real-time updates. The skill configures SvelteKit with Skeleton for UI components, integrates APIs for data fetching, and sets up Vitest for unit testing to maintain data accuracy.
An educator aims to build a platform for hosting courses with video lessons, quizzes, and progress tracking. The skill uses SvelteKit with mdsvex for content rendering, adds Paraglide for internationalization if needed, and deploys via Vercel with PWA features for offline access.
Charge users a recurring fee for access to premium features like advanced analytics, team collaboration tools, or exclusive content. This model suits apps with ongoing value, such as project management or learning platforms, and can be implemented with payment gateways integrated during deployment.
Offer a free basic version to attract users, then monetize through paid upgrades for enhanced functionality, such as increased storage, custom branding, or priority support. This works well for productivity apps or tools where users may outgrow free limits over time.
Generate revenue by taking a percentage of transactions facilitated through the app, such as event tickets, product sales, or service bookings. This model requires integration with payment processors and can scale with user activity, ideal for e-commerce or booking platforms.
💬 Integration Tip
Leverage the skill's pre-configured add-ons like ESLint and Vitest to maintain code quality during development, and use the user configuration file to override defaults like deployment provider for seamless integration with existing workflows.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.