claudeskills.page

6 skills · 4 categories

Claude Code skills for Svelte and SvelteKit

Svelte skills for runes-based components and SvelteKit apps: load functions, form actions, adapters for each host and the rendering choices that decide performance. Pair them with the testing and accessibility skills that apply to any frontend.

Install all 6 Browse the list

Start with these

  1. 1

    SvelteKit Apps

    Runes, load functions and forms that work without JS

    Claude writes Svelte 5 with runes, snippets and callback props instead of extending legacy export let, $: and on:click code. It picks server or universal load files deliberately, streams slow data, builds form actions that degrade without JavaScript, gates auth in hooks plus each action, and chooses the adapter that matches where the app will actually run.

  2. 2

    Rendering Strategies

    Static where you can, per-request only where you must

    Claude inventories every route first: data sources, how stale each may be, whether it is per-user, traffic share and page count. It then picks the most static mode the facts allow, maps it to the framework's real config, keeps personalized bits out of shared caches, and proves the plan with build output, cache-hit headers and a cross-user leak test.

  3. 3

    Astro Sites

    Static HTML first, hydrate only what users touch

    Claude builds Astro sites that stay static by default and ship framework JavaScript only for real widgets, choosing client:visible or client:idle before client:load. Content lives in typed Content Layer collections validated at build time, images go through astro:assets, and SSR is enabled per route with an adapter rather than flipping the whole site to server output.

All 6 Svelte and SvelteKit skills

Grouped by category. Each card opens the full playbook, example prompts and install commands.

Frontend 3

No. 067

SvelteKit Apps

Runes, load functions and forms that work without JS

Claude writes Svelte 5 with runes, snippets and callback props instead of extending legacy export let, $: and on:click code. It picks server or universal load files deliberately, streams slow data, builds form actions that degrade without JavaScript, gates auth in hooks plus each action, and chooses the adapter that matches where the app will actually run.

sveltekit-apps 207 lines
No. 049

Astro Sites

Static HTML first, hydrate only what users touch

Claude builds Astro sites that stay static by default and ship framework JavaScript only for real widgets, choosing client:visible or client:idle before client:load. Content lives in typed Content Layer collections validated at build time, images go through astro:assets, and SSR is enabled per route with an adapter rather than flipping the whole site to server output.

astro-sites 216 lines
No. 073

Web Components

Custom elements that behave like native ones

Claude designs a custom element's public API first — attributes, properties, events, slots, parts and CSS variables — then implements it with idempotent lifecycle hooks, composed events and ElementInternals for roles, states and form participation. It handles the traps that waste days: properties set before upgrade, ARIA references that cannot cross shadow roots, and Lit fields that shadow reactive accessors.

web-components 237 lines

Testing 1

No. 142

Testing Library

Component tests that query like a screen reader

Claude writes component tests that find elements by role and accessible name, drive them with awaited user-event calls, and assert on what a user would see. It builds one render helper with fresh providers per test, stubs the network rather than hooks, and fixes act() warnings by waiting for the visible result instead of wrapping calls in act.

testing-library 188 lines

Cloud Platforms 1

No. 189

Supabase Backend

Treat the database as the security boundary it is

Claude builds Supabase projects with the CLI and versioned migrations, enables RLS on every exposed table with per-operation policies that are indexed and tested as two different users, and keeps the secret key off clients. Server auth uses @supabase/ssr with verified users, storage paths are scoped by user folder, and types are regenerated after each schema change.

supabase-backend 204 lines

Performance 1

★ No. 306

Rendering Strategies

Static where you can, per-request only where you must

Claude inventories every route first: data sources, how stale each may be, whether it is per-user, traffic share and page count. It then picks the most static mode the facts allow, maps it to the framework's real config, keeps personalized bits out of shared caches, and proves the plan with build output, cache-hit headers and a cross-user leak test.

rendering-strategies 207 lines

Install

Every Svelte and SvelteKit skill in one command

Installs into ~/.claude/skills/. Add --project after -- to install into the current repository.

curl -fsSL https://claudeskills.page/install.sh | sh -s -- sveltekit-apps rendering-strategies astro-sites web-components testing-library supabase-backend

Svelte and SvelteKit skills FAQ

What is the best Claude Code skill for Svelte and SvelteKit?

Start with SvelteKit Apps: Runes, load functions and forms that work without JS. Then add Rendering Strategies and Astro Sites, which cover the next most common Svelte and SvelteKit requests.

How do I install all 6 Svelte and SvelteKit skills at once?

Pass every name to the installer in one command: curl -fsSL https://claudeskills.page/install.sh | sh -s -- sveltekit-apps rendering-strategies astro-sites web-components testing-library supabase-backend. Add --project to install them into the current repository's .claude/skills/ folder so your team gets them too.

Do these Svelte and SvelteKit skills work outside Claude Code?

Yes. Each skill uses only the portable Agent Skills frontmatter, so the same folder works on claude.ai, through the Claude API and in the Agent SDK. Skills that run bundled scripts need an environment with code execution.

Related technologies

esc