css-var-analyzer

Name: css-var-analyzer
Availability: InStock
Author: PatternFly

Analyze PatternFly SCSS CSS custom properties and generate a Markdown report.

10|26|Updated Jul 8, 2025

Search Tags:#audit #analyze #scss #css-variables #patternfly #redefinitions #undefined-variables

Ready to run

npx skills add https://github.com/patternfly/ai-helpers --skill css-var-analyzer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: css-var-analyzer
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/design-foundations/skills/css-var-analyzer
Command: npx skills add https://github.com/patternfly/ai-helpers --skill css-var-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Audit PatternFly SCSS CSS variables to identify misuses, redefinitions, and naming issues that can cause styling drift and maintenance challenges.

Core Features & Use Cases

Variable usage analysis and redefinition tracing across PatternFly components
Undefined and unused variable detection with contextual details and chains
Naming convention validation for SCSS interpolations (e.g., --#{$var} and --pf-v6- patterns)

Quick Start

Analyze PatternFly SCSS CSS variables against code to produce a Markdown report.

Frequently Asked Questions about css-var-analyzer

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

FAQPage Schema

How do I audit PatternFly CSS variables across SCSS components?▼

You can audit PatternFly CSS variables by running Node.js scripts that analyze SCSS components, identifying custom property usage, redefinitions, and naming violations, then generating a Markdown report with definition and redefinition chains.

How do I find undefined or unused CSS custom properties in PatternFly SCSS?▼

Finding undefined or unused CSS custom properties in PatternFly SCSS requires running an analyzer script that traces variable usage across nested selectors, modifiers, and states, reporting contextual details for each violation found.

What causes CSS variable redefinitions in PatternFly SCSS components?▼

CSS variable redefinitions in PatternFly SCSS occur when custom properties are overridden across nested selectors, modifiers, states, or media-query contexts, causing styling drift and maintenance challenges that an audit can trace and report.

Does the PatternFly CSS variable analyzer require Node.js to run?▼

Yes, the PatternFly CSS variable analyzer requires Node.js to execute its analysis and formatting scripts, which parse SCSS components and generate a Markdown-ready report containing definitions, usages, and redefinition chains.

How do I validate SCSS interpolation naming conventions for PatternFly CSS variables?▼

Validating SCSS interpolation naming conventions for PatternFly CSS variables involves checking --#{$var} and --pf-v6- patterns against component rules, ensuring custom properties follow standard naming structures to prevent styling drift.