Claude Code के साथ Svelte और SvelteKit विकास

Claude Code और SvelteKit साथ में क्यों उपयोगी हैं

Svelte एक UI framework है जो declarative components को हल्के JavaScript में compile करता है। SvelteKit उसी के ऊपर routing, server rendering, load functions, form actions, API endpoints और deployment adapters देता है। असली project में छोटी feature भी src/routes, src/lib/components, $lib/server, generated types और tests को छू सकती है।

Claude Code एक agentic coding tool है जो repository पढ़ सकता है, files edit कर सकता है और commands चला सकता है। SvelteKit में इसका सही उपयोग है: पहले relevant files पढ़वाएं, फिर data flow समझवाएं, फिर छोटे scope में बदलाव करवाएं। अगर आप सीधे “पूरी app बना दो” लिखते हैं, तो UI, database, auth, security और deployment एक साथ मिल जाते हैं और review मुश्किल हो जाता है।

Svelte 5 में runes current तरीका है। आसान भाषा में, $props component input लेता है, $state बदलने वाला state रखता है, $derived state से display value बनाता है, और $effect browser-only side effects के लिए है। यह guide एक छोटे task app के example से setup, components, shared state, routing, forms, tests, prompts और common pitfalls समझाती है।

flowchart LR
  A["छोटी requirement लिखें"] --> B["Claude Code related files पढ़े"]
  B --> C["Svelte components edit करें"]
  C --> D["load/actions check करें"]
  D --> E["checks और tests चलाएं"]
  E --> F["git diff human review"]

Project setup और पहला prompt

नया SvelteKit project बनाने के लिए current official path Svelte CLI है: npx sv create my-app। अगर आपको सिर्फ Vite पर standalone Svelte app चाहिए, तो Vite का svelte-ts template भी उपयोगी है। Vite guide अभी Vite के लिए Node.js 20.19+ या 22.12+ मांगता है, इसलिए पुराने Node पर आने वाली error को Svelte की गलती न मानें।

npx sv create claude-svelte-demo
cd claude-svelte-demo
npm install
npm run dev

claude

नए repo में Claude Code को पहले plan mode में चलाना बेहतर है। यह files पढ़ता है और plan देता है, लेकिन source files edit नहीं करता।

/plan
मैं इस SvelteKit project में task list feature जोड़ना चाहता हूं।
पहले src/routes और src/lib पढ़ें, फिर बताएं कौन सी files बदलेंगी, data flow क्या होगा और कौन से tests चाहिए।
अभी files edit न करें।

claude --permission-mode plan

Project rules CLAUDE.md या .claude/CLAUDE.md में रखें। जैसे: “Svelte 5 runes use करें”, “forms के लिए SvelteKit actions use करें”, “secrets केवल $lib/server में रहें”, “npm run check चलाएं”, और “बिना कहे commit न करें”। Concrete rules vague style advice से बेहतर काम करते हैं।

Svelte 5 component छोटा रखें

यह component src/lib/components/TaskCard.svelte में copy-paste किया जा सकता है। इसमें typed props, $derived display values और accessible button है।

<!-- src/lib/components/TaskCard.svelte -->
<script lang="ts">
  type Task = {
    id: string;
    title: string;
    done: boolean;
    estimateMinutes: number;
    tags: string[];
  };

  let {
    task,
    onToggle
  }: {
    task: Task;
    onToggle: (id: string) => void;
  } = $props();

  let statusLabel = $derived(task.done ? 'पूरा' : 'खुला');
  let estimateLabel = $derived(`${Math.ceil(task.estimateMinutes / 15) * 15} मिनट`);
</script>

