skills.rest
patternfly
patternflyOFFICIAL
Explore all skills by this author →
Website𝕏@patternflyGitHub

pf-compliance-checker

Analyze Figma prototypes for PatternFly v6 conformance and generate an HTML compliance report.

10|26|Updated Jul 8, 2025
Search Tags:#typography#figma#design-review#color-palette#ux-patterns#conformance#patternfly
One-click install
npx skills add https://github.com/patternfly/ai-helpers --skill pf-compliance-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pf-compliance-checker
Source: https://github.com/patternfly/ai-helpers/tree/main/plugins/figma/skills/pf-compliance-checker
Command: npx skills add https://github.com/patternfly/ai-helpers --skill pf-compliance-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node-fetch, and includes scripts (resource) components.

What problem does it solve?

Validates Figma prototypes against PatternFly v6 design system standards, helping design teams ensure color, typography, spacing, and component usage align with PatternFly guidelines.

Core Features & Use Cases

  • Automated conformance analysis across colors, typography, spacing, components, and UX patterns.
  • Generates a comprehensive HTML report with an executive summary and actionable improvements.
  • Works in design-review workflows when a Figma URL is provided, enabling quick validation of design decisions.

Quick Start

Run the PatternFly checker against a Figma file URL to generate a comprehensive conformance report.

Frequently Asked Questions about pf-compliance-checker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate my Figma designs against the PatternFly v6 design system?▼

To validate Figma designs against PatternFly v6, you supply a Figma URL to run an automated analysis script. This checks your Figma prototypes for PatternFly conformance across colors, typography, spacing, components, and UX patterns.

What do I need to check PatternFly conformance in Figma?▼

To check PatternFly conformance, you need a FIGMA_TOKEN configured via an environment variable or figma-config.env file, a Figma file URL, and Node.js version 18 or higher installed to execute the patternfly-check.js script.

How does automated design review for PatternFly v6 work?▼

Automated PatternFly v6 design review works by analyzing a supplied Figma URL against design system guidelines. It evaluates color palettes, typography, spacing, components, and UX patterns to ensure alignment with PatternFly conformance rules.

What output do I get from a PatternFly v6 conformance check?▼

From a PatternFly v6 conformance check, you get a comprehensive HTML report. This report includes an executive summary of design compliance and actionable improvements for your reviewed Figma prototypes.

Can I use this PatternFly compliance checker for QA workflows?▼

Yes, you can use this PatternFly compliance checker for QA workflows. It analyzes Figma prototypes for PatternFly v6 conformance, enabling quick validation of design decisions during design-review and QA stages.

Related Skills

Explore More Design & Creative Skills→
hoodinihoodini
262

figma

Convert Figma design data into React components, CSS, and Tailwind tokens.

Community
Intermediate
cexllcexll
2.7k

prototype-prompt-generator

Generate structured UI/UX prototype prompts for mobile and web applications.

Community
Advanced
niallr12niallr12

review-design

Audit a component's CSS properties and resolved design tokens against its Figma source via MCP server.

Community
Advanced
xiaoliwanshuixiaoliwanshui
21

ui-ux-pro-max

Plan, build, and evaluate UI/UX designs across web and mobile.

Community
Advanced