Design ux

Skill DROOdotFOO/agent-skills/skills/design-ux

Agent skills, autonomous agents, and MCP-companions for programming

Install

npx -y skills add DROOdotFOO/agent-skills --skill design-ux

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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).

SKILL.md

5.4 KB, as published. Nobody here has run it

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`

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