Building Frontend Components

Iron Law

NO COMPONENT CODE WITHOUT PRE-IMPLEMENTATION CHECKLIST FIRST.

Wrote JSX before checking for existing design system components? Delete it. Styled before planning keyboard interaction? Delete it. These aren't optional steps.

Pre-Implementation Checklist

Before writing ANY component code:

1. Check for existing design system — tokens, components, patterns already in repo
2. Document component requirements — states (loading, error, empty), variants, accessibility needs
3. Plan keyboard interaction — focus order, shortcuts, trap requirements

Do NOT skip this for "simple" components. Simple components have accessibility bugs too.

New project with no design system? See references/patterns.md → "Design Thinking" for direction-setting.