patternfly

Plugin patternfly from marketplace ai-helpers in openshift-eng/ai-helpers. Commands read from the repo's manifest — today.

Skills (55)

• pf-a11y-audit

  Audit PatternFly components and pages against WCAG and ARIA best practices. Use when reviewing accessibility, fixing screen reader issues, or validating ARIA usage in PatternFly-based applications.

• pf-a11y-keyboard

  Test keyboard accessibility of PatternFly UIs via live browser interaction. Use when validating keyboard navigation, focus management, or interaction patterns in a running application.

• pf-a11y-test-gen

  Generate accessibility test files for any frontend framework covering ARIA attributes, keyboard interaction, and focus management. Use when adding a11y test coverage or writing ARIA/keyboard/focus tests.

• pf-adversarial-review

  Review PatternFly React components for unhandled edge cases and missing defensive code. Use when auditing components for production readiness or stress-testing before a release.

• pf-i18n-audit

  Audit PatternFly React code for i18n readiness — hardcoded user-facing strings, concatenation anti-patterns, locale-dependent formatting, and RTL-unsafe CSS. Use when reviewing code for global deployment or auditing i18n compliance.

• pf-review

  Run all PatternFly compliance checks on a project — imports, components, colors, legacy CSS, and security. Use when auditing PF code, before merging PRs, or for comprehensive compliance review.

• pf-security-scan

  Scan PatternFly React code for security anti-patterns — XSS via dangerouslySetInnerHTML, unsanitized user input in tooltips/labels, and insecure href patterns. Use when reviewing PF code for security vulnerabilities or auditing user-controlled content in PF components.

• pf-state-audit

  Audit PatternFly React components for missing UI states — loading, error, empty, and unauthorized. Use when reviewing data-dependent components or auditing a page for production readiness.

• pf-ai-audit

  Audit AI-powered features against Red Hat's AI design language — transparency notices, iconography, chatbot patterns, color and gradient rules. Use when reviewing chatbots, AI assistants, or generation UIs for brand compliance.

• pf-color-scan

  Find raw color values (hex, rgb, hsl) in code and suggest PatternFly design token replacements. Use when auditing stylesheets for hardcoded colors or enforcing token compliance.

• pf-css-token-check

  Detect hardcoded color, spacing, typography, border radius and shadow values that have PF token equivalents and suggest the correct design token replacements. Works on CSS, SCSS, CSS-in-JS, and inline styles. Use when auditing stylesheets for hardcoded values, enforcing design token compliance, or r

• pf-figma-check

  Check Figma designs against PatternFly v6 standards for colors, typography, spacing, and component usage. Use when validating a design before handoff, auditing existing mockups for compliance, or reviewing design token usage. Requires Figma MCP.

• pf-figma-token-check

  Audit designs against the PatternFly 6 token architecture and bridge Figma styles to PF semantic tokens. Use when validating token usage, mapping Figma variables to PF tokens, or checking designs for token compliance.

• pf-glass-check

  Implement and audit PatternFly Glass Mode screens using the Glass Mode handbook. Use whenever a user mentions Glass Mode while building, generating, editing, or reviewing PatternFly screens, UIs, or prototypes, including Project Felt with glass. Prevent nested glass, preserve default card styling wi

• pf-icon-finder

  Identify PatternFly icons in design mockups and provide the correct React import statements. Use when implementing a design, verifying icon usage in a prototype, or finding the correct icon imports for React components.

• pf-catalog-interaction-patterns

  Catalog interaction patterns (click, hover, keyboard, drag) across PatternFly components. Use when selecting a component for a specific interaction need, describing UI behavior without naming a component, or building prototypes that require interaction-based component lookup.

• pf-figma-design-mode

  Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.

• pf-screenshot-mapping

  Maps screenshots and UI mockups (any fidelity) to PatternFly 6 layout and building-block components. Output uses PF Component Mapping (regions, PF6 direction including structure and behavior, doc links) and PF Gaps & Recommendations (structural gaps/stretches and design-system follow-ups). Omits bra

• pf-css-migration-scan

  Scan code for legacy PatternFly CSS classes and recommend PF6-safe replacements. Use when upgrading from PF4/PF5 or auditing a codebase for deprecated class names.

• pf-react-migration-scan

  Scan code for @patternfly/react-* API breaking changes and produce a markdown report. Use when upgrading PatternFly React versions, auditing component API usage, or checking for removed props, renamed components, or import path changes.

