SkillProof tested Claude skills

PencilPlaybook

Perceptual-design guardrails en 9 layout scaffolds voor het bouwen van UI mockups in Pencil.dev

Door stevembarclay · stevembarclay/pencilplaybook

Werkt met setup ★ 7.6/10

PencilPlaybook — Perceptual-design guardrails en 9 layout scaffolds voor het bouwen van UI mockups in Pencil.dev

Wat het doet

Een design playbook voor het Pencil.dev canvas, aangestuurd via Claude Code: negen layout scaffolds (dashboard, list, detail, marketing, modal, wizard, mobile, form, empty state), token-propagation workflows, en geciteerde perceptual defaults voor typografie, kleur, beweging, spatiëring en iconen. Stuurt Pencil aan via zijn MCP tools (open_document, set_variables, batch_design, snapshot_layout). Activeert wanneer de gebruiker PencilPlaybook of Pencil.dev noemt, de setup wizard uitvoert, of vraagt om .pen schermen te bouwen/herontwerpen.

Testrapport

De gebundelde perceptual-defaults tabellen zijn de meetbare winst: gevraagd naar dashboard-card + button defaults, retourneerde de skill specifieke geciteerde waarden (disabled opacity 40% niet 50%, hover lightness delta >=8% per NNGroup, card radius maximaal 8px, exacte enter/exit cubic-bezier curves, focus-ring offset 2px) waar mijn no-skill baseline vage bereiken gaf zoals '~50%' en 'een beetje donkerder maken'. Maar de headline functionaliteit - de 9 scaffolds en elke workflow - stuurt Pencil.dev aan via zijn MCP (batch_design/snapshot_layout) die niet beschikbaar is, en elk scaffold heeft eerst de setup wizard nodig om SCAFFOLD_* placeholders te vullen, dus de kernautomatisering is ongeverifieerd. Echt nuttige referentiewaarden; echte wrijving om daadwerkelijk uit te voeren.

Getest op: 2026-07-24 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

  • /pencilplaybookPerceptual-design guardrails en 9 layout scaffolds voor het bouwen van UI mockups in Pencil.dev

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • 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

Volledig rapport (Engels) →