UI Design

Contract-first static UI methodology using TypeScript interfaces and compound components.

Purpose

UI Design is the second step in the UI development workflow, following wireframing. Define TypeScript interfaces first (the "contract"), then implement compound components with Tailwind CSS styling. Server Components are the default.

When to Use

• After wireframes are approved (WIREFRAME.md exists)
• When implementing new UI components
• When creating reusable component libraries
• When defining component APIs with TypeScript

Core Principles

Contract-First Development