new-ui-surface

name	new-ui-surface
description	Build a new frontend component, panel, dashboard tab, or screen that matches the Matchday design language, works in light and dark, is keyboard and screen-reader accessible, reuses existing primitives, and ships with a Testing Library test.
when_to_use	Creating any new React component, adding a dashboard tab, building a modal or panel, redesigning an existing screen, or when a UI change needs to look and behave like the rest of the app.
argument-hint	[what you are building]
allowed-tools	Read, Edit, Write, Grep, Glob, Bash(npx vitest run src/components*), Bash(npx tsc --noEmit)

Building a new UI surface

The app has one visual voice — "Matchday", a broadcast-graphics look. New surfaces should be indistinguishable from existing ones. Reuse first, then compose, then style.

1. Reuse before you build

Read src/components/ui/index.ts before writing markup. It already exports:

Card / CardHeader / CardBody · Button · Badge · ProgressBar · Select · Checkbox · DatePicker · · · · · · · · · · · ·