Styling

Tailwind CSS

Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.

fe-tailwindtailwind10 rules75 tokens always loaded, 1097 tokens when used, 1546 tokens in references on demand.

Install

init installs this skill when the project uses tailwind. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-tailwind lands for Claude Code

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

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.css"
---

# Tailwind CSS (frontend-skills)

Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for OpenAI Codex

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

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

---
description: Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.css
alwaysApply: false
---

# Tailwind CSS (frontend-skills)

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for GitHub Copilot

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

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.css"
description: "Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code."
---

# Tailwind CSS (frontend-skills)

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Gemini CLI

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

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

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro, **/*.css"
description: "Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code."
---

# Tailwind CSS (frontend-skills)

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Devin / Windsurf

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

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.css"
---

# Tailwind CSS (frontend-skills)

Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for OpenCode

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

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

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.css"
---

# Tailwind CSS (frontend-skills)

Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Zed

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

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

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

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css"]
---

# Tailwind CSS (frontend-skills)

Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code.

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Augment

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

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

---
description: "Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro,**/*.css
alwaysApply: false
---

# Tailwind CSS (frontend-skills)

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Continue

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

---
name: "Tailwind CSS"
description: "Writes and reviews Tailwind CSS 4 code - CSS-first setup with @import and @theme, complete class names, tokens instead of arbitrary values, conflict-free class lists, sr-only labels, focus and reduced-motion variants. Use when editing class lists in markup or JSX, the Tailwind CSS entry file, migrating from Tailwind 3, or asked to review Tailwind code."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.css"]
alwaysApply: false
---

# Tailwind CSS (frontend-skills)

- Write every class as a complete string; map states to full class names, never `bg-${color}-500` (tailwind/no-dynamic-class).
- One utility per property per variant: never `p-2 p-4` or `flex grid` on one element (tailwind/conflicting-utilities).
- A value used three times becomes an `@theme` variable with its own utility, not a repeated `[#0a7a3e]` (tailwind/theme-tokens).
- Hide text visually with `sr-only` (`md:not-sr-only` to show it later), never `hidden`, when it names a control (tailwind/sr-only-label).
- Pair every `hover:` reveal with `focus-within:` or `focus-visible:` (tailwind/hover-only-reveal).
- Never remove focus with `outline-none` or `outline-hidden` without a `focus-visible:` outline or ring (a11y/focus-visible).
- Wrap decorative animation in `motion-safe:` or stop it with `motion-reduce:animate-none` (tailwind/motion-safe).
- Tailwind 4: `@import "tailwindcss"`, theme in `@theme`, a JS config only through `@config` (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
- Reuse with components, loops and partials; `@apply` only for small cases and markup you do not own (tailwind/components-over-apply).
- Mobile first: unprefixed classes for small screens, `sm:` and up for wider ones.

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

The real file

Where fe-tailwind lands for Amazon Q Developer

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

The real file

Where fe-tailwind lands for Aider

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

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

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

Rules it teaches

tailwind/no-dynamic-class
Write every Tailwind class as a complete string; never build one from fragments such as bg-${color}-500.
moderatestatic
tailwind/conflicting-utilities
One element never carries two utilities that set the same property under the same variant (p-2 p-4, flex grid).
minorstatic
tailwind/theme-tokens
An arbitrary value used again and again (bg-[#0a7a3e], p-[18px]) becomes a theme variable in @theme with its own utility.
minorstatic
tailwind/sr-only-label
The only text of a button or link is never hidden with hidden; use sr-only (with md:not-sr-only to show it on wider screens).
seriousstaticWCAG 4.1.2
tailwind/hover-only-reveal
Content or controls revealed with hover: are also revealed on focus (focus-within:, group-focus-within:), never on hover alone.
moderatestaticWCAG 2.1.1
tailwind/motion-safe
Decorative Tailwind animations (animate-bounce, animate-ping, animate-pulse) run under motion-safe: or stop under motion-reduce:.
minorstatic
tailwind/v4-entry
In Tailwind CSS 4, load Tailwind with @import "tailwindcss" and a legacy JS config with @config; @tailwind directives do nothing.
moderatestatic
tailwind/no-preprocessor
Do not run Tailwind CSS 4 through Sass, Less or Stylus; use plain CSS with native nesting and variables.
moderatestatic
tailwind/components-over-apply
Remove repeated class lists with a component, a loop or a partial; keep @apply for small cases and third-party markup.
minormanual
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
seriousstaticWCAG 2.4.7

The rule digest

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

Write every class as a complete string; map states to full class names, never bg-${color}-500 (tailwind/no-dynamic-class).
One utility per property per variant: never p-2 p-4 or flex grid on one element (tailwind/conflicting-utilities).
A value used three times becomes an @theme variable with its own utility, not a repeated [#0a7a3e] (tailwind/theme-tokens).
Hide text visually with sr-only (md:not-sr-only to show it later), never hidden, when it names a control (tailwind/sr-only-label).
Pair every hover: reveal with focus-within: or focus-visible: (tailwind/hover-only-reveal).
Never remove focus with outline-none or outline-hidden without a focus-visible: outline or ring (a11y/focus-visible).
Wrap decorative animation in motion-safe: or stop it with motion-reduce:animate-none (tailwind/motion-safe).
Tailwind 4: @import "tailwindcss", theme in @theme, a JS config only through @config (tailwind/v4-entry); no Sass, Less or Stylus around it (tailwind/no-preprocessor).
Reuse with components, loops and partials; @apply only for small cases and markup you do not own (tailwind/components-over-apply).
Mobile first: unprefixed classes for small screens, sm: and up for wider ones.

Steps the agent follows

Check the version in the profile or package.json: this skill is for Tailwind 4 (latest 4.3.5, checked 2026-11-11). On Tailwind 3, keep its syntax and propose npx @tailwindcss/upgrade as a separate change.
Find the CSS entry (@import "tailwindcss") and its @theme block before adding colours, fonts, spacing or breakpoints; add tokens there, named by role (--color-brand-600, --spacing-gutter).
For variants of a component, keep a map of complete class strings per prop value, or a small helper such as cva; merge caller classes with tailwind-merge when the component accepts them.
Use bg-(--accent) with an inline style custom property for values that are really dynamic, and size-*, inset-*, gap-*, dvh and logical utilities (ms-*, pe-*) over older patterns.
In Vue, Svelte and Astro <style> blocks and CSS modules, start with @reference "../app.css"; before @apply, or use theme variables directly.
Plain CSS rules for sizes, colours and icons follow the fe-css-architecture skill and the project's helpers.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports built class names, conflicting utilities, repeated arbitrary values, hidden labels, hover-only reveals, unguarded animations and Tailwind 3 setup left in a Tailwind 4 project.
Build once (vite build or the framework's build) and search the output CSS for a class you added; a missing one means it was built from parts or its file is not scanned (@source).
Tab through the page and switch on "reduce motion" in the OS once per feature.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/tailwind.md1546 tokens

SKILL.md on GitHub