PencilPlaybook

Perceptual-design guardrails and 9 layout scaffolds for building UI mockups in Pencil.dev

Works with setup

Test report

Verdict
Works with setup
Score
7.6/10
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

  • /pencilplaybook Perceptual-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.