Menü
Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. Use when building AI experiences that should follow Red Hat brand and UX patterns.
| name | pf-ai-experience-patterns |
| description | Apply Red Hat's AI design language to AI-powered features — chatbots, assistants, generation UIs. Use when building AI experiences that should follow Red Hat brand and UX patterns. |
This skill applies Red Hat's official design language for AI-enabled features (last updated February 2026). When building AI features, proactively apply these patterns to create transparent, polished, brand-compliant experiences.
Authoritative source: https://staging.patternfly.org/ai/design-language
Supporting files in this skill:
guidelines/design-rules.md — Detailed iconography, chatbot, color, and animation rulesguidelines/reference-mapping.md — Reference image lookup tables for review findingsreferences/ — 21 extracted visual examples from key pagesreferences/REFERENCE-INDEX.md — Descriptions of each reference imageEvery AI experience must follow these three principles:
Critical: It should ALWAYS be clear when and how AI is being used.
For AI-assisted features (search, generation, editing): Place a transparency notice at the beginning of the experience. Minimum text: "This feature uses AI technology. Do not include any personal information or other sensitive information in your input." Include persistent notice: "Always review AI-generated content prior to use." Reference the Red Hat Privacy Statement.
For virtual assistants/chatbots: Show notice before user interacts and before any content is generated. Include an info icon (ℹ️) with persistent "Always review AI-generated content prior to use." Use AI icon + "AI" tag as visual and verbal indicators.
For AI-generated content: Must include a label AND icon indicating content was created using AI (e.g., Sparkle icon + "AI-assisted results" heading).
Red Hat uses 9 official rh-ui-icon-ai-* icons based on sparkles. Always pair icons with text ("...with AI", "...by AI"). Never create custom AI icons — request via #help-brand. See guidelines/design-rules.md for the full icon list and rules.
All chatbots must use Red Hat's robot icon as their avatar. Use PatternFly non-status color tokens for avatar colors. No gradients on launch buttons or chat message boxes. See guidelines/design-rules.md for full chatbot and chat message rules.
Don't use color coding or gradients to indicate AI. AI features use the same colors as other interface elements. Use premade sparkle animations only — triggered on hover/click, loop once. See guidelines/design-rules.md for full color table and animation rules.
When analyzing a design against Red Hat AI patterns:
Before deciding compliance, inspect the full UI for gradients on AI-related surfaces:
If any of the above uses gradient color, mark as ❌ failed.
Read guidelines/reference-mapping.md to find the correct reference image for each failed check.
Present a results table, then show the reference image for each ❌ item with a brief explanation of what needs to change.
Results table format:
| Category | Status |
|---|---|
| [Check item] | ✅ Compliant |
| [Check item] | ❌ Missing/Failed |
For each ❌ item, show the reference image and explain what needs to change. Always show reference images for failed items so users can visually compare the correct pattern against their current implementation.
Transparency:
Iconography:
rh-ui-icon-ai-* icons (not creating custom ones)Color & Styling:
Brand Compliance:
@patternfly/react-icons package: https://www.npmjs.com/package/@patternfly/react-iconsGuidelines updated February 2026. This skill does not replace AI Assessment, Privacy Impact Assessment, or other required reviews.
Remember: The goal is transparency. Users want to know when they're interacting with AI. Over-communicate rather than under-communicate.
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.
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.
Identify PatternFly icons in Figma mockups and provide the correct React import statements. Use when implementing a design from Figma, verifying icon usage in a prototype, or finding the correct icon imports for React components. Requires Figma MCP.
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.
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.
Create and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.