# Pencil Skill Creator

> Factory skill for creating new pencil-ui-design-system-* skills. Use when you need to add support for a new design system layui antd bootstrap element uview uviewpro vant ucharts echarts etc. to the Pencil ecosystem.

- Skill: `full-stack-skills/pencil-skill-creator` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add full-stack-skills/pencil-skill-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/full-stack-skills/pencil-skill-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- License: Complete terms in LICENSE.txt
- Author: full-stack-skills (https://skillmd.com/u/full-stack-skills)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/full-stack-skills/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]+)*`.

## 能力边界

### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时

### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估

### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景

## 常见陷阱 (Gotchas)

1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题