Guide · Agent skill
How to use the Critical CSS Inlining agent skill (css-critical)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The css-critical skill is an agent skill from the Front-End Checklist collection that guides an AI agent through reviewing a page's stylesheet loading strategy. It helps you separate the CSS needed for the top of the page from the CSS that can wait, with the aim of improving First Contentful Paint and Largest Contentful Paint. This guide explains what the skill does, how to install it, how to ask for it, and where it fits in a real project.
Critical CSS Inliningthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the css-critical skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP.
- 4Provide the source files. Share the page's HTML and stylesheet files with the agent.
- 5Ask a natural question. Describe the page and ask which CSS to inline and which to load asynchronously.
- 6Review the proposal. Check the suggested critical CSS at each breakpoint before applying it.
- 7Automate and measure. Use critical, critters or Lighthouse to extract and measure, and move extraction into your build.
What the css-critical skill makes the agent do
When the skill is active, the agent reviews how a page loads its CSS. It identifies the styles needed to render above-the-fold content, which are the critical styles, and the styles that can load later. It can then propose inlining the critical CSS in the head of the page and loading the remaining CSS asynchronously.
The skill is written as guidance and a checklist. It does not run tools itself, so the agent reasons over the HTML and stylesheet files you give it and proposes changes for you to apply.
- Check: identify above-the-fold styles to inline and non-critical styles to load asynchronously
- Fix: extract and inline critical CSS, then load the rest asynchronously
- Explain: how critical CSS reduces render-blocking resources and improves FCP and LCP
- Code review: flag exact selectors, declarations or breakpoints that conflict with the rule
Install the css-critical skill
Download the css-critical ZIP from this page. Unzip it into one of two locations. For a personal skill available across your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP there.
The skill package contains SKILL.md, which holds the instructions, and references/rule.md, which has fuller implementation details and code examples.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
What you need before you start
The skill needs access to your project's HTML and stylesheet files. Without them, the agent has nothing to analyse. It cannot measure a live page on its own, so you should supply the source or measurement output.
The skill names optional tools for extraction and measurement: critical, critters, or Lighthouse. You do not need them to get guidance, but they are the tools the skill recommends for extracting critical CSS and checking results.
- Access to the project's HTML and stylesheet files
- Optional: critical, critters, or Lighthouse for extraction and measurement
Trigger the skill with natural requests
The skill's description tells the agent when to use it: reviewing stylesheets, component styles and responsive behaviour related to inlining critical CSS for faster rendering. Ask in plain language that mentions these topics, and name the page or files involved.
The description also asks the agent to check the rendered layout across breakpoints and interaction states before proposing a fix, so mention the breakpoints you care about if they matter.
- "Review the CSS loading on index.html and tell me which styles are above the fold."
- "Suggest what to inline in the head of this page and what to load asynchronously."
- "Why does this page feel slow to paint? Check its stylesheets."
- "Check the styles for the header and hero at mobile and desktop widths before proposing critical CSS."
Examples of what the agent produces
The rule reference shows the general shape of the output: a style block in the head containing the minimum rules for above-the-fold content, such as base body typography, a sticky header and a hero section. The remaining stylesheet is loaded without blocking the first render.
Treat the example as a pattern, not a drop-in file. Your selectors and breakpoints will differ.
<head>
<!-- Critical CSS inlined in the head -->
<style>
/* Critical styles for above-the-fold content */
body { margin: 0; line-height: 1.6; }
</style>
</head>Safety notes: scripts and network
This skill runs no scripts and uses no network access, according to its listing. It works from the files you provide. Review any extraction tool commands yourself before running them on your build, since the skill does not execute them for you.
Because the skill recommends automating extraction in the build rather than hand-maintaining critical CSS, check any generated output after changes to layout.
- Runs scripts: no
- Uses network: no
Tips for good results
Give the agent the real page and its full stylesheet set, not a summary. Critical CSS decisions depend on exact selectors and the layout at each breakpoint.
Keep hand-written critical CSS small. The skill's quick reference suggests about 14KB of above-the-fold CSS in the head. Automate extraction in your build so the inlined CSS stays in sync as the layout changes.
- Provide complete HTML and CSS files
- Ask for checks at specific breakpoints
- Automate extraction in the build process instead of maintaining it by hand
What people use it for
- Reviewing a marketing homepage to find which header and hero styles belong in the head
- Explaining to a designer why a page paints slowly due to render-blocking stylesheets
- Checking header and hero styles at mobile and desktop widths before inlining
- Reviewing a build pipeline before adding critical CSS extraction
Frequently asked questions
Is the css-critical skill free to use?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms.
What do I need to use the css-critical skill?
You need access to your project's HTML and stylesheet files. Optional tools named in the skill are critical, critters or Lighthouse for extraction and measurement.
Where do I install the css-critical skill?
Unzip the ZIP into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it under Settings, Capabilities, Skills in the Claude apps.
Does the skill run scripts or access the network?
According to its listing, the skill runs no scripts and uses no network. It provides guidance and a checklist, and does not run tools itself.
Can the skill measure my live page?
No. The skill cannot measure a live page on its own, so you need to provide source files or measurement output such as from Lighthouse.
When should I not use critical CSS?
Skip it for simple sites where the stylesheet is already small or performance is not a concern, since the extra complexity may not pay off. Pages with frequently changing layouts are also a poor fit because hand-maintained critical CSS can drift and break styling.
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 css-critical if you are a front-end developer or performance-minded designer working on a site with render-blocking CSS and you can supply its HTML and stylesheets. Pick something else if your stylesheet is already small, your layout changes often, or you cannot share the source, because the skill cannot measure a live page or maintain critical CSS for you.
Download the skill