Skip to content
Get packs

CSS Custom Properties Review

Reviews CSS for hard-coded colors, spacing and font sizes that should become design tokens

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

What it does

When installed, the agent checks stylesheets for hard-coded colour, spacing and font-size values and suggests moving them into CSS custom properties (variables) defined on :root, replacing repeated values with var() references. It can also explain how custom properties cascade and differ from preprocessor variables, and review responsive and interaction states for places where the rule is broken. The skill is a checklist-style guide drawn from the Front-End Checklist rule page; it adds no executable tooling of its own.

Great for

  • Front-end developers tidying up a CSS codebase before a rebrand or dark mode
  • Designers or developers learning how design tokens work in plain CSS
  • Teams reviewing component styles for consistency across breakpoints

Skip it if

  • Projects that already use a full design-token pipeline and need tool-specific output, since the skill gives only general CSS guidance
  • Non-technical users wanting visual design output; it reviews code, not layouts, and does not render pages (the skill's wording about checking rendered layout is not backed by any tooling in the files)

Try asking

  • “Find hard-coded colours and spacing values in this stylesheet that should be CSS custom properties”
  • “Extract repeated values in this CSS file into :root variables and replace them with var() calls”
  • “Explain how CSS custom properties differ from Sass variables for theming”
Step-by-step guide: how to use CSS Custom Properties 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.

    css-custom-properties.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

  • Paste the stylesheet or component file you want reviewed so the agent can point to exact selectors and declarations.
  • Mention your target browsers or breakpoints, since the skill's advice on rendered states depends on context the agent cannot see on its own.
  • Review suggested refactors yourself before applying them across a large codebase, as the agent edits based on text alone.

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.