How does it help with LCP optimization?

It identifies the specific DOM element and size that triggered the Largest Contentful Paint and shows exactly when it appeared in the visual timeline relative to network requests.

Can I use this to compare mobile vs desktop loading?

Yes, by adjusting the Playwright browser context settings, you can simulate different devices and network conditions to compare loading experiences.

What specific performance metrics does Loading Story track?

The skill tracks Time to First Byte (TTFB), First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP), and DOM Interactive events using the PerformanceObserver API.

Does this skill require any external software?

Yes, it requires the Playwright MCP server to be connected and ImageMagick (specifically the convert and montage commands) to be installed on your system to generate the filmstrip.

Loading Story Performance Visualizer

Name: Loading Story Performance Visualizer
Author: anouar1991

byanouar1991

•

Analytics & Monitoring

Generates a visual narrative of web page loading by capturing timed screenshots, performance milestones, and network waterfall data.

Loading Story is a specialized diagnostic tool that transforms abstract performance metrics into a clear visual narrative. It captures critical Core Web Vitals such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP) while simultaneously taking timed screenshots to create an annotated filmstrip. By correlating visual render states with background network activity, it helps developers pinpoint exactly which resources are blocking the user experience, making it an essential tool for performance auditing, stakeholder reporting, and UX optimization.

Key Features

01Annotated filmstrip generation via ImageMagick integration

02Correlation of network waterfall data with paint events

03Automated tracking of Core Web Vitals (TTFB, FCP, LCP)

04Detailed narrative reports for performance bottleneck diagnosis

051 GitHub stars

06Timed screenshot sequencing for visual loading narratives

Use Cases

01Identifying render-blocking resources by visualizing the loading sequence alongside network requests

02Benchmarking perceived performance differences between development and production environments

03Creating visual evidence for stakeholders to justify performance optimization work

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude loading-story

For use in Claude.ai and ChatGPT

Download Skill