SkillProof tested Claude skills

PencilPlaybook

Perzeptuelle Design-Leitplanken und 9 Layout-Gerüste zum Erstellen von UI-Mockups in Pencil.dev

von stevembarclay · stevembarclay/pencilplaybook

Funktioniert mit Setup ★ 7.6/10

PencilPlaybook — Perzeptuelle Design-Leitplanken und 9 Layout-Gerüste zum Erstellen von UI-Mockups in Pencil.dev

Was es kann

Ein 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, und cited perceptual defaults for typography, color, motion, spacing und icons. Drives Pencil via its MCP tools (open_document, set_variables, batch_design, snapshot_layout). Wird ausgelöst, wenn the user names PencilPlaybook or Pencil.dev, runs the setup wizard, or asks to build/redesign .pen screens.

Testbericht

Die gebündelten 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%' und 'darken a bit'. But the headline capability - the 9 scaffolds und every workflow - drives Pencil.dev through its MCP (batch_design/snapshot_layout) which is unavailable, und 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.

Getestet am: 2026-07-24 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/stevembarclay/pencilplaybook
mkdir -p ~/.claude/skills
cd pencilplaybook && cp -r . ~/.claude/skills/pencilplaybook && rm -rf ~/.claude/skills/pencilplaybook/.git

Befehle & Beispiel-Prompts

  • /pencilplaybookPerzeptuelle Design-Leitplanken und 9 Layout-Gerüste zum Erstellen von UI-Mockups in Pencil.dev

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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

Vollständiger Testbericht (Englisch) →