Menu
Analyze --pf- CSS custom property usage and naming patterns in PatternFly SCSS. Use when auditing variable definitions, debugging missing tokens, or finding unused custom properties.
Summarize GitHub pull requests awaiting your review with status, age, and priority. Use when triaging your review queue, prioritizing code reviews, or checking what PRs need attention.
Diff Figma designs to identify what changed and generate code update checklists. Use when syncing code with updated designs or reviewing what changed between iterations. Requires Figma MCP.
Identify PatternFly icons in Figma mockups and provide the correct React import statements. Use when implementing a design from Figma, verifying icon usage in a prototype, or finding the correct icon imports for React components. Requires Figma MCP.
Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. Use when choosing an icon for a UI element or looking up available icons.
Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. Use when building AI experiences that should follow Red Hat brand and UX patterns.
Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage. Use when validating a design before handoff, auditing existing mockups for compliance, or reviewing design token usage. Requires Figma MCP.
| name | css-var-analyzer |
| description | Analyze --pf- CSS custom property usage and naming patterns in PatternFly SCSS. Use when auditing variable definitions, debugging missing tokens, or finding unused custom properties. |
Analyze CSS variable usage, redefinitions, and naming patterns in PatternFly SCSS components.
--#{$component}--property) vs hardcoded namesNode.js is required to run the analysis scripts.
command -v node >/dev/null 2>&1 || { echo "Error: This skill requires Node.js." >&2; exit 1; }
The skill expects a PatternFly project structure with components in src/patternfly/components/.
Analyze CSS variables for the tabs component
Show me the redefinition chain for the inset variable in tabs
Show me variables for the vertical modifier in tabs
The skill uses two Node.js scripts in $CLAUDE_SKILL_DIR:
The analyzer categorizes definitions by context: root (@include pf-root), modifier (.pf-m-*), state (:hover, :focus), media query, breakpoint, and nested selectors.
A Markdown report with: