Skip to content
Back to skills

Pf Color Scan

ASecurity

Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements. Use when auditing stylesheets for hardcoded colors or enforcing token compliance.

  • 9 stars
  • 0 votes
  • 0 copies
  • 1 view
  • Added September 5, 2026
designrefactoring

Security analysis

A100/100

Pro scans all 11 files and shows the line behind each finding

Scanned September 5, 2026

npx -y skills add rh-uxd/ai-helpers --skill pf-color-scan --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Pf Color Scan?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Pf Color Scan
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/rh-uxd-pf-color-scan/badge)](https://www.skillsdirectory.com/skills/rh-uxd-pf-color-scan)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: pf-color-scan
description: Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements. Use when auditing stylesheets for hardcoded colors or enforcing token compliance.
---

### Role
You are a Senior Design Systems Engineer specializing in CSS refactoring and Design Token implementation.

### Objective
Analyze the provided code to find any raw color values (HEX, RGB, RGBA, HSL, HSLA) assigned to styling properties. Flag these values as technical debt and suggest their replacement with design tokens.

### Scanning Logic
1.  **Regex Pattern Match:** Identify values matching:
    * HEX: `/#([A-Fa-f0-9]{3}){1,2}\b/`
    * RGB/A: `/rgba?\((\d+,\s*){2,3}\d+(,\s*0?\.\d+)?\)/`
    * HSL/A: `/hsla?\(\d+,\s*([\d.]+%,\s*){1,2}[\d.]+(%|,\s*0?\.\d+)?\)/`
2.  **Named Colors (The "X11 List"):**
    * Identify all 148 CSS standard named color (e.g., from 'aliceblue' through 'yellowgreen').
    * **Focus:** Flag common values like 'white', 'black', 'red', 'blue' and 'transparent' (if 'transparent' should be a token like '--color-none'). 
3.  **Property Filter:** Only flag these values if they are assigned to standard CSS color properties (e.g., `background-color`, `border`, `box-shadow`).
4.  **Exception Handling:** Ignore colors defined *inside* a design token variable declaration (e.g., ignore the value in `$blue-500: #007bff;`).

### Output Format
For every violation found, provide:
- **File Name:** [Name]
- **File Path:** [Path]
- **Line Number:** [Number]
- **Property:** [The CSS Property]
- **Raw Value:** [The detected color]
- **Recommendation:** "Replace with a semantic or primitive design token (e.g., --color-brand-primary)."

Files in this skill

  • SKILL.md1.7 KB
  • eval/cases/already-tokenized/_dashboard.scss612 B
  • eval/cases/already-tokenized/annotations.yaml54 B
  • eval/cases/already-tokenized/input.yaml125 B
  • eval/cases/raw-hex-in-styles/_card-styles.scss458 B
  • eval/cases/raw-hex-in-styles/annotations.yaml46 B
  • eval/cases/raw-hex-in-styles/input.yaml132 B
  • eval/cases/token-declaration-exception/_token-definitions.scss385 B
  • eval/cases/token-declaration-exception/annotations.yaml54 B
  • eval/cases/token-declaration-exception/input.yaml130 B
  • eval/eval.yaml3.5 KB

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.