| name | pf-figma-check |
| description | 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. |
PatternFly Compliance Checker
Analyze Figma prototypes against PatternFly v6 design system standards — components, spacing, typography, colors, and UX patterns.
Requirements
- Node.js 18+
node-fetch package (npm install node-fetch)FIGMA_TOKEN environment variable (or a figma-config.env file in the scripts directory)- View access to the Figma file
Workflow
Step 1: Validate input
Accept a Figma file URL from the user. Valid formats:
https://www.figma.com/design/FILE_ID/FILE_NAMEhttps://www.figma.com/file/FILE_ID/FILE_NAME
Step 2: Run the checker
node "$CLAUDE_SKILL_DIR/scripts/patternfly-check.js" "<figma-url>"
The script fetches the Figma file via API and analyzes all elements for PatternFly v6 compliance. An HTML report opens automatically in the browser.
Step 3: Present the summary
After the script completes, summarize the results for the user:
- Overall compliance score (percentage)
- Critical violations count and top categories
- Minor deviations count
- Recommendations for priority fixes
Step 4: Suggest next steps
- Focus on critical violations first — use pattern-based grouping to fix multiple issues at once
- Use the "Export JSON" button in the report for developer handoff
- Re-run after fixes to track improvement
What gets checked
Components (17 types): buttons, form inputs, cards, alerts, navigation, tables, modals, tooltips, pagination, breadcrumbs, badges, tabs, accordions, wizards, drawers
Design tokens: colors (PatternFly palette), typography (Red Hat fonts, sizes, weights), spacing (4px grid scale), border radius
Advanced checks: component states (hover, focus, disabled), spacing relationships, typography hierarchy (H1 count), microcopy consistency (Delete vs Remove), component library usage (detached instances)
