Nisus74/pencil-skill
16 stars · Last commit 2026-07-26
AI coding skill plugin for pencil.dev (.pen) design files via the Pencil MCP server that works with Claude Code, Cursor, Codex, and Gemini CLI
README preview
# pencil-dev-skill Teach your AI coding tool to design in [pencil.dev](https://pencil.dev). Works with Claude Code, Cursor, and Codex. [](https://github.com/Nisus74/pencil-skill/commits/main) [](./LICENSE) > **Unofficial community plugin.** This project is not affiliated with or endorsed by the Pencil.dev team. For the Pencil editor, MCP server, and official documentation, visit [pencil.dev](https://pencil.dev). Issues with this skill belong in [this repo](https://github.com/Nisus74/pencil-skill); issues with the Pencil editor or MCP server belong with the Pencil.dev team. [Star the repo](https://github.com/Nisus74/pencil-skill) if it helps you, or [buy me a coffee or lunch](https://www.buymeacoffee.com/Nisus74) to support ongoing maintenance. --- ## What it does Pencil.dev is a collaborative design tool for creating web and mobile interfaces via the Pencil MCP server. This skill teaches AI coding tools how to work with `.pen` design files. - Guides the AI through a seven-step design workflow: detect host, orient, load guidelines, plan, execute, verify, report - Teaches all 9 Pencil MCP tools with worked invocations, cost cheatsheet, and composite recipes - Provides 2026 design depth: user flows, component and screen states, full accessibility coverage, and modern patterns (container queries, fluid type, AI-UI affordances)