Frameworks

Svelte components

Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.

fe-sveltesvelte8 rules77 tokens always loaded, 963 tokens when used, 1544 tokens in references on demand.

Install

init installs this skill when the project uses svelte. 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-svelte lands for Claude Code

.claude/skills/fe-svelte/SKILL.mdskill
.claude/skills/fe-svelte/references/svelte.mdskill
.claude/rules/fe-svelte.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-svelte.md

---
paths:
  - "**/*.svelte"
  - "**/*.svelte.js"
  - "**/*.svelte.ts"
---

# Svelte components (frontend-skills)

Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for OpenAI Codex

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for Cursor

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.cursor/rules/fe-svelte.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-svelte.mdc

---
description: Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.
globs: **/*.svelte, **/*.svelte.js, **/*.svelte.ts
alwaysApply: false
---

# Svelte components (frontend-skills)

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for GitHub Copilot

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.github/instructions/fe-svelte.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-svelte.instructions.md

---
applyTo: "**/*.svelte,**/*.svelte.js,**/*.svelte.ts"
description: "Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code."
---

# Svelte components (frontend-skills)

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Gemini CLI

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for Antigravity CLI

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.agents/rules/fe-svelte.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-svelte.md

---
trigger: glob
globs: "**/*.svelte, **/*.svelte.js, **/*.svelte.ts"
description: "Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code."
---

# Svelte components (frontend-skills)

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Devin / Windsurf

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.devin/rules/fe-svelte.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-svelte.md

---
trigger: glob
globs: "**/*.svelte,**/*.svelte.js,**/*.svelte.ts"
---

# Svelte components (frontend-skills)

Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for OpenCode

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for Cline

.claude/skills/fe-svelte/SKILL.mdskill
.claude/skills/fe-svelte/references/svelte.mdskill
.clinerules/fe-svelte.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-svelte.md

---
paths:
  - "**/*.svelte"
  - "**/*.svelte.js"
  - "**/*.svelte.ts"
---

# Svelte components (frontend-skills)

Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Zed

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for JetBrains Junie

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for Kiro

.kiro/skills/fe-svelte/SKILL.mdskill
.kiro/skills/fe-svelte/references/svelte.mdskill
.kiro/steering/fe-svelte.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-svelte.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.svelte", "**/*.svelte.js", "**/*.svelte.ts"]
---

# Svelte components (frontend-skills)

Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code.

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Augment

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.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-svelte lands for Trae

.trae/skills/fe-svelte/SKILL.mdskill
.trae/skills/fe-svelte/references/svelte.mdskill
.trae/rules/fe-svelte.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-svelte.md

---
description: "Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code."
globs: **/*.svelte,**/*.svelte.js,**/*.svelte.ts
alwaysApply: false
---

# Svelte components (frontend-skills)

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Continue

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.mdskill
.continue/rules/fe-svelte.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-svelte.md

---
name: "Svelte components"
description: "Writes and reviews Svelte 5 components in runes mode - $state, $derived, $effect, $props, snippets, event attributes, keyed each blocks - and moves Svelte 4 syntax forward, so components stay reactive, correct and accessible. Use when creating or editing a .svelte or .svelte.js file, fixing a value that does not update, or asked to review Svelte code."
globs: ["**/*.svelte", "**/*.svelte.js", "**/*.svelte.ts"]
alwaysApply: false
---

# Svelte components (frontend-skills)

