pencil-mcp-get-editor-state
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Best use case
pencil-mcp-get-editor-state is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "pencil-mcp-get-editor-state" skill to help with this workflow task. Context: Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pencil-mcp-get-editor-state/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pencil-mcp-get-editor-state Compares
| Feature / Agent | pencil-mcp-get-editor-state | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Get current design environment context. Use when you need to understand what is currently selected, canvas position, and environment state before any task.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## Tools
This skill is designed to call the Pencil MCP tool:
* `get_editor_state`
If your client namespaces MCP tools, it may appear as `mcp__pencil__get_editor_state`.
## When to use this skill
### Intent Recognition (CRITICAL)
Even if a trigger phrase matches, you must **verify the user's intent**:
1. Is the user explicitly asking to use "Pencil"?
2. Is the current conversation context clearly about "Pencil" design tasks?
**If the answer is NO, do NOT use this skill.** (e.g., "What is selected?" might refer to selected text in the IDE, not the Pencil canvas).
**CRITICAL PREREQUISITE:**
**You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".**
**ALWAYS use this skill when:**
- You need to know what the user has currently selected on the canvas.
- You need to check the active document path.
- You are starting a new design task and need to orient yourself.
- The user asks "What am I looking at?" or "Get context" **in Pencil**.
**Trigger phrases include:**
- "Get Pencil editor state" (获取 Pencil 编辑器状态)
- "Check current selection in Pencil" (检查 Pencil 当前选区)
- "What is selected in Pencil?" (Pencil 中选中了什么？)
- "Where am I on the Pencil canvas?" (我在 Pencil 画布哪里？)
## Input Parameters
* **`include_schema`** (boolean, optional):
* Set to `true` if you want the `.pen` file schema to be included.
* If you are already aware of the schema, set to `false` (default) to save context.
## How to use this skill
1. **Call the MCP Tool**: Invoke `get_editor_state`.
2. **Analyze Output**:
* Check `selection`: List of selected node IDs.
* Check `activePageId`: Current page ID.
* Check `filePath`: Path of the current document.
## Examples
### 1. Simple: Basic State Check
Get the current state to understand what the user is looking at.
See [1-basic-check.json](examples/1-basic-check.json).
### 2. Medium: State with Schema
Get state including the .pen file schema to understand the document structure definitions.
See [2-with-schema.json](examples/2-with-schema.json).
### 3. Complex: State Verification (Explicit)
Explicitly checking state during a multi-step workflow where schema is already known.
See [3-explicit-check.json](examples/3-explicit-check.json).
## Keywords
**English keywords:**
get state, editor context, current selection, active document, canvas position, check environment
**Chinese keywords (中文关键词):**
获取状态, 编辑器上下文, 当前选区, 选中节点, 画布位置, 环境检查Related Skills
pencil
用于通过 Pencil MCP 读取/修改 .pen 设计文件并校验布局。用户提到 pencil/.pen/设计稿编辑、需要列出工具或执行 batch_get/batch_design 时调用。
pencil-ui-designer
Orchestrates Pencil design system initialization by routing framework requests to the correct pencil-ui-design-system-* skill. Use when the user explicitly mentions Pencil and wants to initialize a design system (antd, Bootstrap, Element Plus, Layui, uView, Vant, uCharts, ECharts), set up component libraries, or create design tokens in a .pen file.
pencil-ui-design-system-vant
Initialize Vant 4 design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Vant or Vant 4, needs to set up Vant color palette and typography variables, or wants to create component library frames for Button, Cell, Form, Dialog, and other Vant components.
pencil-ui-design-system-uviewpro
Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.
pencil-ui-design-system-uview
Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.
pencil-ui-design-system-ucharts
Initialize uCharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with uCharts or qiun-data-charts, needs to set up chart series colors and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other uCharts chart types.
pencil-ui-design-system-layui
Initialize Layui design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Layui or layui-vue, needs to set up Layui color palette and typography variables, or wants to create component library frames for Button, Table, Form, Menu, and other Layui components.
pencil-ui-design-system-element
Initialize Element Plus design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Element Plus or Element UI, needs to set up Element color palette and typography variables, or wants to create component library frames for Button, Table, Form, Dialog, and other Element components.
pencil-ui-design-system-echarts
Initialize ECharts chart theme tokens and data visualization placeholder frames in a Pencil .pen file. Use when the user mentions Pencil with ECharts, needs to set up chart color palette and axis tokens, or wants to create placeholder frames for Line, Bar, Pie, Radar, and other ECharts chart types.
pencil-ui-design-system-bootstrap
Initialize Bootstrap design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Bootstrap, needs to set up Bootstrap color palette and typography variables, or wants to create component library frames for Grid, Card, Modal, Navbar, and other Bootstrap components.
pencil-ui-design-system-antd
Initialize Ant Design (antd) design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with Ant Design or antd, needs to set up antd color palette and typography variables, or wants to create component library frames for Button, Form, Table, Modal, and other antd components.
pencil-ui-design-spec-generator
Translates high-level user requirements into a PENCIL_PLAN: a strict sequence of Pencil MCP tool calls (open_document, set_variables, batch_design, get_screenshot). Use when the user explicitly mentions Pencil and wants to plan a design task, generate a step-by-step design spec, or create a login form, dashboard, or design system initialization plan.