gpui-kit-design-guides — Claude Code skill: setup and use
Supplies normative desktop interface rules for GPUI Kit applications. Useful when creating new screens, styling components, or auditing UI against review checklists.
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-codeWhat gpui-kit-design-guides does
This skill guides coding assistants through strict desktop UI rules for gpui-kit and gpui-component projects. The assistant must reference references/design-guides.md or fetch it directly from the documentation site rather than guessing from training data. It defines window structures, spacing scales, interaction states, and accessibility checks.
The rules ban web habits. Raw hex and rgb color values are forbidden in favor of cx.theme() semantic tokens. The guide also mandates using Button for application actions, reserving Link strictly for external URLs. Overlays must always close on Escape and restore focus to the calling element.
Before finishing any interface task, the model must evaluate its work against the built-in review checklist. If the reference markdown file is missing locally, network access is required to fetch the guides. Without this guidance, generated views frequently leak web-like behavior into native desktop layouts.
What it helps with
- enforce desktop UI standards in
gpui-kit - audit screen layouts against the review checklist
- replace raw hex colors with
cx.theme()tokens - implement proper Escape key handling for modal overlays
Example prompts for the agent
- Design an inspector panel following the GPUI Kit visual language
- Audit this dialog against the desktop design review checklist
- Fix component interaction states to use theme tokens
How to install gpui-kit-design-guides
1Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-code2Manually: put the files in place
~/.claude/skills/gpui-kit-design-guides/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/gpui-kit-design-guides/
1Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a codex2Manually: put the files in place
.agents/skills/gpui-kit-design-guides/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a cursor2Manually: put the files in place
.cursor/skills/gpui-kit-design-guides/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install longbridge/gpui-kit gpui-kit-design-guides2Manually: put the files in place
.github/skills/gpui-kit-design-guides/SKILL.md1Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a gemini-cli2Platform CLI
gemini skills install https://github.com/longbridge/gpui-kit --path skills/gpui-kit-design-guidesManually: put the files in place
.devin/skills/gpui-kit-design-guides/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
From the same set2
The whole set →Similar
Questions about gpui-kit-design-guides
How to install gpui-kit-design-guides in Claude Code?
Run npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -a claude-code in your terminal.
What does gpui-kit-design-guides do?
It provides normative interface standards for GPUI Kit desktop apps. The assistant uses these rules to select components, structure layouts, and write button copy.
Where does the skill load its UI guidelines from?
It reads references/design-guides.md in the project. When that file is absent, it fetches the guide directly from the official GPUI Kit documentation URL.
