Frameworks

Next.js App Router

Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.

fe-nextjsnext9 rules81 tokens always loaded, 1053 tokens when used, 1942 tokens in references on demand.

Install

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

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

---
paths:
  - "**/*.tsx"
  - "**/*.jsx"
  - "app/**/*.js"
  - "app/**/*.ts"
  - "src/app/**/*.js"
  - "src/app/**/*.ts"
  - "next.config.*"
  - "proxy.*"
  - "middleware.*"
---

# Next.js App Router (frontend-skills)

Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for OpenAI Codex

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

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

---
description: Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.
globs: **/*.tsx, **/*.jsx, app/**/*.js, app/**/*.ts, src/app/**/*.js, src/app/**/*.ts, next.config.*, proxy.*, middleware.*
alwaysApply: false
---

# Next.js App Router (frontend-skills)

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for GitHub Copilot

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

---
applyTo: "**/*.tsx,**/*.jsx,app/**/*.js,app/**/*.ts,src/app/**/*.js,src/app/**/*.ts,next.config.*,proxy.*,middleware.*"
description: "Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change."
---

# Next.js App Router (frontend-skills)

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Gemini CLI

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

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

---
trigger: glob
globs: "**/*.tsx, **/*.jsx, app/**/*.js, app/**/*.ts, src/app/**/*.js, src/app/**/*.ts, next.config.*, proxy.*, middleware.*"
description: "Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change."
---

# Next.js App Router (frontend-skills)

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Devin / Windsurf

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

---
trigger: glob
globs: "**/*.tsx,**/*.jsx,app/**/*.js,app/**/*.ts,src/app/**/*.js,src/app/**/*.ts,next.config.*,proxy.*,middleware.*"
---

# Next.js App Router (frontend-skills)

Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for OpenCode

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

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

---
paths:
  - "**/*.tsx"
  - "**/*.jsx"
  - "app/**/*.js"
  - "app/**/*.ts"
  - "src/app/**/*.js"
  - "src/app/**/*.ts"
  - "next.config.*"
  - "proxy.*"
  - "middleware.*"
---

# Next.js App Router (frontend-skills)

Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Zed

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

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

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.tsx", "**/*.jsx", "app/**/*.js", "app/**/*.ts", "src/app/**/*.js", "src/app/**/*.ts", "next.config.*", "proxy.*", "middleware.*"]
---

# Next.js App Router (frontend-skills)

Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change.

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Augment

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

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

---
description: "Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change."
globs: **/*.tsx,**/*.jsx,app/**/*.js,app/**/*.ts,src/app/**/*.js,src/app/**/*.ts,next.config.*,proxy.*,middleware.*
alwaysApply: false
---

# Next.js App Router (frontend-skills)

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Continue

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

---
name: "Next.js App Router"
description: "Writes and reviews Next.js 16 App Router code - Server and Client Components, async params, Server Actions, caching, metadata, next/image, next/font and environment variables - so routes stay fast, safe and correct. Use when editing app/ routes, layouts, actions or next.config, upgrading from Next.js 15, or asked to review a Next.js change."
globs: ["**/*.tsx", "**/*.jsx", "app/**/*.js", "app/**/*.ts", "src/app/**/*.js", "src/app/**/*.ts", "next.config.*", "proxy.*", "middleware.*"]
alwaysApply: false
---

# Next.js App Router (frontend-skills)

- Pages and layouts stay Server Components; `'use client'` goes on the small interactive leaf (next/use-client-at-leaves).
- A Client Component is never `async`; await on the server or read a promise with `use()` (next/no-async-client-component).
- `await params` and `await searchParams`; Next.js 16 removed synchronous access (next/async-params).
- Call `redirect()` and `notFound()` after the `try`/`catch`, never inside it (next/redirect-outside-try).
- Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
- Secrets never get the `NEXT_PUBLIC_` prefix; server-only modules start with `import 'server-only'` (next/public-env-secret).
- Images through `next/image` (next/use-next-image); with `fill`, always set `sizes` (next/image-fill-sizes).
- Fonts through `next/font`, never a `<link>` to Google Fonts (next/use-next-font).
- Titles and descriptions through `metadata` or `generateMetadata`; each route has a unique title.
- Never fetch your own Route Handlers from a Server Component; call the data function directly.

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

The real file

Where fe-nextjs lands for Amazon Q Developer

