tailwindcss · pedronauck — скилл для Claude Code: что делает и как установить
Скилл настраивает работу агента с Tailwind CSS v4. Он заставляет применять утилиты, проектные дизайн-токены и избегать динамической сборки имён классов.
npx skills add pedronauck/skills --skill tailwindcss -a claude-codeЧто делает tailwindcss
Скилл задаёт правила вёрстки под четвёртую версию Tailwind CSS. Ассистент ориентируется на локальные токены проекта и существующую дизайн-систему, не подменяя их готовыми наборами вроде shadcn по умолчанию. Для поиска контекста и проверки вариантов используются инструменты Read, Grep и Glob.
Правила запрещают динамическую склейку классов вида bg-${color}-500. Вместо этого агент обязан брать полные имена из словарей, иначе сборщик потеряет неявные утилиты. Длинные списки классов объединяются через проектную функцию cn, а директива @apply остаётся только там, где она прямо разрешена репозиторием.
Стилизация не требует запуска отдельных ритуалов линтинга или проверки типов. Достаточно встроенных команд проекта. Ещё одно обязательное условие — сохранение видимого фокуса с клавиатуры при адаптивной вёрстке.
Какие задачи решает
- Стилизовать компоненты интерфейса утилитами Tailwind CSS v4
- Заменить динамическую интерполяцию классов на статические словари
- Скомпоновать переопределяемые классы через утилиту cn
- Сохранить видимый фокус клавиатуры в доступной вёрстке
Примеры запросов агенту
- Стилизуй карточку профиля через утилиты Tailwind CSS v4, используя цвета из нашего дизайн-токена.
- Перепиши компонент кнопки: убери интерполяцию классов и настрой варианты через словарь соответствий.
- Добавь адаптивную сетку для списка товаров и проверь видимость фокуса при навигации с клавиатуры.
Как установить tailwindcss
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a claude-code2Вручную: положить файлы
~/.claude/skills/tailwindcss/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/tailwindcss/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a codex2Вручную: положить файлы
.agents/skills/tailwindcss/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a cursor2Вручную: положить файлы
.cursor/skills/tailwindcss/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills tailwindcss2Вручную: положить файлы
.github/skills/tailwindcss/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedronauck/skills --path skills/mine/tailwindcssВручную: положить файлы
.devin/skills/tailwindcss/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill tailwindcss -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора6
Другие версии tailwindcss
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о tailwindcss
Как установить tailwindcss в Claude Code?
Выполните в терминале команду npx skills add pedronauck/skills --skill tailwindcss -a claude-code.
Что делает скилл tailwindcss?
Он инструктирует ИИ-агента писать стили для компонентов на Tailwind CSS v4, опираясь на существующие токены проекта и запрещая склейку динамических имён классов.
Почему скилл запрещает шаблоны вроде bg-${color}-500?
Tailwind сканирует исходный код статически. Если класс разбит на фрагменты, утилита не попадёт в финальную сборку CSS, поэтому агент формирует полные классы через таблицы соответствий.
