Add css variable analyzer skill

[srambach]

Add CSS Variable Analyzer Skill

Adds a new skill to the pf-design-tokens plugin for analyzing CSS variable usage in PatternFly SCSS components.

What it does

• Tracks variable redefinitions - Shows how CSS variables cascade through modifiers, states, and nested selectors
• Finds undefined variables - Detects variables used but never defined within component scope
• Finds unused variables - Identifies variables defined but never referenced
• Validates naming conventions - Ensures variables use SCSS interpolation (--#{$component}--property) instead of hardcoded names
• Analyzes modifiers - Shows all variables defined or overridden in specific modifiers
• Generates redefinition chains - Provides complete cascade documentation for any variable

Use cases

• Auditing component CSS variables for correctness
• Understanding complex redefinition and cascade patterns
• Finding cleanup opportunities (unused variables)
• Debugging missing variable definitions
• Documenting variable behavior across modifiers
• Validating naming convention compliance

Example usage

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

Files included

• SKILL.md - Skill definition with instructions and examples
• css-var-analyzer.js - SCSS parsing and analysis engine
• format-css-report.js - Markdown report formatter
• README.md - Quick reference guide

Tested with PatternFly tabs component. Generates detailed markdown reports with statistics, issue detection, and redefinition chains.