• pf-release-candidate-update

  Update @patternfly/* npm dependencies to the latest release candidate versions. Use when testing the next PF release or bumping to RC packages.

• pf-chart-gen

  Generate PatternFly chart components with theming, responsive sizing, and accessibility. Use when building charts, data visualizations, or dashboards with PatternFly.

• pf-chatbot-bundle-audit

  Audit PatternFly ChatBot imports for tree-shaking opportunities. Use when optimizing ChatBot bundle size or after upgrading @patternfly/chatbot.

• pf-component-check

  Audit PatternFly React component nesting, wrapper hierarchies, and layout structure. Use when scanning for hierarchy violations or debugging spacing caused by missing wrapper components.

• pf-component-reuse-check

  Detects custom React components in newly created or modified (uncommitted) code that overlap with PatternFly React components, suggests the PatternFly equivalent, and can replace the custom component then build to verify. Use when creating UI components, reviewing uncommitted React changes, or when

• pf-context-gen

  Generate AI-friendly context files for PatternFly components. Use when preparing context for AI-assisted PF development, onboarding AI tools to a PF codebase, or assembling component references for prompt engineering.

• pf-deploy

  Deploy a PatternFly React project to GitHub Pages using pfcli deploy. Use when publishing a prototype, sharing a demo URL, deploying to GitHub Pages, or when the user mentions pfcli deploy.

• pf-design-comments-setup

  Integrate @patternfly/design-comments into React apps for on-page design feedback, pinned comment threads, GitHub Issues sync, and Jira linking. Use when adding design comments, review overlays, or removing the commenting system from a PatternFly React project.

• pf-form-gen

  Generate PatternFly form components with validation, layout, and accessibility. Use when building forms, adding form fields, or creating validated input workflows.

• pf-import-check

  Audit PatternFly imports for correctness and bundle-size anti-patterns. Use when imports fail, bundles are bloated, or after upgrading PatternFly versions.

• pf-project-gen

  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-reproduce-issue

  Reproduce a PatternFly bug from a GitHub issue description. Use when triaging PF bug reports, verifying fixes, or confirming whether an issue is still present.

• pf-rhds-layout-gen

  Generate layout code for embedding RHDS header and footer web components inside a PatternFly Page. Use when building a mixed PF+RHDS app shell, setting up a plain page layout, or adding full-height scrollable drawers with React.

• pf-rhds-theme-audit

  Audit and fix theme synchronization between PatternFly React and Red Hat Design System web components, then generate a usage guide. Use when a project mixes PF and RHDS and needs theme setup or has theme sync issues.

• pf-table-gen

  Generate PatternFly table components with sorting, filtering, pagination, and expandable rows. Use when building data tables, adding table features, or migrating HTML tables to PatternFly.

• pf-test-from-spec-gen

  Generate requirement-traced React Testing Library tests from a component spec or acceptance criteria. Use when the spec is the source of truth and the component may not exist yet.

• pf-test-gen

  Generate a unit test file for a React component using Testing Library. Use when adding test coverage to new or existing components.

• pf-analytics-repo-pruning

  Flag archived or inactive repos in PatternFly Analytics repos.json for removal. Use when auditing tracked codebases or pruning stale entries from analytics.

• pf-bug-triage

  Triage PatternFly bug reports — assess completeness, suggest fixes, identify affected components, and recommend assignees. Use when reviewing new bug issues or preparing them for assignment.

• pf-content-review

  Review content against PatternFly and Red Hat voice and tone standards. Use when contributing to patternfly.org, writing UI copy for Red Hat products, reviewing design guidelines, or editing externally sourced or AI-generated content.

• pf-create-issue

  Create well-structured GitHub issues for PatternFly repositories with templates, follow-up tracking, and duplicate detection. Use when filing bugs, feature requests, or cross-repo follow-ups.

• pf-css-var-scan

  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-duplicate-epic

  Clone a Jira epic from another project into the PF Jira space with back-links and feature attachment. Use when duplicating COST or cross-project epics into PF for tracking.

• pf-figma-diff

  Diff Figma designs to identify what changed and generate code update checklists. Use when syncing code with updated designs or reviewing what changed between iterations. Requires Figma MCP.

• pf-modifier-scan

  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.

• pf-org-version-update

  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.

• pf-prerelease-audit

  Audit a consumer project against PatternFly prerelease packages, compare validation results, classify compatibility findings, and produce a report. Use when evaluating a PatternFly release candidate in any consuming repository.

• pf-prototype-mode

  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-quarterly-report-gen

  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-rhds-icon-finder

  Find Red Hat Design System icons (@rhds/icons) by keyword or use case with visual previews. Use when choosing an icon for a UI element or looking up available icons.

• pf-semantic-release-debug

  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.

• pf-summarize-jira-issues

  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.

• pf-summarize-pr-reviews

  Summarize GitHub pull requests awaiting your review with status, age, and priority. Use when triaging your review queue, prioritizing code reviews, or checking what PRs need attention.

• pf-token-build

  Build CSS design tokens for PatternFly core and copy them to the PatternFly repo. Use when regenerating tokens after design changes or during release preparation.

• pf-write-example-description

  Write and refine example descriptions for PatternFly.org component and demo pages. Use when authoring or updating the prose in PatternFly example markdown files.

Similar plugins