Styling

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-modernevery web project4 rules94 tokens always loaded, 839 tokens when used, 1810 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

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

Where fe-css-modern lands for Claude Code

.claude/skills/fe-css-modern/SKILL.mdskill
.claude/skills/fe-css-modern/references/modern-css.mdskill
.claude/rules/fe-css-modern.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-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>`.

The real file

Where fe-css-modern lands for OpenAI Codex

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for Cursor

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
.cursor/rules/fe-css-modern.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-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>`.

The real file

Where fe-css-modern lands for GitHub Copilot

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
.github/instructions/fe-css-modern.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-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>`.

The real file

Where fe-css-modern lands for Gemini CLI

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for Antigravity CLI

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
.agents/rules/fe-css-modern.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-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>`.

The real file

Where fe-css-modern lands for Devin / Windsurf

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
.devin/rules/fe-css-modern.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-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>`.

The real file

Where fe-css-modern lands for OpenCode

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for Cline

.claude/skills/fe-css-modern/SKILL.mdskill
.claude/skills/fe-css-modern/references/modern-css.mdskill
.clinerules/fe-css-modern.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-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>`.

The real file

Where fe-css-modern lands for Zed

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for JetBrains Junie

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for Kiro

.kiro/skills/fe-css-modern/SKILL.mdskill
.kiro/skills/fe-css-modern/references/modern-css.mdskill
.kiro/steering/fe-css-modern.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-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>`.

The real file

Where fe-css-modern lands for Augment

.agents/skills/fe-css-modern/SKILL.mdskill
.agents/skills/fe-css-modern/references/modern-css.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-css-modern lands for Trae

.trae/skills/fe-css-modern/SKILL.mdskill
.trae/skills/fe-css-modern/references/modern-css.mdskill
.trae/rules/fe-css-modern.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-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>`.

The real file

Where fe-css-modern lands for Continue

.frontend-skills/skills/fe-css-modern/SKILL.mdskill
.frontend-skills/skills/fe-css-modern/references/modern-css.mdskill
.continue/rules/fe-css-modern.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-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>`.

The real file

Where fe-css-modern lands for 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.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-css-modern` (Modern CSS features): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-css-modern/SKILL.md`.

The real file

Where fe-css-modern lands for Aider

.frontend-skills/skills/fe-css-modern/SKILL.mdskill
.frontend-skills/skills/fe-css-modern/references/modern-css.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-css-modern` (Modern CSS features): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-css-modern/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

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

And to check and fix the work:

Use the fe-css-modern skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain css/baseline-check and fix it here.

Rules it teaches

css/baseline-check
Before using a newer CSS feature, check its Baseline status against the project's browser targets and plan the fallback.
minormanual
css/nesting-no-concat
In native CSS nesting, never build class names from "&" plus a suffix (&__title); write the full selector.
seriousstatic
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.
moderatestatic
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.
moderatestatic

The rule digest

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

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.

Steps the agent follows

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.

How the agent checks the work

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.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/modern-css.md1810 tokens

SKILL.md on GitHub