CSS Custom Properties
Testing & Qualitycss-custom-propertiesCSS Custom Properties is an Agent Skill for testing & quality published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS custom properties for design tokens. Check the rendered layout across breakpoints and interaction states before proposing a fix.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/css-custom-properties/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/css-custom-properties, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Use CSS custom properties for design tokens
Hard-coded color values and magic numbers scattered across CSS files make global changes (a rebrand, a dark mode, a spacing adjustment) require finding and updating dozens of individual lines. Custom properties centralize these values so one change propagates everywhere — and enable runtime theming that preprocessor variables cannot.
Quick Reference
- Define reusable values as --variable-name on :root
- Custom properties cascade and inherit — they can be overridden at any scope
- Use var(--name, fallback) to provide fallback values
- Custom properties are runtime values — JavaScript can read and write them
Check
Find hard-coded color values, spacing values, and font sizes in this CSS file that should be replaced with CSS custom properties.
Fix
Extract repeated and meaningful values into CSS custom properties on :root and replace all usages with var() references.
Explain
Explain CSS custom properties: how they differ from preprocessor variables, how cascade and inheritance work, and how to use them for theming.
Code Review
Review stylesheets, component styles, and responsive states related to Use CSS custom properties for design tokens. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/css-custom-properties