원클릭으로 Manus에서 모든 스킬 실행

penpot-audit-accessibility

스타12

포크1

업데이트2026년 7월 9일 08:24

Audit a Penpot design against WCAG 2.1/2.2 AA (optionally AAA) and produce a structured severity report: color contrast, touch/target sizes, text alternatives, heading hierarchy, and keyboard/focus order. Proposes fixes — does not auto-apply. Also serves as the Evaluator in the brief-to-screen loop. Triggers: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

penpot

penpot/penpot-ai-kit

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

웹·디지털 인터페이스 디자이너컴퓨터 및 수학직·SOC 15-1255

파일 탐색기

9 개 파일

SKILL.md

readonly

이 저장소의 다른 Skills

같은 저장소

penpot-audit-tokens

penpot/penpot-ai-kit

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'.

2026-07-0912

penpot-build-from-code

penpot/penpot-ai-kit

Translate an existing application page, view, or component code into a Penpot screen that is bound to the existing design system — mapping code styles onto semantic tokens and reusing library components instead of raw shapes. Use when the user has real code/markup and wants it reconstructed in Penpot, section by section, on-system. Triggers: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

2026-07-0912

penpot-build-screen

penpot/penpot-ai-kit

Design production-grade screens in Penpot from a brief, as a senior visual designer — reusing the existing design system (tokens + components) and assembling section by section, never one-shot. Use to create a screen/page/landing/dashboard from a description. NOT for translating existing code (use penpot-build-from-code). Triggers: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

2026-07-0912

penpot-component-factory

penpot/penpot-ai-kit

Build and maintain Penpot components with COMPLETE variant matrices — sizes, hierarchies, and all interactive states (default/hover/pressed/focus/disabled) — fully tokenized and correctly named. Use to create a new component with variants, fill in missing states, or normalize an existing component. Triggers: 'create a Button component with variants', 'build component variants', 'add hover/pressed/disabled states', 'make a variant matrix', 'turn this into a component with sizes', 'normalize this component'.

2026-07-0912

penpot-design-md

penpot/penpot-ai-kit

Extract a DESIGN.md design-documentation file from a Penpot file: a portable markdown spec (YAML frontmatter with colors/typography/rounded/spacing/components token maps + prose sections: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) in the design-md format, grounded in the file's real tokens, library assets, and sampled component styles — never invented. Read-only on the canvas; writes one local markdown file. Triggers: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

2026-07-0912

penpot-design-to-code-review

penpot/penpot-ai-kit

Review a Penpot design against its implemented code (a source component or Storybook story) and emit a structured DRIFT report. Use when an engineer needs to confirm the build matches the design: extract HTML/CSS from a selection, map its tokens/structure/states to the code component, diff them, and list what each side is missing with severity and a reconciliation. Degrades gracefully to a design-system-token check when no code source is supplied. Triggers: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

2026-07-0912

name	penpot-audit-accessibility
description	Audit a Penpot design against WCAG 2.1/2.2 AA (optionally AAA) and produce a structured severity report: color contrast, touch/target sizes, text alternatives, heading hierarchy, and keyboard/focus order. Proposes fixes — does not auto-apply. Also serves as the Evaluator in the brief-to-screen loop. Triggers: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.
disable-model-invocation	false
version	0.2.0
audiences	["design-system","product-designer","design-engineer","migration"]
mode-default	suggest
requires	["shared/penpot-mcp-tool-reference.md","shared/plugin-api-gotchas.md","shared/naming-conventions.md","shared/modes-and-policies.md"]

penpot-audit-accessibility — WCAG AA auditor

1. Title + How it works

penpot-audit-accessibility inspects a design and reports accessibility issues. Every mutation goes through execute_code (this skill only reads); validate visually with export_shape; read structure with penpotUtils.shapeStructure (full tool surface: shared/penpot-mcp-tool-reference.md). It reads the object tree (penpotUtils.shapeStructure/analyzeDescendants), computes WCAG contrast from resolved fills, checks sizes and semantic naming, and emits a severity-ranked report. It proposes; it does not auto-fix.

2. The One Rule That Matters Most

Report, don't silently fix. Every issue gets severity + impact + a concrete fix + confidence. Acceptance criteria (AA contrast, target size) are gates — a screen isn't "done" until they pass.

3. Penpot MCP Tool Reference

Full surface: shared/penpot-mcp-tool-reference.md. Key calls: execute_code with penpotUtils.analyzeDescendants (collect text/colors/sizes), penpot.shapesColors(shapes) if needed; export_shape to capture evidence for the report.

4. Plugin API Essentials

Gotcha numbers refer to shared/plugin-api-gotchas.md:

#1 — read resolved colors from shape.fills/shape.strokes (arrays; items immutable). Text color is the Text shape's fill.
#5 — get dimensions from shape.width/shape.height/shape.bounds (read-only; this skill never resizes).
Heading hierarchy depends on semantic layer names (h1…h6) — if layers are unnamed, recommend penpot-rename-layers first.
Focus/keyboard order is inferred from layout order + interactions; this is heuristic, flag as such.
Verify unfamiliar signatures with penpot_api_info before relying on them.

