| name | pf-analyze-modifiers |
| description | Analyze PatternFly modifier class (pf-m-*) usage across SCSS files and generate usage reports. Use when documenting modifier patterns, auditing CSS consistency, or planning refactors. |
Analyze Modifiers
Discover, analyze, and document PatternFly modifier classes (pf-m-*) across component SCSS files. Search the codebase for modifier patterns, calculate usage statistics, and produce organized Markdown reports.
Input
The user will specify a scope: all components (default), a specific component, a specific modifier, or a directory. If no scope is given, analyze all components.
Output
Write a Markdown file with:
Summary
- Total unique modifiers found
- Total components analyzed
- Top 5 most frequently used modifiers (with count)
- Top 5 components with the most modifiers (with count)
Modifier Listings
Default: By Modifier (Alphabetical)
## pf-m-{modifier-name}
- Component1
- Component2
Alternative: By Component
## Component Name
- pf-m-modifier1
- pf-m-modifier2
File naming
modifiers-listing.md for complete listings{component-name}-modifiers.md for component-specific analysis{modifier-name}-usage.md for modifier-specific analysis
Usage Examples
Analyze all modifiers
User: /pf-workshop:pf-analyze-modifiers
Analyze specific component
User: /pf-workshop:pf-analyze-modifiers for the Button component
Find modifier usage
User: /pf-workshop:pf-analyze-modifiers find where pf-m-disabled is used
Compare modifiers
User: /pf-workshop:pf-analyze-modifiers compare pf-m-expanded and pf-m-collapsed
Modifier Categories Reference
State
pf-m-disabled, pf-m-active, pf-m-current, pf-m-selected, pf-m-hover, pf-m-focus
Size
pf-m-sm, pf-m-md, pf-m-lg, pf-m-xl, pf-m-2xl, pf-m-compact
Layout
pf-m-vertical, pf-m-horizontal, pf-m-inline, pf-m-block, pf-m-grid
Visual
pf-m-plain, pf-m-bordered, pf-m-raised, pf-m-filled, pf-m-outline
Color
pf-m-red, pf-m-blue, pf-m-green, pf-m-orange, pf-m-purple, pf-m-teal, pf-m-yellow
Responsive
pf-m-{base}-on-sm, pf-m-{base}-on-md, pf-m-{base}-on-lg, pf-m-{base}-on-xl, pf-m-{base}-on-2xl
Semantic/Status
pf-m-success, pf-m-warning, pf-m-danger, pf-m-info, pf-m-custom
Notes
- Some components have multiple SCSS files (e.g., Table: table.scss, table-grid.scss, table-tree-view.scss) - consolidate under a single component name.
- Some modifiers use dynamic values (
pf-m-align-items-*, pf-m-width-*, pf-m-inset-*) - list with asterisk notation.
- Include responsive variants, pseudo-state contexts, and element-specific modifiers (e.g.,
pf-v6-c-component__item.pf-m-current).
