Style

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 regułładowane zawsze: 75 tokenów; przy użyciu: 1097 tokenów; w referencjach na żądanie: 1546 tokenów.

Instalacja

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

npx github:dawidolko/frontend-skills init

Ten sposób nie był jeszcze testowany. npx i pnpm dlx są przetestowane; jeśli ten zawiedzie, użyj jednego z nich.

Bez --agents polecenie init rozpoznaje agentów po tym, co projekt już ma, a gdy nie znajdzie żadnego, pyta:

Po czym init rozpoznaje każdego z agentów (17)

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

Gdzie trafia fe-tailwind dla: Claude Code

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: OpenAI Codex

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

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: GitHub Copilot

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Gemini CLI

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

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Devin / Windsurf

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: OpenCode

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

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Zed

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

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

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Augment

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

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Continue

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Amazon Q Developer

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

Prawdziwy plik

Gdzie trafia fe-tailwind dla: Aider

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

A żeby sprawdzić i poprawić pracę:

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

Reguły, których uczy

tailwind/no-dynamic-class
Write every Tailwind class as a complete string; never build one from fragments such as bg-${color}-500.
umiarkowanastatyczne
tailwind/conflicting-utilities
One element never carries two utilities that set the same property under the same variant (p-2 p-4, flex grid).
drobnastatyczne
tailwind/theme-tokens
An arbitrary value used again and again (bg-[#0a7a3e], p-[18px]) becomes a theme variable in @theme with its own utility.
drobnastatyczne
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).
poważnastatyczneWCAG 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.
umiarkowanastatyczneWCAG 2.1.1
tailwind/motion-safe
Decorative Tailwind animations (animate-bounce, animate-ping, animate-pulse) run under motion-safe: or stop under motion-reduce:.
drobnastatyczne
tailwind/v4-entry
In Tailwind CSS 4, load Tailwind with @import "tailwindcss" and a legacy JS config with @config; @tailwind directives do nothing.
umiarkowanastatyczne
tailwind/no-preprocessor
Do not run Tailwind CSS 4 through Sass, Less or Stylus; use plain CSS with native nesting and variables.
umiarkowanastatyczne
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.
drobnaręczne
a11y/focus-visible
Never remove the focus outline without drawing a visible replacement for keyboard focus.
poważnastatyczneWCAG 2.4.7

Skrót reguł

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

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.

Kroki, które wykonuje agent

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.

Jak agent sprawdza swoją pracę

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.

Sprawdzane audytem

Testy statyczne tych reguł działają w audit; to prawdziwa sesja na przykładowym projekcie:

Nagranie terminala: audit wypisuje znaleziska według wagi z identyfikatorami reguł i miejscem plik:linia i kończy się błędem od progu serious. — `audit`: liczby według wagi, każda reguła z pierwszym miejscem, kod wyjścia.

Pliki referencyjne

references/tailwind.md1546 tokenów

SKILL.md na GitHubie