What problem does it solve? Proving that a UI behaves correctly across a sequence of transitions — where causality and timing matter — cannot be done with single static screenshots. This Skill defines how to write saga cases that capture multi-step stories as ordered golden frames or one animated APNG golden, keeping them deterministic and pixel-exact. ## Core Features & Use Cases - Step-based storyboards: Write a saga as an ordered list of steps, each with a user-facing caption and an action against the fake world, producing one golden frame per step (<slug>.<id>.step-NN.png). - Animated APNG goldens: Record the real UI moving between steps as a single lossless APNG per leaf, with dead-delay stripping, frame deduplication, and gesture ring markers. - Determinism guarantees: Drive the same real entry point as other test kinds, keep byte-identity comparison, and write per-frame expected | actual | diff output on mismatch. - Use Case: When a requirement states "a message sent before I arrived never appears; one sent after I arrived does", author a 3–6 step saga that proves the transition rather than decomposing it into independent resting states. ## Quick Start Write a saga case under dev/requirements/saga that proves the transition described in my requirement, with captions and golden frames for each step.
