skills.rest
CinimoDY
CinimoDYCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-audit

Audit eiDotter React components against V.37 Figma designs via Figma Console MCP.

2|1|Updated Jan 27, 2025
Search Tags:#react#qa#audit#figma#ui-design#component-parity
One-click install
npx skills add https://github.com/CinimoDY/eiDotter --skill figma-audit-cinimody
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-audit
Source: https://github.com/CinimoDY/eiDotter/tree/main/.claude/skills/figma-audit
Command: npx skills add https://github.com/CinimoDY/eiDotter --skill figma-audit-cinimody

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly verify that eiDotter React components align with their V.37 Figma designs, reducing visual QA time and design drift.

Core Features & Use Cases

  • Figma Console MCP integration: fetches component metadata and page IDs to compare against React implementations.
  • Design parity validation: cross-checks variants, sizes, and states between design tokens and component props.
  • Use Case: A QA engineer can run a parity audit to identify missing variants or pixel-level mismatches and produce a remediation plan.

Quick Start

Run the figma-audit <ComponentName> to generate a parity report against the V.37 design.

Frequently Asked Questions about figma-audit

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

FAQPage Schema
How do I audit React components for Figma design parity?▼

To audit React components for Figma design parity, run the figma-audit command with a component name. It compares eiDotter React implementations against V.37 Figma designs to identify missing variants or pixel-level mismatches.

What is design parity verification and how does it work with Figma Console MCP?▼

Design parity verification cross-checks variants, sizes, and states between Figma design tokens and React component props. Figma Console MCP integration fetches component metadata and page IDs to automate this comparison against source implementations.

Do I need Figma Console MCP access to run a component parity audit?▼

Yes, you need Figma Console MCP access to run a component parity audit. The workflow requires it to fetch component metadata and page IDs, alongside eiDotter DS V.37 designs and component source references.

Can I use this workflow to identify missing variants in React UI components?▼

Yes, you can use this workflow to identify missing variants in React UI components. A QA engineer can run a parity audit to cross-check component variants and produce a remediation plan for any missing states.

What's the best way to reduce visual QA time for Figma and React component mismatches?▼

The best way to reduce visual QA time is running an automated parity audit against V.37 Figma designs. It quickly verifies that eiDotter React components align with designs, reducing manual checks and design drift.

Why does my React component have pixel-level mismatches compared to the Figma design?▼

React components have pixel-level mismatches when props do not align with Figma design tokens. Running a parity audit identifies these specific visual gaps and generates a remediation plan to correct the discrepancies.

Related Skills

Explore More Design & Creative Skills→
CinimoDYCinimoDY
2

migrate-component

Migrate eidotter components to React Aria with Tailwind-first styling.

Community
Advanced
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
ilanf23ilanf23
1

component-spec

Generate structured component specifications with anatomy, variants, states, and accessibility.

Community
Intermediate
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced