# Design UX

> 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), designing API/module/public-surface interfaces (use interface-designer skill), or auditing an already-built page for AI-generated tells before shipping (use frontend-slop-audit skill).

- Skill: `droodotfoo/design-ux` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add droodotfoo/design-ux`
- Raw SKILL.md: https://api.skillmd.com/api/skills/droodotfoo/design-ux/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: DROOdotFOO (https://skillmd.com/u/droodotfoo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/droodotfoo/design-ux

---


# 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)
- Motion primitives, scroll choreography, and reduced-motion contracts
- 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
- Motion, scroll animation, and reduced-motion behavior
- Choosing a design system foundation vs. building on tokens
- 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`           |
| Scroll animation, motion primitives, choreography | `web/motion.md`                |
| Choosing a design system vs. rolling your own   | `web/design-system-selection.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

- `frontend-slop-audit` -- for auditing an already-built page against AI-generated tells
- `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                  |
| Scroll position in React state     | Re-renders every frame, collapses on mobile   | Motion values, IntersectionObserver, or CSS timelines |
| Hand-rolling an official system    | Drifts on upgrade, inherits none of its a11y  | Install the real package, theme its documented surface |

## 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