ui_designerlisted
Install: claude install-skill buildd-ai/buildd
# Buildd UI Designer Skill
Apply the buildd brand identity to UI code. This skill enforces the design system defined in `globals.css` and `tailwind.config.ts` — tokens, color discipline, typography, surfaces, and component patterns.
**Direction: brutalist/editorial** (adopted 2026-06 via PRs #892/#894/#907; spec in `docs/design/mobile-feed-spec.md`). Square corners, hard offset shadows, visible ink borders, IBM Plex Mono as the product voice, one orange accent. If anything in this skill contradicts `apps/web/src/app/globals.css`, **globals.css wins** — flag the drift.
## When to Use This Skill
- Writing or modifying any UI component in buildd apps
- Reviewing existing UI for brand consistency
- Adding new pages, panels, or features to the dashboard
- Choosing colors, spacing, typography, or component styling
- Deciding how to present status, hierarchy, or interactive elements
## Brand Vibe
**"A control room in print. Everything has a place. The borders do the talking."**
Brutalist/editorial: warm paper and charcoal surfaces, hard ink outlines, hard offset shadows, monospace headings, a single high-energy orange accent. Color earns its presence through meaning — orange for action/progress, green for success, red for errors. No decorative gradients, no soft blur, no rounded corners.
## Theme Architecture
Day/Night toggle via `[data-theme="dark"]` and `[data-theme="light"]` CSS selectors on `:root`.
- **ThemeProvider** React context: `dark > light > system` cycle
- **l