ui-design-patterns — скилл для Claude Code: паттерны интерфейсов
Справочник по типовым паттернам интерфейса: навигация, формы, вывод данных, обратная связь и доступность. Пригодится, когда проектируешь компоненты или разбираешь чужой UI.
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-codeЧто делает ui-design-patterns
Скилл описывает повторяемые решения для интерфейсов: вкладки, аккордеоны, хлебные крошки, пагинацию, формы, вывод данных и обратную связь. Для каждого паттерна разобраны случаи применения, анатомия и рекомендации. Плюс разметка с ARIA-атрибутами: role="tablist", aria-expanded, aria-current="page" и прочее.
Внутри есть раздел про дизайн-системы и методологию атомарного дизайна — от атомов до страниц. Это скорее справочник, чем генератор кода: агент опирается на него, когда нужно выбрать паттерн или проверить существующий интерфейс на соответствие практике.
Учти: в описании вкладок названо идеальное число разделов, а для аккордеона указана длительность анимации переходов. Это советы из текста, а не жёсткие лимиты — под свои задачи их придётся пересматривать.
Какие задачи решает
- выбрать паттерн навигации под структуру разделов
- собрать форму с валидацией и понятной обратной связью
- разметить вкладки и аккордеоны ARIA-атрибутами
- проверить существующий интерфейс на доступность
- разложить компоненты по уровням атомарного дизайна
Примеры запросов агенту
- Подбери паттерн навигации для каталога с тремя уровнями вложенности
- Проверь мою форму на доступность и подскажи, чего не хватает
- Собери аккордеон для раздела FAQ с корректными ARIA-атрибутами
Как установить ui-design-patterns
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-design-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-design-patterns/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a codex2Вручную: положить файлы
.agents/skills/ui-design-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a cursor2Вручную: положить файлы
.cursor/skills/ui-design-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace ui-design-patterns2Вручную: положить файлы
.github/skills/ui-design-patterns/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/ui-design-patternsВручную: положить файлы
.devin/skills/ui-design-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора31
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о ui-design-patterns
Как установить ui-design-patterns в Claude?
Выполни npx skills add manutej/luxor-claude-marketplace --skill ui-design-patterns -a claude-code. Файл скилла окажется по пути ~/.claude/skills/ui-design-patterns/SKILL.md.
Что делает ui-design-patterns?
Даёт агенту справочник по паттернам интерфейса: навигация, формы, вывод данных, обратная связь, доступность. Агент обращается к нему при проектировании компонентов и разборе существующего UI.
Для каких платформ подходит этот скилл?
Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot команда другая: gh skill install manutej/luxor-claude-marketplace ui-design-patterns.
