Frameworki

Nuxt apps

Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.

fe-nuxtnuxt10 regułładowane zawsze: 81 tokenów; przy użyciu: 1136 tokenów; w referencjach na żądanie: 2024 tokeny.

Instalacja

init instaluje ten skill, gdy projekt używa: nuxt. 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-nuxt dla: Claude Code

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

---
paths:
  - "**/*.vue"
  - "app/**/*.ts"
  - "app/**/*.js"
  - "server/**/*.ts"
  - "**/nuxt.config.ts"
  - "**/nuxt.config.js"
  - "**/nuxt.config.mjs"
---

# Nuxt apps (frontend-skills)

Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: OpenAI Codex

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: Cursor

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

---
description: Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.
globs: **/*.vue, app/**/*.ts, app/**/*.js, server/**/*.ts, **/nuxt.config.ts, **/nuxt.config.js, **/nuxt.config.mjs
alwaysApply: false
---

# Nuxt apps (frontend-skills)

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: GitHub Copilot

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

---
applyTo: "**/*.vue,app/**/*.ts,app/**/*.js,server/**/*.ts,**/nuxt.config.ts,**/nuxt.config.js,**/nuxt.config.mjs"
description: "Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code."
---

# Nuxt apps (frontend-skills)

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Gemini CLI

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: Antigravity CLI

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

---
trigger: glob
globs: "**/*.vue, app/**/*.ts, app/**/*.js, server/**/*.ts, **/nuxt.config.ts, **/nuxt.config.js, **/nuxt.config.mjs"
description: "Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code."
---

# Nuxt apps (frontend-skills)

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Devin / Windsurf

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

---
trigger: glob
globs: "**/*.vue,app/**/*.ts,app/**/*.js,server/**/*.ts,**/nuxt.config.ts,**/nuxt.config.js,**/nuxt.config.mjs"
---

# Nuxt apps (frontend-skills)

Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: OpenCode

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: Cline

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

---
paths:
  - "**/*.vue"
  - "app/**/*.ts"
  - "app/**/*.js"
  - "server/**/*.ts"
  - "**/nuxt.config.ts"
  - "**/nuxt.config.js"
  - "**/nuxt.config.mjs"
---

# Nuxt apps (frontend-skills)

Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Zed

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: JetBrains Junie

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: Kiro

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.vue", "app/**/*.ts", "app/**/*.js", "server/**/*.ts", "**/nuxt.config.ts", "**/nuxt.config.js", "**/nuxt.config.mjs"]
---

# Nuxt apps (frontend-skills)

Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code.

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Augment

.agents/skills/fe-nuxt/SKILL.mdskill
.agents/skills/fe-nuxt/references/nuxt.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-nuxt dla: Trae

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

---
description: "Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code."
globs: **/*.vue,app/**/*.ts,app/**/*.js,server/**/*.ts,**/nuxt.config.ts,**/nuxt.config.js,**/nuxt.config.mjs
alwaysApply: false
---

# Nuxt apps (frontend-skills)

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Continue

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

---
name: "Nuxt apps"
description: "Writes and reviews Nuxt 4 apps - useFetch and useAsyncData vs $fetch, keys, per-request state, server-safe setup, runtime config, route announcements - so pages render on the server without leaks, double requests or hydration errors. Use when editing files in a Nuxt project (app/, pages, composables, nuxt.config), fixing a hydration mismatch, or when asked to review Nuxt code."
globs: ["**/*.vue", "app/**/*.ts", "app/**/*.js", "server/**/*.ts", "**/nuxt.config.ts", "**/nuxt.config.js", "**/nuxt.config.mjs"]
alwaysApply: false
---

# Nuxt apps (frontend-skills)

- Load initial data with `useFetch`/`useAsyncData`, never a bare `$fetch` at the top of setup (nuxt/no-bare-fetch-in-setup).
- In event handlers use `$fetch`, then `refresh()`; never `useFetch` there (nuxt/fetch-composable-in-handler).
- Give `useAsyncData` in a composable a key built from its inputs (nuxt/async-data-key).
- No `ref`/`reactive` at module scope; `useState('key')` or a Pinia store (nuxt/no-module-scope-state).
- No `window`, `document`, `localStorage` at the top of setup; `onMounted`, `useCookie`, `<ClientOnly>` (nuxt/no-browser-api-in-setup).
- Read config with `useRuntimeConfig()` and test sides with `import.meta.client` (nuxt/runtime-config-not-process-env).
- Never put secrets under `runtimeConfig.public` (nuxt/public-runtime-config).
- Render `<NuxtRouteAnnouncer />` and give each page its own title (nuxt/route-announcer).
- Navigate with `<NuxtLink>` (vue/link-for-navigation); import assets or use `~/assets` (js/asset-import).
- Treat every hydration warning as a bug.

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

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Amazon Q Developer

