Guide · Agent skill
How to use the First Contentful Paint audit agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The first-contentful-paint skill is a checklist-style playbook for an AI agent auditing one web performance metric: First Contentful Paint, the moment a page first shows text or an image. This guide explains what the skill makes the agent do, how to install it, how to trigger it with plain requests, and where it falls short. By the end you will be able to ask an agent to measure FCP and review the likely causes of a slow first paint.
First Contentful Paint Auditthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the first-contentful-paint skill ZIP from the directory page.
- 2Unzip into your skills folder. Extract it into ~/.claude/skills/ for personal use, or into .claude/skills/ in a project.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill.
- 4Measure FCP. Run Lighthouse or PageSpeed Insights on the page and note the first contentful paint time.
- 5Ask with a natural request. Describe the slow page and include your measurement so the agent can check the real bottleneck.
- 6Review the fixes. Check the named files and requests, then verify each suggested change with a new measurement.
What the first-contentful-paint skill makes the agent do
Agent skills are folders of instructions that an AI agent loads when a task matches their description. This skill covers one metric. Its description tells the agent to use it when auditing slow page loads, heavy assets, or rendering delays related to first contentful paint.
The skill asks the agent to measure FCP with Lighthouse or PageSpeed Insights and check whether the first text or image appears within 1.8 seconds. It then looks for render-blocking CSS or JavaScript, slow server response and heavy assets, and suggests fixes such as inlining critical CSS and using preconnect for third-party origins.
- Target: first content under 1.8 seconds; the reference rates 1.8 to 3 seconds as needs improvement and over 3 seconds as poor.
- Its own text says to verify the real bottleneck in DevTools, Lighthouse or field data before recommending changes.
- When reviewing code, it asks the agent to name exact files or requests that add unnecessary network, CPU or layout cost.
Install the skill from the ZIP download
Download the ZIP for the first-contentful-paint skill from the directory page. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want it available only for that project.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill there. The unzipped folder should contain SKILL.md and a references folder with rule.md.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the problem in plain words and mention the page or the measurement you have. The agent matches your request against the skill description, which centres on slow page loads, heavy assets and rendering delays.
Including a measurement helps. The skill is built around checking the real bottleneck, so a Lighthouse report or a PageSpeed Insights result gives the agent something concrete to work from.
- "My landing page feels slow to show anything. Audit first contentful paint and tell me what blocks rendering."
- "Here is the Lighthouse report for our product page. Is FCP the problem, and what should we fix first?"
- "Review the head of index.html and our CSS imports for render-blocking resources that delay first paint."
- "Check whether our checkout page meets the 1.8 second FCP target and name the files behind any slow requests."
What the skill needs and what it does not do
The skill lists no requirements, runs no scripts and does not use the network. It is a set of written instructions only. The measurements, however, have to come from you or from the agent's access to your tools. The agent cannot run Lighthouse or DevTools from a description alone, so the quality of the advice depends on the data you provide.
Because it runs no scripts and makes no network calls, the skill itself does not send your code or measurements anywhere. Whatever the agent does with your project is governed by the environment you run it in.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and references/rule.md
- Licence: MIT
Tips for getting useful results
Ask for the measurement method along with the findings. The code review guidance asks the agent to describe how each issue was confirmed, which makes the output easier to check.
For full implementation details and framework-specific guidance, the skill points to references/rule.md. Ask the agent to read it when you need examples such as the render-blocking stylesheet pattern.
- Run Lighthouse or PageSpeed Insights first and paste the FCP figure.
- Ask for exact file names and request URLs rather than general advice.
- Treat the output as a checklist to verify, not a final performance sign-off.
What people use it for
- Finding render-blocking stylesheets or scripts in a page's head before a performance review.
- Checking whether a landing page meets the 1.8 second FCP target and naming the assets behind the delay.
- Reviewing third-party origins that could benefit from preconnect hints.
- Teaching students how first paint is affected by the HTML, DOM, CSSOM and render tree path.
Frequently asked questions
How do I install the first contentful paint agent skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the first-contentful-paint skill need anything installed?
The skill lists no requirements, runs no scripts and does not use the network. You still need a way to measure FCP, such as Lighthouse, PageSpeed Insights or DevTools, because the advice depends on real measurements.
Is the first-contentful-paint skill free?
The skill is released under the MIT licence. The source does not mention pricing, so check the directory page for any terms that apply to the download.
What is a good FCP score?
The skill targets first content within 1.8 seconds. The reference rates 0 to 1.8 seconds as good, 1.8 to 3 seconds as needs improvement, and over 3 seconds as poor.
Can the agent measure FCP for me?
The skill tells the agent to measure with Lighthouse or PageSpeed Insights, but the agent cannot take those measurements from a description alone. Provide a report or run the tool yourself and share the result.
Is this skill a good alternative to a full performance audit tool?
It is a brief checklist focused on rendering and asset loading for one metric. It is not a replacement for Lighthouse, DevTools or field data, and it is not suited to regulated performance sign-off.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, a student or a team preparing a performance review and want a structured second opinion on a slow first paint. Pick something else if the slowness comes from API logic or database queries, if you cannot run Lighthouse or DevTools, or if you need formal performance sign-off, since this is a short checklist that points to an external reference for details.
Download the skill