tailwind-design-system · sickn33 — скилл для Claude Code: установка
Скилл задаёт агенту рамки работы с Tailwind: токены, варианты компонентов, адаптивные паттерны и доступность. Пригодится, когда UI в проекте разъезжается.
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a claude-codeЧто делает tailwind-design-system
Скилл сначала просит озвучить цели, ограничения и входные данные, а потом выдаёт шаги и способ проверить результат. Поводы взяться за него перечислены конкретные: библиотека компонентов, токены и темы, адаптивные и доступные компоненты, единые UI-паттерны в кодовой базе, переход на Tailwind, тёмная схема.
Внутри папки скилла лежит SKILL.md с этими инструкциями и resources/implementation-playbook.md. Второй файл агент открывает, когда нужны развёрнутые примеры и готовые паттерны.
В ограничениях сказано прямо: результат не заменяет проверку в вашем окружении, тесты и ревью специалиста. То есть имена токенов и контраст всё равно придётся посмотреть глазами в браузере. Если не хватает вводных или критериев готовности, скилл останавливается и спрашивает, а не достраивает за вас.
Какие задачи решает
- собрать библиотеку компонентов на Tailwind
- вынести цвета и отступы в токены и тему
- добавить тёмную схему без копипасты классов
- свести разрозненные кнопки и поля к одному виду
- проверить компонент на адаптивность и доступность
Примеры запросов агенту
- Собери дизайн-систему на Tailwind: токены для цвета, отступов и типографики, плюс варианты кнопки.
- Переведи эти классы на токены из моей темы Tailwind и покажи, что изменилось.
- Сделай адаптивную карточку и проверь её на доступность с клавиатуры.
Как установить tailwind-design-system
1Через Skills CLI (Vercel)
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a claude-code2Вручную: положить файлы
~/.claude/skills/tailwind-design-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/tailwind-design-system/
1Через Skills CLI (Vercel)
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a codex2Вручную: положить файлы
.agents/skills/tailwind-design-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a cursor2Вручную: положить файлы
.cursor/skills/tailwind-design-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install sickn33/agentic-awesome-skills tailwind-design-system2Вручную: положить файлы
.github/skills/tailwind-design-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/sickn33/agentic-awesome-skills --path skills/tailwind-design-systemВручную: положить файлы
.devin/skills/tailwind-design-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора80
Весь набор →Другие версии tailwind-design-system
Похожие
Вопросы о tailwind-design-system
Как установить tailwind-design-system в Claude Code?
Выполните npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-system -a claude-code. Файл скилла окажется по пути ~/.claude/skills/tailwind-design-system/SKILL.md.
Что делает tailwind-design-system?
Ведёт агента по работе с дизайн-системой на Tailwind: токены и темы, варианты компонентов, адаптивные паттерны, доступность, тёмная схема.
Можно ли доверять коду, который выдаст скилл?
В своих ограничениях он прямо говорит, что результат не заменяет проверку в окружении, тесты и ревью. Спорные компоненты проверяйте в браузере сами.
Исходный текст
SKILL.md · MIT
--- name: tailwind-design-system description: "Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility." risk: safe source: community date_added: "2026-02-27" --- # Tailwind Design System Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility. ## Use this skill when - Creating a component library with Tailwind - Implementing design tokens and theming - Building responsive and accessible components - Standardizing UI patterns across a codebase - Migrating to or extending Tailwind CSS - Setting up dark mode and color schemes ## Do not use this skill when - The task is unrelated to tailwind design system - You need a different domain or tool outside this scope ## Instructions - Clarify goals, constraints, and required inputs. - Apply relevant best practices and validate outcomes. - Provide actionable steps and verification. - If detailed examples are required, open `resources/implementation-playbook.md`. ## Resources - `resources/implementation-playbook.md` for detailed patterns and examples. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
© sickn33 · MIT · sickn33/agentic-awesome-skills
