98.8K+Скачать
Перейти к руководству
ui-stylingавтор nextlevelbuilder

UI Styling Skill.

Навык для Claude Code и Codex для UI-дизайна: доступная стилизация интерфейса с shadcn/ui, Tailwind CSS и визуализацией на canvas.

  • Web и UI
  • UI-код
Скачать OpenDesignИнструкция по использованию
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md
--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization
Метаданные и заголовки разделов из исходного файла от 2026-09-14 · 10 626 символов полностью

01 Что делает

Что делает skill ui-styling в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill создаёт доступные пользовательские интерфейсы React, объединяя компоненты shadcn/ui (примитивы Radix UI с Tailwind CSS), utility-first стилизацию с Tailwind CSS и визуальные дизайн-системы на основе canvas. Он предназначен для проектов на Next.js, Vite, Remix и Astro. Компоненты копируются в вашу кодовую базу через CLI, что даёт полный контроль и типобезопасность TypeScript.

Skill охватывает адаптивные макеты, тёмную тему, дизайн-токены, валидацию форм, таблицы данных и визуальные композиции музейного качества. Он включает справочную документацию по паттернам компонентов, теминг, доступность (ARIA, навигация с клавиатуры), адаптивные точки перелома и настройку Tailwind. Python-скрипты автоматизируют установку компонентов и генерацию конфигурации.

Что он выдаёт

  • tailwind.config.js генерируется с кастомными токенами темы, цветами, шрифтами, отступами и расширениями точек перелома.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Инициализация Shadcn/ui с Tailwind

    Выполните npx shadcn@latest init для настройки shadcn/ui и Tailwind CSS с запросом фреймворка, TypeScript, путей и предпочтений темы.

  2. 02
    Добавление компонентов в кодовую базу

    Установите компоненты с помощью npx shadcn@latest add button card dialog form, которая копирует их в ваш проект для полного контроля и настройки.

  3. 03
    Компоновка с utility-классами

    Комбинируйте компоненты shadcn/ui с utility-классами Tailwind для адаптивных макетов, отступов, цветов и hover-состояний прямо в атрибутах className JSX.

  4. 04
    Применение вариантов тёмной темы

    Используйте next-themes для переключения темы и добавляйте utility-классы с префиксом dark: ко всем элементам с темой для стабильной поддержки тёмного режима.

  5. 05
    Использование доступности Radix

    Примитивы Radix UI предоставляют встроенные паттерны ARIA, навигацию с клавиатуры и управление фокусом без дополнительной настройки.

02 Определите своё применение

Когда использовать Skill ui-styling

Используйте навык ui-styling в Claude Code или Codex, когда задача — UI-дизайн такого рода. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Создание UI с помощью React-фреймворков, таких как Next.js, Vite, Remix или Astro.
  • Реализация доступных компонентов, таких как диалоги, формы, таблицы и навигация.
  • Создание адаптивных, mobile-first макетов с utility-first подходом к CSS.
  • Создание дизайн-систем с согласованными токенами и поддержкой тёмного режима.
  • Генерация визуальных дизайнов, постеров или брендовых материалов с помощью workflow на основе canvas.

Знайте границы

  • Требуется shadcn/ui, Tailwind CSSSKILL.md указывает эту зависимость; навык не работает без неё в вашем проекте.

Что предоставить

  • Имена компонентов для установкиПередайте имена компонентов в shadcn_add.py или npx shadcn@latest add для установки с обработкой зависимостей.
  • Кастомные токены темыПредоставьте кастомные цвета и шрифты в tailwind_config_gen.py для генерации tailwind.config.js с расширенной темой.

03 Внутри скилла

Правила, которые skill ui-styling задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

  1. Mobile-first адаптивность

    Начинайте с мобильных стилей и добавляйте адаптивные варианты через breakpoints (sm, md, lg, xl, 2xl). Tailwind по умолчанию обрабатывает mobile-first.

  2. Utility-first подход к извлечению

    Используйте классы Tailwind непосредственно в JSX. Извлекайте компоненты только при реальном повторении, а не для одноразовых паттернов.

  3. Пути к скриптам относительно директории skill

    Пути к скриптам в этом skill указаны относительно директории, содержащей SKILL.md, а не корня проекта.

  4. Использование компонентов с приоритетом на доступность

    Используйте примитивы Radix UI для ARIA-паттернов, добавляйте состояния фокуса для интерактивных элементов и используйте семантический HTML. Поддержка screen reader встроена в компоненты shadcn/ui.

  5. Дизайн-токены для консистентности

    Используйте единую шкалу отступов, цветовые палитры и систему типографики, заданные в конфигурации Tailwind. Применяйте переменные темы, а не произвольные значения.

  6. Типобезопасность TypeScript

    Все компоненты изначально написаны на TypeScript с полной типобезопасностью. Используйте типизированные props и схемы форм для удобства разработки.

  7. Избегайте динамических имён классов

    Автоматическая очистка CSS в Tailwind требует статических имён классов. Динамическое построение классов мешает удалению неиспользуемого кода.

  8. Стандарт экспертного мастерства

    Каждая деталь важна — относитесь к UI как к ремеслу. Применяйте исполнение музейного качества к визуальным композициям с системными паттернами и выверенной эстетикой.