5. Token-Aware Brief Contract

Context — what's being audited (page/selection/component); product surface.
Objective — single: "audit X against WCAG 2.1 AA" (state AAA if requested).
Inputs — target shapes, conformance level, any known exceptions.
Constraints — read-only; no canvas mutation.
Acceptance Criteria — every interactive element checked; contrast 4.5:1 (normal) / 3:1 (large & UI); targets ≥24×24 (WCAG 2.2; note 44×44 for primary); headings ordered; report complete.

Act as an accessibility specialist.

6. Mandatory Workflow

Phase 0 — Inspection. high_level_overview; collect data with scripts/collectAccessibilityData.js (references/01-inspection.md).

Phase 1 — Contrast. scripts/checkColorContrast.js (references/02-contrast-checks.md) — text vs background, UI component contrast.

Phase 2 — Sizing. scripts/checkTouchTargets.js (references/03-sizing-checks.md) — interactive target sizes.

Phase 3 — Semantics. Heading hierarchy, labels/alt (from semantic names), keyboard/focus order heuristics.

Phase 4 — Report. scripts/generateReport.js (references/04-report-generation.md) — severity-ranked, handoff-ready. ✋ Checkpoint: present findings; if asked to fix, route safe fixes to the owning skill (e.g. penpot-foundations for token swaps) with review.

7. Critical Rules

Read-only; never mutate the canvas in this skill.
Every issue: Severity (High/Med/Low) + Issue + Impact + Fix + Confidence.
Use exact thresholds: 4.5:1 / 3:1; targets ≥24×24 (AA 2.2).
If naming is missing, flag heading-hierarchy checks as unreliable and recommend renaming first.
Mark heuristic checks (keyboard order) as such; don't overstate confidence.
No silent scope cuts — if you sampled, say so.

8. Domain Architecture

Report schema per issue:

{ severity, criterion (e.g. "1.4.3 Contrast"), element, current, required, fix, confidence }

Plus a summary: counts by severity, pass/fail per criterion, and a handoff checklist.

The final report must ALSO be emitted as a JSON object per shared/report-schemas/accessibility-report.schema.json — including the derived highOrMedium count (findings with severity High or Medium; what the brief-to-screen workflow branches on) — and mirrored to the run ledger.

9. Modes & Policies

Default suggest (read-only). Any fix is delegated to the owning skill under Apply-with-review.

10. State Management

Ledger under RUN_ID: phase, issues:[...], sampled. Lightweight; this skill is mostly read.

11. User Checkpoints

After phase	Artifacts	Ask
4 Report	severity report + `export_shape` evidence	Fix now (route to owning skill) or hand off?

12. Naming Conventions

shared/naming-conventions.md — semantic HTML names enable heading-hierarchy and label checks.

13. Anti-Rationalization Table

Excuse	Why it's wrong	Countermeasure (halt)
"Contrast looks fine to me."	Eyeballing isn't WCAG.	Compute the ratio; compare to 4.5:1 / 3:1.
"I'll just fix it myself quietly."	This skill is read-only/advisory.	Report with severity; route fixes to the owning skill with review.
"Targets are probably big enough."	Guessing fails AA 2.2.	Measure width/height; compare to ≥24×24.
"Headings are obvious from size."	Visual size ≠ semantic order.	Check semantic names; if missing, recommend `penpot-rename-layers`.
"Skip keyboard order, hard to tell."	Silent gaps mislead.	Provide a heuristic order and flag confidence explicitly.

14. Helper Code Snippets

// WCAG relative luminance + contrast ratio
function lum(hex){const c=hex.replace('#','');const v=[0,2,4].map(i=>parseInt(c.substr(i,2),16)/255)
  .map(u=>u<=0.03928?u/12.92:Math.pow((u+0.055)/1.055,2.4));return 0.2126*v[0]+0.7152*v[1]+0.0722*v[2];}
function ratio(a,b){const L1=lum(a),L2=lum(b);const hi=Math.max(L1,L2),lo=Math.min(L1,L2);return (hi+0.05)/(lo+0.05);}
return { example: Number(ratio('#101114','#F7F8FA').toFixed(2)) }; // ~ AA pass

15. Reference Resources

WCAG 2.1/2.2 SC 1.4.3 (contrast), 2.5.8 (target size), 1.3.1 (info & relationships), 2.4.3 (focus order).
penpot_api_info('Text'), penpot_api_info('Shape','fills').

16. Supporting Files

references/: 01-inspection.md, 02-contrast-checks.md, 03-sizing-checks.md, 04-report-generation.md. scripts/: collectAccessibilityData.js, checkColorContrast.js, checkTouchTargets.js, generateReport.js.