recompose: Skill for Claude Code

.claude/skills/pencil/SKILL.md

pen-design is a skill for Claude Code from recomposesh/recompose. It costs 154 tokens per session (2,119 once invoked), scanned A, original, MIT.

A design workflow for creating websites, app screens, dashboards, slides, and other visual layouts with the pen.dev command-line tool. It saves designs as structured .pen files and can export them as images.

In plain words
What is it for?
Use it to create interface mockups, wireframes, presentations, marketing graphics, and other visual design concepts.
Why use it?
It turns written design instructions into editable visual layouts that can be reviewed or exported.

Skill for Claude Code

Written for Claude Code: installed under .claude/. Also seen: reads .claude/ paths; mentions Claude Code; mentions Codex.

This is recomposesh/recompose's own configuration. It tells Claude Code how to work on recompose itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything recompose configures →

Reuse

Borrowing it

Nothing to install: this file belongs to recomposesh/recompose. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/recomposesh/recompose/main/.claude/skills/pencil/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/recomposesh/recompose

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for pen-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/recomposesh/recompose/pencil.svg)](https://agentmods.dev/skills/recomposesh/recompose/pencil)
Your own site
<a href="https://agentmods.dev/skills/recomposesh/recompose/pencil"><img src="https://agentmods.dev/badge/skills/recomposesh/recompose/pencil.svg" alt="Measured on agentmods" height="20"></a>
Per session 154 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,119 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00154 $0.02119
Opus 5 $0.00077 $0.01059
Sonnet 5 $0.00031 $0.00424
Haiku 4.5 $0.00015 $0.00212

Measured 3d ago against content hash 8abf6443146f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

pen-design scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

curl -fsSL "https://unpkg.com/@pen.dev/cli@latest/SKILL.md" -o .cursor/skills/pen-design/SKILL.md
.claude/skills/pencil/SKILL.md · 176 lines

How it starts

The opening of the file, as written. The whole thing — 176 lines — stays where its author put it; the contents beside it link to each section on GitHub.

pen.dev Design

Create professional visual designs from natural language descriptions using the pen.dev CLI. pen.dev is a headless design tool that generates .pen files (a structured JSON design format) and can export them as images.

Setup

Before designing, make sure the pen.dev CLI is available.

Check installation

which pen || npx pen version

If pen is not found, install it:

npm install -g @pen.dev/cli

If global install fails due to permissions, install locally instead:

npm install @pen.dev/cli

Then run it via npx pen (or ./node_modules/.bin/pen) instead of pen. You can learn about the available commands via the pen --help command.

Authentication

pen.dev user

To use the CLI, an authenticated user logged in to pen.dev is required. First, check the current user configuration on the machine with the pen status command.

If not logged in, there are the following options:

  • use pen signup --email [email protected] --username johndoe --name "John Doe" command, to create a new user.
  • use pen login --email [email protected] [--code abc123] to authenticate an existing or newly created user.
  • optionally, the PEN_CLI_KEY env var can also be used for authentication if its set in your session.
Claude Code agent

The CLI needs auth to run its AI agent for which Claude Code is required. For that there needs to be an authenticated Claude Code user set in the system configuration either via env var or a user subscription.

If none of these are available, tell the user what options they have and help them set one up.

Staying up to date

This skill stays in sync with the pen.dev CLI npm package (@pen.dev/cli). The published package includes SKILL.md at its root; the package version is the skill version.

Check for a newer CLI / skill

  • Latest version on the registry: npm view @pen.dev/cli version
  • Installed CLI: pen version, or npm list -g @pen.dev/cli (global) / npm list @pen.dev/cli (project)

Read the full file on GitHub · 176 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 176 lines · 154 tokens per session scan A 8abf6443146f

Subscribe to this mod's changes

pen-design is a skill published in the GitHub repository recomposesh/recompose (27 stars, last pushed 10d ago), licensed MIT. It adds 154 tokens to every session and 2,119 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens

prototype-web

A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.

nexu-io/html-anything · 24 tokens