LA
tailwindcss-development
Создаёт и исправляет классы Tailwind CSS в HTML-шаблонах (Blade, JSX, Vue). Подходит для адаптивных сеток, компонентов UI, тёмной темы и верстки. Не используется для бэкенда, JS-логики или настройки сборщиков.
Что делает навык
Создаёт и исправляет классы Tailwind CSS v3 в HTML-шаблонах (Blade, JSX, Vue), обеспечивая адаптивную верстку, поддержку тёмной темы и соблюдение конвенций проекта. Не применяется для бэкенда, JS-логики или настройки сборщиков.
Когда применять
- Создание адаптивных сеток и компонентов UI с использованием Flexbox и Grid.
- Реализация тёмной темы через вариант dark: для существующих и новых страниц.
- Извлечение повторяющихся паттернов в компоненты согласно конвенциям проекта.
- Исправление верстки: замена margin на gap, удаление избыточных классов.
Как работает
- Использовать search-docs для получения детальной документации по паттернам Tailwind CSS v3.
- Проверить и следовать существующим конвенциям Tailwind в проекте перед добавлением новых паттернов.
- Использовать утилиты gap для отступов между соседними элементами вместо margin.
- Применять вариант dark: для поддержки тёмной темы, если она уже используется в проекте.
- Проверить визуальное отображение в браузере, протестировать адаптивные брейкпоинты и тёмную тему.
- Убедиться, что используются только классы, поддерживаемые Tailwind CSS v3.
Примеры запросов агенту
Создай адаптивную сетку карточек на Tailwind CSS с использованием Grid, которая перестраивается на мобильных устройствах.
Добавь поддержку тёмной темы для существующего компонента кнопки, используя конвенции проекта.
Исправь верстку списка элементов: замени margin на gap и убери лишние классы.
Что понадобится
- Доступ к документации Tailwind CSS v3 (через search-docs)
- Файл конфигурации tailwind.config.js
- HTML-шаблоны (Blade, JSX, Vue) с подключением @tailwind директив
Описание составлено по SKILL.md навыка, сверено 09.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «tailwindcss-development» из репозитория:
# https://github.com/laravel/boost
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r tailwindcss-development/ ~/.claude/skills/tailwindcss-development/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.