You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: add content plugin — voice and tone agent and content review skill (#109)
## Add `content` plugin — voice and tone
### Summary
- Adds a new `content` plugin with a `voice-and-tone` agent and a
`content-review` skill
- Registers the plugin in both `.claude-plugin/marketplace.json` and
`.cursor-plugin/marketplace.json`
- Regenerates `PLUGINS.md` and the README plugin table
### What this adds
**`voice-and-tone` (agent)** — Always-on knowledge of PatternFly and Red
Hat content design standards, applicable to both UX microcopy and
long-form documentation. Covers the four brand voice traits (friendly,
approachable, collaborative, inventive), tone by context, point of view,
sentence voice, capitalization, punctuation, vocabulary rules,
structural patterns, component-specific microcopy (buttons, tooltips,
alt text), AI language flags, and credibility principles. Sourced from
[patternfly.org/content-design](https://www.patternfly.org/content-design/overview),
Red Hat brand standards, the Red Hat corporate style guide, the Red Hat
Design System content accessibility guidelines, and the Writing for Red
Hat takeaway guide.
**`content-review` (skill)** — On-demand audit or rewrite of markdown
content against PatternFly and Red Hat voice and tone rules. Accepts a
file path or pasted content, produces either an annotated issues list
(audit mode) or a revised version ready to apply (rewrite mode).
### Why a new plugin
Content design is a first-class discipline in PatternFly — the site has
a dedicated content design section with grammar rules, writing guides,
and brand voice documentation. None of the existing plugins cover
writing and documentation quality. This fills that gap for contributors
writing design guidelines, UI copy, or any content for patternfly.org or
Red Hat products.
The rules are intentionally unified across both contexts: the same voice
and tone standards apply to UX microcopy and long-form docs, with only
minor noted exceptions (such as the ampersand rule, which is stricter in
UI microcopy than in documentation).
### Test plan
- [ ] Run `/plugin install content@patternfly-ai-helpers` and
`/reload-plugins` — confirm `voice-and-tone` appears in agents and
`content-review` in skills
- [ ] Invoke `/content:content-review` on a markdown file in audit mode
— confirm it produces a numbered issues list with rule names and
suggested fixes
- [ ] Invoke `/content:content-review` on the same file in rewrite mode
— confirm it returns revised markdown and a brief change summary
- [ ] Confirm the agent shapes output when writing new docs without
invoking the skill explicitly
---------
Co-authored-by: Jeff Puzzo <jpuzzo@redhat.com>
|**a11y**| Audit and document accessibility | Does this help me make my UI accessible? ||
67
67
|**code-review**| Review code for quality | Does this help me review code for quality? ||
68
-
|**design-audit**| Validate existing code/designs against PF standards | Does this check whether existing code or designs follow PF standards? |`pf-compliance-checker`, `pf-figma-icon-finder`, `pf-raw-colors-scan`|
68
+
|**design-audit**| Validate existing code/designs against PF standards | Does this check whether existing code or designs follow PF standards? |`pf-compliance-checker`, `pf-design-token-check`, `pf-figma-icon-finder`|
69
69
|**design-guide**| Choose the right PF components and patterns when building | Does this help me choose the right PF components and patterns when building? |`pf-ai-experience-patterns`, `pf-design-mode`|
70
70
|**migration**| Upgrade PatternFly versions | Does this help me upgrade PF versions? |`pf-class-migration-scanner`|
71
71
|**patternfly-mcp**| Connect AI tools to PatternFly documentation and component data |||
72
72
|**pf-workshop**| Team tools and skill incubation | Is this a team workflow tool, or a new skill that isn't ready for a consumer plugin yet? |`analytics-repo-pruning`, `css-var-analyzer`, `duplicate-epic`|
73
-
|**react**| Develop and test React components | Does this help me write or test a React component? |`pf-component-structure`, `pf-design-comments`, `pf-import-checker`|
73
+
|**react**| Develop and test React components | Does this help me write or test a React component? |`pf-component-structure`, `pf-design-comments`, `pf-github-pages-deploy`|
-[migration](#migration) — PF version migration — breaking change detection, class scanning, upgrade planning
12
+
-[patternfly-mcp](#patternfly-mcp) — PatternFly MCP server — provides component documentation, design token lookup, and accessibility guidance via the Model Context Protocol
11
13
-[pf-workshop](#pf-workshop) — PatternFly team tools and skill incubation — issue triage, release management, codebase auditing, new skill development
12
14
-[react](#react) — React component development — coding standards, testing, and structure
13
15
@@ -17,38 +19,51 @@ Quick reference of all plugins and what they contain. This file is auto-generate
17
19
18
20
Accessibility auditing, reporting, and documentation
Design audit — validate existing code and designs against PatternFly standards
39
41
40
42
| Skill | Description |
41
43
|-------|-------------|
42
-
|`figma-changes`| Diff Figma designs to identify what changed and generate code update checklists. |
43
-
|`figma-icon-finder`| Identify PatternFly icons in Figma mockups and provide the correct React import statements. |
44
-
|`icon-finder`| Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. |
45
-
|`pf-ai-experience-patterns`| Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. |
46
44
|`pf-compliance-checker`| Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage. |
47
-
|`pf-design-mode`| Create and edit Figma design files using PatternFly-approved component libraries. |
45
+
|`pf-design-token-check`| Detect hardcoded color, spacing, typography, border radius and shadow values that have PF token equivalents and suggest the correct design token replacements. |
46
+
|`pf-figma-icon-finder`| Identify PatternFly icons in Figma mockups and provide the correct React import statements. |
48
47
|`pf-raw-colors-scan`| Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements. |
49
48
|`pf-token-auditor`| Audit designs against the PatternFly 6 token architecture and bridge Figma styles to PF semantic tokens. |
|`pf-content-review`| Audit and rewrite content to match PatternFly and Red Hat voice and tone standards. |
76
103
|`pf-create-issue`| Create well-structured GitHub issues for PatternFly repositories with templates, follow-up tracking, and duplicate detection. |
77
104
|`pf-org-version-update`| Update patternfly-org for a new PatternFly release — resolve versions, update package.json and versions.json, and provide build steps. |
78
105
|`pf-tokens`| Build CSS design tokens for PatternFly core and copy them to the PatternFly repository. |
106
+
|`prototype-mode`| Enable prototype mode for React apps with grayscale styling and a banner overlay. |
79
107
|`quarterly-initiative-report`| Generate quarterly Jira status reports with RAG assessment, blocker tracking, and next-quarter recommendations. |
80
108
|`semantic-release-troubleshooting`| Diagnose and fix semantic-release issues when a specific version is not being released. |
81
109
|`summarize-jira-issues`| Summarize your current sprint workload from Jira — assigned issues, contributor roles, and priorities. |
110
+
|`summarize-pr-reviews`| Summarize GitHub pull requests awaiting your review with status, age, and priority. |
82
111
|`write-example-description`| Write and refine example descriptions for PatternFly.org component and demo pages. |
83
112
113
+
| Agent | Description |
114
+
|-------|-------------|
115
+
|`pf-voice-and-tone`| PatternFly and Red Hat voice and tone standards — friendly, approachable, collaborative, inventive. |
116
+
84
117
85
118
<br>
86
119
@@ -91,15 +124,15 @@ React component development — coding standards, testing, and structure
AI coding helpers for [PatternFly](https://www.patternfly.org/) development. This repository provides plugins and documentation to help AI tools generate accurate, best-practice PatternFly applications.
9
9
@@ -21,68 +21,67 @@ Plugins work in both **Claude Code** and **Cursor**. The content is identical
21
21
/plugin install react@ai-helpers
22
22
```
23
23
24
-
After installation, the plugin's agents and skills are available in any project. To receive plugin updates automatically, enable auto-update for this marketplace: `/plugin` → **Marketplaces** → select **patternfly-ai-helpers** → **Enable auto-update**.
25
-
26
-
<details>
27
-
<summary>See it in action</summary>
28
-
29
-
30
-
31
-
</details>
24
+
After installation, the plugin's agents and skills are available in any project.
32
25
33
26
### Cursor
34
27
35
-
#### Third-Party Plugin Import
36
-
37
-
If you've already installed plugins via Claude Code, Cursor can discover them automatically:
38
-
39
-
1. Open **Cursor Settings** → **Rules, Skills, Subagents**
40
-
2. Enable **"Include third-party Plugins, Skills, and other configs"**
41
-
42
-
Plugins installed via Claude Code appear immediately — no cloning or manual setup required.
43
-
44
-
<details>
45
-
<summary>See it in action</summary>
46
-
47
-
48
-
49
-
</details>
50
-
51
-
#### Team Marketplace (Red Hat)
52
-
53
-
Red Hat Cursor Enterprise users have access to the PatternFly AI Helpers team marketplace:
54
-
55
-
1. Open **Cursor Settings** → **Plugins** → **Browse Marketplace**
56
-
2. Select **PatternFly AI Helpers**
57
-
3. Click **Get** on the plugins you need
58
-
59
-
<details>
60
-
<summary>See it in action</summary>
61
-
62
-
63
-
64
-
</details>
28
+
Cursor can discover plugins from `.cursor-plugin/` directories. If you also have Claude Code installed, Cursor may pick up installed plugins automatically via its third-party plugin settings.
65
29
66
30
## Available Plugins
67
31
68
32
<!-- BEGIN PLUGIN TABLE -->
69
33
| Plugin | Description |
70
34
|--------|-------------|
71
35
|**a11y**| Accessibility auditing, reporting, and documentation |
|**migration**| PF version migration — breaking change detection, class scanning, upgrade planning |
76
-
|**patternfly-#8209;mcp**| PatternFly MCP server — provides component documentation, design token lookup, and accessibility guidance via the Model Context Protocol |
77
-
|**pf-#8209;workshop**| PatternFly team tools and skill incubation — issue triage, release management, codebase auditing, new skill development |
40
+
|**patternfly‑mcp**| PatternFly MCP server — provides component documentation, design token lookup, and accessibility guidance via the Model Context Protocol |
41
+
|**pf‑workshop**| PatternFly team tools and skill incubation — issue triage, release management, codebase auditing, new skill development |
78
42
|**react**| React component development — coding standards, testing, and structure |
79
43
<!-- END PLUGIN TABLE -->
80
44
81
45
See [PLUGINS.md](PLUGINS.md) for skills, agents, and usage details.
82
46
83
-
## PatternFly MCP Server (Included)
47
+
## PatternFly MCP Server (Recommended)
48
+
49
+
For the best experience, also install the [PatternFly MCP server](https://github.com/patternfly/patternfly-mcp) which gives AI tools access to component documentation, prop schemas, and design guidelines. Skills and agents work without it but provide enhanced results when it's available.
1. Each AI tool looks for its own directory (`.claude-plugin/`, `.cursor-plugin/`) to find `marketplace.json`
67
+
2. The marketplace lists plugins with relative paths to `plugins/<name>/`
68
+
3. Each plugin has identical manifests in `.claude-plugin/plugin.json` and `.cursor-plugin/plugin.json`
69
+
4. Adding support for a new tool = copying the manifest into a new `.<tool>-plugin/` directory
84
70
85
-
The [PatternFly MCP server](https://github.com/patternfly/patternfly-mcp) gives AI tools access to component documentation, prop schemas, and design guidelines. It is **automatically installed** as a dependency when you install any plugin from this marketplace — no separate setup required.
71
+
## Repository Structure
72
+
73
+
```
74
+
ai-helpers/
75
+
├── .claude-plugin/ # Claude Code marketplace config
Copy file name to clipboardExpand all lines: plugins/design-audit/README.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,7 @@ Use this plugin when you're **checking** whether existing code or designs follow
11
11
### Skills
12
12
13
13
-**PF Compliance Checker** (`/design-audit:pf-compliance-checker`) — Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage.
14
+
-**PF Design Token Check** (`/design-audit:pf-design-token-check`) — Detect hardcoded color, spacing, typography, border radius and shadow values that have PF token equivalents and suggest the correct design token replacements.
14
15
-**PF Figma Icon Finder** (`/design-audit:pf-figma-icon-finder`) — Identify PatternFly icons in Figma mockups and provide the correct React import statements.
15
16
-**PF Raw Colors Scan** (`/design-audit:pf-raw-colors-scan`) — Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements.
16
17
-**PF Token Auditor** (`/design-audit:pf-token-auditor`) — Audit designs against the PatternFly 6 token architecture and bridge Figma styles to PF semantic tokens.
Copy file name to clipboardExpand all lines: plugins/design-guide/README.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,6 +13,10 @@ Use this plugin when you're **building** something and need help choosing the ri
13
13
-**PF AI Experience Patterns** (`/design-guide:pf-ai-experience-patterns`) — Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs.
14
14
-**PF Design Mode** (`/design-guide:pf-design-mode`) — Create and edit Figma design files using PatternFly-approved component libraries.
15
15
16
+
### Agents
17
+
18
+
-**PF Microcopy** (`pf-microcopy`) — PatternFly component microcopy standards — button labels, tooltips, alt text, and error messages.
0 commit comments