pf-compliance-checker
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.
Best use case
pf-compliance-checker is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using pf-compliance-checker should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pf-compliance-checker/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pf-compliance-checker Compares
| Feature / Agent | pf-compliance-checker | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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_NAME` - `https://www.figma.com/file/FILE_ID/FILE_NAME` ### Step 2: Run the checker ```bash 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)
Related Skills
pf-import-checker
Audit and fix invalid PatternFly import paths across packages. Use when imports fail, modules are unresolved, or after upgrading PatternFly versions.
pf-unit-test-generator
Generate a unit test file for a React component using Testing Library. Use when adding test coverage to new or existing components.
pf-prototype-mode
Enable 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.
pf-project-scaffolder
Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.
pf-component-structure
Audit PatternFly React component nesting, wrapper hierarchies, and layout structure. Use when scanning for hierarchy violations or debugging spacing caused by missing wrapper components.
write-example-description
Write and refine example descriptions for PatternFly.org component and demo pages. Use when authoring or updating the prose in PatternFly example markdown files.
summarize-jira-issues
Summarize 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.
semantic-release-troubleshooting
Diagnose 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.
quarterly-initiative-report
Generate quarterly Jira status reports with RAG assessment, blocker tracking, and next-quarter recommendations. Use when preparing quarterly initiative reviews or tracking epic progress.
pf-tokens
Build CSS design tokens for PatternFly core and copy them to the PatternFly repository. Use when regenerating tokens after design changes or during release preparation.
pf-org-version-update
Update 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.
pf-create-issue
Create 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.