pencil-mcp-find-empty-space-on-canvas

$npx mdskill add partme-ai/full-stack-skills/pencil-mcp-find-empty-space-on-canvas

Finds empty space on a Pencil canvas to place artboards without overlap, triggered by explicit Pencil-related requests.

  • Helps organize the canvas by planning artboard placement to avoid overlapping existing elements.
  • Integrates with the Pencil MCP tool, specifically the find_empty_space_on_canvas function.
  • Uses intent recognition to activate only when users mention Pencil in design tasks.
  • Delivers results by recommending optimal positions based on input width, height, and optional direction.

SKILL.md

.github/skills/pencil-mcp-find-empty-space-on-canvasView on GitHub ↗
---
name: pencil-mcp-find-empty-space-on-canvas
description: Smartly find empty canvas space. Use to automatically plan artboard placement to avoid overlap and keep the canvas organized.
license: Complete terms in LICENSE.txt
---


## Tools

This skill is designed to call the Pencil MCP tool:

*   `find_empty_space_on_canvas`

If your client namespaces MCP tools, it may appear as `mcp__pencil__find_empty_space_on_canvas`.

## 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.**

**CRITICAL PREREQUISITE:**
**You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".**

**ALWAYS use this skill when:**
- You are about to insert a new Frame or Artboard **in Pencil**.
- You want to ensure the new element doesn't overlap with existing work **on the Pencil canvas**.
- You need to organize the canvas.

**Trigger phrases include:**
- "Find space for new screen in Pencil" (为 Pencil 新页面找位置)
- "Where can I draw in Pencil?" (我在 Pencil 哪里画?)
- "Pencil avoid overlap" (Pencil 避免重叠)

## Input Parameters

*   **`width`** (number, required): The width of the required space.
*   **`height`** (number, required): The height of the required space.
*   **`direction`** (string, optional): Search direction relative to node (e.g., "RIGHT", "BOTTOM").
*   **`nodeId`** (string, optional): Starting reference node. If omitted, searches around entire canvas content.
*   **`padding`** (number, optional): Minimum padding distance (default: 100).

## How to use this skill

1.  **Estimate Size**: Determine the size of the element you plan to create.
2.  **Call Tool**: `find_empty_space_on_canvas(width=..., height=...)`.
3.  **Use Result**: The tool returns `{x, y}` coordinates. Use these coordinates in your subsequent `batch_design` call to insert the Frame.

## Examples

### 1. Simple: Find Any Space
Find a spot for a small element (e.g., 100x100).
See [1-find-any.json](examples/1-find-any.json).

### 2. Medium: Place Next to Node
Find space to the right of an existing frame.
See [2-place-next-to.json](examples/2-place-next-to.json).

### 3. Complex: Organized Layout
Find space for a large dashboard with ample padding below the header section.
See [3-organized-layout.json](examples/3-organized-layout.json).

## Keywords

**English keywords:**
find space, empty canvas, layout planning, avoid overlap, next to node, smart placement

**Chinese keywords (中文关键词):**
查找空白, 空画布, 布局规划, 避免重叠, 节点旁, 智能放置

More from partme-ai/full-stack-skills

SkillDescription
adobe-xd"Guides creation of UI/UX designs, interactive prototypes, reusable components, and design specs in Adobe XD. Use when the user asks about Adobe XD artboards, prototype links, repeat grids, component states, design tokens export, or developer handoff."
angular"Provides comprehensive guidance for Angular framework including components, modules, services, dependency injection, routing, forms, and TypeScript integration. Use when the user asks about Angular, needs to create Angular applications, implement Angular components, or work with Angular features."
ansible"Provides comprehensive guidance for Ansible automation including playbooks, roles, inventory, and module usage. Use when the user asks about Ansible, needs to automate IT tasks, create Ansible playbooks, or manage infrastructure with Ansible."
ant-design-mini"Builds mini-program UIs with Ant Design Mini components for Alipay and WeChat mini-programs. Covers Button, Form, List, Modal, Tabs, NavBar, and 60+ components with theme customization and CSS variable theming. Use when the user needs to create mini-program interfaces with Ant Design Mini, configure themes, or implement mini-program-specific UI patterns."
ant-design-mobile"Builds React mobile UIs with Ant Design Mobile (antd-mobile) components including Button, Form, List, Modal, Picker, Tabs, PullToRefresh, InfiniteScroll, and 50+ mobile-optimized components. Use when the user needs to create mobile-first React interfaces, implement mobile navigation, forms, or data display with Ant Design Mobile."
ant-design-react"Builds enterprise React UIs with Ant Design (antd) including 60+ components (Button, Form, Table, Select, Modal, Message), design tokens, TypeScript support, and ConfigProvider theming. Use when the user needs to create React applications with Ant Design, build forms with validation, display data tables, or customize the Ant Design theme."
ant-design-vueProvides comprehensive guidance for Ant Design Vue (AntDV) component library for Vue 3. Covers installation, usage, API reference, templates, and all component categories. Use when building enterprise-class UI with Vue 3 and Ant Design.
api-doc-generator"Generate API documentation by scanning Controller classes, extracting endpoint URLs, HTTP methods, parameters, and response structures, then producing standardized docs from templates. Use when the user explicitly mentions generating API documentation, creating API docs, scanning interfaces, or documenting REST APIs. Do not trigger for generic documentation requests without explicit API mention."
appium"Provides comprehensive guidance for Appium mobile testing including mobile app automation, element location, gestures, and cross-platform testing. Use when the user asks about Appium, needs to test mobile applications, automate mobile apps, or write Appium test scripts."
ascii-ansi-colorizer"Add an ANSI color layer to existing ASCII/plain-text output (gradient/rainbow/highlights) with alignment-safe rules and a required no-color fallback. Use when the user wants to colorize terminal output, add rainbow effects to CLI text, or style ASCII art with ANSI colors."