gpui-kit-design-guides — скилл для Claude Code: установка
Скилл передаёт агенту обязательные правила дизайна десктопных приложений на GPUI Kit. Пригодится при проектировании новых экранов, правке интерфейсов и проверке вёрстки по чек-листам.
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-codeЧто делает gpui-kit-design-guides
Скилл заставляет ИИ-ассистента следовать жёстким стандартам оформления десктопных программ на базе gpui-kit и gpui-component. Вместо случайных решений из обучающей выборки агент обращается к локальному файлу references/design-guides.md или скачивает его из сети. Внутри собраны требования к сетке, отступам, компонентам, иерархии задач и поведению окон.
Набор запретов отсекает веб-привычки. Ассистент обязан использовать семантические токены cx.theme() вместо прямых hex-значений цвета. Кнопки Button назначаются для внутренних действий интерфейса, а Link допускается только для внешних адресов и почты. Всплывающие слои обязаны закрываться по клавише Escape с возвратом фокуса на исходный элемент.
Перед сдачей экрана агент прогоняет вёрстку через чек-листы доступности и ревью. Если файл со стандартами отсутствует в каталоге проекта, ассистенту придётся загрузить документ по внешней ссылке. Без этих инструкций код быстро обрастает сырыми стилями и ломает логику десктопного интерфейса.
Какие задачи решает
- задать десктопные правила вёрстки для
gpui-kit - проверить соответствие интерфейса чек-листу ревью
- заменить сырые цвета на токены
cx.theme() - настроить закрытие оверлеев по клавише Escape
Примеры запросов агенту
- Спроектируй экран настроек по правилам дизайна GPUI Kit
- Проверь вёрстку формы по чек-листу перед ревью
- Поправь состояния кнопок и фокус в диалоговом окне
Как установить gpui-kit-design-guides
1Через Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-code2Вручную: положить файлы
~/.claude/skills/gpui-kit-design-guides/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/gpui-kit-design-guides/
1Через Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a codex2Вручную: положить файлы
.agents/skills/gpui-kit-design-guides/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a cursor2Вручную: положить файлы
.cursor/skills/gpui-kit-design-guides/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install longbridge/gpui-kit gpui-kit-design-guides2Вручную: положить файлы
.github/skills/gpui-kit-design-guides/SKILL.md1Через Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a gemini-cli2Командой платформы
gemini skills install https://github.com/longbridge/gpui-kit --path skills/gpui-kit-design-guidesВручную: положить файлы
.devin/skills/gpui-kit-design-guides/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора2
Весь набор →Похожие
Вопросы о gpui-kit-design-guides
Как установить gpui-kit-design-guides в Claude Code?
Выполните в терминале команду npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-code.
Что делает скилл gpui-kit-design-guides?
Он загружает спецификацию интерфейсов для десктопных программ на GPUI Kit. Агент сверяет выбор компонентов, токены темы и тексты кнопок с нормативным документом.
Откуда скилл берёт правила оформления?
Ассистент читает локальный файл references/design-guides.md. Если документ не найден в проекте, модель загружает его копию с официального адреса документации.
