Frontend Skills
English

Podstawy

Responsive design

Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".

fe-responsivekażdego projektu webowego9 regułładowane zawsze: 93 tokeny; przy użyciu: 1080 tokenów; w referencjach na żądanie: 1971 tokenów.

Instalacja

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

Agent
npx github:dawidolko/frontend-skills init

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)
AgentRozpoznawany po
Claude CodeCLAUDE.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 CLIGEMINI.md .gemini
Antigravity CLI.agents/rules .agent/rules
Devin / Windsurf.devin .windsurf .windsurfrules
OpenCodeopencode.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-responsive dla: Claude Code

  • .claude/skills/fe-responsive/SKILL.mdskill
  • .claude/skills/fe-responsive/references/responsive.mdskill
  • .claude/rules/fe-responsive.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-responsive.md
---
paths:
  - "**/*.html"
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Responsive design (frontend-skills)

Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: OpenAI Codex

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

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .cursor/rules/fe-responsive.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-responsive.mdc
---
description: Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".
globs: **/*.html, **/*.css, **/*.scss, **/*.less, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Responsive design (frontend-skills)

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: GitHub Copilot

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .github/instructions/fe-responsive.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-responsive.instructions.md
---
applyTo: "**/*.html,**/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked \"make this responsive\", \"it breaks on mobile\", \"it scrolls sideways\"."
---

# Responsive design (frontend-skills)

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Gemini CLI

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

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .agents/rules/fe-responsive.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-responsive.md
---
trigger: glob
globs: "**/*.html, **/*.css, **/*.scss, **/*.less, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked \"make this responsive\", \"it breaks on mobile\", \"it scrolls sideways\"."
---

# Responsive design (frontend-skills)

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Devin / Windsurf

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .devin/rules/fe-responsive.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-responsive.md
---
trigger: glob
globs: "**/*.html,**/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
---

# Responsive design (frontend-skills)

Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: OpenCode

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

  • .claude/skills/fe-responsive/SKILL.mdskill
  • .claude/skills/fe-responsive/references/responsive.mdskill
  • .clinerules/fe-responsive.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-responsive.md
---
paths:
  - "**/*.html"
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Responsive design (frontend-skills)

Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Zed

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

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

  • .kiro/skills/fe-responsive/SKILL.mdskill
  • .kiro/skills/fe-responsive/references/responsive.mdskill
  • .kiro/steering/fe-responsive.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-responsive.md
---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.css", "**/*.scss", "**/*.less", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
---

# Responsive design (frontend-skills)

Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked "make this responsive", "it breaks on mobile", "it scrolls sideways".

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Augment

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

  • .trae/skills/fe-responsive/SKILL.mdskill
  • .trae/skills/fe-responsive/references/responsive.mdskill
  • .trae/rules/fe-responsive.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-responsive.md
---
description: "Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked \"make this responsive\", \"it breaks on mobile\", \"it scrolls sideways\"."
globs: **/*.html,**/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Responsive design (frontend-skills)

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Continue

  • .frontend-skills/skills/fe-responsive/SKILL.mdskill
  • .frontend-skills/skills/fe-responsive/references/responsive.mdskill
  • .continue/rules/fe-responsive.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-responsive.md
