Article

Skills and vibe coding for web-sveltekit

Use repo skills to customize apps/web-sveltekit with prompt-driven edits instead of starting from a blank spec.

web-sveltekit is designed for prompt-driven customization. Describe the product change in natural language, then map the request onto the right files and shared packages.

Use first when you need the repo map or want to confirm which layer owns a feature.

Use when you want a separate frontend copied from apps/web-sveltekit instead of modifying the template in place.

Use after copying the app, or when the change is mostly manifest-driven branding and SEO.

Use when the new product surface needs its own route.

Use when the user dashboard needs a new feature tab or activation area.

  • $onboard
  • $create-app
  • $customize-brand
  • $add-page
  • $add-dashboard

In-place editing vs copied app

Edit apps/web-sveltekit directly when this template itself is the working frontend for demos or platform work.

Use $create-app first if you want tenant isolation, a new package name, or a product frontend with its own release cadence. After that, use the other skills against the copied app.

Main edit surfaces

Brand identity, SEO, footer, analytics, dashboard feature flags.

Hero, capability grid, workflow, FAQ, closing CTA.

Pricing layout and checkout entry.

User-facing docs content in English and Simplified Chinese.

Public-page server proxies (BFF).

  • apps/web-sveltekit/zship.app.json
  • apps/web-sveltekit/src/lib/components/LandingPage.svelte
  • apps/web-sveltekit/src/routes/pricing/+page.svelte
  • apps/web-sveltekit/src/content/docs/*
  • apps/web-sveltekit/src/routes/api/*

When a request clearly belongs to a shared backend package or worker, explain that boundary before turning a local page tweak into a platform change.

Example prompts

  • Turn the web-sveltekit landing hero into a waitlist-first launch page for an AI video tool.
  • Simplify the dashboard home so the primary action is opening AI Playground.
  • Add a docs page about API keys and link it in the existing docs list.
  • Adjust pricing for annual plans only and update the CTA language across the landing page.
  • Use $create-app NAME=my-product to fork web-sveltekit, then use $customize-brand APP=apps/my-product to replace the default branding.

Practical workflow

1. Start from the repo root. 2. Invoke the skill explicitly in your prompt when available. 3. Describe the product change, not just the file name. 4. Inspect the current implementation before patching. 5. Verify the affected route after the change lands (check + build).

That approach keeps the work close to the real codebase and makes web-sveltekit feel like a modifiable product surface instead of a frozen template.

Previous Next