From design
Create or update a Pencil (.pen) mockup. This is Designer Denise's core skill, and it owns ALL creates and updates to Pencil mockups. Trigger when the user says "mock this up in Pencil", "create a mockup", "make a .pen mockup", "add a screen/frame to the mockup", "update the mockup", "change <X> on the mockup", "add a state/variant to the .pen", "design this screen in Pencil", or otherwise asks to build, extend, or edit a Pencil design on the canvas. Use this skill whenever the design surface is a `.pen` file, NOT gstack's design-html (which outputs HTML/CSS). Also fires on "/design:pencil-mockup".
How this skill is triggered — by the user, by Claude, or both
Slash command
/design:pencil-mockupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Before the skill body, check whether the gstack-extensions repo has merged updates this clone has not pulled. Silent unless an upgrade is available; never changes anything:
Before the skill body, check whether the gstack-extensions repo has merged updates this clone has not pulled. Silent unless an upgrade is available; never changes anything:
~/dev/gstack-extensions/bin/gstack-extensions-update-check 2>/dev/null || true
If there is no output, proceed straight to the skill body. If it prints UPGRADE_AVAILABLE <n> <range>, tell the user via AskUserQuestion that gstack-extensions is <n> commit(s) behind origin/main and offer:
~/dev/gstack-extensions/bin/gstack-extensions-upgrade, then continue. It fast-forwards main and refreshes the installed plugins, and refuses safely (printing why) if the clone is not on a clean main; relay that message and continue without upgrading if so.~/dev/gstack-extensions/bin/gstack-extensions-update-check --snooze to suppress the prompt for ~8h (so other skills do not re-ask this session), then continue without upgrading.Do not upgrade without asking. Ask at most once per session: if you have already prompted (or the user skipped) this session, proceed silently.
You are running the /design:pencil-mockup skill. Your job is to make a requested create or update land correctly on a Pencil .pen canvas, following the user's conventions, and to show the result.
Read shared/core.md from the plugin root before proceeding. The file lives at <plugin>/shared/core.md where <plugin> is this skill's parent's-parent directory: from this skill dir, ../../shared/core.md is the plugin root's shared file. This resolves the same wherever the design plugin is installed (it normally runs from the plugin cache at ~/.claude/plugins/cache/gstack-extensions/design/<version>/).
core.md carries your persona, the Pencil ground rules (MCP-only, schema-first, in-memory save model), the canvas conventions (which defer to ~/dev/WIREFRAMES.md), and the "always look before declaring done" rule. Everything below assumes you have loaded it.
get_editor_state(include_schema: true) to load the schema and see what file/editor is active. (Skip the reload only if the schema is already in this session's context.)get_guidelines for Pencil's design guidance.~/dev/WIREFRAMES.md (and a project-level spec/WIREFRAMES.md if one exists; it overrides) for the canvas conventions. Do not proceed to layout without these.Decide, from the request and the editor state, whether this is a create or an update, and on which .pen:
.pen is already open in the editor and the request clearly targets it, use it.AskUserQuestion): which .pen file / new vs existing.LEGEND frame, plan to add a LEGEND per WIREFRAMES.md.For each new screen/frame/variant:
snapshot_layout(maxDepth: 0) to see current top-level rectangles. Do not trust remembered positions.find_empty_space_on_canvas (padding 40) in the intended direction. Never hand-pick a y.batch_design, following the loaded Pencil schema. Use sticky notes (type: "note") for annotations, never naked text. If the view is planned-but-not-shipped, apply the 🚧 NEW NEW name prefix and the orange dashed stroke.snapshot_layout(problemsOnly: true) and confirm it returns "No layout problems." Fix any overlap before moving on.batch_get / snapshot_layout first. Make surgical edits; never redraw the whole canvas.batch_design.snapshot_layout(problemsOnly: true) must return "No layout problems" before you finish.get_screenshot on the affected frame(s) and actually look at it. Confirm the edit matches the request and the conventions.design-html.🚧 NEW NEW demotion sweep; that belongs to /close-out / /land-and-deploy.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub mujtaba3b/gstack-extensions --plugin design