---
name: "Responsive design"
description: "Makes pages and components work from 320 CSS px phones to wide screens and at 400% zoom - viewport meta, fluid type and space, content breakpoints and container queries, no fixed wide boxes, dvh units, touch targets, no hover-only content, orientation and print. Use when building or fixing a layout for mobile, or asked \"make this responsive\", \"it breaks on mobile\", \"it scrolls sideways\"."
globs: ["**/*.html", "**/*.css", "**/*.scss", "**/*.less", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Responsive design (frontend-skills)

- Every document has `<meta name="viewport" content="width=device-width, initial-scale=1">` (responsive/viewport-meta).
- Never block zoom: no `user-scalable=no`, no `maximum-scale` below 2 (a11y/zoom-not-blocked).
- Write the narrow layout first and widen it with `min-width` queries placed where the content breaks, in `em`, not device widths.
- Components react to their slot with `@container`; media queries are for page regions.
- No box wider than 320 CSS px without a cap: `max-width` or `min(100%, …)` (responsive/no-fixed-wide-width).
- Fluid type mixes `rem` into the formula, `clamp(1rem, 0.9rem + 1vw, 1.5rem)`, never viewport units alone (responsive/no-viewport-font-size).
- Font sizes in `rem` (the project's helper when it has one) (css/rem-units).
- Full-height sections use `min-height: 100svh` or `100dvh`, not `100vh` (responsive/dynamic-viewport-units).
- Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
- Nothing is revealed on hover alone: show it on `:focus-within` and make it reachable on touch (responsive/no-hover-only).
- The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

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

Gdzie trafia fe-responsive dla: Amazon Q Developer

  • .frontend-skills/skills/fe-responsive/SKILL.mdskill
  • .frontend-skills/skills/fe-responsive/references/responsive.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-responsive` (Responsive design): when editing `**/*.html`, `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-responsive/SKILL.md`.
Prawdziwy plik

Gdzie trafia fe-responsive dla: Aider

  • .frontend-skills/skills/fe-responsive/SKILL.mdskill
  • .frontend-skills/skills/fe-responsive/references/responsive.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-responsive` (Responsive design): when editing `**/*.html`, `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-responsive/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):

  • make this responsive
  • it breaks on mobile
  • it scrolls sideways

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

  • responsive/viewport-meta

    Every HTML document has <meta name="viewport" content="width=device-width, initial-scale=1">.

    poważnastatyczne

  • a11y/zoom-not-blocked

    The viewport never disables zoom (no user-scalable=no, no maximum-scale below 2).

    krytycznastatyczneWCAG 1.4.4

  • responsive/dynamic-viewport-units

    A full-height layout uses 100dvh (or svh) instead of 100vh, which is taller than the visible area on mobile.

    drobnastatyczne

  • responsive/no-viewport-font-size

    Text is never sized with viewport units alone (font-size 5vw); fluid type mixes in rem, as in clamp(1rem, 0.9rem + 1vw, 1.5rem).

    poważnastatyczneWCAG 1.4.4

  • responsive/no-fixed-wide-width

    No layout box gets a fixed width wider than 320 CSS px; cap it with max-width or min(100%, …) so the page reflows on narrow screens.

    poważnastatyczneWCAG 1.4.10

  • responsive/no-hover-only

    Nothing is revealed on hover alone; content and controls shown on hover also show on keyboard focus and are reachable on touch.

    poważnastatyczneWCAG 2.1.1

  • responsive/reflow

    The page reads without sideways scrolling at 320 CSS px and 400% zoom; only tables, maps and similar may scroll both ways.

    poważnaręczneWCAG 1.4.10

  • responsive/orientation

    The page works in portrait and landscape; it never locks the orientation or asks people to rotate unless one orientation is essential.

    poważnaręczneWCAG 1.3.4

  • css/rem-units

    Font sizes are written in rem (or em), never px, in projects without a rem helper; with one, css/rem-helper applies.

    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:

  • Every document has <meta name="viewport" content="width=device-width, initial-scale=1"> (responsive/viewport-meta).
  • Never block zoom: no user-scalable=no, no maximum-scale below 2 (a11y/zoom-not-blocked).
  • Write the narrow layout first and widen it with min-width queries placed where the content breaks, in em, not device widths.
  • Components react to their slot with @container; media queries are for page regions.
  • No box wider than 320 CSS px without a cap: max-width or min(100%, …) (responsive/no-fixed-wide-width).
  • Fluid type mixes rem into the formula, clamp(1rem, 0.9rem + 1vw, 1.5rem), never viewport units alone (responsive/no-viewport-font-size).
  • Font sizes in rem (the project's helper when it has one) (css/rem-units).
  • Full-height sections use min-height: 100svh or 100dvh, not 100vh (responsive/dynamic-viewport-units).
  • Pointer targets are at least 24×24 CSS px, primary touch controls about 44×44.
  • Nothing is revealed on hover alone: show it on :focus-within and make it reachable on touch (responsive/no-hover-only).
  • The page reads at 320 CSS px and 400% zoom without sideways scrolling, in both orientations (responsive/reflow, responsive/orientation).

Kroki, które wykonuje agent

  1. Fix the document shell once (root layout, index.html, app.html): viewport meta, no zoom block. Frameworks such as Next.js add a viewport tag; check the rendered HTML.
  2. Set base styles for the narrowest screen; add @media (width >= 48em) steps only where the content needs them, and @container for components.
  3. Make media fluid: img, video, iframe { max-width: 100%; height: auto; }, aspect-ratio for embeds, wide tables in a scrolling wrapper.
  4. Size type and space with rem and clamp(); give long strings overflow-wrap: anywhere.
  5. Give touch targets padding rather than larger icons; enlarge under (any-pointer: coarse), never shrink under fine.
  6. Add @media print for content people print: hide navigation, show link URLs where useful.

Jak agent sprawdza swoją pracę

  • npx github:dawidolko/frontend-skills audit --changed reports a missing or wrong viewport, blocked zoom, 100vh, viewport-only font sizes, fixed wide boxes and hover-only content.
  • audit --url <page> adds Lighthouse and axe results (meta-viewport, target-size).
  • By hand: DevTools device mode at 320×640 and 640×320, browser zoom 200% and 400%, Tab through every control, try the menu on a touch device.

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

SKILL.md na GitHubie