Styling

CSS architecture and tokens

Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".

fe-css-architectureevery web project11 rules92 tokens always loaded, 1053 tokens when used, 2297 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-architecture lands for Claude Code

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

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

# CSS architecture and tokens (frontend-skills)

Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for OpenAI Codex

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

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

---
description: Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".
globs: **/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# CSS architecture and tokens (frontend-skills)

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for GitHub Copilot

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

---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro"
description: "Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked \"clean up this CSS\", \"why does this style not apply\", \"use our tokens\"."
---

# CSS architecture and tokens (frontend-skills)

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Gemini CLI

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

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

---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro"
description: "Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked \"clean up this CSS\", \"why does this style not apply\", \"use our tokens\"."
---

# CSS architecture and tokens (frontend-skills)

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Devin / Windsurf

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

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

# CSS architecture and tokens (frontend-skills)

Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for OpenCode

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

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

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

# CSS architecture and tokens (frontend-skills)

Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Zed

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

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

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

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

# CSS architecture and tokens (frontend-skills)

Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked "clean up this CSS", "why does this style not apply", "use our tokens".

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Augment

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

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

---
description: "Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked \"clean up this CSS\", \"why does this style not apply\", \"use our tokens\"."
globs: **/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# CSS architecture and tokens (frontend-skills)

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Continue

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

---
name: "CSS architecture and tokens"
description: "Organises and reviews stylesheets (CSS, SCSS, Less, component styles) around the project's own tokens, helpers and icon set - cascade layers, specificity, rem sizing, unitless line-height, z-index scale, no magic numbers or hard-coded asset paths. Use when writing or refactoring CSS, adding a component's styles, or asked \"clean up this CSS\", \"why does this style not apply\", \"use our tokens\"."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# CSS architecture and tokens (frontend-skills)

- Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
- No hand-tuned offsets (`top: -7px`): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
- `z-index` comes from a named scale; inside a component use `isolation: isolate` and small values (css/z-index-scale).
- Sizes go through the project's px-to-rem function when it has one, `rem-calc(16px)` (css/rem-helper); otherwise font sizes are `rem` (css/rem-units).
- `line-height` is unitless, such as `1.5` (css/unitless-line-height).
- Order the cascade once with `@layer reset, base, components, utilities;`; `!important` only in utilities (css/no-important).
- Style classes, not ids; keep selectors to one or two classes and wrap resets in `:where()` (css/no-id-selectors).
- Icons come from the generated set (class, mixin or sprite), never a `url()` to an icon file (css/icon-from-set).
- Images and fonts by a relative path or alias the bundler resolves, never `/images/…` (css/asset-url).
- No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
- Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

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

The real file

Where fe-css-architecture lands for Amazon Q Developer

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

The real file

Where fe-css-architecture lands for Aider

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

clean up this CSS
why does this style not apply
use our tokens

And to check and fix the work:

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

Rules it teaches

css/design-tokens
Colours and spacing come from the project's tokens (custom properties or variables); a literal that has a token, or repeats, is a finding.
minorstatic
css/no-magic-numbers
Offsets and spacing use the project's spacing scale or come from layout; hand-tuned one-off values such as top -7px are a finding.
minorstatic
css/z-index-scale
z-index values come from a named scale (custom properties or Sass variables), not ad hoc numbers such as 999 or 9999.
minorstatic
css/rem-helper
Font sizes and spacing use the project's px-to-rem helper (its rem function), not raw px.
minorstatic
css/rem-units
Font sizes are written in rem (or em), never px, in projects without a rem helper; with one, css/rem-helper applies.
minorstatic
css/unitless-line-height
line-height is a unitless number (for example 1.5), never px, em or a percentage, so it scales with each element's font size.
minorstatic
css/no-important
!important appears only in utility classes, user-preference overrides and third-party overrides, never to win a specificity fight.
minorstatic
css/no-id-selectors
Style elements by class, not by id; an id selector outweighs any number of classes and makes the rule hard to override.
minorstatic
css/icon-from-set
With a generated icon set, CSS uses its icon classes or mixin, never a url() hard-coded to an icon file.
minorstatic
css/asset-url
In a bundled project, url() to images and fonts is a relative path or alias the bundler resolves, not a hard-coded root or public/ path.
minorstatic
css/no-stale-prefixes
No hand-written vendor prefixes for features browsers support unprefixed (border-radius, transitions, transforms, flexbox, gradients).
minorstatic

The rule digest

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

Take colours and spacing from the project's tokens; a literal used three times becomes a custom property (css/design-tokens).
No hand-tuned offsets (top: -7px): use a step of the spacing scale or derive it from layout (css/no-magic-numbers).
z-index comes from a named scale; inside a component use isolation: isolate and small values (css/z-index-scale).
Sizes go through the project's px-to-rem function when it has one, rem-calc(16px) (css/rem-helper); otherwise font sizes are rem (css/rem-units).
line-height is unitless, such as 1.5 (css/unitless-line-height).
Order the cascade once with @layer reset, base, components, utilities;; !important only in utilities (css/no-important).
Style classes, not ids; keep selectors to one or two classes and wrap resets in :where() (css/no-id-selectors).
Icons come from the generated set (class, mixin or sprite), never a url() to an icon file (css/icon-from-set).
Images and fonts by a relative path or alias the bundler resolves, never /images/… (css/asset-url).
No hand-written vendor prefixes; Autoprefixer adds what the browserslist needs (css/no-stale-prefixes).
Follow the naming convention the project already uses (BEM, CSS Modules, utilities); never mix two in one component.

Steps the agent follows

Find the project's conventions before writing a value: helpers in the profile (rem-function, icon-classes, icon-sprite, custom-properties, design-tokens), the tokens file (:root custom properties, _tokens.scss, Tailwind @theme), the layer order statement and the naming pattern of existing components.
Look every colour, space, radius, shadow and layer up in the tokens. A new value gets a token named by role (--color-text-muted, --space-3), not by hue or size.
Structure: layer order once at the top of the entry stylesheet; resets and base styles in :where(); a component is one class plus modifiers; utilities last.
Units: rem (or the project's helper) for type, space and breakpoints; em for spacing that follows the component's font; px only for borders, hairlines and shadows; unitless line-height.
Icons: add the SVG to the icon source folder and rebuild; use the generated class, mixin or component. Assets: keep them in src/assets and reference them relatively or by alias.
A finding you keep on purpose gets fs-ignore <rule id> and the reason on the same line.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports literals that have a token, values off the spacing scale, ad hoc z-index, px sizes beside the rem function, unit line heights, !important, id selectors, icon and asset paths, stale prefixes.
By hand: change one token (the brand colour, the base spacing) and see the whole interface follow; run the project's Stylelint when it has one.

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/architecture.md2297 tokens

SKILL.md on GitHub