Visualization repair (broken-first)

Use this skill when charts or diagrams fail visibly (not for pixel-polish on working graphics).

1. Triage: “broken” vs “fine”

Treat as broken (fix):

Chart area has zero or collapsed height (Recharts ResponsiveContainer with height="100%" inside a flex parent with no resolved height).
SVG motion.* with invalid attributes (e.g. motion.circle missing cx/cy, or r as string where a number is required).
transform="translate(50%, 50%)" (or similar) on SVG <g> where percentages are unsupported or inconsistent across browsers—use viewBox + numeric translate(cx, cy).
motion.line using pathLength / dash animation in ways that Framer does not apply reliably to <line>—prefer <path d="M...L..."> or opacity/scale, or plain SVG + GSAP strokeDashoffset.
Rotation of SVG primitives without moving the transform origin to the shape center—wrap in <g transform="translate(cx,cy)"> and draw at (0,0), or use a non-SVG layer (e.g. bordered div with animate-spin and token colors).

Treat as out of scope unless requested:

Subtle animation timing, exact chart junk removal, or redesign for aesthetics only.