04 Применение

Установите ui-styling в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте ui-styling в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Общая форма CLI skills для .claude/skills/ui-styling/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Проверьте адаптивные breakpoints на sm, md, lg, xl и 2xl, чтобы убедиться, что mobile-first макет корректно адаптируется.
  • Проверьте доступность, протестировав навигацию с клавиатуры, управление фокусом и объявления screen reader в диалогах и формах.
  • Проверьте валидацию форм с react-hook-form и zod resolver, чтобы убедиться, что сообщения об ошибках отображаются корректно.

В OpenDesign импортируйте ui-styling по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Ветка main
Файл skill
.claude/skills/ui-styling/SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит 7f69fed
License
Apache-2.0 Из .claude/skills/ui-styling/LICENSE.txt; SKILL.md указывает «MIT». Файл-уровень LICENSE.txt говорит Apache-2.0, в то время как front matter говорит MIT; указано по лицензии на уровне файла.
Звёзды репозитория
127 450 Снимок GitHub сделан 2026-09-14 для всего репозитория nextlevelbuilder/ui-ux-pro-max-skill, который содержит 7 навыков в этом каталоге. Не является рейтингом или счётчиком использования для ui-styling.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. Когда использовать этот skillПеречисляет сценарии: React-фреймворки, доступные компоненты, адаптивные макеты, тёмная тема, дизайн-системы, визуальные дизайны.
  2. Основной стекОписывает компоненты shadcn/ui, utility-стилизацию Tailwind и слои визуального дизайна canvas.
  3. Пути к скриптамОбъясняет, что пути к скриптам указаны относительно директории skill, а не корня проекта.
  4. Быстрый стартПоказывает инициализацию shadcn/ui, установку компонентов и настройку только Tailwind для Vite.
  5. Руководство по библиотеке компонентовСсылается на shadcn-components.md, охватывающий формы, макеты, оверлеи, обратную связь и компоненты отображения.
  6. Тема и настройкаСсылается на shadcn-theming.md по тёмному режиму, CSS-переменным, цветам и вариантам компонентов.
  7. Паттерны доступностиСсылается на shadcn-accessibility.md по ARIA, навигации с клавиатуры, управлению фокусом и программам чтения с экрана.
  8. Утилиты TailwindСсылается на tailwind-utilities.md по разметке, отступам, типографике, цветам, границам и теням.
  9. Адаптивный дизайнСсылается на tailwind-responsive.md по mobile-first брейкпоинтам и паттернам адаптивных утилит.
  10. Настройка TailwindСсылается на tailwind-customization.md по структуре конфигурации, кастомным утилитам, плагинам и расширениям темы.
  11. Визуальная система дизайнаСсылается на canvas-design-system.md по философии дизайна, визуальной коммуникации и продуманным композициям.
  12. Служебные скриптыОписывает shadcn_add.py для установки компонентов и tailwind_config_gen.py для генерации конфигурации.
Собственное описание skill
«Создавайте красивые и доступные пользовательские интерфейсы с компонентами shadcn/ui (построены на Radix UI + Tailwind), стилизацией Tailwind CSS utility-first и визуальным дизайном на canvas. Используйте при создании пользовательских интерфейсов, внедрении дизайн-систем, создании адаптивных макетов, добавлении доступных компонентов (диалоги, выпадающие списки, формы, таблицы), настройке тем и цветов, внедрении тёмного режима, генерации визуального дизайна и постеров или установлении единообразных шаблонов стилизации в приложениях.»

Описание из front matter SKILL.md. Полный файл содержит около 10 626 символов. Прочитайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill ui-styling

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Какие форматы вывода производит визуальная система дизайна?

Визуальный слой дизайна на основе canvas создаёт композиции музейного качества для визуальных дизайнов, постеров и брендовых материалов. Он следует философскому подходу с минимумом текста и максимальным визуальным воздействием.

UI Styling

Запустите ui-styling на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте ui-styling по ссылке на его SKILL.md, вставьте промпт выше и прочтите план до получения результата.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows