Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .claude-plugin/marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"description": "React component development — coding standards, testing, and structure"
},
{
"name": "design-tokens",
"source": "./plugins/design-tokens",
"description": "Design token reference, auditing, and migration"
"name": "design-foundations",
"source": "./plugins/design-foundations",
"description": "Design foundation reference and auditing — tokens, icons, colors, spacing"
},
{
"name": "a11y",
Expand Down
6 changes: 3 additions & 3 deletions .cursor-plugin/marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"description": "React component development — coding standards, testing, and structure"
},
{
"name": "design-tokens",
"source": "./plugins/design-tokens",
"description": "Design token reference, auditing, and migration"
"name": "design-foundations",
"source": "./plugins/design-foundations",
"description": "Design foundation reference and auditing — tokens, icons, colors, spacing"
},
{
"name": "a11y",
Expand Down
4 changes: 2 additions & 2 deletions CONTRIBUTING-SKILLS.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Every skill or agent must live in a plugin. Pick the one that matches your skill
| Plugin | What it helps you do | Decision test | Example skills |
|--------|---------------------|---------------|----------------|
| **react** | Develop and test React components | Does this help me write or test a React component? | `pf-unit-test-generator`, `pf-bug-triage` |
| **design-tokens** | Reference, audit, and migrate design tokens | Does this involve design tokens, CSS variables, or color values? | `pf-tokens`, `pf-token-auditor`, `pf-raw-colors-scan` |
| **design-foundations** | Reference and audit design foundations — tokens, icons, colors, spacing | Does this involve a design foundation like tokens, icons, or colors? | `pf-tokens`, `pf-token-auditor`, `icon-finder` |
| **a11y** | Audit and document accessibility | Does this help me make something accessible? | *(accepting contributions)* |
| **figma** | Review and extract from Figma designs | Does this require Figma as input or output? | `figma-changes` |
| **issue-management** | Create and track issues across tools | Does this help me create, link, or manage issues? | `pf-create-issue`, `duplicate-epic` |
Expand All @@ -79,7 +79,7 @@ Every skill or agent must live in a plugin. Pick the one that matches your skill
Plugin names must tell a user exactly what the plugin helps them do. A user browsing the marketplace should understand what they're installing without clicking through.

**Good names** describe the capability:
- `design-tokens` — you know it's about design tokens
- `design-foundations` — you know it's about design system foundations (tokens, icons, colors)
- `issue-management` — you know it manages issues
- `react` — universally understood technology domain

Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Ask: *"If someone sees this name in a list, do they know what they're installing

| Good | Why | Bad | Why |
|------|-----|-----|-----|
| `design-tokens` | Specific — you know it's about tokens | `styling` | Vague — styling what? |
| `design-foundations` | Specific — tokens, icons, colors, spacing | `styling` | Vague — styling what? |
| `issue-management` | Clear action — manages issues | `workflow` | Could mean anything |
| `react` | Universal tech domain | `frontend` | Too broad |

Expand Down
31 changes: 12 additions & 19 deletions PLUGINS.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ Quick reference of all plugins and what they contain. This file is auto-generate
## Table of Contents

- [a11y](#a11y) — Accessibility auditing, reporting, and documentation
- [design-tokens](#design-tokens) — Design token reference, auditing, and migration
- [design-foundations](#design-foundations) — Design foundation reference and auditing — tokens, icons, colors, spacing
- [figma](#figma) — Figma design review, diffing, and asset identification
- [issue-management](#issue-management) — Issue creation, tracking, and cross-project coordination
- [pf-workflow](#pf-workflow) —
- [react](#react) — React component development — coding standards, testing, and structure
- [repo-management](#repo-management) — Release versioning, dependency analysis, and repository health

Expand All @@ -20,16 +19,18 @@ Accessibility auditing, reporting, and documentation

No skills or agents yet — contributions welcome!

### design-tokens
### design-foundations

Design token reference, auditing, and migration
Design foundation reference and auditing — tokens, icons, colors, spacing

**Skills:**
- `/design-tokens:css-var-analyzer` — Analyze CSS custom property usage, redefinitions, and naming patterns in PatternFly SCSS components. Use when auditing --pf- variables, debugging missing definitions, tracing SCSS variable cascades, or finding unused CSS custom properties.
- `/design-tokens:pf-analyze-modifiers` — Find, list, and summarize PatternFly component modifiers (pf-m- classes) across the codebase. Use when analyzing component styling patterns, documenting modifier usage, or auditing CSS consistency.
- `/design-tokens:pf-raw-colors-scan` — "Analyze the provided code to find any raw color values assigned to styling properties. Flag these values as technical debt and suggest their replacement with design tokens."
- `/design-tokens:pf-token-auditor` — # PatternFly Design Token Auditor & Bridge
- `/design-tokens:pf-tokens` — Build CSS design tokens for PatternFly core and copy them to the PatternFly repository.
- `/design-foundations:css-var-analyzer` — Analyze CSS custom property usage, redefinitions, and naming patterns in PatternFly SCSS components. Use when auditing --pf- variables, debugging missing definitions, tracing SCSS variable cascades, or finding unused CSS custom properties.
- `/design-foundations:icon-finder` — Find icons from the Red Hat Design System (@rhds/icons) by use case. Searches the Red Hat Icons demo site by keyword, returns matching icon names with a visual HTML preview for comparison. Use when the user asks to find an icon, search for an icon by purpose, pick an icon for a UI, or get icon options for a use case.
- `/design-foundations:pf-analyze-modifiers` — Find, list, and summarize PatternFly component modifiers (pf-m- classes) across the codebase. Use when analyzing component styling patterns, documenting modifier usage, or auditing CSS consistency.
- `/design-foundations:pf-class-migration-scanner` — Scans for legacy PatternFly class usage and recommends PF6-safe replacements. Use when modernizing older PatternFly codebases.
- `/design-foundations:pf-raw-colors-scan` — "Analyze the provided code to find any raw color values assigned to styling properties. Flag these values as technical debt and suggest their replacement with design tokens."
- `/design-foundations:pf-token-auditor` — # PatternFly Design Token Auditor & Bridge
- `/design-foundations:pf-tokens` — Build CSS design tokens for PatternFly core and copy them to the PatternFly repository.

### figma

Expand All @@ -46,26 +47,17 @@ Issue creation, tracking, and cross-project coordination

**Skills:**
- `/issue-management:duplicate-epic` — Use when `/duplicate-epic <issue> <feature>` should clone a Jira Epic, Story, or Bug into the PF project, resolve non-epic inputs to their parent epic, link back to the source, and attach the new epic to a PF feature.
- `/issue-management:pf-bug-triage` — Performs preliminary triage of opened issues marked as bugs. Suggests what needs to be updated to fix reported bugs, provides context for assignees, and tags the most appropriate maintainer when the issue contains questions. Use when triaging bug issues, reviewing new bug reports, or preparing issues for assignment.
- `/issue-management:pf-create-issue` — Create GitHub issues for PatternFly repositories with smart templates, followup tracking, and duplicate detection.
- `/issue-management:quarterly-initiative-report` — Generate comprehensive quarterly Jira status reports with progress tracking, RAG assessment, blocker identification, cross-project duplicate link analysis, and Q+1 recommendations. Use when generating quarterly reports, tracking initiative progress, or analyzing epic completion metrics across Jira projects with labels.
- `/issue-management:summarize-jira-issues` — "Summarize Jira sprint issues and contributions for the current user. Use when the user asks to: (1) See what's left in the sprint, (2) Summarize their assigned work, (3) Prioritize sprint tasks, (4) See issues they're contributing to, or (5) Understand what to work on next. Focuses on active sprint work first, then shows contributor roles and backlog."

### pf-workflow



**Skills:**
- `/pf-workflow: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.

### react

React component development — coding standards, testing, and structure

**Skills:**
- `/react:ai-experience-patterns` — Apply established UI/UX design patterns when building AI-powered product demos and experiences. Use this skill whenever the user mentions "AI experience", "AI powered", "AI supported", "product demo", or when building prototypes that involve AI features like chat interfaces, generation flows, loading states, or AI-assisted interactions. Make sure to use this skill even when users don't explicitly ask for design guidance - proactively apply these patterns to create polished AI experiences.
- `/react:icon-finder` — Find icons from the Red Hat Design System (@rhds/icons) by use case. Searches the Red Hat Icons demo site by keyword, returns matching icon names with a visual HTML preview for comparison. Use when the user asks to find an icon, search for an icon by purpose, pick an icon for a UI, or get icon options for a use case.
- `/react:pf-bug-triage` — Performs preliminary triage of opened issues marked as bugs. Suggests what needs to be updated to fix reported bugs, provides context for assignees, and tags the most appropriate maintainer when the issue contains questions. Use when triaging bug issues, reviewing new bug reports, or preparing issues for assignment.
- `/react:pf-class-migration-scanner` — Scans for legacy PatternFly class usage and recommends PF6-safe replacements. Use when modernizing older PatternFly codebases.
- `/react:pf-component-structure` — Guide for PatternFly React component structure — audits, correct nesting, and layout debugging. Use when building with @patternfly/react-core or @patternfly/react-table, scanning code for hierarchy violations, or fixing spacing and alignment issues.
- `/react:pf-import-checker` — Audits and fixes PatternFly import paths, with emphasis on charts, chatbot, and component-groups. Use when imports fail or PatternFly modules are unresolved.
- `/react:pf-library-test-writer` — Write unit tests for contributors to PatternFly libraries (patternfly-react, patternfly-chatbot, etc.), not for consumers of PatternFly components. Use `unit-test-generator` for consumer application tests instead.
Expand All @@ -86,5 +78,6 @@ Release versioning, dependency analysis, and repository health
- `/repo-management:analytics-repo-pruning` — Flags archived or inactive Git repositories listed in PatternFly Analytics repos.json so entries can be pruned. Use when reviewing repos.json, auditing tracked codebases, or removing stale or archived repos from analytics.
- `/repo-management:dependency-recommender` — Analyzes the project's manifests and code patterns, then recommends NPM or other dependencies that would reduce complexity, increase stability, and improve reusability—with a short rationale per recommendation.
- `/repo-management:pf-org-version-update` — Updates the patternfly-org repo for a new PatternFly release or release candidate. Fetches or applies specified versions, updates package.json files and versions.json, and then provides the user with steps to run the build and regenerate screenshots locally. Use when preparing a PatternFly release, updating PF versions in this repo, or when the user asks to update patternfly-org for a new release.
- `/repo-management: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.
- `/repo-management:summarize-pr-reviews` — "Summarize GitHub pull requests awaiting review from the current user. Use when the user asks to: (1) See their pending PR reviews, (2) Summarize PRs they need to review, (3) Get an overview of review requests, (4) Prioritize their code review queue, or (5) Understand what PRs are waiting for their review."

5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,9 @@ Cursor can discover plugins from `.cursor-plugin/` directories. If you also have
| Plugin | Description |
|--------|-------------|
| **a11y** | Accessibility auditing, reporting, and documentation |
| **design-tokens** | Design token reference, auditing, and migration |
| **design-foundations** | Design foundation reference and auditing — tokens, icons, colors, spacing |
| **figma** | Figma design review, diffing, and asset identification |
| **issue-management** | Issue creation, tracking, and cross-project coordination |
| **pf-workflow** | |
| **react** | React component development — coding standards, testing, and structure |
| **repo-management** | Release versioning, dependency analysis, and repository health |
<!-- END PLUGIN TABLE -->
Expand All @@ -48,7 +47,7 @@ For the best experience, also install the [PatternFly MCP server](https://github
graph TD
A[AI Tool] -->|discovers| B[".<tool>-plugin/marketplace.json"]
B -->|references| C[plugins/react]
B -->|references| D[plugins/design-tokens]
B -->|references| D[plugins/design-foundations]
B -->|references| E[plugins/...]
C --- F[skills/ + agents/]
D --- G[skills/ + agents/]
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "design-tokens",
"description": "Design token reference, auditing, and migration",
"name": "design-foundations",
"description": "Design foundation reference and auditing — tokens, icons, colors, spacing",
"version": "1.0.0",
"author": {
"name": "PatternFly Team",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "design-tokens",
"description": "Design token reference, auditing, and migration",
"name": "design-foundations",
"description": "Design foundation reference and auditing — tokens, icons, colors, spacing",
"version": "1.0.0",
"author": {
"name": "PatternFly Team",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Design Tokens Plugin
# Design Foundations Plugin

Design token reference, auditing, and migration for PatternFly applications. Works in both **Claude Code** and **Cursor**.
Design foundation reference and auditing — tokens, icons, colors, spacing — for PatternFly applications. Works in both **Claude Code** and **Cursor**.

## Installation

Expand All @@ -11,7 +11,7 @@ Design token reference, auditing, and migration for PatternFly applications. Wor
/plugin marketplace add patternfly/ai-helpers

# Install the plugin
/plugin install design-tokens@ai-helpers
/plugin install design-foundations@ai-helpers
```

For enhanced results, also install the [PatternFly MCP server](https://github.com/patternfly/patternfly-mcp).
Expand All @@ -22,18 +22,19 @@ See the [root README](../../README.md) for Cursor installation options.

## What's Included

Skills for PatternFly design token workflows:
Skills for working with design system foundations:

- Scanning for raw color values missing a design token mapping
- Auditing design token usage and CSS variable patterns
- Building and copying design tokens for PatternFly core
- Finding icons from the Red Hat Design System

Browse `skills/` for available skills (invoked as `/design-tokens:<skill-name>`).
Browse `skills/` for available skills (invoked as `/design-foundations:<skill-name>`).

## Sources

- [PatternFly.org](https://www.patternfly.org/)
- [PatternFly Design Tokens](https://www.patternfly.org/design-foundations/tokens)
- [PatternFly Design Foundations](https://www.patternfly.org/design-foundations)

## License

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,22 @@ Write a Markdown file with:

### Analyze all modifiers
```text
User: /design-tokens:pf-analyze-modifiers
User: /design-foundations:pf-analyze-modifiers
```

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

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

### Compare modifiers
```text
User: /design-tokens:pf-analyze-modifiers compare pf-m-expanded and pf-m-collapsed
User: /design-foundations:pf-analyze-modifiers compare pf-m-expanded and pf-m-collapsed
```

## Modifier Categories Reference
Expand Down