Styling

CSS layout

Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".

fe-css-layoutevery web project6 rules82 tokens always loaded, 879 tokens when used, 1666 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-layout lands for Claude Code

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

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

# CSS layout (frontend-skills)

Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for OpenAI Codex

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

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

---
description: Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".
globs: **/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# CSS layout (frontend-skills)

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for GitHub Copilot

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

---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro"
description: "Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked \"fix this layout\", \"this overflows\", \"center this\", \"make these line up\"."
---

# CSS layout (frontend-skills)

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Gemini CLI

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

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

---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.vue, **/*.svelte, **/*.astro"
description: "Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked \"fix this layout\", \"this overflows\", \"center this\", \"make these line up\"."
---

# CSS layout (frontend-skills)

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Devin / Windsurf

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

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

# CSS layout (frontend-skills)

Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for OpenCode

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

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

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

# CSS layout (frontend-skills)

Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Zed

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

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

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

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

# CSS layout (frontend-skills)

Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked "fix this layout", "this overflows", "center this", "make these line up".

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Augment

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

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

---
description: "Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked \"fix this layout\", \"this overflows\", \"center this\", \"make these line up\"."
globs: **/*.css,**/*.scss,**/*.less,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# CSS layout (frontend-skills)

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Continue

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

---
name: "CSS layout"
description: "Builds and reviews page and component layout in CSS with grid, flexbox, gap, container queries and logical properties, with no float columns, no fixed heights on text and no magic offsets. Use when laying out a page, a grid of cards, a sidebar, a toolbar or a form, or when asked \"fix this layout\", \"this overflows\", \"center this\", \"make these line up\"."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# CSS layout (frontend-skills)

- Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
- Space items with `gap` on the container, not margins on children with `:last-child` resets (css/gap-over-margins).
- Let content set heights: `min-height`, never a fixed `height` with `overflow: hidden` on text (css/no-fixed-height-text).
- Prefer intrinsic grids, `repeat(auto-fit, minmax(min(18rem, 100%), 1fr))`, over breakpoint steps.
- Components that live in slots of different widths respond with `@container`; use `container-type: inline-size` (css/container-type-size).
- Align with `align-items`, `justify-content` and `place-items`, not with nudged offsets or negative margins (css/no-magic-numbers).
- Line up nested parts across siblings (card titles, footers) with `subgrid`, not fixed heights.
- Use logical properties (`margin-inline`, `padding-block`, `inset-inline-start`) in new code, always in sites with right-to-left text (css/logical-properties).
- Never let a box be wider than its parent: `max-width: 100%`, `min-width: 0` on flex and grid children that hold long content.
- Keep source order equal to visual order; do not reorder with `order` or grid placement in a way that breaks reading and Tab order.

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

The real file

Where fe-css-layout lands for Amazon Q Developer

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

The real file

Where fe-css-layout lands for Aider

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

fix this layout
this overflows
center this
make these line up

And to check and fix the work:

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

Rules it teaches

css/no-float-layout
Page and component layout uses grid or flexbox; float is only for wrapping text around media, and clearfix hacks are gone.
minorstatic
css/no-fixed-height-text
Boxes that hold text do not combine a fixed height with hidden overflow; use min-height so enlarged or spaced text is not clipped.
seriousstaticWCAG 1.4.4, 1.4.12
css/container-type-size
Query containers use container-type inline-size; size is only for elements that get their height from elsewhere.
moderatestatic
css/gap-over-margins
Space the children of a flex or grid container with gap, not with margins on the children and last-child exceptions.
minormanual
css/logical-properties
Sites that run or may run right to left use logical properties (margin-inline-start, inset-inline-end), not left and right.
minormanual
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

The rule digest

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

Lay out with grid (two dimensions, card grids, page regions) or flexbox (one row or column); never float columns or clearfixes (css/no-float-layout).
Space items with gap on the container, not margins on children with :last-child resets (css/gap-over-margins).
Let content set heights: min-height, never a fixed height with overflow: hidden on text (css/no-fixed-height-text).
Prefer intrinsic grids, repeat(auto-fit, minmax(min(18rem, 100%), 1fr)), over breakpoint steps.
Components that live in slots of different widths respond with @container; use container-type: inline-size (css/container-type-size).
Align with align-items, justify-content and place-items, not with nudged offsets or negative margins (css/no-magic-numbers).
Line up nested parts across siblings (card titles, footers) with subgrid, not fixed heights.
Use logical properties (margin-inline, padding-block, inset-inline-start) in new code, always in sites with right-to-left text (css/logical-properties).
Never let a box be wider than its parent: max-width: 100%, min-width: 0 on flex and grid children that hold long content.
Keep source order equal to visual order; do not reorder with order or grid placement in a way that breaks reading and Tab order.

Steps the agent follows

Find the layout primitives the project already has (a Stack, Cluster, Grid component, layout utilities, a .container class) and use them before writing new CSS.
Decide the axis: content in one direction is flex, a grid with rows and columns is grid; nested parts that must align across cards are subgrid.
Write the narrow layout first, then widen it with @container for components or @media (width >= 48em) for page regions.
Spacing comes from tokens through gap and padding; outer spacing of a component is set by its parent, not by the component.
Test with long words, three times the text, an empty state and 320 CSS px of width.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports float columns and clearfixes, fixed heights on text, size containers without a height and offsets off the spacing scale.
By hand: resize from 320 px to a wide screen and zoom to 400%: nothing overlaps, nothing scrolls sideways except data tables and code; check the reading order with Tab.

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/layout.md1666 tokens

SKILL.md on GitHub