Skillget

openpencil-skill

mcp
Security Audit
Pass
Health Pass
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 33 GitHub stars
Code Pass
  • Code scan — Scanned 5 files during light audit, no dangerous patterns found
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

LLM skill for designing with OpenPencil via the op CLI and MCP tools

README.md

OpenPencil Skill

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский

LLM skill for designing with OpenPencil — teaches AI agents to use the op CLI, batch design DSL, MCP tools, and design best practices.

Follows the agentskills.io specification.

Prerequisites

Install the op CLI before using this skill:

npm install -g @zseven-w/openpencil

Ensure a running OpenPencil instance (desktop app or web server) for op to connect to.

Installation

Note: Installation differs by platform. Claude Code and Cursor have built-in plugin systems. Codex and OpenCode require manual setup.

Claude Code (Plugin Marketplace)

Register the marketplace, then install the plugin:

/plugin marketplace add zseven-w/openpencil-skill
/plugin install openpencil-skill@openpencil-skill

Cursor

In Cursor Agent chat:

/add-plugin openpencil-skill

Or search for "openpencil" in the plugin marketplace.

Codex

Tell Codex:

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.codex/INSTALL.md

OpenCode

Tell OpenCode:

Fetch and follow instructions from https://raw.githubusercontent.com/zseven-w/openpencil-skill/main/.opencode/INSTALL.md

Gemini CLI

gemini extensions install https://github.com/zseven-w/openpencil-skill

To update:

gemini extensions update openpencil-skill

Verify Installation

Start a new session and ask to design something with OpenPencil (e.g., "design a landing page using op CLI"). The agent should automatically use the skill to generate PenNode JSON via the op CLI or MCP tools.

What's Included

  • op CLI command reference (app control, document ops, nodes, import, layout, pages, variables, codegen)
  • Batch Design DSL syntax with full landing page example
  • PenNode schema — all node types (frame, rectangle, ellipse, polygon, text, path, image, icon_font, ref, line, group), properties, fills
  • 40+ semantic roles with smart defaults
  • Design principles — typography, color, spacing, shadows
  • Layout engine rules and sizing decisions
  • Layered MCP workflow (skeleton → content → refine)
  • Codegen pipeline (plan → submit → assemble → clean)
  • Import support (SVG, Figma .fig files)
  • Common patterns — navbar, hero, cards, forms, footer
  • Common mistakes table

License

MIT

Reviews (0)

No results found