[Agent] [EXAMPLE] Design Token Validator

[jpuzz0]

Agent Name

Design Token Validator

Problem It Solves

Developers often hardcode colors like #06c or rgb(0, 102, 204) instead of using PatternFly design tokens like --pf-t--global--color--brand--default. This breaks dark mode and theming.

Agent Markdown

Design Token Validator

Scan files for hardcoded colors and spacing values, then suggest the correct PatternFly design tokens.

What it does:

• Searches for hex colors (#06c), RGB values, hardcoded pixels
• Suggests equivalent PatternFly v6 tokens
• Provides before/after examples

Usage:
"Check src/components for design token violations"

Testing Notes (Optional)

Tested on: patternfly-react (src/components/Card)

What worked:

• Found 3 hardcoded colors, suggested correct tokens

What needs improvement:

• Sometimes suggests tokens that don't quite match the exact color

Edge cases or limitations:

• Doesn't catch colors in JavaScript (like chart configs)