Frameworks

SvelteKit apps

Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.

fe-sveltekitsveltekit7 rules77 tokens always loaded, 1033 tokens when used, 1637 tokens in references on demand.

Install

init installs this skill when the project uses sveltekit. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-sveltekit lands for Claude Code

.claude/skills/fe-sveltekit/SKILL.mdskill
.claude/skills/fe-sveltekit/references/sveltekit.mdskill
.claude/rules/fe-sveltekit.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-sveltekit.md

---
paths:
  - "src/routes/**/*"
  - "src/hooks*.*"
  - "src/app.html"
  - "src/lib/**/*"
  - "vite.config.*"
  - "svelte.config.*"
---

# SvelteKit apps (frontend-skills)

Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.claude/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for OpenAI Codex

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for Cursor

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
.cursor/rules/fe-sveltekit.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-sveltekit.mdc

---
description: Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.
globs: src/routes/**/*, src/hooks*.*, src/app.html, src/lib/**/*, vite.config.*, svelte.config.*
alwaysApply: false
---

# SvelteKit apps (frontend-skills)

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.agents/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for GitHub Copilot

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
.github/instructions/fe-sveltekit.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-sveltekit.instructions.md

---
applyTo: "src/routes/**/*,src/hooks*.*,src/app.html,src/lib/**/*,vite.config.*,svelte.config.*"
description: "Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config."
---

# SvelteKit apps (frontend-skills)

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.agents/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Gemini CLI

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for Antigravity CLI

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
.agents/rules/fe-sveltekit.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-sveltekit.md

---
trigger: glob
globs: "src/routes/**/*, src/hooks*.*, src/app.html, src/lib/**/*, vite.config.*, svelte.config.*"
description: "Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config."
---

# SvelteKit apps (frontend-skills)

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.agents/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Devin / Windsurf

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
.devin/rules/fe-sveltekit.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-sveltekit.md

---
trigger: glob
globs: "src/routes/**/*,src/hooks*.*,src/app.html,src/lib/**/*,vite.config.*,svelte.config.*"
---

# SvelteKit apps (frontend-skills)

Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.agents/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for OpenCode

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for Cline

.claude/skills/fe-sveltekit/SKILL.mdskill
.claude/skills/fe-sveltekit/references/sveltekit.mdskill
.clinerules/fe-sveltekit.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-sveltekit.md

---
paths:
  - "src/routes/**/*"
  - "src/hooks*.*"
  - "src/app.html"
  - "src/lib/**/*"
  - "vite.config.*"
  - "svelte.config.*"
---

# SvelteKit apps (frontend-skills)

Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.claude/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Zed

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for JetBrains Junie

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for Kiro

.kiro/skills/fe-sveltekit/SKILL.mdskill
.kiro/skills/fe-sveltekit/references/sveltekit.mdskill
.kiro/steering/fe-sveltekit.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-sveltekit.md

---
inclusion: fileMatch
fileMatchPattern: ["src/routes/**/*", "src/hooks*.*", "src/app.html", "src/lib/**/*", "vite.config.*", "svelte.config.*"]
---

# SvelteKit apps (frontend-skills)

Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config.

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.kiro/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Augment

.agents/skills/fe-sveltekit/SKILL.mdskill
.agents/skills/fe-sveltekit/references/sveltekit.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-sveltekit lands for Trae

.trae/skills/fe-sveltekit/SKILL.mdskill
.trae/skills/fe-sveltekit/references/sveltekit.mdskill
.trae/rules/fe-sveltekit.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-sveltekit.md

---
description: "Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config."
globs: src/routes/**/*,src/hooks*.*,src/app.html,src/lib/**/*,vite.config.*,svelte.config.*
alwaysApply: false
---

# SvelteKit apps (frontend-skills)

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.trae/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Continue

.frontend-skills/skills/fe-sveltekit/SKILL.mdskill
.frontend-skills/skills/fe-sveltekit/references/sveltekit.mdskill
.continue/rules/fe-sveltekit.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-sveltekit.md

---
name: "SvelteKit apps"
description: "Builds and reviews SvelteKit 3 apps (and Kit 2 projects on the way up) - routes, load functions, form actions with progressive enhancement, page titles, server-only state and rendering options - so pages work before JavaScript, load without waterfalls and never leak data between users. Use when editing src/routes, a load or action, hooks, or SvelteKit config."
globs: ["src/routes/**/*", "src/hooks*.*", "src/app.html", "src/lib/**/*", "vite.config.*", "svelte.config.*"]
alwaysApply: false
---

# SvelteKit apps (frontend-skills)

