Skill detail

penpot-audit-tokens

Audit a Penpot design for design-system / token GOVERNANCE issues (distinct from accessibility): hardcoded colors where a token exists, off-grid spacing, orphan/unresolved/unused tokens, duplicated values, and detached parts that should be component instances. Produces a severity report and suggests semantic-token swaps. Triggers: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

Why we recommend it: Audits a Penpot design for token governance issues like hardcoded colors, off-grid spacing, and orphan tokens. Relevant to design-system consistency in dashboards but Penpot-specific and audit-only.

MatchPossibleRecommended for Designers
Sourcepenpot/​penpot-ai-kitExternal source
Reported installsNot reportedPopularity signal only

Inspect before use

Read the source instructions and check the requirements before you install this skill.

Saved source preview

SKILL.md

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: penpot-audit-tokens
description: "Audit a Penpot design for design-system / token GOVERNANCE issues (distinct from accessibility): hardcoded colors where a token exists, off-grid spacing, orphan/unresolved/unused tokens, duplicated values, and detached parts that should be component instances. Produces a severity report and suggests semantic-token swaps. Triggers: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'."
disable-model-invocation: false
version: 0.2.1
audiences: [design-system, design-engineer]
mode-default: suggest
requires:
  - shared/penpot-mcp-tool-reference.md
  - shared/plugin-api-gotchas.md
  - shared/tokens-schema.json
  - shared/modes-and-policies.md
---

# penpot-audit-tokens — design-system governance auditor

## 1. Title + How it works
`penpot-audit-tokens` enforces token governance — a concern **separate from accessibility**. Every
mutation goes through `execute_code`; validate visually with `export_shape`; read structure with
`penpotUtils.shapeStructure` (full tool surface: `shared/penpot-mcp-tool-reference.md`). It collects
every fill/stroke/spacing/radius value, compares
against the active token system (`penpotUtils.tokenOverview()`), and reports hardcoded values, off-grid
spacing, orphan/unresolved tokens, and duplicates — each with a suggested semantic-token swap.

## 2. The One Rule That Matters Most
**Suggest, and only auto-swap exact equalities.** The single safe auto-fix is replacing a raw value
that is **exactly equal** to an existing token's resolved value with that token. Everything else
(near-matches, off-grid rounding, new tokens) is a suggestion for review.

## 3. Penpot MCP Tool Reference
Full surface: `shared/penpot-mcp-tool-reference.md`. Key calls: `execute_code` with
`penpotUtils.analyzeDescendants` (collect values) and `penpotUtils.tokenOverview()` /
`findTokenByName` (the token system to compare against).

## 4. Plugin API Essentials
- Read raw values from `shape.fills`/`shape.strokes` (hex), `shape.borderRadius*`, flex `rowGap`/`columnGap`/`*Padding`, layout margins.
- A shape's applied tokens are in `shape.tokens` (`{ property: tokenName }`). A property with a raw value but no entry there is "hardcoded".
- Token resolved values via `token.resolvedValue`. Use exact token `type` strings from `shared/tokens-schema.json`.
- Comparisons are read-only; the only mutation (exact-equality swap) uses `shape.applyToken` — **#2 in `shared/plugin-api-gotchas.md`**: async, chunked, verify in a later call.
- Verify unfamiliar signatures with `penpot_api_info` before relying on them.

## 5. Token-Aware Brief Contract
- **Context** — scope (page/selection/library), the active token system.
- **Objective** — single: "audit token governance of X".
- **Inputs** — target shapes, the 4px grid, the active token sets.
- **Constraints** — read-only except exact-equality auto-swaps (with explicit opt-in).
- **Acceptance Criteria** — all raw values reported; off-grid spacing listed; orphan/unused tokens found; each finding has a suggested token + confidence.

Act as a **design-system governance engineer**.

## 6. Mandatory Workflow
**Phase 0 — Inspection.** `high_level_overview`; collect usage with `scripts/collectStyleUsage.js` and the token system with `tokenOverview()` (`references/01-inspection.md`).

**Phase 1 — Hardcoded values.** `scripts/detectHardcodedValues.js` (`references/02-hardcoded-value-detection.md`) — raw fills/strokes vs tokens; mark exact-equal vs near-match.

**Phase 2 — Grid & orphans.** `scripts/checkGridAndOrphans.js` (`references/03-orphan-and-grid-checks.md`) — off-grid spacing; unresolved references; unused tokens; duplicates.

**Phase 3 — Report.** `scripts/generateTokenReport.js` (`references/04-report-generation.md`). ✋ Checkpoint: present findings; offer to auto-apply ONLY the exact-equality swaps (Apply-with-review), route the rest (new tokens,
Read the full source on GitHub (opens external page)
Context

Related work