Pf Figma Check

Name: Pf Figma Check
Author: rh-uxd

ASecurity

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.

9 stars
0 votes
0 copies
1 view
Added September 5, 2026

designgobashnodeapi

Works with

Security analysis

A92/100

mediumInstalls packages at runtime which could introduce malicious dependencies

Pro scans all 9 files and shows the line behind each finding

Scanned September 5, 2026

npx -y skills add rh-uxd/ai-helpers --skill pf-figma-check --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Pf Figma Check?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/rh-uxd-pf-figma-check/badge)](https://www.skillsdirectory.com/skills/rh-uxd-pf-figma-check)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
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_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)