Skip to content
Get packs

Avoid Inline CSS Review

Reviews CSS for embedded and inline styles and flags violations of the rule

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

What it does

This skill teaches an AI agent a front-end best practice: styles should live in external stylesheets rather than being written directly into HTML tags or embedded in page markup. When reviewing stylesheets or components, the agent checks for inline and embedded CSS, flags the exact selectors or declarations that break the rule, and suggests moving them out. It still allows sensible exceptions such as critical above-the-fold CSS and dynamic values like CSS custom properties, and it asks the agent to check the rendered layout across breakpoints before proposing a fix.

Great for

  • Front-end developers reviewing a codebase for style hygiene and maintainability
  • Teams auditing legacy pages that have grown lots of inline style attributes
  • Reviewers who want a consistent checklist item for pull requests involving CSS

Skip it if

  • Projects that deliberately use CSS-in-JS or inline styles for dynamic component behaviour, where the rule's exceptions would apply and blanket removal could cause regressions
  • Non-technical users who need a finished design or layout, since the skill only guides review and suggests fixes

Try asking

  • “Review this component's styles and flag any inline style attributes I should move to an external stylesheet.”
  • “Check my HTML page for embedded CSS blocks and suggest how to extract the critical above-the-fold styles.”
  • “Audit this React component for inline styles and tell me which ones are valid dynamic CSS custom properties.”
Step-by-step guide: how to use Avoid Inline CSS ReviewInstall, 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.

    embedded-or-inline-css.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip embedded-or-inline-css.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

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

  • Point the agent at specific files or components so it can cite exact selectors and declarations.
  • Mention your framework or build setup, since the reference guide includes framework-specific guidance for moving styles out.
  • Ask the agent to verify layout at several breakpoints before accepting a suggested fix.

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.