design-ux

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