| name | design-fidelity |
| description | Drive implementation fidelity against design intent through compare-analyze-iterate loops. |
Design Fidelity
Use this skill after implementation exists and you need tighter visual/interaction fidelity.
Modes
quick: one comparison pass on highest-impact screens
deep: multi-pass across all breakpoints/states until score threshold
Iteration Workflow
- Load minimal design reference and target surface context.
- If source design artifact is missing, ask user before continuing.
- Compare implementation against source design for:
- layout/spacing
- typography
- token/contrast behavior
- Tailwind/daisyUI layering fidelity to project semantic tokens and brand overrides
- interaction states
- Apply corrections in small batches and re-check with screenshots.
Fidelity Scorecard
Score each pass (1-5):
- Layout fidelity
- Typography fidelity
- Color/token fidelity
- Interaction-state fidelity
- Motion fidelity
In deep mode, treat any category below 4 as requiring another pass.
Output Requirements
- Explicit list of unresolved deltas (if any)
- Screenshot evidence for corrected states
- Note of any intentional deviations and why