Skill Claude CodeCodex
Audit a Penpot design for accessibility issues following WCAG 2.1/2.2 standards and output a structured report. Use when the user wants to check a design for accessibility problems, validate WCAG compliance (AA or AAA), find color contrast issues, check touch target sizes, review heading hierarchy, or get a…
Skill Claude CodeCodex
Design production-grade UI from scratch in Penpot, acting as a senior visual designer. Use when an agent needs to create an interface from a brief, concept, or description — without an existing design system or codebase to translate from. This skill makes real aesthetic decisions, builds a coherent design language…
Skill Claude CodeCodex
Use this skill when the task involves translating an application page, view, or multi-section layout into Penpot. Triggers: 'write to Penpot', 'create in Penpot from code', 'push page to Penpot', 'take this app/page and build it in Penpot', 'create a screen', 'build a landing page in Penpot', 'update the Penpot screen…
Skill Claude CodeCodex
Build or update a professional-grade design system in Penpot from a codebase. Use when the user wants to create tokens (color, spacing, typography, radius), build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Penpot. This skill teaches WHAT to build…
Skill Claude CodeCodex
Import and reconstruct Figma designs into Penpot with high fidelity. Use when the user wants to migrate a Figma file, component library, or screen to Penpot — preserving layout behavior (Auto Layout → Flex), component structure and variants, design tokens (Figma Variables → Penpot tokens), and visual hierarchy. This…
Skill Claude CodeCodex
Infer design tokens from an existing Penpot design and apply them back to the elements. Use when the user wants to extract tokens from a design that uses hardcoded values, create a proper token system (global + semantic sets) from existing visual properties, or sync tokens to elements after inferring them. Triggers…
Skill Claude CodeCodex
Semantically rename layers in a Penpot design using HTML semantic element names as convention. Use when the user wants to rename layers to reflect their semantic role (nav, header, footer, section, article, button, input, h1, p, img, etc.), clean up auto-generated layer names, or prepare a design for handoff with…