Skills pencil-to-code

📦

pencil-to-code

Name: pencil-to-code
Author: JohnWayneeee

Content revision r1 Safe ⚙️ External commands🌐 Network access

Convert Pencil Designs to Frontend Code

Pencil designs often lose detail when developers translate them by eye. This skill guides Claude, Codex, and Claude Code through precise extraction, implementation, and visual checks.

Supports: Claude Codex Code(CC)

📊 74 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request

Review the Skillstore skill "pencil-to-code" from https://skillstore.io/skills/johnwayneeee-pencil-to-code.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-pencil-to-code/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/johnwayneeee-pencil-to-code.md Signed manifest GET /api/skills/johnwayneeee-pencil-to-code/manifest Signed lockfile GET /api/skills/johnwayneeee-pencil-to-code/lockfile

Test it

Using "pencil-to-code". A user provides a Pencil artboard for a product hero page and asks for implementation.

Expected outcome:

The assistant extracts dimensions, typography, assets, and responsive rules, then delivers frontend components with matching visual structure.

Using "pencil-to-code". A user says the desktop version is too wide compared with the Pencil design.

Expected outcome:

The assistant checks artboard widths, fixed foreground rules, and rendered screenshots, then recommends targeted layout and CSS token changes.

Using "pencil-to-code". A user needs repeated Pencil cards converted into a maintainable component.

Expected outcome:

The assistant identifies shared card properties, creates reusable structure, and preserves per-card text, icon, spacing, and image details.

Security Audit

Safe

v5 • 7/6/2026 Open versioned report

All seven static findings are false positives caused by Markdown text, browser API names, CSS terms, and one optional product link. I found no prompt injection, command execution intent, data exfiltration, or unsafe network behavior in the reviewed files.

Files scanned

137

Lines analyzed

Review items

False positives ignored

Risk Factors

⚙️ External commands (4)

SKILL.md:3 SKILL.md:14 SKILL.md:39 SKILL.md:46

🌐 Network access (1)

SKILL.md:54

No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.

Audited by: codex View Audit History →

Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report

Copy report link

https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg)](https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/johnwayneeee-pencil-to-code?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-pencil-to-code/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/johnwayneeee-pencil-to-code.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Academic citations (APA · BibTeX · CFF)

APA citation

JohnWayneeee. (2026). pencil-to-code security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5

BibTeX citation

@techreport{johnwayneeee-johnwayneeee-pencil-to-code-2026,
  author = {JohnWayneeee},
  title = {pencil-to-code security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "pencil-to-code security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-pencil-to-code/audits/5"
identifiers:
  - type: other
    value: "skillstore:johnwayneeee-pencil-to-code:audit:5"
    description: "Skillstore immutable audit report identifier"

Skillstore Score

Why this score Evidence Confidence: Medium

Architecture

Maintainability

Content

Community

Spec Compliance

What You Can Build

Implement a Marketing Page

Convert a Pencil landing page into responsive HTML, CSS, or framework components while keeping the artboard layout intact.

Match a Design Handoff

Use node IDs, variables, and screenshots to resolve spacing, typography, and image crop differences during review.

Migrate Legacy Screens

Rebuild existing Pencil-designed screens in a modern frontend stack with reusable components and documented visual deviations.

Try These Prompts

Convert One Artboard

Use pencil-to-code to convert this Pencil artboard into responsive frontend code. Preserve layout, typography, images, and spacing.

Implement With Node IDs

Use pencil-to-code with these Pencil node IDs. Inspect the artboard, variables, repeated components, and assets before coding.

Debug Visual Fidelity

Use pencil-to-code to compare the current implementation with the Pencil screenshot and identify CSS changes for closer visual matching.

Build a Responsive Component System

Use pencil-to-code to extract shared tokens and repeated units from these Pencil artboards, then implement reusable responsive components.

Best Practices

Provide Pencil node IDs, target artboard sizes, and exported assets before asking for code.
Run visual checks at every design breakpoint, not only common browser widths.
Keep reusable design tokens in the project theme or CSS variables.

Avoid

Do not approximate logos, photos, or illustrations when exported assets are available.
Do not stretch fixed foreground layouts just because the viewport is wider.
Do not rely only on screenshots when Pencil variables and node details are available.