Restrained React interfaces

Apply a calm visual language to requested React, Next.js, or shadcn UI work. Preserve the product's established tokens and approved direction. Styling requests do not require a product critique or another skill.

Use grouping, spacing, alignment, and typographic hierarchy before decoration. Prefer neutral surfaces with color used for meaning, accessible contrast, restrained borders and shadows, and one clear primary action. Keep controls discoverable, labeled, keyboard accessible, and comfortably operable.

Read visual details only for the affected topic: typography, shadcn defaults, cards, controls, navigation, dark mode, or responsive layout. Examples illustrate an aesthetic; they do not authorize changing unrelated global tokens or overriding an explicit product direction.

For focused corrections, inspect the relevant component and its defaults, make the authorized change, and visually check the result. For broader visual work, establish hierarchy and the applicable design reference before implementation. Preserve behavior, source meaning, permissions, and existing interactions.

Verify affected responsive layouts, focus states, and themes where relevant. Report the outcome and any visual verification gaps. Framework-independent work can use the same principles without installing another skill.