ux-ui

name	ux-ui
description	UI/UX redesign and improvement skill for HeadsUp pages and components. Responsible for implementing the 'Soft Modern' design system across all pages. Use when: (1) Redesigning or improving any page's UI/layout, (2) Creating or refactoring reusable Phoenix function components, (3) Auditing current UI against the design system, (4) Updating design documentation in project_doc/docs/design/, (5) Building mobile-first responsive layouts, (6) Implementing the 3-column social feed layout pattern. Triggers on requests involving visual redesign, component extraction, UI improvements, mobile responsiveness, or design system compliance.
argument-hint	<page-name|component|audit|all>

HeadsUp UX/UI Redesign Skill

Redesign and improve HeadsUp pages using the "Soft Modern" aesthetic with mobile-first, component-driven architecture.

Source of Truth

1. Primary: project_doc/docs/design/ux-ui.md - Design system DNA
2. Secondary: project_doc/docs/design/style-guide.md - Brand foundations
3. Page specs: project_doc/docs/design/pages/*.md - Per-page wireframes

If guidance conflicts between files, ux-ui.md takes priority.

Design References

The UI follows a social media feed pattern inspired by these reference designs:

• 3-column layout: left sidebar (categories/nav), center feed, right sidebar (suggestions/popular)
• Warm blush background (#FFF5F2) with white cards
• Rounded corners (24px cards, 12px buttons), soft shadows
• Avatar-driven post cards with engagement metrics