radix-ui-design-system
Создание доступного интерфейса с Radix
Создавайте готовые к продакшену доступные дизайн-системы с примитивами Radix UI. Этот навык предоставляет паттерны для кастомизации headless-компонентов, стратегии темизации и архитектуру составных компонентов для React-приложений.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"radix-ui-design-system" 사용 중입니다. Create a dialog component with form fields using Radix UI
예상 결과:
- Полный компонент Dialog с элементами Root, Trigger, Portal, Overlay, Content, Title, Description и Close
- CSS-классы для оверлея (фиксированное позиционирование, размытие фона), контента (центрирование, тень, скругленные углы)
- Форма с полями имени и email с использованием правильных элементов fieldset и label
- Доступность: ловушка фокуса внутри модального окна, закрытие по Escape, aria-labelledby и aria-describedby
"radix-ui-design-system" 사용 중입니다. Build a dropdown menu with checkboxes and radio groups
예상 결과:
- DropdownMenu.Root с вложенными элементами Menu, Separators и CheckboxItems
- RadioGroup для опций одиночного выбора с визуальными индикаторами
- Клавиатурная навигация: стрелки для навигации, Enter для выбора, Escape для закрытия
- Компонент SubMenu для вложенных выпадающих меню с правильным позиционированием
보안 감사
안전All static findings are false positives. The scanner incorrectly detected: (1) backticks in markdown as shell commands, (2) words like 'description' and 'destructive' as cryptographic algorithms, (3) relative markdown links as path traversal, (4) documentation URLs as hardcoded URLs, and (5) React import() syntax as dynamic code execution. This is a legitimate Radix UI documentation skill with no actual security concerns.
품질 점수
만들 수 있는 것
Построение кастомной дизайн-системы
Создайте специфичную для компании дизайн-систему с полным контролем над стилями при сохранении соответствия требованиям доступности.
Миграция со стилизованных библиотек
Замените тяжелые библиотеки styled-components на легковесные примитивы Radix, сохраняя при этом API компонентов.
Добавление доступности к существующим компонентам
Улучшите кастомные компоненты клавиатурной навигацией, управлением фокусом и поддержкой скринридеров.
이 프롬프트를 사용해 보세요
Создайте компонент модального диалога, используя примитив Dialog из Radix UI. Включите кнопку-триггер, оверлей, контент с заголовком и описанием, а также кнопку закрытия. Используйте CSS-переменные для темизации.
Постройте полноценное выпадающее меню с помощью Radix DropdownMenu. Включите обычные пункты, разделители, элементы с чекбоксами для множественного выбора, радио-группы для одиночного выбора и вложенные подменю.
Настройте систему темизации с использованием CSS-переменных. Включите поддержку светлой и темной темы, семантические токены цветов и шкалу отступов. Покажите, как интегрировать с компонентами Radix.
Создайте набор компонентов форм (input, checkbox, radio, select) с использованием примитивов Radix. Включите правильные лейблы, состояния ошибок с aria-invalid и вспомогательный текст с aria-describedby.
모범 사례
- Всегда включайте Dialog.Title и Dialog.Description для соответствия требованиям доступности
- Используйте prop asChild для прикрепления поведения Radix к кастомным стилизованным компонентам
- Реализуйте правильное управление фокусом: ловушка фокуса в модальных окнах, восстановление фокуса при закрытии
- Используйте компонент Portal для рендеринга диалогов вне иерархии DOM, чтобы избежать проблем с z-index
피하기
- Переопределение ARIA-атрибутов — Radix управляет ими автоматически, их изменение нарушает доступность
- Пропуск рендеринга Portal — вызывает проблемы с z-index и контекстом наложения с родительскими стилями
- Отсутствие обработки состояния disabled — всегда обеспечивайте визуальную обратную связь и правильный aria-disabled
- Использование стилей по умолчанию — Radix headless, всегда применяйте свои собственные стили