Guide · Agent skill
How to use the Avoid Inline CSS Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The embedded-or-inline-css skill is a review guide for AI agents. It teaches the agent to check whether styles are written directly into HTML tags or placed in embedded style blocks, and to suggest moving them into external stylesheets. This guide explains what the skill does, how to install it, how to trigger it with plain requests, and where its limits are, so you can use it on your own front-end code.
Avoid Inline CSS Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from the page where you found this guide.
- 2Unzip the skill. Unzip 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 ZIP.
- 4Ask for a review. Describe the stylesheets or components to check in plain language.
- 5Check exceptions. Confirm that critical CSS, dynamic custom properties and other exceptions are kept where they belong.
- 6Verify the layout. Check the rendered layout across breakpoints before applying the suggested fix.
What is an agent skill and what does this one do?
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This skill covers one front-end best practice: styles should live in external stylesheets rather than in inline style attributes or embedded style tags.
When reviewing stylesheets or components, the agent looks for inline and embedded CSS, flags the exact selectors, declarations or breakpoints that break the rule, and suggests moving them out. The source notes that inline CSS cannot be cached separately, increases HTML payload, breaks separation of concerns, and is harder to maintain in large codebases.
- Flags inline style attributes and embedded style blocks that violate the rule
- Points to exact selectors, declarations or breakpoints in the rendered UI
- Suggests moving styles to external CSS files or CSS-in-JS
- Keeps exceptions such as critical above-the-fold CSS and CSS custom properties
Install the skill
Download the skill ZIP from the page where you found this guide. Then choose one of the following options.
For your personal skills, unzip the file into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal: unzip into ~/.claude/skills/
- Project only: unzip into .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Check the files in the skill
The skill contains two files. SKILL.md holds the rule summary, the check, the fix steps and the review instructions. references/rule.md holds fuller explanations and code examples, including framework-specific guidance.
- SKILL.md: name, description, quick reference, check, fix and code review steps
- references/rule.md: detailed rule page with bad and good examples
How to trigger the skill with natural requests
You do not need a special command. Describe the review task in plain language that mentions stylesheets, component styles or responsive behaviour. The skill's description focuses on those terms, so requests that use them are most likely to load it.
Ask the agent to check the rendered layout across breakpoints and interaction states before it proposes a fix, since the skill asks for this step.
- Review the styles in this component and tell me if any inline or embedded CSS should move to a stylesheet
- Check our legacy pages for inline style attributes and suggest where to move them
- Review this pull request's CSS for embedded style blocks and responsive issues
What the agent will and will not change
The skill guides review and suggests fixes. It does not provide a finished design or layout. Expect a list of flagged selectors or declarations with suggested moves to external CSS, not a rebuilt page.
Keep the listed exceptions in mind. Critical above-the-fold CSS may stay inline for performance, and dynamic values such as CSS custom properties may stay inline. Projects that use CSS-in-JS or inline styles for dynamic component behaviour should not remove everything blindly, because this could cause regressions.
Safety notes and requirements
The source lists no requirements. It does not run scripts and does not use the network, so the skill only reads and reviews the code and text you give the agent.
Still review any suggested change before you merge it, and check the rendered layout across breakpoints after moving styles.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Tips for better reviews
Point the agent at a specific component or folder so it can give exact selectors. For large audits, review one area at a time. Ask for the reasons behind each flag so you can judge the exceptions yourself.
The skill's estimated review time is 15 minutes according to its metadata, and its difficulty is listed as beginner.
- Name the files or components to review
- Ask for exact selectors and declarations
- Ask the agent to note any critical CSS or custom property exceptions
- Check responsive behaviour before accepting a change
What people use it for
- Auditing a legacy page that has many inline style attributes
- Reviewing a pull request that adds a style block to a component
- Finding styles that should move to external stylesheets for caching and maintainability
- Creating a consistent CSS checklist item for code reviews
Frequently asked questions
How do I install the embedded-or-inline-css skill?
Download the skill ZIP from the page where you found this guide. Unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project, or upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the skill require?
The source lists no requirements. The skill does not run scripts and does not use the network.
Is the skill free to use?
The skill is published under the MIT licence. The source does not list any price.
Does the skill remove all inline CSS?
No. It keeps exceptions such as critical above-the-fold CSS and dynamic values like CSS custom properties. Projects that use inline styles for dynamic component behaviour should review changes carefully to avoid regressions.
Why should CSS be in external files?
According to the source, inline CSS cannot be cached separately, increases HTML payload, breaks separation of concerns and is harder to maintain in large codebases. External stylesheets address these points.
Who is this skill not for?
It is not for non-technical users who need a finished design or layout, because the skill only guides review and suggests fixes. It is also a poor fit for projects that rely on inline styles for dynamic behaviour without reviewing the exceptions.
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
This skill suits front-end developers and teams who want a consistent, beginner-friendly check for inline and embedded CSS during reviews or legacy audits. It is not a design tool and will not produce a finished layout. If your project depends on CSS-in-JS or inline styles for dynamic behaviour, review each suggestion carefully or choose a review approach that handles those cases.
Download the skill