SEEN/.blackbox/skills/tdvorak-fullstack/references/ui-standards.md

UI Product Standards

Read this file when designing screens, choosing components, or judging whether a UI is ready to ship.

Product Bar

• Build interfaces that feel like real production software, not prototypes.
• Optimize for consistent layout, clear hierarchy, predictable UX, strong performance, and scalable composition.
• Keep the interface calm, premium, structured, and intentional.

Design Direction

• Use generous whitespace and a steady layout rhythm.
• Keep typography clean, readable, and deliberate.
• Use refined color with restraint.
• Prefer modern minimalism over visual noise.
• Avoid cluttered layouts, inconsistent spacing, and generic AI-looking compositions.

Component Strategy

• Use a design-system-first mindset.
• Check Magic UI MCP first when it is available.
• Check shadcn or shadcn-solid before building custom components.
• Read /home/tdvorak/.codex/skills/frontend-design/SKILL.md for design-heavy or blank-canvas frontend work.
• Inspect existing project components before creating something new.
• Use Tailwind utilities where practical and prefer composition over custom overrides.

Interaction and Motion

• Use subtle transitions, clear hover states, and responsive feedback.
• Keep animation in service of clarity rather than decoration.
• Avoid heavy or distracting motion.
• Prioritize performance.
• Use https://haptics.lochie.me/ as a motion reference when useful.

Quality Targets

Aim for the polish level associated with products such as Linear, Vercel, Stripe Dashboard, Supabase, and Notion without copying them directly.

UI Rules

• Make layouts mobile responsive by default.
• Support dark and light mode unless the task clearly does not need both.
• Keep components accessible.
• Use a predictable spacing scale and consistent border radii.
• Avoid emojis in the UI unless the user explicitly asks for them.

Final Review

Before finishing, confirm that the interface has:

1. Clean whitespace
2. Consistent spacing
3. Readable typography
4. Strong visual hierarchy
5. Balanced layout
6. Responsive behavior

If the result still looks generic or autogenerated, redesign it.