Skip to content
Get packs

Critical CSS Inlining

Guides the agent to find above-the-fold CSS to inline and defer the rest for faster page rendering

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

What it does

When installed, the agent reviews a page's stylesheet loading strategy and points out which styles are needed for the top part of the page (above the fold) and which can load later. It can propose inlining that critical CSS in the head of the page and loading the remaining CSS asynchronously, with the goal of improving rendering metrics like First Contentful Paint and Largest Contentful Paint. The skill is written as guidance and a checklist; it does not itself run tools.

Great for

  • Front-end developers trying to improve Core Web Vitals on a site with render-blocking CSS
  • Performance-minded designers who want to understand why a page feels slow to paint
  • Teams reviewing a build pipeline before adding critical CSS extraction

Skip it if

  • Simple sites where the stylesheet is already small or performance is not a concern, since the extra complexity may not pay off
  • Pages whose layout changes often, because hand-maintained critical CSS can drift out of sync and break styling; the skill itself says to automate extraction in the build
  • Non-developers without access to the HTML and CSS source, since the skill cannot measure a live page on its own

Try asking

  • “Review my homepage's CSS loading and tell me which styles should be inlined above the fold”
  • “Propose a build step that extracts critical CSS using critters or the critical package”
  • “Explain how inlining critical CSS would improve my LCP and FCP scores”
  • “Check the responsive breakpoints in my component styles for problems after inlining”
Step-by-step guide: how to use Critical CSS InliningInstall, 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.

    css-critical.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip css-critical.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip css-critical.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

  • Ask the agent to automate extraction in your build process rather than maintaining inlined CSS by hand
  • Verify the result with Lighthouse or a real browser across several breakpoints before shipping
  • Check the full rule page in references/rule.md for framework-specific guidance, since the main file is brief

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.