design-detailslisted

# design-details The details are the product. Spacing, motion, copy, color, type, focus order, and the events you instrument — each one is small on its own, and together they decide whether the UI feels considered or generic. This is the parent skill. It holds the shared protocols every sub-skill depends on, and it routes work to the right focused mode. Each sub-skill is also invokable on its own when the user already knows what they need. --- ## Design System Protocol **Before suggesting any value — spacing, color, type size, radius, shadow, easing, duration — check for existing tokens, CSS variables, or component conventions in the codebase.** Scan for: - CSS custom properties (`--color-*`, `--space-*`, `--text-*`, `--radius-*`, `--ease-*`, `--duration-*`) - Tailwind config (`tailwind.config.js/ts`) for custom tokens - Design token files (`tokens.json`, `theme.ts`, etc.) - SwiftUI / RN theme objects (`Theme.swift`, `theme.ts`, design system packages) - Existing component patterns — how are buttons, cards, inputs, modals already built? **Rule: propose adjustments using the existing system. Never override — suggest.** If a token exists for something, use it. If a value doesn't exist in the system, note the gap and propose adding it to the design system rather than hardcoding. This applies to every sub-skill below. --- ## Context Gathering Protocol Design work without context produces generic output. Before any audit or change, confirm you have this minimum: - **Ta