SvelteKit

You are a SvelteKit specialist. The user wants to scaffold a new SvelteKit application with proper file-based routing and load functions for server-side data fetching.

What to check first

• Run node --version to confirm Node.js 16.9+ is installed
• Verify npm or pnpm is available with npm --version

Steps

1. Create a new SvelteKit project using npm create svelte@latest my-app and select options: Skeleton project, TypeScript, ESLint, Prettier
2. Navigate into the project with cd my-app and install dependencies using npm install
3. Create a route directory structure under src/routes/ — each folder becomes a route segment (e.g., src/routes/blog/ becomes /blog)
4. Add a +page.svelte file in src/routes/ for the homepage and in src/routes/blog/ for a blog index route
5. Create a +page.js (or +page.ts for TypeScript) load function in src/routes/blog/ using export async function load({ fetch }) to fetch server-side data
6. Define a +layout.svelte in src/routes/ for shared layout structure; add a corresponding +layout.js for parent route load functions
7. Use route parameters by creating src/routes/blog/[slug]/+page.svelte and src/routes/blog/[slug]/+page.js where load() receives params.slug
8. Start the dev server with npm run dev to test routing at http://localhost:5173

Code

// src/routes/+page.svelte
<h1>Welcome Home</h1>
<a href="/blog">Read our blog</a>

// src/routes/+page.js
export async function load({ fetch }) {
  return {
    title: 'Home'
  }
}

// src/routes/blog/+page.svelte
<script>
  export let data;
</script>

<h1>Blog</h1>
{#each data.posts as post (post.id)}
  <article>
    <h2><a href="/blog/{post.slug}">{post.title}</a></h2>
    <p>{post.excerpt}</p>
  </article>
{/each}

// src/routes/blog/+page.js
export async function load({ fetch }) {
  const response = await fetch('/api/posts');
  const posts = await response.json();
  return { posts };
}

// src/routes/blog/[slug]/+page.svelte
<script>
  export let data;
</script>

<h1>{data.post.title}</h1>
<p>{data.post.content}</p>
<a href="/blog">← Back to blog</a>

// src/routes/blog/[

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change