{"id":49934773,"url":"https://github.com/nisus74/pencil-skill","last_synced_at":"2026-05-17T06:05:14.140Z","repository":{"id":355326166,"uuid":"1227651594","full_name":"Nisus74/pencil-skill","owner":"Nisus74","description":"AI coding skill plugin for pencil.dev (.pen) design files via the Pencil MCP server — works with Claude Code, Cursor, Codex, and Gemini CLI","archived":false,"fork":false,"pushed_at":"2026-05-17T05:21:41.000Z","size":1403,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-17T06:04:40.498Z","etag":null,"topics":["ai-coding","claude-code","claude-plugin","design-tool","mcp","pencil-dev","skill"],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nisus74.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"custom":["https://www.buymeacoffee.com/Nisus74"]}},"created_at":"2026-05-03T01:17:00.000Z","updated_at":"2026-05-17T05:21:45.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Nisus74/pencil-skill","commit_stats":null,"previous_names":["nisus74/pencil-skill"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Nisus74/pencil-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nisus74%2Fpencil-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nisus74%2Fpencil-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nisus74%2Fpencil-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nisus74%2Fpencil-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nisus74","download_url":"https://codeload.github.com/Nisus74/pencil-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nisus74%2Fpencil-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33129102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-coding","claude-code","claude-plugin","design-tool","mcp","pencil-dev","skill"],"created_at":"2026-05-17T06:05:11.745Z","updated_at":"2026-05-17T06:05:14.135Z","avatar_url":"https://github.com/Nisus74.png","language":"Python","funding_links":["https://www.buymeacoffee.com/Nisus74"],"categories":[],"sub_categories":[],"readme":"# pencil-dev-skill\n\nTeach your AI coding tool to design in [pencil.dev](https://pencil.dev). Works with Claude Code, Cursor, and Codex.\n\n[![version](https://img.shields.io/badge/version-0.8.0_pre--release-orange)](https://github.com/Nisus74/pencil-skill/commits/main) [![license](https://img.shields.io/badge/license-MIT-green)](./LICENSE)\n\n\u003e **Unofficial community plugin.** This project is not affiliated with or endorsed by the Pencil.dev team. For the Pencil editor, MCP server, and official documentation, visit [pencil.dev](https://pencil.dev). Issues with this skill belong in [this repo](https://github.com/Nisus74/pencil-skill); issues with the Pencil editor or MCP server belong with the Pencil.dev team.\n\n[Star the repo](https://github.com/Nisus74/pencil-skill) if it helps you, or\n[buy me a coffee or lunch](https://www.buymeacoffee.com/Nisus74) to support ongoing maintenance.\n\n---\n\n## What it does\n\nPencil.dev is a collaborative design tool for creating web and mobile interfaces via the Pencil MCP server. This skill teaches AI coding tools how to work with `.pen` design files.\n\n- Guides the AI through a seven-step design workflow: detect host, orient, load guidelines, plan, execute, verify, report\n- Teaches all 13 Pencil MCP tools with worked invocations, cost cheatsheet, and composite recipes\n- Provides 2026 design depth: user flows, component and screen states, full accessibility coverage, and modern patterns (container queries, fluid type, AI-UI affordances)\n- Ships 15 worked examples showing real MCP tool sequences from scratch\n- Includes per-platform tool-name mappings so the same skill works everywhere\n\n\u003e **Status:** `0.8.0`, pre-release. Nothing is shipped until the owner cuts a release.\n\n---\n\n## What you'll be able to do\n\nAfter installing this skill:\n\n- **Generate complete UI designs** from natural language (\"design a dashboard\") without manual tool hunting\n- **Speed up design iteration** by delegating pattern work to AI while you focus on unique decisions\n- **Maintain design consistency** across components and screens\n- **Work cross-platform** with the same skill on Claude Code, Cursor, or Codex\n- **Customise the skill** for your team's workflow via folder copy or fork-and-install\n\n---\n\n## Prerequisites\n\nYou'll need three things:\n\n1. **An AI coding tool:** [Claude Code](https://claude.ai/code), [Cursor](https://cursor.com), or [OpenAI Codex](https://openai.com/codex)\n2. **Pencil MCP server:** Configure it in your tool ([how to set up Pencil](https://pencil.dev/docs/setup))\n3. **A Pencil.dev workspace:** Create one free at [pencil.dev](https://pencil.dev) (no credit card required)\n\n\u003e **New to Pencil.dev?** It's a browser-based design tool. You don't install it; you open it in your browser and create `.pen` files there. This skill helps your AI tool work with those files.\n\n---\n\n## Install\n\n**Most people want plugin install.** If you plan to customise the skill's instructions for your team, use folder copy or fork + install instead.\n\n### Plugin install (recommended)\n\n**Claude Code:** two install paths, pick either.\n\nDirect install:\n\n```bash\n/plugin install github:Nisus74/pencil-skill\n```\n\nOr via the marketplace listing (lets you pin and update via marketplace commands):\n\n```bash\n/plugin marketplace add github:Nisus74/pencil-skill\n/plugin install pencil-dev-skill\n```\n\n**Cursor 2.5+:** in the editor, run `/add-plugin` and point it at `github.com/Nisus74/pencil-skill`.\n\n**Codex:** use folder copy below. The Codex public plugin directory isn't available yet for third-party plugins.\n\n### Folder copy\n\nDownload [skills/pencil-design/](skills/pencil-design/) and drop it into the skills directory your tool reads.\n\nQuickest method:\n\n```bash\nnpx degit github:Nisus74/pencil-skill/skills/pencil-design \u003ctarget\u003e/pencil-design\n```\n\nOr with git:\n\n```bash\ngit clone --depth=1 https://github.com/Nisus74/pencil-skill.git /tmp/pencil-skill\ncp -r /tmp/pencil-skill/skills/pencil-design \u003ctarget\u003e/pencil-design\n```\n\nWhere `\u003ctarget\u003e` lives:\n\n| Tool | Path |\n|------|------|\n| Claude Code | `~/.claude/skills/` or `.claude/skills/` |\n| Cursor | `.cursor/skills/` |\n| Codex | `~/.codex/skills/` |\n\nTo update, re-run the same `degit` or `cp` command. If you've edited the files locally, diff and merge by hand.\n\n### Fork + install\n\nAvailable for Claude Code and Cursor.\n\n1. Fork [Nisus74/pencil-skill](https://github.com/Nisus74/pencil-skill) on GitHub.\n2. Install your fork as a plugin:\n   - Claude Code: `/plugin install github:\u003cyour-handle\u003e/pencil-skill`\n   - Cursor: `/add-plugin` pointing at `github.com/\u003cyour-handle\u003e/pencil-skill`\n3. Edit your fork, commit, and push. The next plugin update pulls your changes.\n4. To pull upstream changes, rebase your fork against `Nisus74/pencil-skill`.\n\nFor Codex and Copilot CLI, use folder copy. The end result is the same; you just don't get an automatic update path.\n\n### Install Methods Comparison\n\n| | One command | Edit freely | Auto-updates |\n|---|---|---|---|\n| **Plugin install** | yes | no | yes |\n| **Folder copy** | yes | yes | manual |\n| **Fork + install** | yes (after forking) | yes | yes (after rebasing) |\n\n\u003e **Note:** Don't edit files inside a plugin install directory. The next update overwrites them. To customise the skill itself, use folder copy or fork + install.\n\n---\n\n## Usage\n\nOnce installed, the skill activates automatically when you describe a pencil.dev task:\n\n- *\"Design a login screen in pencil\"*\n- *\"Open my .pen file and show me the layout\"*\n- *\"Generate a dashboard UI in pencil.dev\"*\n- *\"Use the pencil MCP to update the button colour\"*\n- *\"Edit the pencil design and change the header\"*\n\nThe AI will handle opening files, reading your design system, generating components, and even taking screenshots to verify the work.\n\n---\n\n## Customising the skill\n\nThe skill content (`SKILL.md`, the references, the worked examples) tells the AI how to work. To rewrite it for your team's workflow, use folder copy or fork-and-install. Editing files inside a plugin install directory won't stick — the next update overwrites them.\n\n---\n\n## Getting help\n\n**Questions?** Open a [GitHub issue](https://github.com/Nisus74/pencil-skill/issues/new) or check the [Q\u0026A discussions](https://github.com/Nisus74/pencil-skill/discussions).\n\n**Bug report?** Include the exact prompt you used, what you expected, and what happened instead. Screenshots help.\n\n**Want to contribute?** Read [docs/CONTRIBUTING.md](./docs/CONTRIBUTING.md) for the full guide. Short version: fork, branch from `main`, make your change, run the pre-commit checks, open a PR with before/after examples.\n\n---\n\n## Repository Layout\n\nThe substance of this project is platform-agnostic. Platform-specific files exist only as install adapters:\n\n```\nskills/pencil-design/\n  SKILL.md                          # Core skill — YAML frontmatter + instructions\n  references/                       # 50 reference files loaded on demand\n    mcp-tools.md                    # Cookbook for all 13 MCP tools\n    batch-design-grammar.md         # batch_design op syntax reference\n    pen-schema.md                   # .pen file schema reference\n    pencil-cli.md                   # Full Pencil CLI reference + When CLI vs MCP table\n    states.md                       # Component states + screen fault states\n    flows.md                        # Screen transitions (modal, validation, back-stack)\n    accessibility.md                # ARIA, focus, RTL, prefers-*, dynamic type\n    modern-patterns.md              # Container queries, fluid type, AI-UI, perceived perf\n    component-anatomy.md            # Reading component structure: slots, descendants, states\n    visual-hierarchy.md, layout-patterns.md, typography.md,\n    colour-palettes.md, font-pairings.md, data-viz.md, …  # Design-depth references\n    style-catalogue.md, industry-patterns.md, …           # Menu-style catalogues\n    amplify.md, pare.md, trim.md, soften.md, …            # Sub-command references\n    codex-tools.md                  # Codex tool name mappings\n  assets/\n    design-system/                  # Optional design-system reference templates\n      README.md                     # Agent loading guide\n      CUSTOMISING.md                # Plain-English guide for non-technical editors\n      accessibility.md, empty-states.md, file-architecture.md,\n      forms.md, micro-interactions.md, navigation.md,\n      onboarding.md, search.md, visual-style.md\n    examples/                       # 15 worked examples with real MCP sequences\n      example-login-screen.md\n      example-dashboard.md\n      example-marketing-page.md\n      example-form-flow.md\n      (and 11 more)\n  evals/\n    evals.json\n\nAGENTS.md                           # Canonical project context (cross-platform)\ntools/\n  skill-lint.py                     # OWASP agentic skills lint (CI + pre-commit)\n  test_skill_lint.py                # Lint unit tests\n.claude-plugin/\n  plugin.json                       # Claude Code plugin manifest\n  marketplace.json                  # Claude Code marketplace listing\n.cursor-plugin/plugin.json          # Cursor plugin manifest\n.codex-plugin/plugin.json           # Codex plugin manifest\n```\n\nSee [AGENTS.md](./AGENTS.md) for the full developer guide.\n\n---\n\n## License\n\nMIT. See [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnisus74%2Fpencil-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnisus74%2Fpencil-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnisus74%2Fpencil-skill/lists"}