pencil-design
Audited by Runlayer on Feb 21, 2026
Malicious tool definition detected
Tool: README.md Description: # Pencil Design Skill An [Agent Skills](https://agentskills.io) skill for designing production-quality UIs in [Pencil](https://pencil.dev) and generating clean, maintainable code. ## Overview This skill helps AI agents work effectively with Pencil (`.pen` files) — a vector design tool that integrates into IDEs.
Malicious tool definition detected
Tool: SKILL.md [1/2] Description: --- name: pencil-design description: Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
Tool: SKILL.md [2/2] Description: section only after verification passes ### Design-to-Code Workflow See [references/design-to-code-workflow.md](references/design-to-code-workflow.md) for the complete workflow.
Malicious tool definition detected
Tool: references/asset-reuse.md Description: # Asset Reuse ## Why This Matters AI image generation is non-deterministic.
Malicious tool definition detected
Tool: references/design-system-components.md Description: # Design System Components ## Why This Matters Pencil design files often contain a design system with reusable components (buttons, cards, inputs, navbars, etc.) marked with `reusable: true`.
Malicious tool definition detected
Tool: references/design-to-code-workflow.md [1/3] Description: # Design-to-Code Workflow ## Overview Pencil enables a two-way sync between design and code.
Tool: references/design-to-code-workflow.md [2/3] Description: for class merging - React 19 style (no `forwardRef`) ### Page/Screen Code For the screen layout, generate a page component that: - Imports shadcn/ui components matching the Pencil design system components - Uses semantic Tailwind classes for all style values - Matches the Pencil node tree structure (vertical/horizontal → flex-col/flex-row) ```tsx // app/dashboard/page.tsx import { Card, CardContent, CardHeader, CardTitle } from "@/co
Tool: references/design-to-code-workflow.md [3/3]
Malicious tool definition detected
Tool: references/layout-and-text-overflow.md Description: # Layout and Text Overflow ## Why This Matters Text and content overflowing outside its parent container or the artboard is one of the most common and visible design defects. It produces: - Unreadable, clipped text - Broken layouts on mobile screens - Code that requires manual overflow fixes - An unprofessional, broken appearance This is especially critical for mobile designs where the artboard is typically only 375-393px wide.
Malicious tool definition detected
Tool: references/responsive-breakpoints.md Description: # Responsive Breakpoints ## Why This Matters Pencil designs often use multiple artboards at different widths to represent mobile, tablet, and desktop views.
Malicious tool definition detected
Tool: references/tailwind-shadcn-mapping.md [1/2] Description: # Tailwind + shadcn/ui Mapping Reference Quick-reference mapping from Pencil design properties to Tailwind v4 + shadcn/ui code.
Tool: references/tailwind-shadcn-mapping.md [2/2]
Malicious tool definition detected
Tool: references/variables-and-tokens.md [1/2] Description: # Variables and Design Tokens ## Why This Matters Pencil variables are the equivalent of design tokens.
Tool: references/variables-and-tokens.md [2/2]
Malicious tool definition detected
Tool: references/visual-verification.md Description: # Visual Verification ## Why This Matters Layout and spacing issues are invisible in the node tree. The only way to catch them is to look at the rendered output.