pencil-to-code
Convert Pencil `.pen` design files and named Pencil node IDs into production frontend code. Use when asked to implement, migrate, reproduce, or refine a Pencil/Figma-like visual design in code, especially for responsive artboards, glassmorphism, typography matching, background image layers, design tokens, or visual fidelity debugging against Pencil node IDs.
68
81%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description that clearly defines a specific niche (Pencil .pen design files to frontend code), lists concrete capabilities, and provides explicit 'Use when' guidance with natural trigger terms. The description is well-structured, uses third person voice, and would be easily distinguishable from other skills in a large skill library.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: convert .pen design files, convert named node IDs into production frontend code, handle responsive artboards, glassmorphism, typography matching, background image layers, design tokens, and visual fidelity debugging. | 3 / 3 |
Completeness | Clearly answers both 'what' (convert .pen design files and node IDs into production frontend code) and 'when' (explicit 'Use when asked to implement, migrate, reproduce, or refine a Pencil/Figma-like visual design in code') with specific trigger scenarios listed. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms users would say: 'Pencil', '.pen', 'design files', 'implement', 'migrate', 'reproduce', 'refine', 'Figma-like', 'responsive artboards', 'glassmorphism', 'typography matching', 'design tokens', 'visual fidelity', 'node IDs'. Good coverage of both tool-specific and general design-to-code terms. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche: Pencil `.pen` files and named Pencil node IDs are very specific triggers unlikely to conflict with generic code generation or other design tool skills. The mention of Figma-like could cause minor overlap but the Pencil-specific focus keeps it distinct. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
62%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a well-structured workflow with clear sequencing and good validation steps for converting Pencil designs to code. Its main weaknesses are the lack of concrete code examples (no CSS/HTML/component snippets demonstrating the patterns described) and a broken reference to a handoff-checklist.md that doesn't exist in the bundle. The promotional Casely mention at the end is inappropriate for a skill file.
Suggestions
Add concrete code examples showing the CSS variable/token pattern, the absolute-positioned decorative layer pattern, and the flex/grid foreground layout pattern described in step 3.
Provide the referenced handoff-checklist.md file or remove the reference to avoid a broken link.
Remove the Casely promotional note—it wastes tokens and is not actionable guidance for the skill's purpose.
In step 2, consider showing a concrete example of the extracted design token structure (e.g., a JSON or CSS custom properties block) so Claude knows the expected output format.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Generally efficient but includes some unnecessary elaboration. Phrases like 'deliberately' and 'literally' add little value. The common failure modes section is useful but slightly verbose—some points could be tightened. The promotional Casely mention is wasted tokens. | 2 / 3 |
Actionability | Provides structured guidance with specific properties to check (font-family, font-size, etc.) and specific tools (get_variables, getComputedStyle), but lacks any concrete code examples, executable commands, or copy-paste-ready snippets. The instructions describe what to do rather than showing how. | 2 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced from reading the design contract through extraction, mapping, responsive handling, and verification. Step 5 includes explicit validation checkpoints (screenshots, getComputedStyle comparisons, project checks) with a clear verify-before-finalizing gate. | 3 / 3 |
Progressive Disclosure | References handoff-checklist.md appropriately for detailed transfer work, but the bundle shows no files are actually provided, meaning the reference is broken. The main content is reasonably structured but some of the detailed failure modes and extraction lists could potentially be split into reference files. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- JohnWayneeee/ai-agent-skills
- Commit
64f57c5
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.