Skip to content
Get packs

First Contentful Paint Audit

Diagnoses and fixes slow first-paint page loads using measured bottlenecks, not guesses

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist-style playbook for one web performance metric, First Contentful Paint (the moment a page first shows text or an image). When installed, the agent is guided to measure FCP with Lighthouse or PageSpeed Insights, identify render-blocking CSS or JavaScript, slow server responses and heavy assets, and then recommend fixes such as inlining critical CSS and using preconnect for third-party origins. The skill's own text tells the agent to verify the real bottleneck before suggesting changes, and to name exact files or requests when reviewing code.

Great for

  • Front-end developers who want a structured second opinion when a page loads slowly
  • Teams preparing a performance review who want consistent FCP checks against the 1.8 second target
  • Students learning what affects first paint and how to measure it

Skip it if

  • Apps where the real problem is not load time (for example, slow API logic or database queries behind a page), since the skill focuses on rendering and asset loading
  • Non-technical users who cannot run Lighthouse or DevTools, because the advice depends on measurements the agent cannot take from a description alone
  • Safety-critical or regulated performance sign-off, since the skill is a brief checklist and points to an external reference for details

Try asking

  • “Our marketing homepage feels slow on mobile. Audit the first contentful paint and tell me what is blocking it.”
  • “Review this index.html and list the render-blocking scripts and styles that delay first paint.”
  • “Should I inline critical CSS for our product landing page? Check the FCP impact before recommending it.”
  • “Explain to my team what First Contentful Paint measures and what the 1.8 second target means.”
Step-by-step guide: how to use First Contentful Paint AuditInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    first-contentful-paint.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip first-contentful-paint.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip first-contentful-paint.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent a real Lighthouse, PageSpeed Insights, or DevTools report so it can base recommendations on measured data rather than assumptions.
  • Ask for the specific file or request that causes the delay; the skill asks for exact locations in its code review step.
  • For framework-specific fixes, have the agent consult the referenced rule page, which the skill points to for full implementation details.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.