How to use the CSS File Size Audit agent skill

What does the css-file-size skill make the agent do?

Large CSS files are render-blocking. The browser has to download and parse all CSS before it can start painting, so a big stylesheet can delay when a page first shows content. This skill tells the agent to look for that problem in a site's stylesheets.

The skill describes a workflow. The agent checks the size of CSS files and flags any that exceed a rough guideline, for example over 50KB gzipped. Before recommending changes, it is instructed to confirm the real bottleneck using browser DevTools, Lighthouse, or field data. Only then does it suggest fixes such as minifying CSS, removing unused styles, or splitting large stylesheets into smaller, page-specific files.

• Check: audit CSS file sizes against the guideline
• Verify: confirm the bottleneck with DevTools, Lighthouse, or field data
• Fix: minify, remove unused styles, or split stylesheets by page

How do you install the css-file-size skill?

Download the ZIP of the skill from this page and unzip it. You can install it in one of two places. For a personal setup available across your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside the project
• Claude apps: Settings → Capabilities → Skills, then upload

What files are in the skill?

The skill contains two files. SKILL.md holds the main instructions, including the name, description, the Check, Fix, Explain and Code Review steps, and a quick reference. references/rule.md holds longer background and code examples, such as a PurgeCSS setup for PostCSS and an example of minified CSS, which the agent can consult for more detail.

• SKILL.md: main instructions and checklist
• references/rule.md: extended guidance and code examples

How do you trigger the skill with a natural request?

You do not need a special command. Describe the problem in plain language and mention the stylesheets or the slowdown. The skill's description covers slow page loads, heavy assets, and rendering delays related to CSS size, so requests about those topics are the ones it is meant to handle.

Be specific about the site or files if you can. Naming the page or folder helps the agent focus its audit.

• "Audit the CSS on our homepage for file size problems."
• "Our pages render slowly. Check whether large stylesheets are the cause."
• "Review the stylesheets in src/styles for anything over the recommended size."
• "Give me a checklist-style CSS performance review before we ship."

What should you expect from an audit?

A good audit follows the skill's order. The agent first measures or inspects stylesheet sizes, then names the exact files that look heavy and the measurement method used. It should separate suspected causes from confirmed ones. If the evidence points to images, JavaScript, or server response time, the skill does not cover those, so the agent should say so rather than guess.

Treat the output as a list of candidates to review. Ask the agent to explain which tool it used to confirm each bottleneck.

• Exact files flagged and their sizes
• The measurement method used (DevTools, Lighthouse, or field data)
• Suggested fixes: minify, remove unused CSS, or split files

What about safety and review?

The skill does not run scripts and does not use the network, according to its listing. It also requires nothing beyond the instructions themselves. The skill recommends measuring before changing anything, and changes to live stylesheets can break page layout, so review every suggested change yourself and test it before deploying.

Do not let the agent apply changes to production stylesheets without a human reviewing them.

• Runs scripts: no
• Uses network: no
• Requires: nothing listed
• Review and test every change before it reaches a live site

What tips help you get better results?

Give the agent real data where you can. A DevTools coverage report or a Lighthouse result gives it something concrete to reason about. Start with the largest stylesheets, since they are the most likely to matter. If you use Tailwind or Bootstrap, mention it, because the reference material notes that these frameworks often leave many unused classes.

• Provide Lighthouse or DevTools output when you have it
• Start with the biggest stylesheets
• Mention your framework (for example Tailwind or Bootstrap)
• Ask for one fix at a time and re-measure