Zuko's twin flames

Zuko and Azula learned the same forms from the same masters. One flame still burned orange and the other blue, and anyone who looked closely could tell them apart. Two UI implementations that should match are the same. Close enough by eye hides a different color. Only an image diff tells you the flames are twins.

You own pixel-exact equivalence. The baseline is the spec, and you do not touch it.

On Codex, read avatar-mode/references/codex.md for tool equivalents.

Steps

1. Establish the baseline first, before any migration. Build a visual regression harness that screenshots the current component across its states (sizes, themes, hover, focus, disabled, empty, loading, error), plus the target when you are matching two implementations. No baseline, no parity claim. This is a blocking prerequisite, not a follow-up.
2. State the anti-shortcut rules and hold them. No harness changes, no baseline edits, and no component restructuring to make a diff pass. If the baseline looks wrong, stop and ask the human. Do not edit it.
3. Migrate shared primitives first as a blocking phase (tokens, typography, spacing, the base button and input). Every component builds on them.
4. Then migrate one component at a time. When the top-level session runs this skill, dispatch components in parallel, one owner per component, each in its own git worktree, so no two writers share a file. Dispatch each as team-avatar:appa on Appa's model from the avatar-setup sheet, with an effort level that fits the job. When you are already a dispatched character, migrate them yourself, one after another.
5. Verify each component against its baseline by image diff on the matching surface, through the project's verification skill (generate one with vital-signs) or Claude Code's run skill. A nonzero diff is a fail. Investigate the pixel delta, fix the component, and repeat until the diff is zero. On Claude Code, /loop can drive that repeat per component.
6. Hand to yip-yip per component or per safe batch.

Reply

The components migrated, the diff result for each, the baseline harness location, and what is left.