| name | matchday-ui-ux |
| description | Use when editing Matchday Commerce Autopilot UI, UX, styling, storefront/admin screens, product cards, campaign forms, favorite-team flows, demo polish, or fan marketplace presentation. |
Matchday UI/UX
Before changing src/app/storefront.tsx, src/app/matchday-dashboard.tsx, src/app/globals.css, product cards, campaign forms, favorite-team flows, or demo UX, align the work with these standards.
Experience Bar
- Make the storefront feel like a premium event-retail marketplace: clear merch hierarchy, confident spacing, sharp product imagery treatment, and obvious matchday context.
- Keep fan-first flows fast and legible. Favorite team selection, product discovery, promotions, and checkout-adjacent actions should feel direct, not like admin software.
- Preserve the split:
/ is the public storefront; /admin is the authenticated control room. Do not let backend management patterns leak into the fan-facing journey.
- Keep auth surfaces fan-first:
/register creates a normal fan profile, /login is the shared Auth.js sign-in surface, and admin access appears only for authorized users.
- Treat FIFA team and schedule data as real, static, and local. Do not invent demo teams, fixtures, kickoff times, results, or tables. Only product art and product copy may be demo-safe.
- Use brand-safe football retail language. Avoid implying official affiliation, licensing, live data, or guaranteed match outcomes unless the local data explicitly supports it.
UI Quality
- Design dense but breathable screens: useful information above the fold, responsive grids, and no oversized marketing filler where a working marketplace or control surface is expected.
- Build polished states for forms and actions: labels, helper text, disabled/loading states, validation errors, empty states, and success feedback should be visible and specific.
- Make accessibility part of the default: semantic controls, keyboard-reachable interactions, visible focus, sufficient contrast, meaningful alt text, and status messages that do not rely on color alone.
- At mobile sizes, prioritize scanability and thumb-friendly actions. Product cards, forms, and dashboards should not collapse into cramped or overlapping layouts.
- Keep visual treatment consistent across storefront and admin while respecting their different jobs: fan-facing surfaces can be more expressive; admin surfaces should stay operational, calm, and precise.
Implementation Habits
- Follow existing component, CSS, and data patterns before adding new abstractions.
- Keep money display at the UI boundary and preserve minor-unit handling in app logic.
- Do not add live sports APIs or nondeterministic behavior to make UI demos feel current.
- Verify changed UI in realistic desktop and mobile widths, especially forms, product grids, promotion states, and favorite-team flows.
