メニュー
Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.
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.
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 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.
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.
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-project-scaffolder |
| description | Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox. |
Create a clean PatternFly React starting point with current conventions.
Use the PatternFly MCP server as the primary source for up-to-date component APIs, usage examples, and migration-safe setup guidance.
Use the official PatternFly React seed repository first when possible.
git clone https://github.com/patternfly/patternfly-react-seed
cd patternfly-react-seed
npm install
npm run start:dev
npm install @patternfly/react-core @patternfly/react-icons @patternfly/react-table
Feature-based dependencies:
npm install @patternfly/react-charts victory
npm install @patternfly/chatbot
npm install @patternfly/react-component-groups
import "@patternfly/react-core/dist/styles/base.css";
Add feature CSS only when relevant:
import "@patternfly/patternfly/patternfly-charts.css";
import "@patternfly/chatbot/dist/css/main.css";
import "@patternfly/react-component-groups/dist/css/main.css";
PageSection, Stack, Grid) before utility classes.