.frontend-skills/skills/fe-nuxt/SKILL.mdskill
.frontend-skills/skills/fe-nuxt/references/nuxt.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-nuxt` (Nuxt apps): when editing `**/*.vue`, `app/**/*.ts`, `app/**/*.js`, `server/**/*.ts`, `**/nuxt.config.ts`, `**/nuxt.config.js`, `**/nuxt.config.mjs`, first read `.frontend-skills/skills/fe-nuxt/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-nuxt dla: Aider

.frontend-skills/skills/fe-nuxt/SKILL.mdskill
.frontend-skills/skills/fe-nuxt/references/nuxt.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-nuxt` (Nuxt apps): when editing `**/*.vue`, `app/**/*.ts`, `app/**/*.js`, `server/**/*.ts`, `**/nuxt.config.ts`, `**/nuxt.config.js`, `**/nuxt.config.mjs`, first read `.frontend-skills/skills/fe-nuxt/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-nuxt na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij nuxt/no-bare-fetch-in-setup i popraw to tutaj.

Reguły, których uczy

nuxt/no-bare-fetch-in-setup
Load a page's initial data with useFetch or useAsyncData, not a bare $fetch at the top of script setup.
umiarkowanastatyczne
nuxt/fetch-composable-in-handler
Call useFetch and useAsyncData only in setup, plugins or composables; in event handlers use $fetch.
umiarkowanastatyczne
nuxt/async-data-key
A composable that wraps useAsyncData passes an explicit, unique key built from its inputs.
umiarkowanastatyczne
nuxt/no-module-scope-state
Never create ref() or reactive() state at module scope in a Nuxt app; use useState or a Pinia store.
poważnastatyczne
nuxt/no-browser-api-in-setup
Never touch window, document, localStorage or navigator at the top of script setup; it also runs on the server.
poważnastatyczne
nuxt/runtime-config-not-process-env
App code reads configuration with useRuntimeConfig() and tests the side with import.meta.client, not process.env or process.client.
umiarkowanastatyczne
nuxt/public-runtime-config
Secrets live in the top level of runtimeConfig, never under runtimeConfig.public, which every page sends to the browser.
poważnastatyczne
nuxt/route-announcer
The app renders NuxtRouteAnnouncer (in app.vue or a layout) so client-side page changes are announced.
umiarkowanastatyczneWCAG 4.1.3
vue/link-for-navigation
Navigate with RouterLink or NuxtLink, not a button whose click handler only calls router.push or navigateTo.
umiarkowanastatyczneWCAG 4.1.2
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.
umiarkowanastatyczne

Skrót reguł

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

Load initial data with useFetch/useAsyncData, never a bare $fetch at the top of setup (nuxt/no-bare-fetch-in-setup).
In event handlers use $fetch, then refresh(); never useFetch there (nuxt/fetch-composable-in-handler).
Give useAsyncData in a composable a key built from its inputs (nuxt/async-data-key).
No ref/reactive at module scope; useState('key') or a Pinia store (nuxt/no-module-scope-state).
No window, document, localStorage at the top of setup; onMounted, useCookie, <ClientOnly> (nuxt/no-browser-api-in-setup).
Read config with useRuntimeConfig() and test sides with import.meta.client (nuxt/runtime-config-not-process-env).
Never put secrets under runtimeConfig.public (nuxt/public-runtime-config).
Render <NuxtRouteAnnouncer /> and give each page its own title (nuxt/route-announcer).
Navigate with <NuxtLink> (vue/link-for-navigation); import assets or use ~/assets (js/asset-import).
Treat every hydration warning as a bug.

Kroki, które wykonuje agent

Nuxt 4 layout: app code in app/ (pages/, layouts/, components/, composables/, middleware/, plugins/, app.vue), API routes in server/, shared types in shared/, static files in public/. Nuxt 3 is end-of-life since 2026-07-31.
Data: const { data, status, error, refresh } = await useFetch('/api/x', { pick: [...] }); show status === 'pending' and error states; lazy: true for below-the-fold data; Promise.all inside one useAsyncData for parallel calls. data starts as undefined.
State shared across components: useState('cart', () => []) with JSON-serializable values, or Pinia (@pinia/nuxt).
Head and SEO per page: useSeoMeta({ title, description }), a titleTemplate in app.vue; definePageMeta takes only static values.
Rendering per route with routeRules (prerender, swr, isr, ssr: false); with ssr: false add app/spa-loading-template.html.
Images through <NuxtImg> (@nuxt/image), fonts through @nuxt/fonts, third-party scripts through @nuxt/scripts; Lazy prefix and hydrate-on-visible for heavy components below the fold.
Secrets only in server code: top-level runtimeConfig read with useRuntimeConfig(event) in server/, set with NUXT_ variables.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed reports bare $fetch in setup, data composables in handlers, keyless useAsyncData in composables, module-scope state, browser APIs in setup, process.env in app code, public secrets and a missing route announcer.
Run @nuxt/eslint (it includes eslint-plugin-vue) and nuxi typecheck.
Load a page with JavaScript off and on, and read the browser console for hydration warnings; navigate with a screen reader to hear the announcer.

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/nuxt.md2024 tokeny

SKILL.md na GitHubie