design-uxlisted

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).
DROOdotFOO/agent-skills · ★ 1 · Web & Frontend · score 75

Install: claude install-skill DROOdotFOO/agent-skills

# 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