loading-story

What problem does it solve?

This Skill helps developers and performance engineers visualize and understand web page load experiences by turning timing milestones into a narrated visual story.

Core Features & Use Cases

• Capture First Paint, First Contentful Paint, and Largest Contentful Paint milestones using Playwright PerformanceObserver and Navigation Timing.
• Automatically capture screenshots at key milestones and annotate them with timing data for easy correlation.
• Generate an annotated filmstrip plus a narrative report to compare pages, deployments, or network conditions.
• Use cases include diagnosing slow pages, benchmarking changes between deployments, and communicating performance insights to stakeholders.

Quick Start

Run the loading-story workflow against your target URL to generate an annotated performance filmstrip.