Frontend Skills
English

Frameworki

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

Instalacja

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

Agent
npx github:dawidolko/frontend-skills init

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)
AgentRozpoznawany po
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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-nextjs dla: Claude Code

  • .claude/skills/fe-nextjs/SKILL.mdskill
  • .claude/skills/fe-nextjs/references/nextjs.mdskill
  • .claude/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: OpenAI Codex

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

  • .agents/skills/fe-nextjs/SKILL.mdskill
  • .agents/skills/fe-nextjs/references/nextjs.mdskill
  • .cursor/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: GitHub Copilot

  • .agents/skills/fe-nextjs/SKILL.mdskill
  • .agents/skills/fe-nextjs/references/nextjs.mdskill
  • .github/instructions/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Gemini CLI

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

  • .agents/skills/fe-nextjs/SKILL.mdskill
  • .agents/skills/fe-nextjs/references/nextjs.mdskill
  • .agents/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Devin / Windsurf

  • .agents/skills/fe-nextjs/SKILL.mdskill
  • .agents/skills/fe-nextjs/references/nextjs.mdskill
  • .devin/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: OpenCode

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

  • .claude/skills/fe-nextjs/SKILL.mdskill
  • .claude/skills/fe-nextjs/references/nextjs.mdskill
  • .clinerules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Zed

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

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

  • .kiro/skills/fe-nextjs/SKILL.mdskill
  • .kiro/skills/fe-nextjs/references/nextjs.mdskill
  • .kiro/steering/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Augment

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

  • .trae/skills/fe-nextjs/SKILL.mdskill
  • .trae/skills/fe-nextjs/references/nextjs.mdskill
  • .trae/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Continue

  • .frontend-skills/skills/fe-nextjs/SKILL.mdskill
  • .frontend-skills/skills/fe-nextjs/references/nextjs.mdskill
  • .continue/rules/fe-nextjs.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-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>`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Amazon Q Developer

  • .frontend-skills/skills/fe-nextjs/SKILL.mdskill
  • .frontend-skills/skills/fe-nextjs/references/nextjs.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-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`.
Prawdziwy plik

Gdzie trafia fe-nextjs dla: Aider

  • .frontend-skills/skills/fe-nextjs/SKILL.mdskill
  • .frontend-skills/skills/fe-nextjs/references/nextjs.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-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`.
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-nextjs na tym pliku.
  • Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
  • Wyjaśnij next/use-client-at-leaves i popraw to tutaj.

Reguły, których uczy

  • next/use-client-at-leaves

    Keep App Router pages and layouts Server Components; put 'use client' on the small interactive component they render.

    umiarkowanastatyczne

  • 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().

    poważnastatyczne

  • next/async-params

    Await params and searchParams in App Router pages, layouts and generateMetadata; Next.js 16 removed synchronous access.

    poważnastatyczne

  • next/redirect-outside-try

    Call redirect(), notFound() and their kin outside try blocks; they work by throwing, and a catch swallows them.

    poważnastatyczne

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

    poważnaręczne

  • next/public-env-secret

    Never give a secret the NEXT_PUBLIC_ prefix; those values are copied into the JavaScript every visitor downloads.

    poważnastatyczne

  • 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).

    umiarkowanastatyczne

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

    umiarkowanastatyczne

  • next/use-next-font

    Load web fonts with next/font (google or local), not a link or @import to the Google Fonts stylesheet.

    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:

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

Kroki, które wykonuje agent

  1. Find the router: app/ (App Router) or pages/ (Pages Router); these rules are for app/. Read next.config.* for cacheComponents, reactCompiler, images and basePath.
  2. 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.
  3. 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.
  4. Mutate with Server Actions (<form action={action}>, useActionState), then revalidatePath, revalidateTag(tag, 'max') or updateTag, then redirect.
  5. 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.
  6. Add error.tsx, not-found.tsx and global-error.tsx with a way back; set lang on <html> in the root layout.

Jak agent sprawdza swoją pracę

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

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

SKILL.md na GitHubie