ui-designlisted

# Skill: UI Design This skill defines how to implement or review renderer UI so it looks unified with the existing app and follows a high-quality product design baseline. Primary sources: - `docs/frontend/components.md` - `docs/guidelines/code-standards.md` ## Scope ### Use when - Implementing or refining renderer UI components, pages, or visual states. - Harmonizing new UI with existing app layout, spacing, typography, and interaction patterns. - Validating design consistency before final review. ### Do NOT use when - Working on main/preload architecture without renderer UI impact. - Defining test-suite routing or coverage strategy. ## Design baseline 1. Vercel-inspired white theme direction - Bright base surfaces and subtle neutral layers. - Clean borders and restrained shadows. - High text contrast and clear hierarchy. 2. Repository-first consistency - Reuse existing Tailwind and shadcn patterns. - Respect established component behavior and spacing rhythm. - Prefer extending current primitives over introducing custom one-off controls. 3. UX quality requirements - Clear information hierarchy and predictable navigation. - Visible interactive states (hover, focus, active, disabled). - Keyboard-friendly flows for primary actions. 4. Accessibility defaults - Sufficient contrast in text and controls. - Focus states are always visible. - Meaning is not conveyed by color alone. 5. Responsive behavior - UI must remain usable on deskt