- Write runes mode: `$props`, `$state`, `$derived`, `onclick`, snippets; no `export let`, `$:`, `on:click` or `<slot>` (svelte/no-legacy-syntax).
- Compute values with `$derived`, never by assigning state inside `$effect` (svelte/derived-not-effect).
- A top-level value that reads a prop is a `$derived`; a plain `const` keeps the first value (svelte/props-derived).
- Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
- Window and document events go on `<svelte:window>` and `<svelte:document>` (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
- Use `$state` only for values that drive the UI; `$state.raw` for large data that is only replaced.
- Interactive elements are `<button>` and `<a>`, never `div` with `onclick` (a11y/no-click-on-static); every `<img>` has `alt` (a11y/img-alt).
- Fix every `a11y_*` compiler warning; silence one only with `<!-- svelte-ignore code -->` and a reason next to it.
- Never pass untrusted strings to `{@html}`; see `fe-security`.

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

The real file

Where fe-svelte lands for Amazon Q Developer

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.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-svelte` (Svelte components): when editing `**/*.svelte`, `**/*.svelte.js`, `**/*.svelte.ts`, first read `.frontend-skills/skills/fe-svelte/SKILL.md`.

The real file

Where fe-svelte lands for Aider

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.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-svelte` (Svelte components): when editing `**/*.svelte`, `**/*.svelte.js`, `**/*.svelte.ts`, first read `.frontend-skills/skills/fe-svelte/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-svelte skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain svelte/no-legacy-syntax and fix it here.

Rules it teaches

svelte/no-legacy-syntax
New Svelte 5 code uses runes and the new syntax, not export let, $:, on:event, slot or svelte:component.
minorstatic
svelte/derived-not-effect
A value computed from state is a $derived, not a $state that an $effect keeps in sync.
moderatestatic
svelte/props-derived
A top-level value computed from props is a $derived; a plain let or const keeps only the first value.
moderatestatic
svelte/each-key
An each block whose items hold state (inputs, bindings, components, transitions) is keyed by a unique id, never by the index.
moderatestatic
svelte/window-events
Listen to window and document events with svelte:window and svelte:document, not addEventListener in $effect or onMount.
minorstatic
a11y/no-click-on-static
A click handler belongs on a button or link; a static element with one also needs a role, tabindex and a key handler.
seriousstaticWCAG 2.1.1, 4.1.2
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
criticalstaticWCAG 1.1.1
js/listener-cleanup
Listeners, timers and observers a view starts are removed when it goes away; one AbortController signal can end them all.
moderatemanual

The rule digest

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

Write runes mode: $props, $state, $derived, onclick, snippets; no export let, $:, on:click or <slot> (svelte/no-legacy-syntax).
Compute values with $derived, never by assigning state inside $effect (svelte/derived-not-effect).
A top-level value that reads a prop is a $derived; a plain const keeps the first value (svelte/props-derived).
Key each block that holds inputs, bindings, components or transitions by a unique id, never the index (svelte/each-key).
Window and document events go on <svelte:window> and <svelte:document> (svelte/window-events); other listeners are removed on teardown (js/listener-cleanup).
Use $state only for values that drive the UI; $state.raw for large data that is only replaced.
Interactive elements are <button> and <a>, never div with onclick (a11y/no-click-on-static); every <img> has alt (a11y/img-alt).
Fix every a11y_* compiler warning; silence one only with  and a reason next to it.
Never pass untrusted strings to {@html}; see fe-security.

Steps the agent follows

Check the profile: on Svelte 4 keep its syntax; on Svelte 5 write runes and convert legacy files when you touch them (npx sv migrate svelte-5).
Props: let { title, count = 0, children, ...rest } = $props(); two-way only with $bindable(). Events are callback props (onsave), not createEventDispatcher.
Shared reactive state lives in .svelte.js modules as classes with $state fields, or in context (createContext) when it is per request or per subtree; stores are for existing code.
Sync with a DOM library through an attachment ({@attach chart}) that returns its cleanup; $effect is the last resort and never writes the state it reads.
Style children through custom properties (<Card --accent="tomato" />); :global only for third-party markup, nested under a local selector.
Debug reactivity with $inspect and $inspect.trace(), and remove them before committing.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports legacy syntax, effects that should be derived, props read once, unkeyed stateful each blocks and hand-made window listeners.
npx sv check (svelte-check) reports compiler warnings, including every a11y_* warning and state_referenced_locally; run it in CI with --fail-on-warnings.
eslint-plugin-svelte adds svelte/require-each-key, svelte/no-at-html-tags and svelte/prefer-writable-derived.

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/svelte.md1544 tokens

SKILL.md on GitHub