Styling

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 rules75 tokens always loaded, 1016 tokens when used, 1926 tokens in references on demand.

Install

init installs this skill when the project uses sass. 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-sass lands for Claude Code

.claude/skills/fe-sass/SKILL.mdskill
.claude/skills/fe-sass/references/sass.mdskill
.claude/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for OpenAI Codex

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

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.cursor/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for GitHub Copilot

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.github/instructions/fe-sass.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-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>`.

The real file

Where fe-sass lands for Gemini CLI

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

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.agents/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for Devin / Windsurf

.agents/skills/fe-sass/SKILL.mdskill
.agents/skills/fe-sass/references/sass.mdskill
.devin/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for OpenCode

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

.claude/skills/fe-sass/SKILL.mdskill
.claude/skills/fe-sass/references/sass.mdskill
.clinerules/fe-sass.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-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>`.

The real file

Where fe-sass lands for Zed

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

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

.kiro/skills/fe-sass/SKILL.mdskill
.kiro/skills/fe-sass/references/sass.mdskill
.kiro/steering/fe-sass.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-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>`.

The real file

Where fe-sass lands for Augment

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

.trae/skills/fe-sass/SKILL.mdskill
.trae/skills/fe-sass/references/sass.mdskill
.trae/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for Continue

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.mdskill
.continue/rules/fe-sass.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-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>`.

The real file

Where fe-sass lands for Amazon Q Developer

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.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-sass` (Sass (SCSS)): when editing `**/*.scss`, `**/*.sass`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-sass/SKILL.md`.

The real file

Where fe-sass lands for Aider

.frontend-skills/skills/fe-sass/SKILL.mdskill
.frontend-skills/skills/fe-sass/references/sass.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-sass` (Sass (SCSS)): when editing `**/*.scss`, `**/*.sass`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-sass/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:

And to check and fix the work:

Use the fe-sass skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain sass/no-import and fix it here.

Rules it teaches

sass/no-import
Load Sass files with @use and @forward, not @import, which is deprecated and will be removed in Dart Sass 3.
moderatestatic
sass/no-global-builtins
Call Sass built-in functions through their module (map.get, math.div, string.index) after @use "sass:...", not as globals.
minorstatic
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.
minorstatic
sass/math-div
Divide with math.div() in Sass; a slash between Sass values is becoming a list separator, as it is in CSS.
minorstatic
sass/rem-helper
Sizes are converted with the project's px-to-rem function, never by dividing by a hard-coded base by hand.
minorstatic
css/rem-helper
Font sizes and spacing use the project's px-to-rem helper (its rem function), not raw px.
minorstatic
sass/no-extend-class
Extend only placeholder selectors (%name), or use a mixin; @extend of a real class copies selectors everywhere it appears.
minorstatic
sass/no-node-sass
Compile Sass with Dart Sass (the sass or sass-embedded package), never node-sass, which is deprecated LibSass.
moderatestatic
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.
minormanual

The rule digest

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

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.

Steps the agent follows

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.

How the agent checks the work

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.

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/sass.md1926 tokens

SKILL.md on GitHub