pencil-skill-creator

# Pencil Skill Creator This skill guides the creation of new **pencil-ui-design-system-* skills**. Each skill initializes a design system in Pencil (variables + component overview frames) via PENCIL_PLAN. ## Core Philosophy All design-system skills created by this creator **MUST** adhere to: 1. **Trigger**: The skill triggers when the user explicitly mentions Pencil and the target design system (e.g. "init layui design system with Pencil"). 2. **Action-level plan**: Output a PENCIL_PLAN (Step 1: set_variables; Step 2: batch_design component overview). Do not execute; output the plan for the Agent to call Pencil MCP tools. 3. **Self-contained**: The skill encapsulates design tokens (colors, typography, radius) and component categories from the official design system docs. ## Workflow (Progressive Disclosure) Keep this file concise. Use bundled references when you need full details: - Workflow: `references/workflows.md` - Output patterns: `references/output-patterns.md` ## Quick start (Automated Creation) ### Option A: Automated Creation (Recommended) Use the bundled script to automatically generate the skill structure, `SKILL.md` (with Golden Template), and `references/` placeholders. ```bash # Usage: ./scripts/init_pencil_design_system_skill.py <name> --path <skills-directory> ./scripts/init_pencil_design_system_skill.py layui --path skills/ ``` This will: 1. Create `skills/pencil-ui-design-system-layui`. 2. Populate `SKILL.md` with the required structure (When to use, Step 1 Variables, Step 2 Component overview). 3. Create `references/contract.md`, `references/official.md`, `references/examples.md` placeholders. 4. Copy `LICENSE.txt` from an existing skill. ### Option B: Manual Creation Follow: `references/workflows.md` -> Manual creation. ### Step 1: Define the design system Identify the framework and name the skill: `pencil-ui-design-system-<name>` (kebab-case). - Example: "layui" -> `pencil-ui-design-system-layui` - Example: "uview pro" -> `pencil-ui-design-system-uviewpro` ### Step 2: Create directory structure ```bash mkdir -p skills/pencil-ui-design-system-<name>/references ``` ### Step 3: Write `SKILL.md` (Golden Template) You **MUST** use the following template structure for the new skill: - **Frontmatter**: `name: pencil-ui-design-system-{{name}}`, description containing "初始化 {{design_system}}: design system components". - **Constraint**: Only use when user explicitly mentions Pencil or design system initialization. - **When to use**: Trigger keywords (e.g. layui, antd). - **Step 1: Variables**: Table of variables for `set_variables` (colors, fonts, radius). Follow .pen schema. - **Step 2: Component overview**: List of frames/categories to create via `batch_design` (component categories and component names per category). - **Best practices**: Verify tokens against official docs; use `replace: false` unless full reset; use Auto Layout for frames. - **Keywords**: pencil, design system, init, <framework-name>. ### Step 4: Fill references - `references/contract.md`: Design tokens and component contracts (prefix, naming). - `references/official.md`: Link to official documentation. - `references/examples.md`: Example PENCIL_PLAN or usage. ## Integration with Pencil path This skill is part of the **Pencil specification flow**: 1. **PRD** -> **pencil-ui-design-spec-generator** outputs PENCIL_PLAN. 2. **pencil-ui-design-system-*** skills output the concrete variables + component structure for a given design system. 3. Agent calls Pencil MCP tools (`open_document`, `set_variables`, `batch_design`, `get_screenshot`) in order. ## Naming validation Script enforces: `pencil-ui-design-system-[a-z0-9]+(-[a-z0-9]+)*`.