Frameworki

Astro sites and islands

Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.

fe-astroastro7 regułładowane zawsze: 73 tokeny; przy użyciu: 920 tokenów; w referencjach na żądanie: 1501 tokenów.

Instalacja

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

npx github:dawidolko/frontend-skills init

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

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

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

Agent	Rozpoznawany po
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Gdzie trafia fe-astro dla: Claude Code

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

---
paths:
  - "**/*.astro"
  - "astro.config.*"
  - "src/content.config.*"
  - "src/pages/**"
  - "src/layouts/**"
  - "src/components/**"
---

# Astro sites and islands (frontend-skills)

Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: OpenAI Codex

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

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

---
description: Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.
globs: **/*.astro, astro.config.*, src/content.config.*, src/pages/**, src/layouts/**, src/components/**
alwaysApply: false
---

# Astro sites and islands (frontend-skills)

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: GitHub Copilot

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

---
applyTo: "**/*.astro,astro.config.*,src/content.config.*,src/pages/**,src/layouts/**,src/components/**"
description: "Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code."
---

# Astro sites and islands (frontend-skills)

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.astro, astro.config.*, src/content.config.*, src/pages/**, src/layouts/**, src/components/**"
description: "Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code."
---

# Astro sites and islands (frontend-skills)

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Devin / Windsurf

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

---
trigger: glob
globs: "**/*.astro,astro.config.*,src/content.config.*,src/pages/**,src/layouts/**,src/components/**"
---

# Astro sites and islands (frontend-skills)

Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: OpenCode

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

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

---
paths:
  - "**/*.astro"
  - "astro.config.*"
  - "src/content.config.*"
  - "src/pages/**"
  - "src/layouts/**"
  - "src/components/**"
---

# Astro sites and islands (frontend-skills)

Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Zed

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

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

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.astro", "astro.config.*", "src/content.config.*", "src/pages/**", "src/layouts/**", "src/components/**"]
---

# Astro sites and islands (frontend-skills)

Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code.

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Augment

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

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

---
description: "Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code."
globs: **/*.astro,astro.config.*,src/content.config.*,src/pages/**,src/layouts/**,src/components/**
alwaysApply: false
---

# Astro sites and islands (frontend-skills)

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Continue

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

---
name: "Astro sites and islands"
description: "Writes and reviews Astro 7 sites - islands and client directives, server islands, processed scripts, astro:assets images, content collections and environment variables - so pages ship little JavaScript and stay safe. Use when editing .astro files or astro.config, adding a React, Vue or Svelte island, upgrading from Astro 6, or asked to review Astro code."
globs: ["**/*.astro", "astro.config.*", "src/content.config.*", "src/pages/**", "src/layouts/**", "src/components/**"]
alwaysApply: false
---

# Astro sites and islands (frontend-skills)

- Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
- `client:only` names its framework and has a `slot="fallback"` (astro/client-only-framework).
- `client:*` goes only on framework components imported into the `.astro` file, never on Astro components (astro/directive-on-framework-component).
- A `server:defer` island has `slot="fallback"` content and gets small serializable props (astro/server-defer-fallback).
- `<script>` tags carry no attribute but `src` so Astro bundles them; `is:inline` only on purpose; data via `data-*`, not `define:vars` (astro/script-processed).
- Secrets never get the `PUBLIC_` prefix; declare them in `astro:env` as server secrets (astro/public-env-secret).
- Local images live in `src/` and render with `<Image>` or `<Picture>`; never hard-code `/images/...` paths (js/asset-import).
- `set:html` only with trusted or sanitized HTML; it is not escaped.
- Every page has a unique `<title>`; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

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

Prawdziwy plik

Gdzie trafia fe-astro dla: Amazon Q Developer

.frontend-skills/skills/fe-astro/SKILL.mdskill
.frontend-skills/skills/fe-astro/references/astro.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-astro` (Astro sites and islands): when editing `**/*.astro`, `astro.config.*`, `src/content.config.*`, `src/pages/**`, `src/layouts/**`, `src/components/**`, first read `.frontend-skills/skills/fe-astro/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-astro dla: Aider

.frontend-skills/skills/fe-astro/SKILL.mdskill
.frontend-skills/skills/fe-astro/references/astro.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-astro` (Astro sites and islands): when editing `**/*.astro`, `astro.config.*`, `src/content.config.*`, `src/pages/**`, `src/layouts/**`, `src/components/**`, first read `.frontend-skills/skills/fe-astro/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-astro na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij astro/static-by-default i popraw to tutaj.

Reguły, których uczy

astro/static-by-default
Render framework components without a client directive unless they need interactivity, and pick the latest directive that works.
umiarkowanaręczne
astro/client-only-framework
Give client:only the framework of the component (client:only="react"), and a fallback slot for the space it fills.
umiarkowanastatyczne
astro/directive-on-framework-component
Put client:* directives only on UI framework components imported into the .astro file, never on Astro components.
umiarkowanastatyczne
astro/server-defer-fallback
A server island (server:defer) has slot="fallback" content of the same size, and receives only small serializable props.
umiarkowanastatyczne
astro/script-processed
Astro script tags carry no attribute but src so they are bundled; is:inline only on purpose, data-* instead of define:vars.
umiarkowanastatyczne
astro/public-env-secret
Never give a secret the PUBLIC_ prefix; in Astro those variables are built into client code. Declare secrets in astro:env as server secrets.
poważnastatyczne
js/asset-import
In a bundled project, images, fonts and media in component markup are imported or use the base-path helper, not hard-coded root paths.
umiarkowanastatyczne

Skrót reguł

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

Framework components render without a directive unless they need interactivity; then use the latest directive that works (astro/static-by-default).
client:only names its framework and has a slot="fallback" (astro/client-only-framework).
client:* goes only on framework components imported into the .astro file, never on Astro components (astro/directive-on-framework-component).
A server:defer island has slot="fallback" content and gets small serializable props (astro/server-defer-fallback).
<script> tags carry no attribute but src so Astro bundles them; is:inline only on purpose; data via data-*, not define:vars (astro/script-processed).
Secrets never get the PUBLIC_ prefix; declare them in astro:env as server secrets (astro/public-env-secret).
Local images live in src/ and render with <Image> or <Picture>; never hard-code /images/... paths (js/asset-import).
set:html only with trusted or sanitized HTML; it is not escaped.
Every page has a unique <title>; close every tag and keep valid nesting (Astro 7 errors or no longer repairs it).

Kroki, które wykonuje agent

Read astro.config.*: integrations (@astrojs/react, vue, svelte), the adapter (needed for server:defer and prerender = false), site, base, image, env.schema.
Keep pages prerendered; opt one route out with export const prerender = false, and personalise parts with server islands instead of making the whole page dynamic.
Use content collections (src/content.config.ts with a loader and a schema) for Markdown and data, and getCollection() to read them.
Pass the above-the-fold image priority on <Image>; give public/ images explicit width and height.
Style with scoped <style> in the component; use is:global or :global() only where needed, and class:list for conditional classes.
For small behaviour without a framework, define a custom element in a processed <script>; it runs once per page and works for every instance.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed reports client:only without a framework, directives on Astro components, server islands without fallback, unprocessed scripts, public secrets and hard-coded asset paths.
astro check (with @astrojs/check) type-checks .astro files; astro build fails on unclosed tags in Astro 7.
Use the dev toolbar's Audit app as a first pass, then a browser audit (audit --url).

Sprawdzane audytem

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

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

Pliki referencyjne

references/astro.md1501 tokenów

SKILL.md na GitHubie