You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1.9 KiB

Raw Blame History

Reusable Metric Card Component Prompt

Create a reusable MetricCard for <target feature or shared location>. Inspect the existing Card, Badge, Skeleton, typography, and dashboard patterns before implementation.

React contract

Props: title, value, optional unit, trend, status, description, icon, isLoading, onClick, and className.
Keep value types display-friendly: <string | number | domain formatter>.
Make the whole card interactive only when onClick is provided.
Prefer composition for optional footer or chart content: <children or footer slot requirements>.
Forward the root element ref and extend suitable native element attributes.

Styling theme: operational signal

Use a calm bg-card surface with a thin border-border outline.
The metric value is the strongest element; title and timestamp are quieter.
Use tabular or mono numerals only when consistent with the target dashboard.
Status is communicated by text/icon plus color, never color alone.
A narrow accent, badge, or icon may show health without flooding the card with color.
Hover elevation appears only for interactive cards.
Loading skeletons preserve the final card dimensions.

Responsive behavior

Minimum usable width: <for example 220px>.
Value and unit must not overlap.
Long titles truncate or wrap to two lines.
Footer content stacks below the metric on narrow screens.

Acceptance criteria

The card works with partial data and has a clear unavailable state.
Loading, healthy, warning, critical, and neutral presentations are defined.
An interactive card supports mouse, Enter, and Space with visible focus.
The public API contains no API calls, routing, or feature-specific auth.
Light and dark themes use semantic tokens.

Run focused linting allowed by the repository instructions and finish with a simple TL;DR.

1.9 KiB Raw Blame History