Skip to content

pf-design-guide

Design guide -- component selection, interaction patterns, AI experience patterns

Plugin Details

  • Version: 0.1.0
  • Author: UXD Team
  • License: MIT
  • Scope: Generic
  • Category: Development Tools
  • Tags: patternfly design

Skills

Skill Description Invocable
/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 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 PatternFly components to use, or for a PatternFly component pass on a wireframe, lo-fi, or third-party UI reference.

Installation

Claude Code

/plugin install pf-design-guide@opendatahub-skills

OpenAI Codex — add the marketplace, then enable pf-design-guide from the /plugins browser:

codex plugin marketplace add opendatahub-io/skills-registry