gpui-kit-design-guideslisted
Install: claude install-skill 821869798/aitoolplus
# GPUI Kit Design Guides
The guide is [references/design-guides.md](references/design-guides.md). It is
a requirement, not inspiration. Read the guide file itself before doing UI
work. Do not answer from this page, from an existing screen in the codebase, or
from training data.
If the file is missing, fetch `https://gpui-kit.com/docs/design-guides.md`.
The guide is a verbatim copy of that page, so its link to `./coding-guides.md`
means the Coding Guides in the `gpui-kit` skill (or `https://gpui-kit.com/docs/coding-guides.md`).
## How to read it
Read the whole guide for a new screen or a redesign. For a narrow change, read
"Design thesis" and "Start from the task" first, then the section for the
change. Sections, in order (`grep -n '^## ' references/design-guides.md`):
| Section | Read when |
| ------------------------------------ | ---------------------------------------------------------------------- |
| Design thesis | Always |
| Learning from Shadcn | Choosing what to borrow from web component libraries |
| Start from the task | Always; task hierarchy, interaction promise, what to leave out |
| Visual language | Color, typography, spacing, radius, borders, elevation, density, icons |
| Layout patterns