メニュー
Detects .pen files and pencil-plan.md in .moai/design/, loads Pencil MCP, executes batch operations with layout verification, archives screenshots. Invoked from /moai design Phase B2.6 when preconditions are met.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/modu-ai/moai-studio --skill moai-workflow-pencil-integrationコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Mobile native and cross-platform development domain skill covering iOS native (Swift/SwiftUI), Android native (Kotlin/Jetpack Compose), React Native, and Flutter. Use when implementing mobile features or selecting between mobile paradigms. Harness seed: invoke builder-skill for deep sub-skills.
MoAI unified orchestrator for autonomous development. Routes natural language or subcommands (plan, run, sync, design, db, project, fix, loop, mx, feedback, review, clean, codemaps, coverage, e2e) to specialized agents.
Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.
| name | moai-workflow-pencil-integration |
| description | Detects .pen files and pencil-plan.md in .moai/design/, loads Pencil MCP, executes batch operations with layout verification, archives screenshots. Invoked from /moai design Phase B2.6 when preconditions are met. |
| license | Apache-2.0 |
| compatibility | Designed for Claude Code with Pencil MCP |
| allowed-tools | ToolSearch, Read, Write, Glob, mcp__pencil__batch_design, mcp__pencil__get_editor_state, mcp__pencil__snapshot_layout, mcp__pencil__get_screenshot, mcp__pencil__open_document, mcp__pencil__find_empty_space_on_canvas |
| user-invocable | false |
| metadata | {"version":"1.0.0","category":"workflow","status":"active","updated":"2026-04-20","tags":"pencil, design, mcp, batch, wireframe"} |
| progressive_disclosure | {"enabled":true,"level1_tokens":100,"level2_tokens":5000} |
| triggers | {"keywords":["pencil",".pen","batch design","wireframe"],"phases":["design"]} |
Pencil MCP integration skill for the /moai design Phase B2.6 workflow. Detects .pen files and pencil-plan.md, loads Pencil MCP tools via ToolSearch, parses DSL batch operations, executes them with layout verification, archives screenshots, and produces a run summary report.
This skill is invoked only when Phase B2.6 file/folder preconditions are satisfied. It is never invoked directly by the user.
Phase B2.6 checks these file/folder preconditions before invoking this skill:
.moai/design/pencil-plan.md exists..pen file exists in .moai/design/ or project root.If either condition fails, Phase B2.6 skips gracefully without error and proceeds to Phase B3 (REQ-PENCIL-002). This skill is not invoked in that case.
When both conditions are met, this skill is invoked and must complete (success or structured error) before Phase B3 begins (REQ-PENCIL-003).
| Code | Trigger | Recovery |
|---|---|---|
| PENCIL_MCP_UNAVAILABLE | ToolSearch with query "mcp__pencil" returns no matching tool schemas at runtime (REQ-PENCIL-013). | Return this code to the orchestrator. Phase B2.6 ends; orchestrator proceeds to Phase B3. Include Pencil MCP setup guidance: "Install and enable the Pencil MCP server. See Pencil MCP documentation for setup instructions." |
| PENCIL_CONNECTION_FAILED | mcp__pencil__get_editor_state returns a connection failure, or the open document name does not match the detected .pen file (REQ-PENCIL-006). | Return this code to the orchestrator. Phase B2.6 ends; orchestrator proceeds to Phase B3. Include user action guidance: "Restart Claude Desktop or open the correct .pen file in Pencil before retrying." |
| PENCIL_PLAN_SYNTAX_ERROR | pencil-plan.md contains tokens outside the DSL Grammar. Collect ALL errors before returning — do not halt on the first (REQ-PENCIL-016). | Return this code with a list of {line_number, offending_text} entries covering all discovered syntax errors. Halt execution. User must correct pencil-plan.md and re-run. |
| PENCIL_BATCH_FAILED |
mcp__pencil__batch_design fails on the initial attempt AND the single retry (total 2 attempts) for a given batch (REQ-PENCIL-015). |
| Return this code with the failing batch index. Halt further batch execution. User must investigate Pencil state and re-run. |
Before issuing any mcp__pencil__* call, invoke ToolSearch:
ToolSearch(query="mcp__pencil")
If ToolSearch returns no matching tool schemas, return PENCIL_MCP_UNAVAILABLE immediately. Do not attempt any mcp__pencil__* calls.
If ToolSearch returns one or more matching schemas, proceed to Step 2.
Identify the .pen file detected by Phase B2.6 precondition check (the file found in .moai/design/ or project root).
Call mcp__pencil__get_editor_state and inspect the response:
.pen file name: proceed to Step 3.PENCIL_CONNECTION_FAILED with recovery guidance. Do not proceed.Read .moai/design/pencil-plan.md and parse using the DSL Grammar below.
Acceptable operations (one per line):
I(parentId, { type: <"frame"|"text"|"rect"|"ellipse"|"line"|"group">, ...props })
M(nodeId, parentId, index)
R(nodeId)
Rules:
parentId, nodeId are double-quoted string literals.index is a non-negative integer.{...props} is a JSON-serializable object literal per Pencil's batch_design schema.// ...) and block comments (/* ... */) are permitted and ignored.## Batch <N> Markdown headings (N is a positive integer starting from 1).I(...), M(...), R(...), a comment, or a batch heading is a syntax error.Syntax error collection (REQ-PENCIL-016): Scan the entire file before returning. Collect every line containing an unrecognized token as {line_number, offending_text}. Do not halt on the first error. If any syntax errors are collected, return PENCIL_PLAN_SYNTAX_ERROR with the complete list.
Batch ordering (REQ-PENCIL-007): Extract batches in declaration order (Batch 1 through Batch N). Preserve this order in execution.
For each parsed batch, if the number of operations exceeds 25:
Sub-batches from the same batch are executed sequentially before moving to the next batch.
For each batch (and each sub-batch within it):
Emit a TaskUpdate marking the batch as started:
TaskUpdate: "Pencil batch <N> started (<op_count> operations)"
Call mcp__pencil__batch_design with the operations for this (sub-)batch.
If the call fails:
PENCIL_BATCH_FAILED with the failing batch index. Halt all further execution.If the call succeeds, capture the result. The rootFrameId for screenshot archival is the root frame node id returned by batch_design for this batch.
Immediately after a successful batch_design call, call:
mcp__pencil__snapshot_layout(problemsOnly=true)
If layout issues are reported:
If no layout issues are reported, proceed to 5d.
Call mcp__pencil__get_screenshot and save the returned PNG to:
.moai/design/screenshots/frame-<rootFrameId>-<ISO8601-timestamp>.png
Where:
<rootFrameId> is the root frame node id from the batch_design result for this batch.<ISO8601-timestamp> is the current UTC timestamp in compact format: YYYYMMDDTHHMMSSZ (e.g., 20260421T143022Z).Use the Write tool to save the PNG bytes to this path.
Emit a TaskUpdate marking the batch as complete:
TaskUpdate: "Pencil batch <N> complete — screenshot saved to .moai/design/screenshots/frame-<rootFrameId>-<timestamp>.png"
After all batches complete, list all files in .moai/design/screenshots/ matching the pattern frame-*-*.png.
Sort by filename (ISO8601 timestamp ensures chronological order). Keep the 5 most recent files. Delete any older files using the Write tool (overwrite with empty is insufficient; use Bash if needed to remove files).
Write a summary report to:
.moai/design/pencil-run-<ISO8601-timestamp>.md
The report must contain these sections:
# Pencil Run — <ISO8601-timestamp>
## Applied Batches
<list each batch: batch number, operation count, sub-batch count if split>
## Screenshots Saved
<list each screenshot path saved during this run>
## Warnings
<list any non-fatal warnings collected during execution, or "None">
If pencil-plan.md contains batch headings with no operations between them, treat the batch as empty and skip it (emit no batch_design call, no TaskUpdate for that batch). Do not treat an empty batch as a syntax error.
If get_editor_state indicates the Pencil app is not open (rather than a document mismatch), return PENCIL_CONNECTION_FAILED with specific guidance: "Open Pencil and load the .pen file before retrying."
Files with many batches (> 10) will generate many TaskUpdate events. This is expected and intentional per REQ-PENCIL-014 — it allows users to monitor long-running Pencil sessions and prevents timeout confusion.
/moai design Phase B2.6: The only orchestrator that invokes this skill.moai-workflow-design-context: Provides context about .moai/design/ contents before this skill runs (Phase B2.5).moai-workflow-gan-loop: Receives Pencil wireframe artifacts for quality evaluation in Phase C.REQ coverage: REQ-PENCIL-001 through REQ-PENCIL-016 SPEC: SPEC-DESIGN-PENCIL-001 v0.2.0 Version: 1.0.0