Style

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-layoutkażdego projektu webowego6 regułładowane zawsze: 82 tokeny; przy użyciu: 879 tokenów; w referencjach na żądanie: 1666 tokenów.

Instalacja

init instaluje ten skill, gdy projekt używa: każdego projektu webowego. 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-css-layout dla: Claude Code

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: OpenAI Codex

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

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: GitHub Copilot

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Gemini CLI

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

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Devin / Windsurf

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: OpenCode

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

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Zed

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

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

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Augment

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

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Continue

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Amazon Q Developer

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

Prawdziwy plik

Gdzie trafia fe-css-layout dla: Aider

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

Frazy z opisu skilla, po których agent go wybiera (po angielsku, jak w skillu):

fix this layout
this overflows
center this
make these line up

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

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.
drobnastatyczne
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.
poważnastatyczneWCAG 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.
umiarkowanastatyczne
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.
drobnaręczne
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.
drobnaręczne
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.
drobnastatyczne

Skrót reguł

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

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.

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

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/layout.md1666 tokenów

SKILL.md na GitHubie