skills.rest
stevembarclaystevembarclayCommunity·3 Agent Skills Included

pencilplaybook

Perceptual design rules and scaffolds for Pencil.dev interfaces

Applies senior-level design rules to Pencil.dev sessions, from 40% disabled opacity to 8% hover lightness deltas. Eliminates generic, averaged-out UI output by injecting tested typography, color, and spacing defaults automatically. Includes nine layout scaffolds, seven preset design systems, and structured workflows for token propagation and canvas audits.
38|2
↗
npx skills add stevembarclay/pencilplaybook --all -g -y

All Skills in This Repository (3)

Pure Emerald Level Indicators
📦 In Repo
stevembarclaystevembarclay

best-in-world-strategy

Evaluate strategic options through structured tradeoff analysis and risk assessment.

Community
Advanced
📦 In Repo
stevembarclaystevembarclay

skill-creator

Create structured Claude skills with SKILL.md metadata and validation workflows.

Community
Intermediate
📦 In Repo
stevembarclaystevembarclay

best-in-world-research

Research elite practitioner methods and workflows across professional domains.

Community
Intermediate

Frequently Asked Questions

FAQPage Schema
How to install PencilPlaybook?▼

Run `npx skills add stevembarclay/pencilplaybook --all -g -y` in your terminal to install all skills globally. Then run the setup wizard once to pick a preset design system.

What does PencilPlaybook do?▼

It gives your coding assistant tested design values like correct disabled opacity, hover contrast, and letter spacing, plus ready-made layout scaffolds for dashboards, forms, modals, and mobile screens in Pencil.dev.

Why does AI-generated UI look generic?▼

Without specific rules, models average what they have seen online, producing invisible hover states and poor contrast. PencilPlaybook supplies perceptually grounded lookup tables so every design decision is defensible.

Does PencilPlaybook work with Claude Code?▼

Yes. It is built for Claude Code with Pencil.dev and follows the standard SKILL.md format, so it also works in compatible editors like Cursor and Codex.

Can I use my own design system with PencilPlaybook?▼

Yes. Pick one of seven presets like Midnight, Grove, or Material Design 3, or answer six setup questions to configure your own colors, fonts, and spacing.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills