openpencil/crates/op-cli/assets/skill-bundle.json

{
  "version": "__OPENPENCIL_VERSION__",
  "files": {
    "skills/openpencil-design/SKILL.md": "---\nname: openpencil-design\ndescription: Use when designing UI with OpenPencil — creating layouts via op CLI, batch design DSL, sandboxed JS scripts, or MCP tools. Covers PenNode schema, semantic roles, typography, color, spacing, and common component patterns.\n---\n\n# OpenPencil Design\n\nGenerate production-quality vector designs by writing PenNode JSON trees. Use the `op` CLI or MCP tools to create, read, update, and delete nodes on the OpenPencil canvas.\n\n## When to Use\n\n- Creating or modifying UI designs in `.op` files\n- Using the `op` CLI to script design operations\n- Designing via MCP tools (`batch_design`, `insert_node`, `design_skeleton`)\n- Need reference for PenNode schema, roles, or layout rules\n\n## Quick Reference — `op` CLI\n\n```bash\n# App control\nop start [--desktop|--web]           # Launch app\nop stop                              # Stop running instance\nop status                            # Check if running\n\n# Document\nop open [file.op]                    # Open file or connect to live canvas\nop save <file.op>                    # Save current document\nop get [--depth N] [--pretty]        # Get document tree\nop selection [--depth N]             # Get current canvas selection\nop read-nodes [id...] [--depth N] [--vars]  # Read node subtree(s) with optional variable resolution\nop layout [--parent P] [--depth N]   # Snapshot layout tree with computed positions\nop find-space [--direction D] [--width N] [--height N]  # Find empty space on canvas\n\n# Node operations\nop insert '<json>' [--parent P]     # Insert node (--index N, --post-process)\nop update <id> '<json>'              # Update node\nop delete <id>                       # Delete node\nop move <id> <parent> [index]        # Move node\nop copy <id> <parent>                # Deep-copy node\nop replace <id> '<json>'             # Replace node\n\n# Batch design\nop design '<dsl>'                    # Batch design DSL (inline, @file, or stdin) [--canvas-width N]\nop design @ui.js                     # Sandboxed JS script: I(parent, obj) + loops (.js/.mjs implies --script)\nop design '<js>' --script            # Same, inline/stdin (flag must FOLLOW the payload)\n\n# Layered workflow\nop design:skeleton '<json>'          # Create section structure\nop design:content <id> '<json>'      # Populate section content\nop design:refine --root-id <id>      # Validate + auto-fix (resolves icons) [--canvas-width N]\n\n# Import\nop import:svg <file.svg> [--parent P]       # Import SVG as editable nodes\nop import:figma <file.fig> [--out out.op]   # Convert Figma .fig to .op document\n\n# Pages\nop page list                         # List all pages\nop page add [--name N]               # Add a new page\nop page remove <id>                  # Remove a page\nop page rename <id> '<name>'         # Rename a page\nop page reorder <id> <index>         # Move page to position\nop page duplicate <id>               # Clone page with new IDs\n\n# Variables & Themes\nop vars / op vars:set '<json>'       # Variables (--replace to replace all)\nop themes / op themes:set '<json>'   # Themes (--replace to replace all)\nop theme:save <file.optheme>         # Save current theme as preset file\nop theme:load <file.optheme>         # Load a theme preset file\nop theme:list <directory>            # List .optheme presets in directory\n\n# Codegen pipeline\nop codegen:plan '<json>'             # Submit codegen plan (framework, rootIds, options)\nop codegen:submit '<json>'           # Submit a code chunk for a node\nop codegen:assemble [--framework F]  # Assemble all submitted chunks into final output\nop codegen:clean                     # Clear codegen state\n```\n\nGlobal flags: `--file <path>`, `--page <id>`, `--pretty`. Inputs: inline string, `@filepath`, or `-` (stdin).\n\n## Building Designs — Three Approaches\n\n### Approach 1: `op insert` (Recommended)\n\nThe most reliable way to build designs. Use `--parent` to specify the parent node. Capture the returned `nodeId` to reference later. **Always finish with 
    ".claude-plugin/plugin.json": "{\n  \"name\": \"openpencil-skill\",\n  \"description\": \"Design skill for OpenPencil — op CLI, batch DSL, MCP tools, PenNode schema, and UI design best practices\",\n  \"version\": \"__OPENPENCIL_VERSION__\",\n  \"author\": {\n    \"name\": \"ZSeven-W\",\n    \"email\": \"xkayshen@gmail.com\"\n  },\n  \"homepage\": \"https://github.com/zseven-w/openpencil-skill\",\n  \"repository\": \"https://github.com/zseven-w/openpencil-skill\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"design\",\n    \"ui\",\n    \"vector\",\n    \"openpencil\",\n    \"cli\",\n    \"mcp\",\n    \"dsl\"\n  ]\n}\n",
    ".claude-plugin/marketplace.json": "{\n  \"name\": \"openpencil-skill\",\n  \"description\": \"Design skill for OpenPencil — op CLI, batch DSL, MCP tools, and UI best practices\",\n  \"owner\": {\n    \"name\": \"ZSeven-W\",\n    \"email\": \"xkayshen@gmail.com\"\n  },\n  \"plugins\": [\n    {\n      \"name\": \"openpencil-skill\",\n      \"description\": \"Design skill for OpenPencil — op CLI, batch DSL, MCP tools, PenNode schema, and UI design best practices\",\n      \"version\": \"__OPENPENCIL_VERSION__\",\n      \"source\": \"./\",\n      \"author\": {\n        \"name\": \"ZSeven-W\",\n        \"email\": \"xkayshen@gmail.com\"\n      }\n    }\n  ]\n}\n",
    ".cursor-plugin/plugin.json": "{\n  \"name\": \"openpencil-skill\",\n  \"displayName\": \"OpenPencil Design\",\n  \"description\": \"Design skill for OpenPencil — op CLI, batch DSL, MCP tools, PenNode schema, and UI design best practices\",\n  \"version\": \"__OPENPENCIL_VERSION__\",\n  \"author\": {\n    \"name\": \"ZSeven-W\",\n    \"email\": \"xkayshen@gmail.com\"\n  },\n  \"homepage\": \"https://github.com/zseven-w/openpencil-skill\",\n  \"repository\": \"https://github.com/zseven-w/openpencil-skill\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"design\",\n    \"ui\",\n    \"vector\",\n    \"openpencil\",\n    \"cli\",\n    \"mcp\",\n    \"dsl\"\n  ],\n  \"skills\": \"./skills/\"\n}\n",
    "package.json": "{\n  \"name\": \"openpencil-skill\",\n  \"version\": \"__OPENPENCIL_VERSION__\",\n  \"type\": \"module\"\n}\n",
    "GEMINI.md": "@./skills/openpencil-design/SKILL.md\n",
    "gemini-extension.json": "{\n  \"name\": \"openpencil-skill\",\n  \"description\": \"Design skill for OpenPencil — op CLI, batch DSL, MCP tools, and UI best practices\",\n  \"version\": \"__OPENPENCIL_VERSION__\",\n  \"contextFileName\": \"GEMINI.md\"\n}\n"
  }
}