pencil-design
Pencil Design Skill
Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows.
When to Use This Skill
- Designing screens, pages, or components in a
.penfile - Generating code (React, Next.js, Vue, Svelte, HTML/CSS) from Pencil designs
- Building or extending a design system in Pencil
- Syncing design tokens between Pencil and code (Tailwind v4
@theme, shadcn/ui tokens) - Importing existing code into Pencil designs
- Working with any Pencil MCP tools (
pencil_batch_design,pencil_batch_get, etc.)
Critical Rules
These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code.
Rule 1: Always Reuse Design System Components
More from chiroro-jr/skills
better-agent-md
Audit, improve, or rewrite repository-level agent instruction files such as AGENTS.md, AGENT.md, CLAUDE.md, GEMINI.md, or repo-specific agent context files. Use when Codex needs to review an existing instruction file for weak points, explain why it may hurt agent performance, suggest concrete fixes, or produce a tighter replacement grounded in the codebase and research on agent context files and skills.
5oklch
Work with OKLCH colors for CSS and design tokens, including perceptual palette design, shade generation, gradient decisions, gamut and chroma checks, and conversions between OKLCH and other spaces (sRGB, Display-P3, OKLab, XYZ) using @texel/color. Use when a task mentions `oklch(...)`, color uniformity tuning, translating HEX/RGB/HSL to OKLCH, or converting OKLCH back to display-ready values.
4dbml
Create, extend, review, and normalize database schemas written in DBML (Database Markup Language). Use when authoring or editing `.dbml` files, translating SQL schemas into DBML, documenting tables and relationships, or validating DBML constructs such as `Table`, `Ref`, `Enum`, `TablePartial`, `TableGroup`, `checks`, `indexes`, and `records`.
3