Style

Modern CSS features

Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".

fe-css-modernkażdego projektu webowego4 regułyładowane zawsze: 94 tokeny; przy użyciu: 839 tokenów; w referencjach na żądanie: 1810 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. 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-css-modern dla: Claude Code

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

---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Modern CSS features (frontend-skills)

Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: OpenAI Codex

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

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

---
description: Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".
globs: **/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Modern CSS features (frontend-skills)

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: GitHub Copilot

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

---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro"
description: "Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked \"can I use this CSS feature\", \"do we still need Sass for this\"."
---

# Modern CSS features (frontend-skills)

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Gemini CLI

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

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

---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro"
description: "Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked \"can I use this CSS feature\", \"do we still need Sass for this\"."
---

# Modern CSS features (frontend-skills)

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Devin / Windsurf

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

---
trigger: glob
globs: "**/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro"
---

# Modern CSS features (frontend-skills)

Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: OpenCode

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

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

---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Modern CSS features (frontend-skills)

Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Zed

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

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

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.css", "**/*.scss", "**/*.less", "**/*.vue", "**/*.svelte", "**/*.astro"]
---

# Modern CSS features (frontend-skills)

Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked "can I use this CSS feature", "do we still need Sass for this".

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Augment

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

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

---
description: "Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked \"can I use this CSS feature\", \"do we still need Sass for this\"."
globs: **/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Modern CSS features (frontend-skills)

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Continue

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

---
name: "Modern CSS features"
description: "Uses current CSS features where they replace JavaScript or preprocessor work - native nesting, :has(), @scope, color-mix() and oklch, light-dark(), @starting-style, @property, text-wrap, anchor positioning - each with its Baseline status and a fallback. Use when modernising a stylesheet, replacing a JS-driven style, or asked \"can I use this CSS feature\", \"do we still need Sass for this\"."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Modern CSS features (frontend-skills)

- Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
- Native nesting never joins `&` to a suffix (`&__title`); write the full selector or `&.modifier` (css/nesting-no-concat).
- With `light-dark()`, declare `color-scheme: light dark` on `:root` (css/light-dark-color-scheme).
- Anchor positioning and scroll-driven animations go in `@supports` with a working fallback (css/limited-needs-supports).
- Use `:has()` for parent and sibling state (`.field:has(:user-invalid)`) instead of classes toggled by JavaScript.
- Build palettes in `oklch()` and derive states with `color-mix(in oklch, …)`; still check contrast of every text pair.
- Animate entry and `display` changes with `@starting-style` and `transition-behavior: allow-discrete`, not timeouts.
- Register a custom property with `@property` when it must animate or needs a type.
- `text-wrap: balance` for headings, `pretty` for body text: both fail safe.
- Use `@scope` only as enhancement until it is Widely available; keep the class naming that works without it.

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

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Amazon Q Developer

.frontend-skills/skills/fe-css-modern/SKILL.mdskill
.frontend-skills/skills/fe-css-modern/references/modern-css.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-css-modern` (Modern CSS features): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-css-modern/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-css-modern dla: Aider

.frontend-skills/skills/fe-css-modern/SKILL.mdskill
.frontend-skills/skills/fe-css-modern/references/modern-css.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-css-modern` (Modern CSS features): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-css-modern/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:

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

can I use this CSS feature
do we still need Sass for this

A żeby sprawdzić i poprawić pracę:

Użyj skilla fe-css-modern na tym pliku.
Uruchom audyt front-endu na moich zmianach i popraw wszystko, co poważne.
Wyjaśnij css/baseline-check i popraw to tutaj.

Reguły, których uczy

css/baseline-check
Before using a newer CSS feature, check its Baseline status against the project's browser targets and plan the fallback.
drobnaręczne
css/nesting-no-concat
In native CSS nesting, never build class names from "&" plus a suffix (&__title); write the full selector.
poważnastatyczne
css/light-dark-color-scheme
A project that uses light-dark() declares color-scheme (light dark) on :root or in a meta tag, or the dark values never apply.
umiarkowanastatyczne
css/limited-needs-supports
CSS that is not Baseline yet (anchor positioning) or only just became Baseline (scroll-driven animations) sits in @supports with a fallback.
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:

Check a feature's Baseline status against the project's browser targets before relying on it (css/baseline-check).
Native nesting never joins & to a suffix (&__title); write the full selector or &.modifier (css/nesting-no-concat).
With light-dark(), declare color-scheme: light dark on :root (css/light-dark-color-scheme).
Anchor positioning and scroll-driven animations go in @supports with a working fallback (css/limited-needs-supports).
Use :has() for parent and sibling state (.field:has(:user-invalid)) instead of classes toggled by JavaScript.
Build palettes in oklch() and derive states with color-mix(in oklch, …); still check contrast of every text pair.
Animate entry and display changes with @starting-style and transition-behavior: allow-discrete, not timeouts.
Register a custom property with @property when it must animate or needs a type.
text-wrap: balance for headings, pretty for body text: both fail safe.
Use @scope only as enhancement until it is Widely available; keep the class naming that works without it.

Kroki, które wykonuje agent

Read the project's browser targets (browserslist in package.json or .browserslistrc, or the framework default) before choosing a feature.
Look the feature up in the table in the reference (date-stamped) or on the web-features explorer; Widely available features need no fallback.
For a Newly available feature, make sure the page still works without it; for a feature that is not Baseline, write the fallback first and the feature inside @supports.
Replace JavaScript that only toggles a style (parent highlight, open state, theme) with :has(), :user-invalid, [open], light-dark().
In a Sass project, keep Sass for loops and maps; native nesting, custom properties and color-mix() now cover what Sass was often used for.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed reports joined nesting suffixes, light-dark() without a colour scheme and anchor or scroll-timeline CSS outside @supports.
By hand: open the page in the oldest browser of the project's targets (or disable the feature in DevTools) and confirm the fallback works.

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/modern-css.md1810 tokenów

SKILL.md na GitHubie