<article class:done={task.done} class="task-card">
  <div>
    <p class="status">{statusLabel}</p>
    <h3>{task.title}</h3>
    <p>{estimateLabel}</p>
  </div>

  <ul aria-label="Tags">
    {#each task.tags as tag}
      <li>{tag}</li>
    {/each}
  </ul>

  <button type="button" aria-pressed={task.done} onclick={() => onToggle(task.id)}>
    {task.done ? 'फिर खोलें' : 'पूरा करें'}
  </button>
</article>

<style>
  .task-card {
    display: grid;
    gap: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .done {
    background: #f2fff5;
  }

  .status {
    font-size: 0.875rem;
    font-weight: 700;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
  }

  li {
    border-radius: 999px;
    background: #eef2ff;
    padding: 0.2rem 0.6rem;
  }
</style>

Claude Code को prompt देते समय API contract बचाएं:

src/lib/components/TaskCard.svelte को improve करें, लेकिन Svelte 5 runes syntax रखें।
Conditions:
- Task type और onToggle signature न बदलें।
- onclick रखें, old on:click syntax पर वापस न जाएं।
- button का aria-pressed रखें।
- केवल layout और empty state improve करें।
- अंत में एक component test suggest करें।

Shared state: पहले runes, फिर stores

Svelte 5 .svelte.ts files में भी runes चलाता है। यह shared reactive state और reusable logic के लिए अच्छा है। svelte/store अभी भी useful है जब async streams complex हों, manual subscription चाहिए हो, या कोई library store contract use करती हो।

// src/lib/state/taskFilters.svelte.ts
export type TaskStatus = 'all' | 'open' | 'done';

export const taskFilters = $state({
  query: '',
  status: 'all' as TaskStatus,
  tag: ''
});

export function resetTaskFilters() {
  taskFilters.query = '';
  taskFilters.status = 'all';
  taskFilters.tag = '';
}

<!-- src/lib/components/TaskFilterPanel.svelte -->
<script lang="ts">
  import { resetTaskFilters, taskFilters } from '$lib/state/taskFilters.svelte';
</script>

<section aria-label="Task filters">
  <label>
    Keyword
    <input bind:value={taskFilters.query} placeholder="Invoice, article, review..." />
  </label>

  <label>
    Status
    <select bind:value={taskFilters.status}>
      <option value="all">All</option>
      <option value="open">Open</option>
      <option value="done">Done</option>
    </select>
  </label>

  <button type="button" onclick={resetTaskFilters}>Reset</button>
</section>

SSR को न भूलें। window, document, localStorage server पर नहीं होते। Browser storage चाहिए तो $app/environment से browser guard लगाएं।

// src/lib/state/theme.svelte.ts
import { browser } from '$app/environment';

export const themeState = $state({
  theme: 'system' as 'system' | 'light' | 'dark'
});

export function loadTheme() {
  if (!browser) return;
  const saved = localStorage.getItem('theme');
  if (saved === 'light' || saved === 'dark' || saved === 'system') {
    themeState.theme = saved;
  }
}

export function saveTheme(nextTheme: typeof themeState.theme) {
  themeState.theme = nextTheme;
  if (browser) localStorage.setItem('theme', nextTheme);
}

Routing, load और server boundary

SvelteKit file-based routing use करता है। src/routes/about से /about बनता है, और src/routes/tasks/[slug] dynamic route बनाता है। Page render से पहले data चाहिए तो +page.server.ts रखें। Database, private keys और privileged APIs $lib/server में रहें; उन्हें .svelte component से import न करें।

// src/lib/server/tasks.ts
export type Task = {
  id: string;
  slug: string;
  title: string;
  done: boolean;
  estimateMinutes: number;
  tags: string[];
};

const tasks: Task[] = [
  {
    id: 'task-1',
    slug: 'write-svelte-guide',
    title: 'SvelteKit article draft',
    done: false,
    estimateMinutes: 45,
    tags: ['writing', 'svelte']
  }
];

export async function getTaskBySlug(slug: string) {
  return tasks.find((task) => task.slug === slug) ?? null;
}

// src/routes/tasks/[slug]/+page.server.ts
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { getTaskBySlug } from '$lib/server/tasks';

export const load: PageServerLoad = async ({ params }) => {
  const task = await getTaskBySlug(params.slug);

  if (!task) {
    error(404, 'Task not found');
  }

  return { task };
};

<!-- src/routes/tasks/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageProps } from './$types';

  let { data }: PageProps = $props();
</script>

<svelte:head>
  <title>{data.task.title} | Tasks</title>
</svelte:head>

<article>
  <p>{data.task.done ? 'पूरा' : 'खुला'}</p>
  <h1>{data.task.title}</h1>
  <p>Estimate: {data.task.estimateMinutes} minutes</p>
</article>

src/routes/tasks/[slug] और src/lib/server/tasks.ts पढ़ें।
Task में dueDate field जोड़ें और detail page में दिखाएं।
Server data access $lib/server में ही रखें।
[slug] route folder rename न करें।
अंत में npm run check चलाएं।

Form actions और tests

SvelteKit form actions में +page.server.ts से actions export होते हैं और normal <form method="POST"> server को submit करता है। JavaScript बंद हो तब भी form काम करता है; use:enhance JavaScript available होने पर experience बेहतर करता है।

// src/routes/contact/+page.server.ts
import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const values = {
      name: String(formData.get('name') ?? '').trim(),
      email: String(formData.get('email') ?? '').trim(),
      message: String(formData.get('message') ?? '').trim()
    };

    const errors: Record<string, string> = {};
    if (values.name.length < 2) errors.name = 'Name कम से कम 2 characters होना चाहिए।';
    if (!values.email.includes('@')) errors.email = 'Email address check करें।';
    if (values.message.length < 10) errors.message = 'Message कम से कम 10 characters होना चाहिए।';

    if (Object.keys(errors).length > 0) {
      return fail(400, { values, errors });
    }

    console.log('New inquiry', values);
    return { success: true };
  }
} satisfies Actions;

