skills.rest
patternfly
patternflyOFFICIAL
Explore all skills by this author →
Website𝕏@patternflyGitHub

pf-raw-colors-scan

Detect raw HEX, RGB(A), HSL(A), and named colors in CSS/SCSS/LESS files.

10|26|Updated Jul 8, 2025
Search Tags:#css#color#static-analysis#linter#design-tokens#token-refactor#token-automation
One-click install
npx skills add https://github.com/patternfly/ai-helpers --skill pf-raw-colors-scan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pf-raw-colors-scan
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/design-foundations/skills/pf-raw-colors-scan
Command: npx skills add https://github.com/patternfly/ai-helpers --skill pf-raw-colors-scan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify raw color values embedded in styling properties (HEX, RGB, RGBA, HSL, HSLA) and flags them as technical debt to be replaced with design tokens.

Core Features & Use Cases

  • Detects raw color values in CSS/SCSS/LESS and reports their location, value, and affected property.
  • Recognizes common named colors and special values like transparent, suggesting token-based replacements.
  • Ignores colors defined inside design token declarations to avoid false positives during token initialization.

Quick Start

Run pf-raw-colors-scan against your codebase to generate a report of raw color values and token-based recommendations.

Frequently Asked Questions about pf-raw-colors-scan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find raw color values in CSS to replace with design tokens?▼

To find raw color values in CSS, scan your codebase to detect HEX, RGB(A), HSL(A), and named colors in styling properties, generating a structured report of violations with file, line, property, and remediation suggestions.

What is static analysis for raw colors in SCSS and LESS files?▼

Static analysis for raw colors in SCSS and LESS files identifies hardcoded color values embedded in styling properties and flags them as technical debt to be replaced with token-based colors.

Does the raw color linter ignore values inside design token declarations?▼

Yes, the raw color linter ignores color values defined inside design token declarations to avoid false positives during token initialization and refactoring workflows.

Can I use this color scanner during a CSS code review to surface technical debt?▼

Yes, you can apply this color scanner during CSS code reviews, audits, and refactors to surface technical debt by outputting a structured list of raw color violations with remediation recommendations.

What is the best way to automate design token refactoring for web projects?▼

The best way to automate design token refactoring is to run a static analysis scan that detects raw colors across CSS, SCSS, and LESS files and outputs structured violations with token-based replacement suggestions.

Related Skills

Explore More Design & Creative Skills→
Postpartum-genushyacinthus29Postpartum-genushyacinthus29
8

dotnet-stylelint

Run Stylelint against CSS/SCSS assets using repo-local configs.

Community
Intermediate
Dragoon0xDragoon0x
4

color

Generate color token files from detected codebase palettes in CSS, Tailwind, or JavaScript formats.

Community
Intermediate
jonnymuirjonnymuir
1

CSS Custom Property Token Review

Analyze CSS custom property implementations for naming conventions and cascade layer declarations.

Community
Advanced
murphytruemanmurphytrueman
155

token-audit

Audits design system token definitions for naming violations and missing semantic tiers.

Community
Advanced