Frameworki

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 regułładowane zawsze: 77 tokenów; przy użyciu: 963 tokeny; w referencjach na żądanie: 1544 tokeny.

Instalacja

init instaluje ten skill, gdy projekt używa: svelte. Wybierz agenta, aby zobaczyć, gdzie trafią jego pliki.

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

Agent	Rozpoznawany po
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`

Gdzie trafia fe-svelte dla: Claude Code

.claude/skills/fe-svelte/SKILL.mdskill
.claude/skills/fe-svelte/references/svelte.mdskill
.claude/rules/fe-svelte.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: OpenAI Codex

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Cursor

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.cursor/rules/fe-svelte.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: GitHub Copilot

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.github/instructions/fe-svelte.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Gemini CLI

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Antigravity CLI

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.agents/rules/fe-svelte.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Devin / Windsurf

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
.devin/rules/fe-svelte.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: OpenCode

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Cline

.claude/skills/fe-svelte/SKILL.mdskill
.claude/skills/fe-svelte/references/svelte.mdskill
.clinerules/fe-svelte.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Zed

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: JetBrains Junie

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Kiro

.kiro/skills/fe-svelte/SKILL.mdskill
.kiro/skills/fe-svelte/references/svelte.mdskill
.kiro/steering/fe-svelte.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Augment

.agents/skills/fe-svelte/SKILL.mdskill
.agents/skills/fe-svelte/references/svelte.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Trae

.trae/skills/fe-svelte/SKILL.mdskill
.trae/skills/fe-svelte/references/svelte.mdskill
.trae/rules/fe-svelte.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Continue

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.mdskill
.continue/rules/fe-svelte.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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>`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Amazon Q Developer

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .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 nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.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`.

Prawdziwy plik

Gdzie trafia fe-svelte dla: Aider

.frontend-skills/skills/fe-svelte/SKILL.mdskill
.frontend-skills/skills/fe-svelte/references/svelte.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

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`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-svelte na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij svelte/no-legacy-syntax i popraw to tutaj.

Reguły, których uczy

svelte/no-legacy-syntax
New Svelte 5 code uses runes and the new syntax, not export let, $:, on:event, slot or svelte:component.
drobnastatyczne
svelte/derived-not-effect
A value computed from state is a $derived, not a $state that an $effect keeps in sync.
umiarkowanastatyczne
svelte/props-derived
A top-level value computed from props is a $derived; a plain let or const keeps only the first value.
umiarkowanastatyczne
svelte/each-key
An each block whose items hold state (inputs, bindings, components, transitions) is keyed by a unique id, never by the index.
umiarkowanastatyczne
svelte/window-events
Listen to window and document events with svelte:window and svelte:document, not addEventListener in $effect or onMount.
drobnastatyczne
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.
poważnastatyczneWCAG 2.1.1, 4.1.2
a11y/img-alt
Every img and area element has an alt attribute; a decorative image has alt="".
krytycznastatyczneWCAG 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.
umiarkowanaręczne

Skrót reguł

Ta część jest kopiowana do zawężonego pliku reguł każdego agenta, więc musi być zrozumiała sama w sobie:

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.

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/svelte.md1544 tokeny

SKILL.md na GitHubie