← ClaudeAtlas

ui_designerlisted

Apply the buildd brand identity to UI code. Enforces design tokens, color discipline, typography, and the day/night theme system across all buildd apps.
buildd-ai/buildd · ★ 1 · Web & Frontend · score 67
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