Style

Sass (SCSS)

Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.

fe-sasssass9 regułładowane zawsze: 75 tokenów; przy użyciu: 1016 tokenów; w referencjach na żądanie: 1926 tokenów.

Instalacja

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

npx github:dawidolko/frontend-skills init

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

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

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

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

Gdzie trafia fe-sass dla: Claude Code

.claude/skills/fe-sass/SKILL.mdskill
.claude/skills/fe-sass/references/sass.mdskill
.claude/rules/fe-sass.mdplik reguł
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.claude/rules/fe-sass.md

---
paths:
  - "**/*.scss"
  - "**/*.sass"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Sass (SCSS) (frontend-skills)

Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: OpenAI Codex

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenAI Codex nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Cursor

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.cursor/rules/fe-sass.mdcplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.cursor/rules/fe-sass.mdc

---
description: Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.
globs: **/*.scss, **/*.sass, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Sass (SCSS) (frontend-skills)

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: GitHub Copilot

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.github/instructions/fe-sass.instructions.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.github/instructions/fe-sass.instructions.md

---
applyTo: "**/*.scss,**/*.sass,**/*.vue,**/*.svelte,**/*.astro"
description: "Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass."
---

# Sass (SCSS) (frontend-skills)

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Gemini CLI

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
GEMINI.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Gemini CLI nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

GEMINI.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Antigravity CLI

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.agents/rules/fe-sass.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.agents/rules/fe-sass.md

---
trigger: glob
globs: "**/*.scss, **/*.sass, **/*.vue, **/*.svelte, **/*.astro"
description: "Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass."
---

# Sass (SCSS) (frontend-skills)

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Devin / Windsurf

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.devin/rules/fe-sass.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.devin/rules/fe-sass.md

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

# Sass (SCSS) (frontend-skills)

Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: OpenCode

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

OpenCode nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Cline

.claude/skills/fe-sass/SKILL.mdskill
.claude/skills/fe-sass/references/sass.mdskill
.clinerules/fe-sass.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.clinerules/fe-sass.md

---
paths:
  - "**/*.scss"
  - "**/*.sass"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Sass (SCSS) (frontend-skills)

Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Zed

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
CLAUDE.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zed nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

CLAUDE.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: JetBrains Junie

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

JetBrains Junie nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Kiro

.kiro/skills/fe-sass/SKILL.mdskill
.kiro/skills/fe-sass/references/sass.mdskill
.kiro/steering/fe-sass.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.kiro/steering/fe-sass.md

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

# Sass (SCSS) (frontend-skills)

Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass.

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Augment

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Augment nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

AGENTS.md

## Front-end work (frontend-skills)

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Trae

.trae/skills/fe-sass/SKILL.mdskill
.trae/skills/fe-sass/references/sass.mdskill
.trae/rules/fe-sass.mdplik reguł
AGENTS.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.trae/rules/fe-sass.md

---
description: "Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass."
globs: **/*.scss,**/*.sass,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Sass (SCSS) (frontend-skills)

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Continue

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.mdskill
.continue/rules/fe-sass.mdplik reguł

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.continue/rules/fe-sass.md

