pf-raw-colors-scan
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.
Best use case
pf-raw-colors-scan is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using pf-raw-colors-scan should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pf-raw-colors-scan/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pf-raw-colors-scan Compares
| Feature / Agent | pf-raw-colors-scan | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
### 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)."Related Skills
pf-unit-test-generator
Generate a unit test file for a React component using Testing Library. Use when adding test coverage to new or existing components.
pf-prototype-mode
Enable prototype mode for React apps with grayscale styling and a banner overlay. Use when demoing early concepts, presenting wireframes, or preventing stakeholders from fixating on visual polish.
pf-project-scaffolder
Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.
pf-import-checker
Audit and fix invalid PatternFly import paths across packages. Use when imports fail, modules are unresolved, or after upgrading PatternFly versions.
pf-component-structure
Audit PatternFly React component nesting, wrapper hierarchies, and layout structure. Use when scanning for hierarchy violations or debugging spacing caused by missing wrapper components.
write-example-description
Write and refine example descriptions for PatternFly.org component and demo pages. Use when authoring or updating the prose in PatternFly example markdown files.
summarize-jira-issues
Summarize your current sprint workload from Jira — assigned issues, contributor roles, and priorities. Use when checking what's left in the sprint or deciding what to work on next.
semantic-release-troubleshooting
Diagnose and fix semantic-release issues when a specific version is not being released. Use when semantic-release skips a version, fails to release, or when troubleshooting after git push --force, squashed commits, permission errors, or reference already exists.
quarterly-initiative-report
Generate quarterly Jira status reports with RAG assessment, blocker tracking, and next-quarter recommendations. Use when preparing quarterly initiative reviews or tracking epic progress.
pf-tokens
Build CSS design tokens for PatternFly core and copy them to the PatternFly repository. Use when regenerating tokens after design changes or during release preparation.
pf-org-version-update
Update patternfly-org for a new PatternFly release — resolve versions, update package.json and versions.json, and provide build steps. Use when cutting a PF release or release candidate.
pf-create-issue
Create well-structured GitHub issues for PatternFly repositories with templates, follow-up tracking, and duplicate detection. Use when filing bugs, feature requests, or cross-repo follow-ups.