pf-analyze-modifiers

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.

8 stars

Best use case

pf-analyze-modifiers is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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.

Teams using pf-analyze-modifiers 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

$curl -o ~/.claude/skills/pf-analyze-modifiers/SKILL.md --create-dirs "https://raw.githubusercontent.com/patternfly/ai-helpers/main/plugins/pf-workshop/skills/pf-analyze-modifiers/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/pf-analyze-modifiers/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How pf-analyze-modifiers Compares

Feature / Agentpf-analyze-modifiersStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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.

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

# 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)**
```markdown
## pf-m-{modifier-name}
- Component1
- Component2
```

**Alternative: By Component**
```markdown
## 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
```text
User: /pf-workshop:pf-analyze-modifiers
```

### Analyze specific component
```text
User: /pf-workshop:pf-analyze-modifiers for the Button component
```

### Find modifier usage
```text
User: /pf-workshop:pf-analyze-modifiers find where pf-m-disabled is used
```

### Compare modifiers
```text
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`).

Related Skills

css-var-analyzer

8
from patternfly/ai-helpers

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.

pf-unit-test-generator

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

Audit and fix invalid PatternFly import paths across packages. Use when imports fail, modules are unresolved, or after upgrading PatternFly versions.

pf-component-structure

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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

8
from patternfly/ai-helpers

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.