PencilPlaybook
Perceptual-design guardrails and 9 layout scaffolds for building UI mockups in Pencil.dev
Test report
- Verdict
- Works with setup
- Score
- Tested
- Jul 24, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Jul 30, 2026 · bab1ab0
⚠ This skill is no longer available upstream. Our re-check on Aug 10, 2026 couldn't find it any more (repo unreachable/deleted). The test below is what we measured on Jul 24, 2026 and we're leaving it up as a record — but there is nothing left to install, so we've removed the command.
The bundled perceptual-defaults tables are the measurable win: asked for dashboard-card + button defaults, the skill returned specific cited values (disabled opacity 40% not 50%, hover lightness delta >=8% per NNGroup, card radius capped at 8px, exact enter/exit cubic-bezier curves, focus-ring offset 2px) where my no-skill baseline gave vague ranges like '~50%' and 'darken a bit'. But the headline capability - the 9 scaffolds and every workflow - drives Pencil.dev through its MCP (batch_design/snapshot_layout) which is unavailable, and every scaffold needs the setup wizard to fill SCAFFOLD_* placeholders first, so the core automation is unverified. Genuinely useful reference values; real friction to actually run.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 4/5
- Output vs. baseline 6/10
- Docs & honesty 4/5
What PencilPlaybook does
A design playbook for the Pencil.dev canvas driven through Claude Code: nine layout scaffolds (dashboard, list, detail, marketing, modal, wizard, mobile, form, empty state), token-propagation workflows, and cited perceptual defaults for typography, color, motion, spacing and icons. Drives Pencil via its MCP tools (open_document, set_variables, batch_design, snapshot_layout). Triggers when the user names PencilPlaybook or Pencil.dev, runs the setup wizard, or asks to build/redesign .pen screens.
How to install PencilPlaybook
Nothing to install: the source repository no longer has this skill. If the author brings it back, our daily re-check will pick it up and the command will reappear here.
Commands — how to trigger PencilPlaybook
-
/pencilplaybookPerceptual-design guardrails and 9 layout scaffolds for building UI mockups in Pencil.dev
It also activates on plain-language prompts like these:
-
Build a dashboard mockup in Pencil.dev using the layout scaffolds -
Set up the PencilPlaybook wizard for my design tokens -
Redesign this screen in Pencil with perceptual spacing defaults
Frequently asked questions
- Is the PencilPlaybook skill free?
- Yes. The skill itself is free from stevembarclay/pencilplaybook. SkillProof publishes the install command and an independent test verdict at no cost.
- Does PencilPlaybook work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 24, 2026. Verdict: Works with setup. The bundled perceptual-defaults tables are the measurable win: asked for dashboard-card + button defaults, the skill returned specific cited values (disabled opacity 40% not 50%, hover lightness delta >=8% per NNGroup, card radius capped at 8px, exact enter/exit cubic-bezier curves, focus-ring offset 2px) where my no-skill baseline gave vague ranges like '~50%' and 'darken a bit'. But the headline capability - the 9 scaffolds and every workflow - drives Pencil.dev through its MCP (batch_design/snapshot_layout) which is unavailable, and every scaffold needs the setup wizard to fill SCAFFOLD_* placeholders first, so the core automation is unverified. Genuinely useful reference values; real friction to actually run.
- What is the PencilPlaybook SkillProof Score?
- 7.6/10 — installs cleanly 5/5, triggers reliably 4/5, output vs. baseline 6/10, docs & honesty 4/5.
- How do I install PencilPlaybook?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use PencilPlaybook with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.