.frontend-skills/skills/fe-nextjs/SKILL.mdskill
.frontend-skills/skills/fe-nextjs/references/nextjs.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-nextjs` (Next.js App Router): when editing `**/*.tsx`, `**/*.jsx`, `app/**/*.js`, `app/**/*.ts`, `src/app/**/*.js`, `src/app/**/*.ts`, `next.config.*`, `proxy.*`, `middleware.*`, first read `.frontend-skills/skills/fe-nextjs/SKILL.md`.

The real file

Where fe-nextjs lands for Aider

.frontend-skills/skills/fe-nextjs/SKILL.mdskill
.frontend-skills/skills/fe-nextjs/references/nextjs.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-nextjs` (Next.js App Router): when editing `**/*.tsx`, `**/*.jsx`, `app/**/*.js`, `app/**/*.ts`, `src/app/**/*.js`, `src/app/**/*.ts`, `next.config.*`, `proxy.*`, `middleware.*`, first read `.frontend-skills/skills/fe-nextjs/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-nextjs skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain next/use-client-at-leaves and fix it here.

Rules it teaches

next/use-client-at-leaves
Keep App Router pages and layouts Server Components; put 'use client' on the small interactive component they render.
moderatestatic
next/no-async-client-component
A Client Component is never an async function; fetch in a Server Component parent or read a promise with use().
seriousstatic
next/async-params
Await params and searchParams in App Router pages, layouts and generateMetadata; Next.js 16 removed synchronous access.
seriousstatic
next/redirect-outside-try
Call redirect(), notFound() and their kin outside try blocks; they work by throwing, and a catch swallows them.
seriousstatic
next/server-action-checks
Every Server Action checks who is calling and what they may change, validates its input and returns only what the UI needs.
seriousmanual
next/public-env-secret
Never give a secret the NEXT_PUBLIC_ prefix; those values are copied into the JavaScript every visitor downloads.
seriousstatic
next/use-next-image
In a Next.js app, render images with next/image instead of a plain img element (a picture element with its own sources is fine).
moderatestatic
next/image-fill-sizes
A next/image with fill (or sized by CSS) sets sizes, so the browser does not download a viewport-wide file for a small slot.
moderatestatic
next/use-next-font
Load web fonts with next/font (google or local), not a link or @import to the Google Fonts stylesheet.
moderatestatic

The rule digest

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

Pages and layouts stay Server Components; 'use client' goes on the small interactive leaf (next/use-client-at-leaves).
A Client Component is never async; await on the server or read a promise with use() (next/no-async-client-component).
await params and await searchParams; Next.js 16 removed synchronous access (next/async-params).
Call redirect() and notFound() after the try/catch, never inside it (next/redirect-outside-try).
Every Server Action authenticates, authorizes, validates input and returns only what the UI needs (next/server-action-checks).
Secrets never get the NEXT_PUBLIC_ prefix; server-only modules start with import 'server-only' (next/public-env-secret).
Images through next/image (next/use-next-image); with fill, always set sizes (next/image-fill-sizes).
Fonts through next/font, never a <link> to Google Fonts (next/use-next-font).
Titles and descriptions through metadata or generateMetadata; each route has a unique title.
Never fetch your own Route Handlers from a Server Component; call the data function directly.

Steps the agent follows

Find the router: app/ (App Router) or pages/ (Pages Router); these rules are for app/. Read next.config.* for cacheComponents, reactCompiler, images and basePath.
Fetch in async Server Components close to where data is used; start independent requests together (Promise.all) and wrap slow parts in <Suspense> or a loading.tsx.
With cacheComponents: true, cache with 'use cache' plus cacheLife/cacheTag; read cookies(), headers() and searchParams outside the cached scope. Without it, follow the previous model (fetch options, revalidate). Do not mix the two.
Mutate with Server Actions (<form action={action}>, useActionState), then revalidatePath, revalidateTag(tag, 'max') or updateTag, then redirect.
For the LCP image use loading="eager" or fetchPriority="high" (the priority prop is deprecated in 16); for third-party scripts use next/script with afterInteractive or lazyOnload.
Add error.tsx, not-found.tsx and global-error.tsx with a way back; set lang on <html> in the root layout.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports client pages, async client components, sync params, redirects in try, public secrets, <img>, fill without sizes and Google Fonts links.
Run ESLint with eslint-config-next/core-web-vitals (and /typescript); next lint is gone in 16. Run next build: it reports Cache Components errors.
Review every new 'use server' function by hand against next/server-action-checks.

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/nextjs.md1942 tokens

SKILL.md on GitHub