Communitygithub.com

cucoreanu/personal-skills

Plans and builds UI mockups in Penpot with user-centered workflow, fidelity levels, a six-step process, and outside-in canvas assembly. Use when creating mockups, screen mockups, wireframe-to-mockup work, low/high-fidelity UI, platform-specific layouts, or mockup design best practices in Penpot.

Qu'est-ce que personal-skills ?

personal-skills is a Claude Code agent skill that plans and builds UI mockups in Penpot with user-centered workflow, fidelity levels, a six-step process, and outside-in canvas assembly. Use when creating mockups, screen mockups, wireframe-to-mockup work, low/high-fidelity UI, platform-specific layouts, or mockup design best practices in Penpot.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cucoreanu/personal-skills/tree/HEAD/skills/penpot-mockup
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Penpot Mockup

Methodology for mockup design in Penpot. Execute with Penpot MCP per penpot-design (components, flex, API, outside-in tree). Read high_level_overview once before writes.

Ask first

Stop when any is missing:

  1. Goal & scope — website, mobile app, desktop app, or responsive? What screen(s) or flow?
  2. Audience — who uses this? (e.g. elderly users → larger type, simpler nav)
  3. Fidelity — low (structure, layout, flow) or high (color, typography, imagery, polish)?
  4. Platform — mobile, web, desktop, or responsive. Use project rules if set; else ask. Never assume.
  5. Instructions — what to build/change. Multi-variant alternatives only if asked.

Mockup vs wireframe vs prototype

StagePurposePenpot focus
WireframeLayout, hierarchy, user flow — no visual polishSimple shapes, placeholders, real spacing
MockupVisual design — look and feel, UI detailsThis skill
PrototypeInteractivity — clicks, flows, statesOnly when user asks; use variants for states

Default to static visual mockups unless the user asks for interactive/prototype behavior.

Fidelity

Low-fi — validate structure and flow fast. Simple fills, placeholders, grid-aligned layout. Iterate layout and user flow before polish. Maps to mockup mode in penpot-design.

High-fi — client-ready or dev handoff. Color palette, typography, imagery, branded components. Maps to design mode in penpot-design.

Six-step workflow

Work in this order. Do not skip to polish before structure is validated.

  1. Define goal & scope — purpose, target audience, platform constraints.
  2. Wireframe — outline sections, content areas, nav, CTAs with placeholders. Focus on hierarchy and flow.
  3. Grid system — align elements; consistent spacing (8dp scale per penpot-design). Establish visual hierarchy (headline > supporting text).
  4. Color & typography — limited palette; legible type (size, line height, letter spacing); sufficient contrast. See mockup-practices.md.
  5. UI components — buttons, inputs, nav bars, icons. Appears twice → component. States → variants. Placement and size matter for usability.
  6. Refine details — imagery, iconography, spacing, contrast. Export with export_shape to verify.

Canvas assembly (required)

Methodology above is what to decide. When drawing in Penpot, follow penpot-design outside-in order — do not invent a different layer sequence:

  1. Screen/container board (empty + flex)
  2. Direct-child section shells (header, body, footer, …) in z-order
  3. Each section’s components, then those components’ elements, recursively

Never create leaves first and wrap them. Full rule: ../penpot-design/references/build-order.md.

Best practices

  • User-centric — design for user goals; consider personas and journey friction points.
  • Accessibility — readable type, sufficient contrast, avoid color-only meaning; keyboard-navigable structure where relevant.
  • Visual consistency — one style guide: typography, colors, spacing, icons across all screens.
  • Real-world — consider screen sizes and orientations; responsive layouts when platform is multi-device.
  • Iterative feedback — prioritize actionable feedback on layout, type, color, and flow over subjective polish.

Core components checklist

Each screen mockup should address:

  • Layout & composition (grid, alignment, hierarchy)
  • Color & typography (palette, legible type)
  • UI components & icons (CTAs, inputs, nav — componentized)
  • Imagery & media (relevant, not cluttering)
  • Branding (logo, colors, type consistent with brand)

Pitfalls

ChallengeResponse
Too much detail too earlyStay low-fi until layout and flow are validated
Constraints (time, tech, budget)Focus MVP features; reuse design-system components
Stakeholder misalignmentPresent rationale; tie decisions to user goals

Deep reference: mockup-practices.md.

Done

  • Goal, audience, fidelity, platform, instructions confirmed
  • Structure before polish (wireframe → grid → tokens → components → details)
  • Canvas outside-in (container → child shells → nested elements)
  • User-centric, accessible, visually consistent
  • Components/variants per penpot-design; export checked

Individual skills in this repo

This repo contains 6 individual skills — each has its own dedicated page.

cucoreanu/personal-skills

Interviews the user one decision at a time about adapting an existing iPhone app to iPhone Duo and writes an adaptation decision record only after they confirm a shared understanding. Use when the user is designing or adapting an app for iPhone Duo, a folding iPhone, outer and inner displays, or side-placed controls.

cucoreanu/personal-skills

Monitor one GitHub PR for new review feedback, implement only meaningful fixes, and answer reviewers with evidence, friendly wit, and pushback on unrealistic or overly defensive comments. Use when the user asks to babysit, watch, or monitor Codex/reviewer comments on a PR.

cucoreanu/personal-skills

Agent-only. After the user asks to create a PR for a new or updated skill under skills/ (never this skill), check project install vs source with scripts/diff-install.mjs; if missing or stale, ask to install locally via relative symlinks. Use when authoring or changing skills in this repo, opening a skill PR, or finishing skill work.

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.

cucoreanu/personal-skills

Creates and reschedules macOS Reminders (fast nudges) and private Calendar events (time blocks). Attaches user-provided files to Calendar events the same way Calendar.app does. Default schedule: next free day starting tomorrow unless the user names an exact time. Never shares calendars or invites to anyone. Use when the user says \"remind me\", \"add a reminder\", \"move reminder\", \"reschedule reminder\", \"push that reminder to\", \"put this on my calendar\", \"schedule this\", \"block time\", \"don't let me forget\", or asks to attach an image/file to a reminder event.

cucoreanu/personal-skills

Proofreads messages and teaches reusable writing patterns. Use when the user pastes a work message, Slack draft, status update, or asks for proofreading, tone, clarity, grammar, flow, or constructive feedback on writing they will send at work.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community