---
name: "Sass (SCSS)"
description: "Writes and reviews Sass (SCSS) for Dart Sass - the module system with @use and @forward, sass:math and sass:color, division, placeholders, the project's px-to-rem helper - and says when plain CSS now does the job. Use when editing .scss files or scss style blocks, removing @import or deprecation warnings, or asked to review Sass."
globs: ["**/*.scss", "**/*.sass", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Sass (SCSS) (frontend-skills)

- Load files with `@use` and re-export with `@forward`; never `@import` (sass/no-import).
- Call built-ins through their modules: `map.get`, `math.percentage`, `string.index` (sass/no-global-builtins).
- Change colours with `color.scale` or `color.adjust`, never `darken`, `lighten` or `fade-out` (sass/no-legacy-color-functions).
- Divide with `math.div()`; a bare `/` between Sass values is deprecated (sass/math-div).
- Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made `math.div(24px, 16px) * 1rem` (sass/rem-helper).
- `@extend` only `%placeholders`; otherwise use a mixin (sass/no-extend-class).
- Compile with Dart Sass (`sass` or `sass-embedded`), never `node-sass` (sass/no-node-sass).
- Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
- Keep nesting shallow (about three levels) and put declarations before nested rules.

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

Prawdziwy plik

Gdzie trafia fe-sass dla: Amazon Q Developer

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.mdskill
.amazonq/rules/frontend-skills.mdblok instrukcji

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

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

Amazon Q Developer nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

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

### Skills

- `fe-sass` (Sass (SCSS)): when editing `**/*.scss`, `**/*.sass`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-sass/SKILL.md`.

Prawdziwy plik

Gdzie trafia fe-sass dla: Aider

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.mdskill
CONVENTIONS.mdblok instrukcji
.aider.conf.ymlkonfiguracja

Dla każdego agenta także: .frontend-skills/profile.json, .frontend-skills/lessons.md i .frontend-skills/install.json.

Aider nie ma plików reguł zawężonych do typów plików; czyta skille i blok instrukcji.

Zaplanowane przez sam instalator dla przykładowego projektu React z repozytorium.

CONVENTIONS.md

## Front-end work (frontend-skills)

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

### Skills

- `fe-sass` (Sass (SCSS)): when editing `**/*.scss`, `**/*.sass`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-sass/SKILL.md`.

Prawdziwy plik

Jak go używać

Po instalacji agent sam ładuje skill, gdy zadanie pasuje do jego opisu. Możesz też poprosić o niego własnymi słowami, na przykład:

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

sass/no-import
Load Sass files with @use and @forward, not @import, which is deprecated and will be removed in Dart Sass 3.
umiarkowanastatyczne
sass/no-global-builtins
Call Sass built-in functions through their module (map.get, math.div, string.index) after @use "sass:...", not as globals.
drobnastatyczne
sass/no-legacy-color-functions
Adjust colours with color.scale or color.adjust (and read channels with color.channel), not darken, lighten, fade-out and the like.
drobnastatyczne
sass/math-div
Divide with math.div() in Sass; a slash between Sass values is becoming a list separator, as it is in CSS.
drobnastatyczne
sass/rem-helper
Sizes are converted with the project's px-to-rem function, never by dividing by a hard-coded base by hand.
drobnastatyczne
css/rem-helper
Font sizes and spacing use the project's px-to-rem helper (its rem function), not raw px.
drobnastatyczne
sass/no-extend-class
Extend only placeholder selectors (%name), or use a mixin; @extend of a real class copies selectors everywhere it appears.
drobnastatyczne
sass/no-node-sass
Compile Sass with Dart Sass (the sass or sass-embedded package), never node-sass, which is deprecated LibSass.
umiarkowanastatyczne
sass/custom-properties-for-themes
Values that change at run time (themes, dark mode, user settings) are CSS custom properties; Sass variables are for build-time constants.
drobnaręczne

Skrót reguł

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

Load files with @use and re-export with @forward; never @import (sass/no-import).
Call built-ins through their modules: map.get, math.percentage, string.index (sass/no-global-builtins).
Change colours with color.scale or color.adjust, never darken, lighten or fade-out (sass/no-legacy-color-functions).
Divide with math.div(); a bare / between Sass values is deprecated (sass/math-div).
Write sizes with the project's px-to-rem function, never raw px (css/rem-helper) or a hand-made math.div(24px, 16px) * 1rem (sass/rem-helper).
@extend only %placeholders; otherwise use a mixin (sass/no-extend-class).
Compile with Dart Sass (sass or sass-embedded), never node-sass (sass/no-node-sass).
Themeable values are CSS custom properties; Sass variables are build-time constants (sass/custom-properties-for-themes).
Keep nesting shallow (about three levels) and put declarations before nested rules.

Kroki, które wykonuje agent

Check the profile's helpers: with a rem-function, every size goes through it (rem-calc(24px)); with custom-properties or design-tokens, use those names instead of new variables.
Structure: partials per concern (_tokens.scss, _functions.scss, _mixins.scss), an _index.scss that @forwards them, and @use 'abstracts' at the top of each file. Use namespaces (tokens.$space-4); as * only for a small file you own.
Configure a library with @use 'lib' with ($primary: ...); give your own module's settings !default.
Migrate a code base with the official tool: npx sass-migrator module --migrate-deps src/main.scss, then npx sass-migrator division 'src/**/*.scss'. Run the build and fix the remaining deprecation warnings, one kind at a time.
Prefer plain CSS where it is now enough: native nesting, var(), color-mix(), clamp(), @layer and @container need no Sass. In a Tailwind 4 project, do not add Sass at all (tailwind/no-preprocessor).
Plain CSS concerns (line height, !important, z-index, tokens) follow the fe-css-architecture skill.

Jak agent sprawdza swoją pracę

npx github:dawidolko/frontend-skills audit --changed reports @import, global built-ins, deprecated colour functions, slash division, sizes that bypass the rem helper, @extend of classes and node-sass.
Build once and read the warnings: Dart Sass names each deprecation (import, global-builtin, slash-div, color-functions); --fatal-deprecation=<name> in CI keeps a fixed one fixed.
Lint with stylelint-scss where the project uses Stylelint.

Sprawdzane audytem

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

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

Pliki referencyjne

references/sass.md1926 tokenów

SKILL.md na GitHubie