CSS architecture and tokens

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 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`.

## 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`.