| name | design-ux |
| description | UI/UX design patterns and design system architecture. TRIGGER when: working on component design, layout/grid decisions, design tokens, color palettes, typography, accessibility (WCAG), responsive design, TUI aesthetics, or creating DESIGN.md documentation. Covers React, Tailwind CSS, terminal UI, and mobile patterns with a monospace-first, constraint-based design philosophy. DO NOT TRIGGER when: writing React/TypeScript code logic (use droo-stack skill), building Raxol TUI framework features (use raxol skill), working with CSS-in-JS runtime concerns (this skill covers design decisions, not runtime), or designing API/module/public-surface interfaces (use interface-designer skill).
|
| metadata | {"author":"DROOdotFOO","version":"1.0.0","tags":"design, ux, ui, tailwind, react, accessibility, tokens, typography, tui"} |
design-ux
Constraint-based design. Monospace-first. Every pixel earns its place. Zero layout shift. The terminal is the design system's origin; web and mobile are projections from it.
Design decisions flow from constraints, not decoration. Start from the character grid, add only what communicates. If a visual element does not serve information hierarchy, remove it.
What You Get
- Design token systems and theming architecture
- Component composition patterns (React, TUI, mobile)
- Typography, color, and spacing decisions with constraint rationale
- Accessibility audit checklist (WCAG AA)
- Terminal-first design principles for monospace layouts
When to Use
- Component architecture and composition patterns
- Design token systems and theming
- Typography, color, and spacing decisions
- Accessibility and WCAG compliance
- Layout and grid systems
- Terminal UI design principles
- Mobile/responsive design
- Design documentation (DESIGN.md)
When NOT to Use
- Code-level patterns (TypeScript, React hooks, error handling) -- use
droo-stack
- Raxol framework API (TEA agents, headless sessions, MCP tools) -- use
raxol
- Claude/Anthropic SDK integration -- use
claude-api
- Solidity/smart contract design -- use
solidity-auditor
Reading Guide
| Working on | Read |
|---|
| Design philosophy, constraint-based thinking | shared/principles.md |
| Accessibility, WCAG, keyboard, screen readers | shared/accessibility.md |
| Design token systems, dark/light mode | shared/design-tokens.md |
| React component architecture, composition | web/react-components.md |
| Tailwind utility patterns, DROO-flavored config | web/tailwind-patterns.md |
| Grid, spacing, responsive breakpoints | web/layout-grid.md |
| Type scale, font stacks, vertical rhythm | web/typography.md |
| Color palettes, semantic tokens, contrast | web/color-systems.md |
| Terminal UI layout, box-drawing, constraints | terminal/tui-layout.md |
| Monospace design language, density, ASCII | terminal/terminal-aesthetic.md |
| Mobile/responsive/touch, native patterns | mobile/responsive-native.md |
| "Design It Twice" agent methodology | process/design-twice.md |
| DESIGN.md template, living documentation | process/design-docs.md |
See also
droo-stack -- for code-level patterns (TypeScript, React hooks, error handling)raxol -- for Raxol TUI framework API (TEA agents, headless sessions)ethskills -- for Ethereum/dApp ecosystem tooling
Common Pitfalls
| Mistake | Why It Fails | Better Approach |
|---|
| Fixed-width containers | Breaks responsive design and terminal scaling | Use min/max/fit-content constraints |
| Raw hex colors in components | Breaks theming, dark mode fails silently | Use semantic tokens (text-foreground, bg-surface) |
| Decorative visual elements | Noise, obscures info hierarchy | Remove if it doesn't communicate or differentiate |
| Color-only differentiation | Excludes colorblind users (WCAG fail) | Combine color with icon, shape, or text label |
| Keyboard-inaccessible components | Excludes keyboard-only users (WCAG AA fail) | Test all interactive components with Tab key |
| Giant component with boolean props | Unmaintainable, untestable API surface | Compose small focused components |
| Pixel-perfect layouts | Fragile across viewports and font sizes | Constraint-based sizing from content |
Key Conventions
- Terminal is origin: Design for the character grid first, then project to pixel-based media
- Semantic over literal: Use token names (
text-foreground, bg-surface), never raw values in components
- Composition over configuration: Small, composable components beat mega-components with boolean props
- Constraint-based sizing: Prefer
min/max/fit-content over fixed pixel widths
- Monospace default: Sans-serif is the exception, not the rule
