Frontend Skills
Polski

Foundations

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-responsiveevery web project9 rules93 tokens always loaded, 1080 tokens when used, 1971 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.

Agent
npx github:dawidolko/frontend-skills init

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
AgentFound by
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

Where fe-responsive lands for Claude Code

  • .claude/skills/fe-responsive/SKILL.mdskill
  • .claude/skills/fe-responsive/references/responsive.mdskill
  • .claude/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for OpenAI Codex

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

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .cursor/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for GitHub Copilot

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .github/instructions/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Gemini CLI

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

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .agents/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Devin / Windsurf

  • .agents/skills/fe-responsive/SKILL.mdskill
  • .agents/skills/fe-responsive/references/responsive.mdskill
  • .devin/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for OpenCode

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

  • .claude/skills/fe-responsive/SKILL.mdskill
  • .claude/skills/fe-responsive/references/responsive.mdskill
  • .clinerules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Zed

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

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

  • .kiro/skills/fe-responsive/SKILL.mdskill
  • .kiro/skills/fe-responsive/references/responsive.mdskill
  • .kiro/steering/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Augment

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

  • .trae/skills/fe-responsive/SKILL.mdskill
  • .trae/skills/fe-responsive/references/responsive.mdskill
  • .trae/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Continue

  • .frontend-skills/skills/fe-responsive/SKILL.mdskill
  • .frontend-skills/skills/fe-responsive/references/responsive.mdskill
  • .continue/rules/fe-responsive.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-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>`.
The real file

Where fe-responsive lands for Amazon Q Developer

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

Where fe-responsive lands for Aider

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

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

And to check and fix the work:

  • Use the fe-responsive skill on this file.
  • Run the front-end audit on what I changed and fix everything serious.
  • Explain responsive/viewport-meta and fix it here.

Rules it teaches

  • responsive/viewport-meta

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

    seriousstatic

  • a11y/zoom-not-blocked

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

    criticalstaticWCAG 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.

    minorstatic

  • 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).

    seriousstaticWCAG 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.

    seriousstaticWCAG 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.

    seriousstaticWCAG 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.

    seriousmanualWCAG 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.

    seriousmanualWCAG 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.

    minorstatic

The rule digest

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

  • 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).

Steps the agent follows

  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.

How the agent checks the work

  • 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.

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

SKILL.md on GitHub