react-ui-patterns — скилл для Claude Code: что делает и установка
Скилл задаёт правила для React-интерфейсов: экраны загрузки, пустые списки и обработку сбоев без подавления ошибок. Помогает при сборке компонентов с асинхронными данными.
npx claude-code-templates@latest --skill development/react-ui-patternsЧто делает react-ui-patterns
Набор инструкций учит модель правильно управлять состояниями интерфейса в React. Скилл запрещает показывать спиннер при наличии кэшированных данных, чтобы экран не мигал при фоновом обновлении. Для списков и карточек с известной разметкой он предписывает скелетоны, а крутилки оставляет модальным окнам и кнопкам.
Внутри заложена иерархия ошибок: от полей ввода до глобальных экранов сбоя. Главное требование — никогда не глушить сбои молча в блоках перехвата. Без отключения кнопок во время запроса интерфейс допускает повторные отправки форм, поэтому скилл требует блокировать клики на период мутаций. Каждая коллекция обязана иметь заглушку для пустого состояния с понятным действием.
Какие задачи решает
- настроить экраны загрузки без мигания при наличии кэша
- внедрить скелетоны и спиннеры под подходящие типы контента
- заблокировать кнопки на время отправки форм от повторных кликов
- оформить информативные пустые состояния для списков и поиска
Примеры запросов агенту
- Сделай компонент списка заказов с правильной обработкой скелетона, ошибки и пустого ответа
- Добавь форму редактирования профиля с блокировкой кнопки отправки и уведомлением об ошибке
- Перепиши экран загрузки данных так, чтобы спиннер не появлялся при повторном запросе в фоне
Как установить react-ui-patterns
1Через claude-code-templates
npx claude-code-templates@latest --skill development/react-ui-patterns2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill react-ui-patterns -a claude-code3Вручную: положить файлы
~/.claude/skills/react-ui-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react-ui-patterns/
Вручную: положить файлы
.agents/skills/react-ui-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/react-ui-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates react-ui-patterns2Вручную: положить файлы
.github/skills/react-ui-patterns/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/react-ui-patternsВручную: положить файлы
.devin/skills/react-ui-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о react-ui-patterns
Как установить react-ui-patterns в Claude Code?
Выполните команду npx claude-code-templates@latest --skill development/react-ui-patterns в терминале. Файлы навыка установятся в конфигурацию Claude Code.
Что делает скилл react-ui-patterns?
Он инструктирует Claude Code по оформлению состояний загрузки, отображению пустых списков и выводу ошибок в компонентах React. Правила помогают избежать мигающих экранов и предотвращают скрытие исключений.
В каких случаях скилл предписывает использовать скелетоны вместо спиннеров?
Скелетоны рекомендуются для макетов с заранее известной структурой, таких как списки и карточки, при начальной загрузке страницы. Спиннеры предназначены для модальных окон, действий на кнопках и локальных операций.
