All authors
Claude Skills by rh-uxd
github.com/rh-uxd65 skills0 installs93 views
- Pf A11y AuditAudit 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.Votes: 0GitHub stars: 9
- Pf A11y KeyboardTest keyboard accessibility of PatternFly UIs via live browser interaction. Use when validating keyboard navigation, focus management, or interaction patterns in a running application.Votes: 0GitHub stars: 9
- Pf ReviewRun 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.Votes: 0GitHub stars: 9
- Pf Security ScanScan 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.Votes: 0GitHub stars: 9
- Pf Ai AuditAudit 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.Votes: 0GitHub stars: 9
- Pf Color ScanFind 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.Votes: 0GitHub stars: 9
- Pf Css Token CheckDetect 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 refactoring styles to use PatternFly tokens.Votes: 0GitHub stars: 9
- Pf Figma CheckCheck 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.Votes: 0GitHub stars: 9
- Pf Figma Token CheckAudit 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.Votes: 0GitHub stars: 9
- Pf Icon FinderIdentify 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.Votes: 0GitHub stars: 9
- Pf Figma Design ModeCreate and edit Figma design files using PatternFly-approved component libraries. Use when building, updating, or restructuring Figma frames and components. Requires Figma MCP.Votes: 0GitHub stars: 9
- Pf Screenshot MappingMaps 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 branding and visual styling (logos, colors, typography, border radius, shadows, component shape). Use when the user shares a UI image or asks whether a screen can be built with PatternFly, which Patte...Votes: 0GitHub stars: 9
- Pf Css Migration ScanScan 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.Votes: 0GitHub stars: 9
- Pf React Migration ScanScan 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.Votes: 0GitHub stars: 9
- Pf Release Candidate UpdateUpdate @patternfly/* npm dependencies to the latest release candidate versions. Use when testing the next PF release or bumping to RC packages.Votes: 0GitHub stars: 9
- Pf Chart GenGenerate PatternFly chart components with theming, responsive sizing, and accessibility. Use when building charts, data visualizations, or dashboards with PatternFly.Votes: 0GitHub stars: 9
- Pf Component CheckAudit PatternFly React component nesting, wrapper hierarchies, and layout structure. Use when scanning for hierarchy violations or debugging spacing caused by missing wrapper components.Votes: 0GitHub stars: 9
- Pf Component Reuse CheckDetects 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 the user asks to prefer PatternFly instead of a custom component.Votes: 0GitHub stars: 9
- Pf DeployDeploy 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.Votes: 0GitHub stars: 9
- Pf Design Comments SetupIntegrate @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.Votes: 0GitHub stars: 9
- Pf Form GenGenerate PatternFly form components with validation, layout, and accessibility. Use when building forms, adding form fields, or creating validated input workflows.Votes: 0GitHub stars: 9
- Pf Import CheckAudit PatternFly imports for correctness and bundle-size anti-patterns. Use when imports fail, bundles are bloated, or after upgrading PatternFly versions.Votes: 0GitHub stars: 9
- Pf Project GenScaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.Votes: 0GitHub stars: 9
- Pf Table GenGenerate PatternFly table components with sorting, filtering, pagination, and expandable rows. Use when building data tables, adding table features, or migrating HTML tables to PatternFly.Votes: 0GitHub stars: 9
- Pf Test GenGenerate a unit test file for a React component using Testing Library. Use when adding test coverage to new or existing components.Votes: 0GitHub stars: 9
- Pf Analytics Repo PruningFlag archived or inactive repos in PatternFly Analytics repos.json for removal. Use when auditing tracked codebases or pruning stale entries from analytics.Votes: 0GitHub stars: 9
- Pf Bug TriageTriage PatternFly bug reports — assess completeness, suggest fixes, identify affected components, and recommend assignees. Use when reviewing new bug issues or preparing them for assignment.Votes: 0GitHub stars: 9
- Pf Content ReviewReview 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.Votes: 0GitHub stars: 9
- Pf Create IssueCreate 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.Votes: 0GitHub stars: 9
- Pf Css Var ScanAnalyze --pf- CSS custom property usage and naming patterns in PatternFly SCSS. Use when auditing variable definitions, debugging missing tokens, or finding unused custom properties.Votes: 0GitHub stars: 9
- Pf Duplicate EpicClone 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.Votes: 0GitHub stars: 9
- Pf Figma DiffDiff 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.Votes: 0GitHub stars: 9
- Pf Modifier ScanAnalyze PatternFly modifier class (pf-m-*) usage across SCSS files and generate usage reports. Use when documenting modifier patterns, auditing CSS consistency, or planning refactors.Votes: 0GitHub stars: 9
- Pf Org Version UpdateUpdate 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.Votes: 0GitHub stars: 9
- Pf Prototype ModeEnable 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.Votes: 0GitHub stars: 9
- Pf Quarterly Report GenGenerate quarterly Jira status reports with RAG assessment, blocker tracking, and next-quarter recommendations. Use when preparing quarterly initiative reviews or tracking epic progress.Votes: 0GitHub stars: 9
- Pf Rhds Icon FinderFind 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.Votes: 0GitHub stars: 9
- Pf Semantic Release DebugDiagnose 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.Votes: 0GitHub stars: 9
- Pf Summarize Jira IssuesSummarize 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.Votes: 0GitHub stars: 9
- Pf Summarize Pr ReviewsSummarize 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.Votes: 0GitHub stars: 9
- Pf Token BuildBuild CSS design tokens for PatternFly core and copy them to the PatternFly repo. Use when regenerating tokens after design changes or during release preparation.Votes: 0GitHub stars: 9
- Pf Write Example DescriptionWrite and refine example descriptions for PatternFly.org component and demo pages. Use when authoring or updating the prose in PatternFly example markdown files.Votes: 0GitHub stars: 9
- Uxd Design HandoffProduce an implementation-ready design handoff spec from a validated design. Maps UI elements to design system components, enumerates all states, and generates testable acceptance criteria. Use when transitioning from design to development.Votes: 0GitHub stars: 9
- Uxd DiscoveryProduce a structured UX discovery brief from a feature request, Jira issue, or problem statement. Use when framing a design problem, identifying strategic decisions, or scoping design work.Votes: 0GitHub stars: 9
- Uxd Evaluate Design HeuristicsScore a design against accessibility, visual hierarchy, content, and state coverage heuristics. Use when a team asks for an AI design critique, a heuristic review, or a neutral evaluation of one or more design directions. Works with screenshots, Figma context, or any visual input.Votes: 0GitHub stars: 9
- Uxd Figma ReadRetrieve design context from a Figma file. Use when any workflow needs screenshots, page structure, node metadata, or design tokens from a Figma URL. Handles URL parsing, Figma MCP detection with REST API fallback, page discovery, and frame export. Pair with other skills that need Figma input.Votes: 0GitHub stars: 9
- Uxd Prototype CreateCreate or refine a UX prototype from a Jira ticket, Figma design, feature description, or rough idea. Enumerates user journeys and page scenarios (empty/error/alternate conditions), wires mock data via ?scenario=, and supports export of each step × scenario. Use when starting a new prototype, integrating into an existing codebase, generating standalone HTML, or applying evaluation feedback.Votes: 0GitHub stars: 9
- Uxd Prototype EvaluateEvaluate a running prototype against a Jira ticket's acceptance criteria, automatically fix what fails, then run persona-based usability walkthroughs. Produces an HTML evidence report with screenshots, scores, and findings. Use when you want to validate a prototype, check usability, or generate evidence for an MR review.Votes: 0GitHub stars: 9
- Uxd Prototype ExportExport a prototype page or journey step as static HTML, a React component tree, or a PatternFly implementation spec, and install the Prototype Bar (Sources, Prototype|Eval, Scenario, Export). Use when capturing the current view, batch-exporting journey screens and page scenarios, or wiring provenance/eval/scenario navigation into a prototype.Votes: 0GitHub stars: 9
- Uxd Prototype PublishPublish a prototype to a git merge request, GitHub Pages, GitLab Pages, or Vercel. Use when sharing a finished prototype for review, deploying a sanitized public copy, or updating Jira with submission links.Votes: 0GitHub stars: 9