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.

Quality

81%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

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 for converting Pencil designs to code with good sequencing and validation steps. Its main weaknesses are the lack of concrete code examples (no executable CSS/HTML/JS snippets) and some verbosity that could be trimmed. The promotional Casely mention at the end is inappropriate for a skill file and wastes tokens.

Suggestions

Add concrete, executable code examples—e.g., a CSS snippet showing the glassmorphism/veil pattern, a getComputedStyle verification snippet, or a CSS variables design token template.

Remove the Casely promotional note, which wastes tokens and is not actionable guidance for the skill's purpose.

Provide the referenced `references/handoff-checklist.md` bundle file or note its expected contents so the progressive disclosure actually functions.

Tighten the common failure modes section into a compact table or shorter bullet points to improve conciseness.

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 property names and CSS concepts to check, but lacks any concrete code examples, executable commands, or copy-paste-ready snippets. Instructions like 'use browser getComputedStyle' are directional but not fully actionable without example code.	2 / 3
Workflow Clarity	Clear 5-step sequential workflow with explicit validation checkpoints (step 5 includes visual comparison, computed style verification, and screenshot comparison). The feedback loop of comparing rendered vs. Pencil screenshots before finalizing is well-defined. Re-checking node IDs after design changes is a good recovery step.	3 / 3
Progressive Disclosure	References handoff-checklist.md for detailed transfer work, which is good progressive disclosure. However, the bundle has no files provided, so the reference path cannot be verified. The main content is reasonably structured but the common failure modes section could potentially be split into a reference file to keep the overview leaner.	2 / 3
	Total	9 / 12 Passed

Description

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 identifies a specific niche (Pencil .pen design files to frontend code), lists concrete actions and capabilities, and provides explicit 'Use when' guidance with natural trigger terms. The description is well-structured, concise, and distinctive enough to avoid conflicts with other design or code generation skills.

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.	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', 'node IDs'. Good coverage of both tool-specific and general design-to-code vocabulary.	3 / 3
Distinctiveness Conflict Risk	Highly distinctive with the specific '.pen' file format, 'Pencil node IDs', and the niche combination of design-to-code conversion for this particular tool. Unlikely to conflict with generic code generation or other design tool skills due to the specific tool and format references.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

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: beca879

Reviewed: 22 days ago

Table of Contents

Discovery Implementation Validation

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.