css-var-analyzer
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.
Best use case
css-var-analyzer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using css-var-analyzer 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/css-var-analyzer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How css-var-analyzer Compares
| Feature / Agent | css-var-analyzer | 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?
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.
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
# CSS Variable Analyzer
Analyze CSS variable usage, redefinitions, and naming patterns in PatternFly SCSS components.
## What It Analyzes
- **Variable redefinitions** - How variables cascade through modifiers, states, and nested selectors
- **Undefined variables** - Variables used but never defined within the component
- **Unused variables** - Variables defined but never referenced
- **Naming conventions** - Validates SCSS interpolation (`--#{$component}--property`) vs hardcoded names
- **Redefinition chains** - Complete cascade documentation for any variable
## Requirements
**Node.js** is required to run the analysis scripts.
```bash
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/`.
## Usage
### Basic analysis
```text
Analyze CSS variables for the tabs component
```
### Variable drill-down
```text
Show me the redefinition chain for the inset variable in tabs
```
### Modifier analysis
```text
Show me variables for the vertical modifier in tabs
```
## How It Works
The skill uses two Node.js scripts in `$CLAUDE_SKILL_DIR`:
1. **css-var-analyzer.js** - Parses SCSS files, extracts variable definitions/usages, builds redefinition chains, detects issues
2. **format-css-report.js** - Formats the analysis JSON into readable Markdown reports
The analyzer categorizes definitions by context: root (`@include pf-root`), modifier (`.pf-m-*`), state (`:hover`, `:focus`), media query, breakpoint, and nested selectors.
## Output
A Markdown report with:
- Summary statistics (total vars, redefined count/%, undefined, unused, naming violations)
- Issues section (undefined variables, unused variables, naming violations)
- Redefinition summary (top 15 most-redefined variables)
- For drill-downs: complete definition chain with file locations, contexts, and code snippetsRelated 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.