cucoreanu/personal-skills

Designs UI in Penpot via MCP with component discipline, flex alignment, outside-in build order, mockup/design modes, and optional skill updates from user feedback. Use for Penpot mockups, high-fidelity designs, Penpot MCP work, or component/variant refactors in Penpot.

O que é personal-skills?

personal-skills is a Claude Code agent skill that designs UI in Penpot via MCP with component discipline, flex alignment, outside-in build order, mockup/design modes, and optional skill updates from user feedback. Use for Penpot mockups, high-fidelity designs, Penpot MCP work, or component/variant refactors in Penpot.

Funciona com~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/cucoreanu/personal-skills/tree/HEAD/skills/penpot-design

Documentação

Penpot Design

Penpot MCP only — no parallel HTML/CSS unless asked. Read high_level_overview once; inspect focused page (shapeStructure, components/tokens) before writes.

Ask first

Mode: mockup or design?
Instructions: what to build/change. Multi-variant alternatives only if asked.
Platform: use project rules if set; else ask. Never assume iOS/Android/web.

Stop when any is missing.

Modes

Mockup — low-fi validation: structure, hierarchy, flow; simple fills, real spacing; no polish unless asked.

Design — higher fidelity: tokens, typography, states, chrome. Same component/flex rules. Prefer group → componentize → refine over rebuild.

Rules

Components: appears twice → component/instance. Same foundation, different state → variants (Active, State, Size, …). Structure on mains; overrides on copies; detach() to fork only. Names: Toolbar/Button; layers: background, icon, label (stable across variants). Depth ≤ 4; no mains inside mains.

Layout: flex/grid; penpotUtils.addFlexLayout if children exist. Spacing: 8dp scale (4 half-step). Controls: material-alignment.md. Active = variant/style, not layout shift. Z-order: background → content → overlays.

Build tree: outside-in only — container (empty + flex) → its direct-child shells (z-order) → recurse into each child’s elements. Never wrap existing leaves. Detail: build-order.md.

Process: library: tokens → atoms → variants. Then assemble screens with the build tree. Existing work: group → createComponent → replace dupes with instances. Verify with export_shape. Plan before large rewrites.

API: penpot-api.md. Deep dive: repo research/penpot-design-practices.md.

Extendability

If feedback could become a generic Penpot rule (not project-specific), ask: "Add this to penpot-design after we finish?"

Yes: note wording during task; after task done edit personal-skills/skills/penpot-design/; reinstall:
```
npx skills add cucoreanu/personal-skills --skill penpot-design
```
then confirm what changed.
No: session-only. Never edit skill mid-task unless user asks now.

Done

Mode, instructions, platform (if needed) confirmed
Dupes are components; states are variants
Flex/grid + Material-inspired control alignment
Canvas built outside-in (container → child shells → nested elements)
Mockup low-fi / design hi-fi per mode; export checked