tailwind-css · paulrberg — скилл для Claude Code: что делает и как установить
Задаёт правила стилизации Tailwind CSS: запрещает ломать вёрстку старых версий синтаксисом v4, требует проверку сборки и инспекцию DOM.
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-codeЧто делает tailwind-css
Скилл подчиняет агента существующему проекту. Приоритет остаётся за установленной версией Tailwind, токенами, компонентами и точкой входа CSS. Агенту прямо запрещено ставить новые пакеты, менять интеграцию или обновлять фреймворк без отдельного запроса.
Для проектов на Tailwind v4 подключаются правила новой версии. При этом скилл запрещает переносить синтаксис v4 в старые репозитории. Правила для tailwind-variants, tw-animate-css и ESLint учитываются, только если эти зависимости уже есть в коде. Классы обязаны оставаться статически доступными для сканера Tailwind.
Обычной текстовой проверки классов в разметке недостаточно. При изменении маппингов агент обязан запустить сборку и проверить итоговый DOM во вьюпорте. В конце работы он формирует отчёт со статусом ### 🎨 Tailwind — ✅ styling updated и таблицей проверенных состояний.
Какие задачи решает
- обновить стили компонентов без поломки адаптивности и тёмной темы
- перевести конфигурацию и директивы проекта на Tailwind v4
- настроить варианты стилей через tailwind-variants
- проверить скомпилированный DOM и сборку вместо текстовой сверки классов
Примеры запросов агенту
- Обнови стили карточки товара в каталоге, сохранив поддержку тёмной темы.
- Переведи директивы в CSS на Tailwind v4 и проверь сборку.
- Сделай варианты кнопок с помощью tailwind-variants и проверь рендер во вьюпорте.
Как установить tailwind-css
1Через Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-code2Вручную: положить файлы
~/.claude/skills/tailwind-css/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/tailwind-css/
1Через Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a codex2Вручную: положить файлы
.agents/skills/tailwind-css/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a cursor2Вручную: положить файлы
.cursor/skills/tailwind-css/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install PaulRBerg/agent-skills tailwind-css2Вручную: положить файлы
.github/skills/tailwind-css/SKILL.md1Через Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a gemini-cli2Командой платформы
gemini skills install https://github.com/PaulRBerg/agent-skills --path skills/tailwind-cssВручную: положить файлы
.devin/skills/tailwind-css/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add PaulRBerg/agent-skills --skill tailwind-css -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о tailwind-css
Как установить tailwind-css в Claude Code?
Выполните команду npx skills add PaulRBerg/agent-skills --skill tailwind-css -a claude-code. Утилита загрузит скилл в конфигурацию агента.
Что делает скилл tailwind-css?
Он направляет ИИ-агента при вёрстке и миграциях: защищает старые проекты от синтаксиса Tailwind v4, сохраняет дизайн-токены и требует проверять итоговый DOM через реальную сборку.
Можно ли запустить tailwind-css вручную через слэш-команду?
Нет, в конфигурации скилла указано user-invocable: false. Агент активирует его автоматически, когда получает задачу по стилизации или настройке Tailwind.
Исходный текст
SKILL.md · MIT
--- name: tailwind-css user-invocable: false description: "Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css." --- # Tailwind CSS Follow the installed Tailwind version and the repository's tokens, components, class-merging utility, CSS entrypoint, and nearby UI. They take precedence over this skill. Do not add packages, change integration, or migrate versions without a request and local need. ## Routing - Apply [coding preferences](references/coding-preferences.md) only where the project is silent. - For v4 configuration, migration, directives, or generated classes, use [v4 rules](references/tailwind-v4-rules.md) and the matching official docs. - Read [tailwind-variants](references/tailwind-variants.md), [tw-animate-css](references/tw-animate-css.md), or [ESLint](references/eslint.md) only when that integration exists locally or the request adds it. Do not apply v4 syntax to an older installation. Preserve responsive, interaction, accessible, and dark-mode behavior. Do not redesign beyond the request. ## Completion Define the intended visual and state change. Reuse local conventions. Keep classes statically discoverable. If source registration or generated mappings change, run the real Tailwind build and confirm the expected utilities. Run required repository checks and inspect the changed states at one representative viewport for a small style edit. Broaden to narrow/wide viewports, themes, and interactions when responsive rules or shared styling changed. When markup is transformed by JavaScript or a component library, inspect the final DOM too. Textual class review alone is insufficient. Repeat checks only when subsequent edits affect their evidence. Finish with `### 🎨 Tailwind — ✅ styling updated` (or `### 🎨 Tailwind — 🔎 inspected, no files written`) and code-check and rendered-inspection evidence. Use prose for one inspected state and a compact table for several. Add `### ⚠️ Remaining` only when needed. Keep source UI copy and diagnostics undecorated.
© PaulRBerg · MIT · PaulRBerg/agent-skills
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — tailwind-css от других авторов.
