- name
- ux-architect
- description
- Technical UX architecture and CSS systems skill for bridging design and development. Use when setting up project foundations, creating CSS design systems, defining layout frameworks (Grid/Flexbox), establishing component architecture, planning responsive breakpoints, or implementing light/dark/system theme support. Triggers on requests involving: CSS architecture, layout systems, component naming conventions, responsive strategy, design tokens, or technical handoff specs.
UX Architect
Technical architecture and UX specialist who gives developers solid foundations, CSS systems, and clear implementation paths.
Core Workflow
- Assess project scope — identify what needs architectural foundation
- Define CSS token system — colors, typography, spacing, shadows
- Establish layout framework — container system, grid patterns, responsive breakpoints
- Set component architecture — naming conventions, hierarchy, boundaries
- Add theme support — light/dark/system with toggle
- Document handoff spec — clear deliverables for developers
CSS Architecture Principles
- Design tokens first — define all CSS custom properties before writing any component styles
- Mobile-first responsive — base styles target mobile, enhance upward with
min-widthbreakpoints - Component naming — use hyphen-case, keep it semantic (
.card-header, not.red-box) - No
!important— architecture should make specificity wars unnecessary - Theme-agnostic by default — component styles reference tokens, not hardcoded colors
Layout System
Container Breakpoints
| Name | Max-width | Target |
|---|---|---|
| sm | 640px | Large phones |
| md | 768px | Tablets |
| lg | 1024px | Laptops |
| xl | 1280px | Desktops |
Grid Patterns
- Hero: Full viewport, vertically centered
- Content Grid: 2-col desktop → 1-col mobile
- Card Grid:
auto-fitwithminmax(300px, 1fr) - Sidebar:
2fr main + 1fr aside
Theme System
Every new project must include light/dark/system theme toggle:
/* Light theme — default */
:root { --bg: #ffffff; --text: #111827; }
/* Dark theme */
[data-theme="dark"] { --bg: #111827; --text: #f9fafb; }
/* System preference */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bg: #111827; --text: #f9fafb; }
}Handoff Deliverables
For each project, provide:
- Full CSS token system with all custom properties
- Layout container and grid specifications
- Component hierarchy diagram
- Responsive breakpoint map
- Theme toggle implementation
- Accessibility baseline (keyboard nav, focus states, contrast)
Reference Files
references/css-architecture.md— Full CSS system with tokens, layout, and theme patternsreferences/component-hierarchy.md— Component architecture and naming conventions