{
  "schemaVersion": "1.0",
  "item": {
    "slug": "sveltekit-webapp",
    "name": "SvelteKit WebApp",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/leo3linbeck/sveltekit-webapp",
    "canonicalUrl": "https://clawhub.ai/leo3linbeck/sveltekit-webapp",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/sveltekit-webapp",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=sveltekit-webapp",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "references/cli-commands.md",
      "references/deployment.md",
      "references/pwa-config.md",
      "references/ralph-plan-template.md",
      "references/ralph-prompt.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/sveltekit-webapp"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/sveltekit-webapp",
    "agentPageUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent",
    "manifestUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "SvelteKit Webapp Skill",
        "body": "Scaffold production-ready SvelteKit PWAs with opinionated defaults and guided execution."
      },
      {
        "title": "Quick Start",
        "body": "Describe your app — Tell me what you want to build\nReview the PRD — I'll generate a plan with user stories\nApprove — I build, test, and deploy with your oversight\nDone — Get a live URL + admin documentation\n\n\"Build me a task tracker with due dates and priority labels\"\n\nThat's all I need to start. I'll ask follow-up questions if needed."
      },
      {
        "title": "Prerequisites",
        "body": "These CLIs must be available (the skill will verify during preflight):\n\nCLIPurposeInstallsvSvelteKit scaffoldingnpm i -g sv (or use via pnpx)pnpmPackage managernpm i -g pnpmghGitHub repo creationcli.github.comvercelDeploymentnpm i -g vercel\n\nOptional (if features require):\n\nturso — Turso database CLI"
      },
      {
        "title": "Opinionated Defaults",
        "body": "This skill ships with sensible defaults that work well together. All defaults can be overridden via SKILL-CONFIG.json:\n\nComponent library: Skeleton (Svelte 5 native) + Bits UI fallback\nPackage manager: pnpm\nDeployment: Vercel\nAdd-ons: ESLint, Prettier, Vitest, Playwright, mdsvex, MCP\nState: Svelte 5 runes ($state, $derived, $effect)\n\nSee User Configuration for override details."
      },
      {
        "title": "User Configuration",
        "body": "Check ~/.openclaw/workspace/SKILL-CONFIG.json for user-specific defaults before using skill defaults. User config overrides skill defaults for:\n\nDeployment provider (e.g., vercel, cloudflare, netlify)\nPackage manager (pnpm, npm, yarn)\nAdd-ons to always include\nMCP IDE configuration\nComponent library preferences"
      },
      {
        "title": "Workflow Overview",
        "body": "Gather: Freeform description + design references + targeted follow-ups\nPlan: Generate complete PRD (scaffold, configure, features, tests as stories)\nIterate: Refine PRD with user until confirmed\nPreflight: Verify all required auths and credentials\nExecute: Guided build-deploy-verify cycle with user checkpoints (development → staging → production)"
      },
      {
        "title": "Phase 1: Gather Project Description",
        "body": "A conversational, iterative approach to understanding what the user wants."
      },
      {
        "title": "1a. Freeform Opening",
        "body": "Start with an open question:\n\n\"What do you want to build?\"\n\"Describe the webapp you have in mind\"\n\nLet the user lead with what matters to them."
      },
      {
        "title": "1b. Design References",
        "body": "Ask for inspiration:\n\nShare 1-3 sites you'd like this to feel like \n(design, functionality, or both).\n\nExamples:\n- \"Like Notion but simpler\"\n- \"Fieldwire's mobile-first approach\"\n- \"Linear's clean aesthetic\"\n\n\"Show me what you like\" communicates more than paragraphs of description."
      },
      {
        "title": "1c. Visual Identity (Optional)",
        "body": "If design references suggest custom branding, ask:\n\nAny specific colors, fonts, or logos you want to use?\n(I can pre-configure the Tailwind theme)"
      },
      {
        "title": "1d. Targeted Follow-ups",
        "body": "Based on gaps in the description, ask specifically:\n\nGapQuestionUsers 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?\"\n\nOnly ask what's missing—don't interrogate."
      },
      {
        "title": "1e. Structured Summary",
        "body": "Before proceeding, confirm understanding:\n\n📝 PROJECT SUMMARY: [Name]\n\nPurpose: [one sentence]\nPrimary user: [who]\nCore action: [what they do]\nDesign inspiration: [references]\nVisual identity: [colors/fonts if specified]\nKey features:\n  • [feature 1]\n  • [feature 2]\n  • [feature 3]\n\nTechnical signals detected:\n  • Database: [yes/no] — [reason]\n  • Authentication: [yes/no] — [reason]\n  • Internationalization: [yes/no] — [reason]\n\nDoes this capture it? [Yes / Adjust]\n\nIterate until the user confirms."
      },
      {
        "title": "Phase 2: Plan (Generate PRD)",
        "body": "Generate a complete PRD with technical stack, user stories, and mock data strategy."
      },
      {
        "title": "Technical Stack",
        "body": "Always Included:\n\nCLI:              pnpx sv (fallback: npx sv)\nTemplate:         minimal\nTypeScript:       yes\nPackage manager:  pnpm (fallback: npm)\n\nCore add-ons (via sv add):\n  ✓ eslint\n  ✓ prettier\n  ✓ mcp (claude-code)\n  ✓ mdsvex\n  ✓ tailwindcss (+ typography, forms plugins)\n  ✓ vitest\n  ✓ playwright\n\nPost-scaffold:\n  ✓ Skeleton (primary component library — Svelte 5 native, accessible)\n  ✓ Bits UI (headless primitives — fallback for gaps/complex custom UI)\n  ✓ vite-plugin-pwa (PWA support)\n  ✓ Svelte 5 runes mode\n  ✓ adapter-auto (auto-detects deployment target)\n\nWhy Skeleton + Bits UI?\n\nSkeleton: Full-featured component library built for Svelte 5, accessible by default\nBits UI: Headless primitives when you need more control or custom styling\nBoth play well together — Skeleton for speed, Bits for flexibility\n\nInferred from Description:\n\ndrizzle     → if needs database (ask: postgres/sqlite/turso)\nlucia       → if needs auth\nparaglide   → if needs i18n (ask: which languages)"
      },
      {
        "title": "State Management",
        "body": "Follow Svelte 5 best practices (see https://svelte.dev/docs/kit/state-management):\n\nUse $state() runes for reactive state\nUse $derived() for computed values\nUse Svelte's context API (setContext/getContext) for cross-component state\nServer state flows through load functions → data prop\nNever store user-specific state in module-level variables (shared across requests)"
      },
      {
        "title": "Code Style Preferences",
        "body": "Check SKILL-CONFIG.json for user preferences. Common patterns:\n\nPrefer bind: over callbacks — For child→parent data flow, use bind:value instead of onchange callback props. More declarative, less boilerplate.\nAvoid onMount — Use $effect() for side effects. It's reactive and works with SSR.\nRunes everywhere — $state(), $derived(), $effect() over legacy stores and lifecycle hooks.\nSmall components — Default soft limit of ~200 lines per component (configurable in SKILL-CONFIG.json). If growing larger, extract sub-components. Small is beautiful. 🤩"
      },
      {
        "title": "Directory Structure",
        "body": "sv create generates:\n\nsrc/\n├── routes/          # SvelteKit routes\n├── app.html         # HTML template\n├── app.d.ts         # Type declarations\n└── app.css          # Global styles\nstatic/              # Static assets\n\nWe add:\n\nsrc/\n├── lib/\n│   ├── components/  # Reusable components (Skeleton + Bits UI)\n│   ├── server/      # Server-only code (db client, auth)\n│   ├── stores/      # Svelte stores (.svelte.ts for runes)\n│   ├── utils/       # Helper functions\n│   └── types/       # TypeScript types\nstatic/\n└── icons/           # PWA icons"
      },
      {
        "title": "User Stories (prd.json)",
        "body": "Story structure:\n\n{\n  \"project\": \"ProjectName\",\n  \"branchName\": \"dev\",\n  \"description\": \"Brief description\",\n  \"userStories\": [\n    {\n      \"id\": \"US-001\",\n      \"title\": \"Scaffold project\",\n      \"description\": \"Set up the base SvelteKit project.\",\n      \"acceptanceCriteria\": [...],\n      \"priority\": 1,\n      \"passes\": false,\n      \"blocked\": false,\n      \"notes\": \"\"\n    }\n  ]\n}\n\nStory sizing rule: Each story must fit in one context window. If it feels big, split it.\n\nStandard story sequence:\n\nScaffold — pnpx sv create, add core add-ons\nConfigure — Skeleton + Bits UI, PWA, directory structure, VSCode workspace, Tailwind theme\nMock Data — Set up mock database/fixtures for development\nFoundation — Root layout, design tokens, home page (INDEX PAGE CHECKPOINT)\nFeatures — Core features from gathered requirements\nInfrastructure — Database schema, migrations, auth (if needed)\nPolish — PWA manifest, icons\nTests — E2E tests for critical flows\n\nIndex 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.\n\nSee references/scaffold-stories.md for story templates."
      },
      {
        "title": "Mock Data Strategy",
        "body": "Development uses mock data; production uses real database.\n\nMock data approach:\n- Generate mock data per-story as needed\n- Store in src/lib/server/mocks/ or use MSW for API mocking\n- E2E tests run against mock data locally\n- Stage 2+ switches to real database\n\nWhen drizzle is selected, include stories for:\n\nInitial schema creation\nDrizzle Kit configuration\nFirst migration"
      },
      {
        "title": "External Dependencies",
        "body": "Identify required credentials:\n\nFeatureDependencyRequiredAny projectGitHub CLIYesDeploymentVercel CLI or adapter-autoYesDatabase (postgres)DATABASE_URLFor stagingDatabase (turso)Turso CLIFor stagingOAuth providersClient ID/SecretFor stagingPaymentsStripe API keysFor staging\n\nDev uses mocks; staging/production need real credentials."
      },
      {
        "title": "Phase 3: Iterate Until Confirmed",
        "body": "Present the PRD and refine until the user approves."
      },
      {
        "title": "Present the PRD",
        "body": "📋 PRD: [Project Name]\n\nTECHNICAL STACK:\n✅ Always: TypeScript, Tailwind, Skeleton + Bits UI, ESLint, \n   Prettier, Vitest, Playwright, PWA\n🔍 Inferred:\n   [✓/✗] Database (drizzle) - [reason]\n   [✓/✗] Authentication (lucia) - [reason]  \n   [✓/✗] Internationalization (paraglide) - [reason]\n\nUSER STORIES: [N] stories\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nUS-001: Scaffold project (Setup)\nUS-002: Configure Skeleton + Bits UI (Setup)\nUS-003: Set up mock data (Setup)\nUS-004: Create root layout (Foundation)\n[... feature stories ...]\nUS-XXX: Configure PWA manifest (Polish)\nUS-XXX: Add E2E tests (Tests)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n🔐 External dependencies:\n   • GitHub CLI (required now)\n   • Vercel CLI (required now)\n   • DATABASE_URL (required for staging)\n   • [others for staging]\n\n[Approve / See full stories / Edit stories / Change stack]"
      },
      {
        "title": "Iteration Loop",
        "body": "Expect refinement. Common adjustments:\n\nAdd/remove/modify user stories\nChange technical stack choices\nAdjust story priorities\nSplit stories that are too large\nAdd acceptance criteria\n\nContinue iterating until user explicitly approves."
      },
      {
        "title": "Confirmation",
        "body": "When user approves:\n\n✅ PRD CONFIRMED\n\n[N] user stories ready for execution.\nProceeding to preflight checks..."
      },
      {
        "title": "Phase 4: Preflight",
        "body": "Verify all dependencies. Development can start with mocks; staging needs real credentials."
      },
      {
        "title": "Run Checks",
        "body": "Verify authentication for required CLIs (GitHub, pnpm, Vercel, and optionally Turso). See references/cli-commands.md for specific commands."
      },
      {
        "title": "Present Status",
        "body": "┌─────────────────────────────────────────────┐\n│ 🔐 PREFLIGHT CHECK                          │\n├─────────────────────────────────────────────┤\n│ For development (Stage 1):                  │\n│ ✓ GitHub CLI         authenticated          │\n│ ✓ pnpm               installed              │\n│ ✓ Write access       verified               │\n│                                             │\n│ For staging (Stage 2):                      │\n│ ✓ Vercel CLI         authenticated          │\n│ ✗ DATABASE_URL       not set                │\n│                                             │\n│ ─────────────────────────────────────────── │\n│ Development can start now.                  │\n│ DATABASE_URL needed before Stage 2.         │\n│                                             │\n│ [Start development / Resolve all first]     │\n└─────────────────────────────────────────────┘"
      },
      {
        "title": "Resolution",
        "body": "Development can proceed with mock data\nStaging credentials can be resolved during Stage 1\nProduction credentials verified before Stage 3"
      },
      {
        "title": "Phase 5: Execute",
        "body": "Guided build-deploy-verify cycle with user checkpoints and live progress updates.\n\nEXECUTE\n├── Stage 1: Development (local, dev branch, mock data)\n│   └── Build all features, tests pass locally\n│\n├── Stage 2: Staging (main branch, preview URL, real data)\n│   └── Deploy, fix environment issues, tests pass on preview\n│\n└── Stage 3: Production (permanent URL)\n    └── Connect domain, final verification, handoff\n\nLive progress updates: Report each completed story:\n\n✅ US-001: Scaffold project\n✅ US-002: Configure Skeleton + Bits UI\n✅ US-003: Set up mock data\n⏳ US-004: Create root layout (in progress)"
      },
      {
        "title": "Stage 1: Development",
        "body": "Build everything locally with mock data.\n\nSetup\n\nInitialize a git repository on a dev branch and create a progress.txt tracking file. See references/cli-commands.md for commands.\n\nExecute Stories via Sub-Agents\n\nUse sessions_spawn to execute stories in parallel where dependencies allow.\n\nWave structure:\n\nWave 1: Scaffold (must complete first)\nWave 2: Configure (shadcn, PWA, directories) — parallel\nWave 3: Mock data setup\nWave 4+: Feature stories — parallel where independent\nFinal wave: E2E test stories\n\nSub-agent task template:\n\nImplement user story [US-XXX] for SvelteKit project at [project_path].\n\nStory: [title]\nDescription: [description]\n\nAcceptance Criteria:\n- [criterion 1]\n- [criterion 2]\n- Typecheck passes\n\nInstructions:\n1. Read progress.txt for codebase patterns\n2. Implement with minimal, focused changes\n3. Use Svelte 5 runes for state ($state, $derived, $effect)\n4. Use context API for cross-component state\n5. Follow Conventional Commits: \"feat: [US-XXX] - [title]\"\n6. Run `pnpm check` to verify\n7. Update prd.json: passes: true\n8. Append learnings to progress.txt\n\nHandling Blocked Stories\n\nIf a story cannot be completed:\n\nMark as blocked: true in prd.json\nAdd explanation to notes field\nContinue with other parallelizable stories\nReport blocked stories in final summary\n\nStage 1 Exit Criteria\n\nAll 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."
      },
      {
        "title": "Stage 2: Staging",
        "body": "Push to main, deploy to preview, switch from mocks to real data.\n\nVerify Staging Credentials\n\nBefore proceeding, ensure all staging credentials are set:\n\nDATABASE_URL (if using database)\nOAuth client ID/secret (if using auth)\nOther API keys\n\nIf missing, pause and request from user.\n\nDeploy via GitHub-Vercel Integration\n\nOne-time setup (recommended over CLI deploys):\n\nCreate 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.\n\nBenefits of GitHub integration:\n\nPush to deploy (no CLI needed after setup)\nAutomatic preview URLs for all branches\nPersistent branch URLs: [project]-git-dev-[team].vercel.app\nBetter CI/CD visibility in both dashboards\n\nDeploy to staging:\n\nMerge the dev branch into main and push. The push triggers Vercel to build and deploy automatically. See references/cli-commands.md for commands.\n\nDev branch preview URL:\nAfter connecting GitHub, the dev branch gets a persistent preview URL:\nhttps://[project]-git-dev-[team].vercel.app\n\nThis URL stays the same across commits—great for sharing with stakeholders.\n\nFix Environment Issues\n\nCommon issues in deployed environments:\n\nOAuth callback URLs (must match deployed domain)\nCORS configuration\nEnvironment variables not set in Vercel\nDatabase connection strings\nAPI endpoints using localhost\n\nSmart retry logic:\n\nDiagnose error type from stdout/stderr\nAttempt fix based on error:\n\nDependency error → pnpm install\nType error → analyze pnpm check output\nTest failure → re-run with verbose logging\nNetwork/timeout → wait 30s, retry\n\n\nEscalate after 3 failed attempts\n\nStage 2 Exit Criteria\n\nE2E tests must pass against the Vercel preview URL. See references/cli-commands.md for commands."
      },
      {
        "title": "Stage 3: Production",
        "body": "Deploy to production URL and hand off to user.\n\nDeploy Production\n\nWith 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.\n\nFinal Verification\n\nRun E2E tests against the production URL to confirm everything works. See references/cli-commands.md for commands.\n\nCompletion Report\n\n🚀 DEPLOYED\n\nRepository: github.com/[user]/[project-name]\nLive URL: https://[production-url]\n\nBuild Summary:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nStories completed: [N]/[N]\nBlocked stories: [list if any]\nTests passing: [X] unit, [Y] E2E\nDeployment: Vercel production\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nThe app is live and ready for users."
      },
      {
        "title": "Phase 6: Handoff",
        "body": "Provide lifecycle management documentation."
      },
      {
        "title": "Generate Admin Manual",
        "body": "Create ADMIN.md in project root:\n\n# [Project Name] — Administration Guide\n\n## Running Locally\n\n\\`\\`\\`bash\npnpm install\npnpm dev          # Start dev server at localhost:5173\n\\`\\`\\`\n\n## Environment Variables\n\nCopy `.env.example` to `.env` and configure:\n- DATABASE_URL: [description]\n- [other vars]\n\nSet these in Vercel dashboard for production.\n\n## Project Structure\n\n\\`\\`\\`\nsrc/\n├── routes/           # Pages and API routes\n├── lib/components/   # UI components (Skeleton + Bits UI)\n├── lib/server/       # Server-only code\n└── lib/stores/       # State management\n\\`\\`\\`\n\n## Adding New Pages\n\n1. Create `src/routes/[page-name]/+page.svelte`\n2. Add server data loading in `+page.server.ts`\n3. Run `pnpm check` to verify types\n\n## Database Migrations\n\n\\`\\`\\`bash\npnpm drizzle-kit generate  # Generate migration\npnpm drizzle-kit push      # Apply to database\n\\`\\`\\`\n\n## Deployment\n\nPush to `main` branch → auto-deploys to Vercel.\n\n## Troubleshooting\n\n- **Type errors**: Run `pnpm check`\n- **Test failures**: Run `pnpm test:e2e --debug`\n- **Build issues**: Check Vercel deployment logs"
      },
      {
        "title": "Report Handoff",
        "body": "📖 HANDOFF COMPLETE\n\nAdmin manual: ADMIN.md\n- How to run locally\n- Environment variable setup\n- Project structure overview\n- Adding new pages\n- Database migrations\n- Deployment workflow\n- Troubleshooting guide\n\nThe project is ready for ongoing development."
      },
      {
        "title": "Error Handling",
        "body": "If any stage fails and cannot be automatically resolved:\n\nDiagnose: Analyze error output\nCategorize:\n\nDependency → pnpm install\nType error → show specific errors\nTest failure → show failing tests\nNetwork → retry with backoff\n\n\nRetry: Up to 3 attempts with appropriate fix\nEscalate: Report to user with:\n\nWhat failed\nWhat was tried\nSpecific error messages\nSuggested manual resolution\n\nNever leave the project broken. If Stage 2/3 fails, dev branch still works."
      },
      {
        "title": "Quick Reference",
        "body": "For all CLI commands and auth checks, see references/cli-commands.md."
      },
      {
        "title": "Default Adapter",
        "body": "Use adapter-auto — automatically detects:\n\nVercel → adapter-vercel\nCloudflare → adapter-cloudflare\nNetlify → adapter-netlify\nOtherwise → adapter-node"
      },
      {
        "title": "Database Options (drizzle)",
        "body": "postgresql + postgres.js or neon\nsqlite + better-sqlite3 or libsql\nturso + @libsql/client"
      }
    ],
    "body": "SvelteKit Webapp Skill\n\nScaffold production-ready SvelteKit PWAs with opinionated defaults and guided execution.\n\nQuick Start\nDescribe your app — Tell me what you want to build\nReview the PRD — I'll generate a plan with user stories\nApprove — I build, test, and deploy with your oversight\nDone — Get a live URL + admin documentation\n\n\"Build me a task tracker with due dates and priority labels\"\n\nThat's all I need to start. I'll ask follow-up questions if needed.\n\nPrerequisites\n\nThese CLIs must be available (the skill will verify during preflight):\n\nCLI\tPurpose\tInstall\nsv\tSvelteKit scaffolding\tnpm i -g sv (or use via pnpx)\npnpm\tPackage manager\tnpm i -g pnpm\ngh\tGitHub repo creation\tcli.github.com\nvercel\tDeployment\tnpm i -g vercel\n\nOptional (if features require):\n\nturso — Turso database CLI\nOpinionated Defaults\n\nThis skill ships with sensible defaults that work well together. All defaults can be overridden via SKILL-CONFIG.json:\n\nComponent library: Skeleton (Svelte 5 native) + Bits UI fallback\nPackage manager: pnpm\nDeployment: Vercel\nAdd-ons: ESLint, Prettier, Vitest, Playwright, mdsvex, MCP\nState: Svelte 5 runes ($state, $derived, $effect)\n\nSee User Configuration for override details.\n\nUser Configuration\n\nCheck ~/.openclaw/workspace/SKILL-CONFIG.json for user-specific defaults before using skill defaults. User config overrides skill defaults for:\n\nDeployment provider (e.g., vercel, cloudflare, netlify)\nPackage manager (pnpm, npm, yarn)\nAdd-ons to always include\nMCP IDE configuration\nComponent library preferences\nWorkflow Overview\nGather: Freeform description + design references + targeted follow-ups\nPlan: Generate complete PRD (scaffold, configure, features, tests as stories)\nIterate: Refine PRD with user until confirmed\nPreflight: Verify all required auths and credentials\nExecute: Guided build-deploy-verify cycle with user checkpoints (development → staging → production)\nPhase 1: Gather Project Description\n\nA conversational, iterative approach to understanding what the user wants.\n\n1a. Freeform Opening\n\nStart with an open question:\n\n\"What do you want to build?\"\n\"Describe the webapp you have in mind\"\n\nLet the user lead with what matters to them.\n\n1b. Design References\n\nAsk for inspiration:\n\nShare 1-3 sites you'd like this to feel like \n(design, functionality, or both).\n\nExamples:\n- \"Like Notion but simpler\"\n- \"Fieldwire's mobile-first approach\"\n- \"Linear's clean aesthetic\"\n\n\n\"Show me what you like\" communicates more than paragraphs of description.\n\n1c. Visual Identity (Optional)\n\nIf design references suggest custom branding, ask:\n\nAny specific colors, fonts, or logos you want to use?\n(I can pre-configure the Tailwind theme)\n\n1d. Targeted Follow-ups\n\nBased on gaps in the description, ask specifically:\n\nGap\tQuestion\nUsers unclear\t\"Who's the primary user? (role, context)\"\nCore action unclear\t\"What's the ONE thing they must be able to do?\"\nContent unknown\t\"Any existing content/assets to incorporate?\"\nScale unknown\t\"How many users do you expect? (ballpark)\"\nTimeline\t\"Any deadline driving this?\"\n\nOnly ask what's missing—don't interrogate.\n\n1e. Structured Summary\n\nBefore proceeding, confirm understanding:\n\n📝 PROJECT SUMMARY: [Name]\n\nPurpose: [one sentence]\nPrimary user: [who]\nCore action: [what they do]\nDesign inspiration: [references]\nVisual identity: [colors/fonts if specified]\nKey features:\n  • [feature 1]\n  • [feature 2]\n  • [feature 3]\n\nTechnical signals detected:\n  • Database: [yes/no] — [reason]\n  • Authentication: [yes/no] — [reason]\n  • Internationalization: [yes/no] — [reason]\n\nDoes this capture it? [Yes / Adjust]\n\n\nIterate until the user confirms.\n\nPhase 2: Plan (Generate PRD)\n\nGenerate a complete PRD with technical stack, user stories, and mock data strategy.\n\nTechnical Stack\n\nAlways Included:\n\nCLI:              pnpx sv (fallback: npx sv)\nTemplate:         minimal\nTypeScript:       yes\nPackage manager:  pnpm (fallback: npm)\n\nCore add-ons (via sv add):\n  ✓ eslint\n  ✓ prettier\n  ✓ mcp (claude-code)\n  ✓ mdsvex\n  ✓ tailwindcss (+ typography, forms plugins)\n  ✓ vitest\n  ✓ playwright\n\nPost-scaffold:\n  ✓ Skeleton (primary component library — Svelte 5 native, accessible)\n  ✓ Bits UI (headless primitives — fallback for gaps/complex custom UI)\n  ✓ vite-plugin-pwa (PWA support)\n  ✓ Svelte 5 runes mode\n  ✓ adapter-auto (auto-detects deployment target)\n\n\nWhy Skeleton + Bits UI?\n\nSkeleton: Full-featured component library built for Svelte 5, accessible by default\nBits UI: Headless primitives when you need more control or custom styling\nBoth play well together — Skeleton for speed, Bits for flexibility\n\nInferred from Description:\n\ndrizzle     → if needs database (ask: postgres/sqlite/turso)\nlucia       → if needs auth\nparaglide   → if needs i18n (ask: which languages)\n\nState Management\n\nFollow Svelte 5 best practices (see https://svelte.dev/docs/kit/state-management):\n\nUse $state() runes for reactive state\nUse $derived() for computed values\nUse Svelte's context API (setContext/getContext) for cross-component state\nServer state flows through load functions → data prop\nNever store user-specific state in module-level variables (shared across requests)\nCode Style Preferences\n\nCheck SKILL-CONFIG.json for user preferences. Common patterns:\n\nPrefer bind: over callbacks — For child→parent data flow, use bind:value instead of onchange callback props. More declarative, less boilerplate.\nAvoid onMount — Use $effect() for side effects. It's reactive and works with SSR.\nRunes everywhere — $state(), $derived(), $effect() over legacy stores and lifecycle hooks.\nSmall components — Default soft limit of ~200 lines per component (configurable in SKILL-CONFIG.json). If growing larger, extract sub-components. Small is beautiful. 🤩\nDirectory Structure\n\nsv create generates:\n\nsrc/\n├── routes/          # SvelteKit routes\n├── app.html         # HTML template\n├── app.d.ts         # Type declarations\n└── app.css          # Global styles\nstatic/              # Static assets\n\n\nWe add:\n\nsrc/\n├── lib/\n│   ├── components/  # Reusable components (Skeleton + Bits UI)\n│   ├── server/      # Server-only code (db client, auth)\n│   ├── stores/      # Svelte stores (.svelte.ts for runes)\n│   ├── utils/       # Helper functions\n│   └── types/       # TypeScript types\nstatic/\n└── icons/           # PWA icons\n\nUser Stories (prd.json)\n\nStory structure:\n\n{\n  \"project\": \"ProjectName\",\n  \"branchName\": \"dev\",\n  \"description\": \"Brief description\",\n  \"userStories\": [\n    {\n      \"id\": \"US-001\",\n      \"title\": \"Scaffold project\",\n      \"description\": \"Set up the base SvelteKit project.\",\n      \"acceptanceCriteria\": [...],\n      \"priority\": 1,\n      \"passes\": false,\n      \"blocked\": false,\n      \"notes\": \"\"\n    }\n  ]\n}\n\n\nStory sizing rule: Each story must fit in one context window. If it feels big, split it.\n\nStandard story sequence:\n\nScaffold — pnpx sv create, add core add-ons\nConfigure — Skeleton + Bits UI, PWA, directory structure, VSCode workspace, Tailwind theme\nMock Data — Set up mock database/fixtures for development\nFoundation — Root layout, design tokens, home page (INDEX PAGE CHECKPOINT)\nFeatures — Core features from gathered requirements\nInfrastructure — Database schema, migrations, auth (if needed)\nPolish — PWA manifest, icons\nTests — E2E tests for critical flows\n\nIndex 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.\n\nSee references/scaffold-stories.md for story templates.\n\nMock Data Strategy\n\nDevelopment uses mock data; production uses real database.\n\nMock data approach:\n- Generate mock data per-story as needed\n- Store in src/lib/server/mocks/ or use MSW for API mocking\n- E2E tests run against mock data locally\n- Stage 2+ switches to real database\n\n\nWhen drizzle is selected, include stories for:\n\nInitial schema creation\nDrizzle Kit configuration\nFirst migration\nExternal Dependencies\n\nIdentify required credentials:\n\nFeature\tDependency\tRequired\nAny project\tGitHub CLI\tYes\nDeployment\tVercel CLI or adapter-auto\tYes\nDatabase (postgres)\tDATABASE_URL\tFor staging\nDatabase (turso)\tTurso CLI\tFor staging\nOAuth providers\tClient ID/Secret\tFor staging\nPayments\tStripe API keys\tFor staging\n\nDev uses mocks; staging/production need real credentials.\n\nPhase 3: Iterate Until Confirmed\n\nPresent the PRD and refine until the user approves.\n\nPresent the PRD\n📋 PRD: [Project Name]\n\nTECHNICAL STACK:\n✅ Always: TypeScript, Tailwind, Skeleton + Bits UI, ESLint, \n   Prettier, Vitest, Playwright, PWA\n🔍 Inferred:\n   [✓/✗] Database (drizzle) - [reason]\n   [✓/✗] Authentication (lucia) - [reason]  \n   [✓/✗] Internationalization (paraglide) - [reason]\n\nUSER STORIES: [N] stories\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nUS-001: Scaffold project (Setup)\nUS-002: Configure Skeleton + Bits UI (Setup)\nUS-003: Set up mock data (Setup)\nUS-004: Create root layout (Foundation)\n[... feature stories ...]\nUS-XXX: Configure PWA manifest (Polish)\nUS-XXX: Add E2E tests (Tests)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n🔐 External dependencies:\n   • GitHub CLI (required now)\n   • Vercel CLI (required now)\n   • DATABASE_URL (required for staging)\n   • [others for staging]\n\n[Approve / See full stories / Edit stories / Change stack]\n\nIteration Loop\n\nExpect refinement. Common adjustments:\n\nAdd/remove/modify user stories\nChange technical stack choices\nAdjust story priorities\nSplit stories that are too large\nAdd acceptance criteria\n\nContinue iterating until user explicitly approves.\n\nConfirmation\n\nWhen user approves:\n\n✅ PRD CONFIRMED\n\n[N] user stories ready for execution.\nProceeding to preflight checks...\n\nPhase 4: Preflight\n\nVerify all dependencies. Development can start with mocks; staging needs real credentials.\n\nRun Checks\n\nVerify authentication for required CLIs (GitHub, pnpm, Vercel, and optionally Turso). See references/cli-commands.md for specific commands.\n\nPresent Status\n┌─────────────────────────────────────────────┐\n│ 🔐 PREFLIGHT CHECK                          │\n├─────────────────────────────────────────────┤\n│ For development (Stage 1):                  │\n│ ✓ GitHub CLI         authenticated          │\n│ ✓ pnpm               installed              │\n│ ✓ Write access       verified               │\n│                                             │\n│ For staging (Stage 2):                      │\n│ ✓ Vercel CLI         authenticated          │\n│ ✗ DATABASE_URL       not set                │\n│                                             │\n│ ─────────────────────────────────────────── │\n│ Development can start now.                  │\n│ DATABASE_URL needed before Stage 2.         │\n│                                             │\n│ [Start development / Resolve all first]     │\n└─────────────────────────────────────────────┘\n\nResolution\nDevelopment can proceed with mock data\nStaging credentials can be resolved during Stage 1\nProduction credentials verified before Stage 3\nPhase 5: Execute\n\nGuided build-deploy-verify cycle with user checkpoints and live progress updates.\n\nEXECUTE\n├── Stage 1: Development (local, dev branch, mock data)\n│   └── Build all features, tests pass locally\n│\n├── Stage 2: Staging (main branch, preview URL, real data)\n│   └── Deploy, fix environment issues, tests pass on preview\n│\n└── Stage 3: Production (permanent URL)\n    └── Connect domain, final verification, handoff\n\n\nLive progress updates: Report each completed story:\n\n✅ US-001: Scaffold project\n✅ US-002: Configure Skeleton + Bits UI\n✅ US-003: Set up mock data\n⏳ US-004: Create root layout (in progress)\n\nStage 1: Development\n\nBuild everything locally with mock data.\n\nSetup\n\nInitialize a git repository on a dev branch and create a progress.txt tracking file. See references/cli-commands.md for commands.\n\nExecute Stories via Sub-Agents\n\nUse sessions_spawn to execute stories in parallel where dependencies allow.\n\nWave structure:\n\nWave 1: Scaffold (must complete first)\nWave 2: Configure (shadcn, PWA, directories) — parallel\nWave 3: Mock data setup\nWave 4+: Feature stories — parallel where independent\nFinal wave: E2E test stories\n\nSub-agent task template:\n\nImplement user story [US-XXX] for SvelteKit project at [project_path].\n\nStory: [title]\nDescription: [description]\n\nAcceptance Criteria:\n- [criterion 1]\n- [criterion 2]\n- Typecheck passes\n\nInstructions:\n1. Read progress.txt for codebase patterns\n2. Implement with minimal, focused changes\n3. Use Svelte 5 runes for state ($state, $derived, $effect)\n4. Use context API for cross-component state\n5. Follow Conventional Commits: \"feat: [US-XXX] - [title]\"\n6. Run `pnpm check` to verify\n7. Update prd.json: passes: true\n8. Append learnings to progress.txt\n\nHandling Blocked Stories\n\nIf a story cannot be completed:\n\nMark as blocked: true in prd.json\nAdd explanation to notes field\nContinue with other parallelizable stories\nReport blocked stories in final summary\nStage 1 Exit Criteria\n\nAll 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.\n\nStage 2: Staging\n\nPush to main, deploy to preview, switch from mocks to real data.\n\nVerify Staging Credentials\n\nBefore proceeding, ensure all staging credentials are set:\n\nDATABASE_URL (if using database)\nOAuth client ID/secret (if using auth)\nOther API keys\n\nIf missing, pause and request from user.\n\nDeploy via GitHub-Vercel Integration\n\nOne-time setup (recommended over CLI deploys):\n\nCreate 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.\n\nBenefits of GitHub integration:\n\nPush to deploy (no CLI needed after setup)\nAutomatic preview URLs for all branches\nPersistent branch URLs: [project]-git-dev-[team].vercel.app\nBetter CI/CD visibility in both dashboards\n\nDeploy to staging:\n\nMerge the dev branch into main and push. The push triggers Vercel to build and deploy automatically. See references/cli-commands.md for commands.\n\nDev branch preview URL: After connecting GitHub, the dev branch gets a persistent preview URL: https://[project]-git-dev-[team].vercel.app\n\nThis URL stays the same across commits—great for sharing with stakeholders.\n\nFix Environment Issues\n\nCommon issues in deployed environments:\n\nOAuth callback URLs (must match deployed domain)\nCORS configuration\nEnvironment variables not set in Vercel\nDatabase connection strings\nAPI endpoints using localhost\n\nSmart retry logic:\n\nDiagnose error type from stdout/stderr\nAttempt fix based on error:\nDependency error → pnpm install\nType error → analyze pnpm check output\nTest failure → re-run with verbose logging\nNetwork/timeout → wait 30s, retry\nEscalate after 3 failed attempts\nStage 2 Exit Criteria\n\nE2E tests must pass against the Vercel preview URL. See references/cli-commands.md for commands.\n\nStage 3: Production\n\nDeploy to production URL and hand off to user.\n\nDeploy Production\n\nWith 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.\n\nFinal Verification\n\nRun E2E tests against the production URL to confirm everything works. See references/cli-commands.md for commands.\n\nCompletion Report\n🚀 DEPLOYED\n\nRepository: github.com/[user]/[project-name]\nLive URL: https://[production-url]\n\nBuild Summary:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nStories completed: [N]/[N]\nBlocked stories: [list if any]\nTests passing: [X] unit, [Y] E2E\nDeployment: Vercel production\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nThe app is live and ready for users.\n\nPhase 6: Handoff\n\nProvide lifecycle management documentation.\n\nGenerate Admin Manual\n\nCreate ADMIN.md in project root:\n\n# [Project Name] — Administration Guide\n\n## Running Locally\n\n\\`\\`\\`bash\npnpm install\npnpm dev          # Start dev server at localhost:5173\n\\`\\`\\`\n\n## Environment Variables\n\nCopy `.env.example` to `.env` and configure:\n- DATABASE_URL: [description]\n- [other vars]\n\nSet these in Vercel dashboard for production.\n\n## Project Structure\n\n\\`\\`\\`\nsrc/\n├── routes/           # Pages and API routes\n├── lib/components/   # UI components (Skeleton + Bits UI)\n├── lib/server/       # Server-only code\n└── lib/stores/       # State management\n\\`\\`\\`\n\n## Adding New Pages\n\n1. Create `src/routes/[page-name]/+page.svelte`\n2. Add server data loading in `+page.server.ts`\n3. Run `pnpm check` to verify types\n\n## Database Migrations\n\n\\`\\`\\`bash\npnpm drizzle-kit generate  # Generate migration\npnpm drizzle-kit push      # Apply to database\n\\`\\`\\`\n\n## Deployment\n\nPush to `main` branch → auto-deploys to Vercel.\n\n## Troubleshooting\n\n- **Type errors**: Run `pnpm check`\n- **Test failures**: Run `pnpm test:e2e --debug`\n- **Build issues**: Check Vercel deployment logs\n\nReport Handoff\n📖 HANDOFF COMPLETE\n\nAdmin manual: ADMIN.md\n- How to run locally\n- Environment variable setup\n- Project structure overview\n- Adding new pages\n- Database migrations\n- Deployment workflow\n- Troubleshooting guide\n\nThe project is ready for ongoing development.\n\nError Handling\n\nIf any stage fails and cannot be automatically resolved:\n\nDiagnose: Analyze error output\nCategorize:\nDependency → pnpm install\nType error → show specific errors\nTest failure → show failing tests\nNetwork → retry with backoff\nRetry: Up to 3 attempts with appropriate fix\nEscalate: Report to user with:\nWhat failed\nWhat was tried\nSpecific error messages\nSuggested manual resolution\n\nNever leave the project broken. If Stage 2/3 fails, dev branch still works.\n\nQuick Reference\n\nFor all CLI commands and auth checks, see references/cli-commands.md.\n\nDefault Adapter\n\nUse adapter-auto — automatically detects:\n\nVercel → adapter-vercel\nCloudflare → adapter-cloudflare\nNetlify → adapter-netlify\nOtherwise → adapter-node\nDatabase Options (drizzle)\npostgresql + postgres.js or neon\nsqlite + better-sqlite3 or libsql\nturso + @libsql/client"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/leo3linbeck/sveltekit-webapp",
    "publisherUrl": "https://clawhub.ai/leo3linbeck/sveltekit-webapp",
    "owner": "leo3linbeck",
    "version": "1.1.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/sveltekit-webapp",
    "downloadUrl": "https://openagent3.xyz/downloads/sveltekit-webapp",
    "agentUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent",
    "manifestUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/sveltekit-webapp/agent.md"
  }
}