Iron Law

NEVER output raw hex codes, hardcoded font sizes, or raw spacing values. ALL colors → Theme.of(context).colorScheme.*, ALL spacing → AppSpacing.*, ALL typography → Theme.of(context).textTheme.*. Pixel-perfect means visually identical, not token-violating.

Screenshot-to-Flutter Skill

Purpose

Replicate a UI screenshot as a production-ready Flutter widget with pixel-perfect visual accuracy, while staying compliant with your project's design system.

Phase 1 — Screenshot Analysis (mandatory before writing code)

Extract these properties visually from the screenshot. Document them before coding.