Figma Component Audit Skill: Naming, Gaps, Variants

What is the figma-component-audit skill?

The figma-component-audit skill is a compact markdown file that tells an AI agent how to audit a Figma component library. It looks for inconsistencies, naming problems and coverage gaps, then produces prioritised recommendations.

Its input is text. The skill asks for a pasted list of component names, or a description of what exists, so the agent never needs to open a Figma file to do the review.

What you give the agent

• The component list or a description of the library.
• The product type: mobile app, web app, desktop or multi-platform.
• The design system maturity: new, growing, mature or legacy.
• An optional primary concern, such as naming or missing states.

What you get back

• An audit summary scoring naming consistency, component coverage, variant completeness and documentation out of 10, with a red, amber or green status and an overall health score.
• A one line verdict that names the single most important thing to fix.
• Naming issues, each with what is happening, why it matters, the exact fix and a before and after example.
• Coverage gaps, a variant table and a fix plan with effort, impact and a do first column.

The naming convention it enforces

The skill does not leave the naming fix open. Components use PascalCase, such as NavigationBar. Variants use lowercase with slashes, such as size/large or state/hover. Pages use all caps, such as COMPONENTS and FOUNDATIONS.

Who the figma-component-audit skill is for

Best for

• Designers inheriting a messy library who need a naming rule and a list of what to rename first.
• Leads checking whether every interactive component covers default, hover, active, disabled and error states.
• Teams about to grow a library. Pair it with design-system guidance on structure.

Not for

• Reading a live Figma file by itself. The skill works from your pasted list. For agents that connect to Figma, see figbridge-mcp or figma-ui-mcp.
• Auditing tokens, documentation and adoption across a whole system. A broader audit skill sits in the same repository.
• Creating the missing components. It recommends them and does not draw them. To build a library in Figma, see figma-generate-library.

Use it with UiChemy

The audit tidies the library, not the site. When the Figma design is ready, UiChemy Figma to WordPress converts it into an editable WordPress page. The audit and the conversion are separate steps. Click Get Started on uichemy.com.

How to install Figma Component Audit Skill: Naming, Gaps, Variants

npx pm-claude-skills add

1. Run the library installer

   The README gives npx pm-claude-skills add for any tool, naming Cursor, Codex, Windsurf, Cline and Zed. It installs the whole library, so this skill arrives with it.

2. Or use the Claude Code plugin search

   In Claude Code, run /plugin and search for pm-skills, which the README describes as the official Anthropic directory entry.

3. Or copy one folder

   Run git clone https://github.com/mohitagw15856/pm-claude-skills.git, then copy exports/openclaw/figma-component-audit to the place your agent loads skills from. For ChatGPT and Gemini, the README says to copy from the exports folder.

4. Paste your components

   Ask for a Figma component audit and paste the component names with the product type and maturity. Add a primary concern if you have one.

Check that it loaded

Paste ten component names with a couple of inconsistent ones. The agent should return the scored summary, a naming section with before and after examples, and a ranked fix plan.

Read the official instructions on GitHub

Key features

• Four-part inputThe agent collects the component list, the product type, the design system maturity and an optional primary concern before it starts, so a legacy web app is judged differently from a new mobile one.
• Scored audit summaryA table rates naming consistency, component coverage, variant completeness, documentation and overall health out of 10 with a status colour, followed by a verdict on the single most important fix.
• Naming issue write-upsEvery naming problem lists what is happening, why it matters to designers and developers, the exact convention to adopt, and a before and after example.
• Fixed naming rulesPascalCase for components, lowercase slash paths for variants such as state/hover, and all caps for pages. The skill's anti-patterns reject naming complaints that come without a specific convention.
• Coverage gap tableEach missing component gets a priority of High, Medium or Low and a stated use case, filtered to what the product type actually needs.
• Variant completeness checkA grid checks default, hover, active, disabled and error for each component and writes the missing states into one column, for example a button missing active and error.
• Impact ordered fix planFixes carry effort and impact ratings and a do first flag. The quality checks require the order to follow the impact to effort ratio.
• Severity groupingThe anti-patterns require issues to be grouped as Critical, Major or Minor instead of listed at equal weight, so the plan stays actionable.

Frequently asked questions