Widget migration
Overview of the two migration tracks and a map of the docs.
How afl.com.au widgets move from aflm-web (FreeMarker, legacy JS, React islands) to packages/ui (React, Tailwind) rendered by apps/web from Optimizely Graph content. Each widget is on one of two tracks:
- Parity: copy the live widget and prove it identical to the live site, with the
migrate-afl-widgetskill. - Redesign: rebuild it from the new AFL design system and its Figma libraries, with no pixel parity, using the
redesign-afl-widgetskill. Overlapping widgets can be combined into one redesign.
The Software Factory runs one widget per Jira or Linear ticket; the ticket names the skill for the item's track.
| Piece | Where |
|---|---|
| Skills (per-widget procedure) | .agents/skills/migrate-afl-widget/SKILL.md (parity), .agents/skills/redesign-afl-widget/SKILL.md (redesign) |
| Design system (reference only) | Two-Circles/telstra-legacy-afl-design-system; tokens generated into packages/config/src/design-system.css |
| Parity harness (Playwright) | tools/parity |
| Widget components | packages/ui/src/<component>/ |
| Parity render route | apps/web/src/app/parity/[component]/[fixture] (only when PARITY=1) |
| Tracker (registry, dashboard, API, Jira tickets) | apps/migration-tracker |
| Legacy port audit | legacy-audit.md, legacy-audit.json |
Read next
Explanation
How-to
Reference