- Never keep per-request data in module-level variables of server code; use `event.locals`, the return of `load`, a database or a cookie (svelte/kit-shared-server-state).
- Forms post to form actions (`method="POST" action="?/name"`) and add `use:enhance`; never a form that works only through `onsubmit` (svelte/kit-form-actions).
- Every page sets its own `<title>` in `<svelte:head>`, or the layout renders one from page data (svelte/kit-page-title).
- Read `page`, `navigating`, `updated` from `$app/state`, never `$app/stores` (svelte/kit-app-state).
- Start independent requests together; `await parent()` after them; stream slow data as promises (svelte/kit-load-waterfall).
- Use the `fetch` passed to `load`, and check `res.ok` (js/fetch-check-ok).
- Secrets only in server code (`+page.server`, `hooks.server`, `src/lib/server`) through the private env module.
- Assets through imports or `asset()` from `$app/paths`; links through `resolve()` when the app has a base path (js/asset-import).
- `load` is pure: no writes to shared stores or globals.
- Keep `ssr` on; `prerender = true` only where every visitor gets the same page.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-sveltekit/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-sveltekit lands for Amazon Q Developer

.frontend-skills/skills/fe-sveltekit/SKILL.mdskill
.frontend-skills/skills/fe-sveltekit/references/sveltekit.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-sveltekit` (SvelteKit apps): when editing `src/routes/**/*`, `src/hooks*.*`, `src/app.html`, `src/lib/**/*`, `vite.config.*`, `svelte.config.*`, first read `.frontend-skills/skills/fe-sveltekit/SKILL.md`.

The real file

Where fe-sveltekit lands for Aider

.frontend-skills/skills/fe-sveltekit/SKILL.mdskill
.frontend-skills/skills/fe-sveltekit/references/sveltekit.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-sveltekit` (SvelteKit apps): when editing `src/routes/**/*`, `src/hooks*.*`, `src/app.html`, `src/lib/**/*`, `vite.config.*`, `svelte.config.*`, first read `.frontend-skills/skills/fe-sveltekit/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-sveltekit skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain svelte/kit-shared-server-state and fix it here.

Rules it teaches

svelte/kit-shared-server-state
Server code of a SvelteKit app never keeps per-request data in module-level variables; the module is shared by every user.
seriousstatic
svelte/kit-form-actions
A SvelteKit form posts to a form action (method and action) and is enhanced with use:enhance, not handled only by onsubmit.
moderatestatic
svelte/kit-page-title
Every SvelteKit page sets its own descriptive title in svelte:head, or its layout renders a title from page data.
seriousstaticWCAG 2.4.2
svelte/kit-app-state
Read page, navigating and updated from $app/state, not the $app/stores module that SvelteKit 3 removed.
moderatestatic
svelte/kit-load-waterfall
A load function starts independent requests together and awaits parent() only after them, so data does not load in a chain.
moderatemanual
js/asset-import
In a bundled project, images, fonts and media in component markup are imported or use the base-path helper, not hard-coded root paths.
moderatestatic
js/fetch-check-ok
After fetch, check response.ok (or the status) before reading the body; fetch does not reject on 404 or 500.
moderatestatic

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Never keep per-request data in module-level variables of server code; use event.locals, the return of load, a database or a cookie (svelte/kit-shared-server-state).
Forms post to form actions (method="POST" action="?/name") and add use:enhance; never a form that works only through onsubmit (svelte/kit-form-actions).
Every page sets its own <title> in <svelte:head>, or the layout renders one from page data (svelte/kit-page-title).
Read page, navigating, updated from $app/state, never $app/stores (svelte/kit-app-state).
Start independent requests together; await parent() after them; stream slow data as promises (svelte/kit-load-waterfall).
Use the fetch passed to load, and check res.ok (js/fetch-check-ok).
Secrets only in server code (+page.server, hooks.server, src/lib/server) through the private env module.
Assets through imports or asset() from $app/paths; links through resolve() when the app has a base path (js/asset-import).
load is pure: no writes to shared stores or globals.
Keep ssr on; prerender = true only where every visitor gets the same page.

Steps the agent follows

Check the Kit version first. Kit 3: config in vite.config.js (sveltekit({ ... })), #lib from package.json imports, $app/env/private and $app/env/public, no base/assets (use resolve, asset). Kit 2: svelte.config.js, $lib, $env/.... Upgrade with npx sv migrate sveltekit-3.
Data that needs the database or secrets goes in +page.server.js load; public API data in +page.js load with the provided fetch.
Actions validate input on the server, return fail(400, { values, errors }), and the page shows the errors next to their fields (see fe-a11y-forms).
Filters, sorting and tabs that should survive a reload live in the URL (method="GET" forms, url.searchParams in load).
Throw error(404, 'Not found') and redirect(303, '/login') from @sveltejs/kit; in Kit 3 the message is a string and an external redirect needs the external option.
Set lang in src/app.html (per page through the handle hook for several languages), and keep Kit's focus reset after navigation.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports shared server state, JavaScript-only forms, pages without a title and $app/stores imports. The audit reads .ts route files only through these project checks.
npx sv check --fail-on-warnings for types and compiler warnings; vite build fails on server-only imports in client code.
Test with JavaScript disabled: forms and links must still work.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/sveltekit.md1637 tokens

SKILL.md on GitHub