<!-- src/routes/contact/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageProps } from './$types';

  let { form }: PageProps = $props();
</script>

{#if form?.success}
  <p role="status">भेज दिया गया। हम 1 से 3 business days में जवाब देंगे।</p>
{/if}

<form method="POST" use:enhance>
  <label>
    Name
    <input name="name" value={form?.values?.name ?? ''} aria-invalid={!!form?.errors?.name} />
  </label>
  {#if form?.errors?.name}<p>{form.errors.name}</p>{/if}

  <label>
    Email
    <input name="email" type="email" value={form?.values?.email ?? ''} aria-invalid={!!form?.errors?.email} />
  </label>
  {#if form?.errors?.email}<p>{form.errors.email}</p>{/if}

  <label>
    Message
    <textarea name="message" rows="5" aria-invalid={!!form?.errors?.message}>{form?.values?.message ?? ''}</textarea>
  </label>
  {#if form?.errors?.message}<p>{form.errors.message}</p>{/if}

  <button type="submit">Send</button>
</form>

Testing के लिए Svelte docs Vite/SvelteKit projects में Vitest को अच्छा विकल्प बताते हैं। Component behavior को Testing Library से जांचें।

// src/lib/components/TaskCard.test.ts
import { fireEvent, render, screen } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import TaskCard from './TaskCard.svelte';

describe('TaskCard', () => {
  it('toggles the task when the button is clicked', async () => {
    let toggledId = '';

    render(TaskCard, {
      task: {
        id: 'task-1',
        title: 'Write SvelteKit article',
        done: false,
        estimateMinutes: 45,
        tags: ['writing']
      },
      onToggle: (id) => {
        toggledId = id;
      }
    });

    await fireEvent.click(screen.getByRole('button', { name: 'पूरा करें' }));
    expect(toggledId).toBe('task-1');
  });
});

npm run check
npm run test
npm run build
git diff -- src/lib src/routes

Use cases, pitfalls और CTA

Use case	Claude Code क्या कर सकता है	Human review
Admin filters	$state और $derived से filters अलग करना	URL query और permissions
Blog/CMS page	[slug], load, SEO title और 404 जोड़ना	HTML sanitization और draft rules
Lead form	actions, validation, use:enhance, tests	Privacy, spam और notifications
Svelte 4 to 5	चुने हुए components को runes में बदलना	Behavior change न हो

मुख्य pitfalls हैं: बहुत बड़ा prompt, Svelte 4 और 5 syntax mix करना, component से $lib/server import करना, $effect को normal calculation में use करना, और weak tests accept करना। Monetization के लिए SvelteKit articles और forms को consultation flow से जोड़ना आसान है। Team rollout में मदद चाहिए तो Claude Code consultation page देखें। आगे पढ़ने के लिए getting started guide, TypeScript tips और testing strategies उपयोगी हैं।

Official links और tested result

Behavior confirm करने के लिए primary sources देखें: Svelte docs, SvelteKit docs, SvelteKit form actions, Vite guide और Claude Code docs।

Current SvelteKit structure पढ़ें और सिर्फ इस scope को बदलें।
Files: src/routes/contact/+page.svelte और src/routes/contact/+page.server.ts
Goal: inquiry form में company field जोड़ना।
Constraints:
- Svelte 5 runes रखें।
- use:enhance न हटाएं।
- server-side validation जोड़ें।
- CTA copy और layout classes न बदलें।
- finish से पहले npm run check चलाएं।
अंत में 3 lines दें: changes, risk, missing tests।

Masa ने छोटे SvelteKit task app में यह workflow आजमाया। सबसे कम rework तब हुआ जब पहले plan mode में structure पढ़वाया गया। “runes syntax रखें”, “npm run check चलाएं” और “commit न करें” लिखने से diff छोटा रहा और beginner भी review कर सका।