Agent skill · Frontend

sveltekit

Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.

Nick44,086★ · +407/wk · 1 repos on radarProfile →
claude-codecodexcursorMIT
Install
npx skills add sickn33/agentic-awesome-skills --skill sveltekit --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 9 KB
Bundled scripts: none
Declared author: suhaibjanjua
Path: skills/sveltekit/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 44,414 · +328 this week
Language: Python
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# SvelteKit Full-Stack Development ## Overview SvelteKit is the official full-stack framework built on top of Svelte. It provides file-based routing, server-side rendering (SSR), static site generation (SSG), API routes, and progressive form actions — all with Svelte's compile-time reactivity model that ships zero runtime overhead to the browser. Use this skill when building fast, modern web apps where both DX and performance matter. ## When to Use This Skill - Use when building a new full-stack web application with Svelte - Use when you need SSR or SSG with fine-grained control per route - Use when migrating a SPA to a framework with server capabilities - Use when working on a project that needs file-based routing and collocated API endpoints - Use when the user asks about `+page.svelte`, `+layout.svelte`, `load` functions, or form actions ## How It Works ### Step 1: Project Setup ```bash npm create svelte@latest my-app cd my-app npm install npm run dev ``` Choose **Skeleton project** + **TypeScript** + **ESLint/Prettier** when prompted. Directory structure after scaffolding: ``` src/ routes/ +page.svelte ← Root page component +layout.svelte ← Root layout (wraps all pages) +error.

What's inside
Steps it walks through
  1. Overview
  2. When to Use This Skill
  3. How It Works
  4. Step 1: Project Setup
  5. Step 2: File-Based Routing
  6. Step 3: Loading Data with load Functions
  7. Step 4: API Routes (Server Endpoints)
  8. Step 5: Form Actions
  9. Step 6: Layouts and Nested Routes
  10. Step 7: Rendering Modes
  11. Examples
  12. Example 1: Protected Dashboard Route
  13. Example 2: Hooks — Session Middleware
  14. Example 3: Preloading and Invalidation
Commands it runs
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
More from agentic-awesome-skills
All skills →
About this skill
What does the sveltekit skill do?

Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.

How do I install it?

Run `npx skills add sickn33/agentic-awesome-skills --skill sveltekit --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going