tailwind

Что делает навык

Использует Tailwind CSS v4 (browser-runtime @tailwindcss/browser@4.2.4) для стилизации HTML-композиций в HyperFrames. Применяется при создании проектов через `hyperframes init --tailwind` для обеспечения детерминированного рендеринга без использования CDN или tailwind.config.js.

Когда применять

• Создание проектов через `hyperframes init --tailwind` с использованием утилитарных классов и CSS-first тем.
• Миграция стилей с Tailwind v3 на v4: замена директив @tailwind и tailwind.config.js на блоки @theme и @utility.
• Настройка стабильных размеров и анимаций для видео-лейаутов с учетом ограничений browser-runtime.
• Исправление проблем с отсутствующими стилями при рендеринге, связанных с динамической генерацией классов.

Как работает

1. Проверить, что проект создан через `hyperframes init --tailwind` и в index.html присутствует скрипт `@tailwindcss/browser@4.2.4`.
2. Убедиться в наличии и готовности shim `window.__tailwindReady` перед началом захвата кадров.
3. Использовать блоки `<style type="text/tailwindcss">` с директивами `@theme` для токенов и `@utility` для кастомных утилит вместо JS-конфигураций.
4. Применять полные статические классы в HTML, избегая динамической сборки имен классов во время рендеринга.
5. Запускать валидацию через `npx hyperframes lint`, `validate` и `inspect` для проверки отсутствия пропущенных стилей.
6. При необходимости стабильного рендеринга в продакшене скомпилировать Tailwind в CSS и подключить stylesheet напрямую.

Примеры запросов агенту

Что понадобится

• Установленный CLI HyperFrames с поддержкой команды `hyperframes init --tailwind`.
• Среда выполнения с доступом к `@tailwindcss/browser@4.2.4`.
• Наличие `window.__tailwindReady` в DOM для корректного захвата кадров.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.