Frameworks

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 rules81 tokens always loaded, 1136 tokens when used, 2024 tokens in references on demand.

Install

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

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

The real file

Where fe-nuxt lands for OpenAI Codex

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

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

The real file

Where fe-nuxt lands for GitHub Copilot

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

The real file

Where fe-nuxt lands for Gemini CLI

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

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

The real file

Where fe-nuxt lands for Devin / Windsurf

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

The real file

Where fe-nuxt lands for OpenCode

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

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

The real file

Where fe-nuxt lands for Zed

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

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

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

The real file

Where fe-nuxt lands for Augment

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

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

The real file

Where fe-nuxt lands for Continue

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

The real file

Where fe-nuxt lands for Amazon Q Developer

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

The real file

Where fe-nuxt lands for Aider

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

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-nuxt skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain nuxt/no-bare-fetch-in-setup and fix it here.

Rules it teaches

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.
moderatestatic
nuxt/fetch-composable-in-handler
Call useFetch and useAsyncData only in setup, plugins or composables; in event handlers use $fetch.
moderatestatic
nuxt/async-data-key
A composable that wraps useAsyncData passes an explicit, unique key built from its inputs.
moderatestatic
nuxt/no-module-scope-state
Never create ref() or reactive() state at module scope in a Nuxt app; use useState or a Pinia store.
seriousstatic
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.
seriousstatic
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.
moderatestatic
nuxt/public-runtime-config
Secrets live in the top level of runtimeConfig, never under runtimeConfig.public, which every page sends to the browser.
seriousstatic
nuxt/route-announcer
The app renders NuxtRouteAnnouncer (in app.vue or a layout) so client-side page changes are announced.
moderatestaticWCAG 4.1.3
vue/link-for-navigation
Navigate with RouterLink or NuxtLink, not a button whose click handler only calls router.push or navigateTo.
moderatestaticWCAG 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.
moderatestatic

The rule digest

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

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.

Steps the agent follows

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.

How the agent checks the work

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.

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

SKILL.md on GitHub