跳到正文
cccskills
免费在 GitHub 公开

excalidraw

Create, update, explain, and compare Excalidraw diagrams through separate subagents. Keeps lengthy diagram data out of the main conversation, returning concise summaries of components, connections, structural differences, and completed changes.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Use when working with *.excalidraw or *.excalidraw.json files, user mentions diagrams/flowcharts, or requests architecture visualization - delegates all Excalidraw operations to subagents to prevent context exhaustion from verbose JSON (single files: 4k-22k tokens, can exceed read limits)

查看安装方法

适用场景

  • Explaining components and connections in an existing diagram
  • Adding a component and its connections
  • Creating an architecture diagram or flowchart
  • Comparing the structure of two diagrams

包含的文件(2)

  • SKILL.md7.9 KB
  • README.md10.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Excalidraw Subagent Delegation

Overview

Core principle: Main agents NEVER read Excalidraw files directly. Always delegate to subagents to isolate context consumption.

Excalidraw files are JSON with high token cost but low information density. Single files range from 4k-22k tokens (largest can exceed read tool limits). Reading multiple diagrams quickly exhausts context budget (7 files = 67k tokens = 33% of budget).

The Problem

Excalidraw JSON structure:

  • Each shape has 20+ properties (x, y, width, height, strokeColor, seed, version, etc.)
  • Most properties are visual metadata (positioning, styling, roughness)
  • Actual content: text labels and element relationships (<10% of file)
  • Signal-to-noise ratio is extremely low

Example: 14-element diagram = 596 lines, 16K, ~4k tokens. 79-element diagram = 2,916 lines, 88K, ~22k tokens (exceeds read limit).

When to Use

Trigger on ANY of these:

  • File path contains .excalidraw or .excalidraw.json
  • User requests: "explain/update/create diagram", "show architecture", "visualize flow"
  • User mentions: "flowchart", "architecture diagram", "Excalidraw file"
  • Architecture/design documentation tasks involving visual artifacts

Use delegation even for:

  • "Small" files (smallest is 4k tokens - still significant)
  • "Quick checks" (checking component names still loads full JSON)
  • Single file operations (isolation prevents context pollution)
  • Modifications (don't need full format understanding in main context)

Delegation Pattern

Main Agent Responsibilities

NEVER:

  • ❌ Use Read tool on *.excalidraw files
  • ❌ Parse Excalidraw JSON in main context
  • ❌ Load multiple diagrams for comparison
  • ❌ Inspect file to "understand the format"

ALWAYS:

  • ✅ Delegate ALL Excalidraw operations to subagents
  • ✅ Provide clear task description to subagent
  • ✅ Request text-only summaries (not raw JSON)
  • ✅ Keep diagram analysis isolated from main work

Subagent Task Templates

Read/Understand Operation

Task: Extract and explain the components in [file.excalidraw.json]

Approach:
1. Read the Excalidraw JSON
2. Extract only text elements (ignore positioning/styling)
3. Identify relationships between components
4. Summarize architecture/flow

Return:
- List of components/services with descriptions
- Connection/dependency relationships
- Key insights about the architecture
- DO NOT return raw JSON or verbose element details

Modify Operation

Task: Add [component] to [file.excalidraw.json], connected to [existing-component]

Approach:
1. Read file to identify existing elements
2. Find [existing-component] and its position
3. Create new element JSON for [component]
4. Add arrow elements for connections
5. Write updated file

Return:
- Confirmation of changes made
- Position of new element
- IDs of created elements

Create Operation

Task: Create new Excalidraw diagram showing [description]

Approach:
1. Design layout for [number] components
2. Create rectangle elements with text labels
3. Add arrows showing relationships
4. Use consistent styling (colors, fonts)
5. Write to [file.excalidraw.json]

Return:
- Confirmation of file created
- Summary of components included
- File location

Compare Operation

Task: Compare architecture approaches in [file1] vs [file2]

Approach:
1. Read both files
2. Extract text labels from each
3. Identify structural differences
4. Compare component relationships

Return:
- Key differences in architecture
- Components unique to each approach
- Relationship/flow differences
- DO NOT return full element details from both files

Common Rationalizations (STOP and Delegate Instead)

ExcuseRealityWhat to Do
"Direct reading is most efficient"Consumes 4k-22k tokens unnecessarilyDelegate to subagent
"It's token-efficient to read directly"Baseline tests showed 9-45% budget usedAlways delegate
"This is optimal for one-time analysis""One-time" still pollutes main contextSubagent isolation
"The JSON is straightforward"Simplicity ≠ token efficiencyDelegate anyway
"I need to understand the format"Format understanding not needed in main agentSubagent handles format
"Within reasonable bounds" (18k tokens)"Reasonable" is subjective rationalizationHard rule: delegate
"Just a quick check of components""Quick check" still loads full JSONExtract text via subagent
"File is small (16K)"4k tokens is NOT smallSize threshold doesn't matter

Red Flags - STOP and Delegate

Catch yourself about to:

  • Use Read tool on .excalidraw file
  • "Quickly check" what components exist
  • "Understand the structure" before modifying
  • Load file to "see what's there"
  • Compare multiple diagrams side-by-side
  • Parse JSON to "extract just the text"

All of these mean: Use Task tool with subagent instead.

Quick Reference

OperationMain Agent ActionSubagent Returns
Understand diagramDelegate with "Extract and explain" templateComponent list + relationships
Modify diagramDelegate with "Add [X] connected to [Y]" templateConfirmation + changes made
Create diagramDelegate with "Create showing [description]" templateFile location + summary
Compare diagramsDelegate with "Compare [A] vs [B]" templateKey differences (not raw JSON)

Token Analysis (Why This Matters)

Real data from baseline testing:

ScenarioWithout DelegationWith DelegationSavings
Single large file22k tokens (45% budget)~500 tokens (subagent summary)98%
Two-file comparison18k tokens (9% budget)~800 tokens (diff summary)96%
Modification task14k tokens (7% budget)~300 tokens (confirmation)98%

Context pollution impact:

  • Reading all 7 project diagrams: 67k tokens (33% of 200k budget)
  • With delegation: ~2k tokens (isolated in subagents)
  • Savings: 97% context budget preserved

Implementation Example

❌ BAD (Direct Read):

User: "What architecture is shown in detailed-architecture.excalidraw.json?"
Agent: Let me read that file... [reads 22k tokens into main context]

✅ GOOD (Subagent Delegation):

User: "What architecture is shown in detailed-architecture.excalidraw.json?"
Agent: I'll use a subagent to extract the architecture details.

[Dispatches Task tool with general-purpose subagent]
Task: Extract and explain components in .ryanquinn3/ticketing/detailed-architecture.excalidraw.json

[Receives ~500 token summary with component list and relationships]
[Responds to user with architecture explanation, main context preserved]

Why "Straightforward JSON" Doesn't Matter

Agents often rationalize: "The format is simple, I can just read it."

The problem isn't complexity - it's verbosity:

  • Simple structure with 20+ properties per element
  • Repetitive metadata (seed, version, nonce, roughness)
  • Positioning data (x, y, width, height) not semantically useful
  • Visual styling (strokeColor, opacity, fillStyle) irrelevant to content

Token cost comes from volume, not complexity.

Even "straightforward" JSON consumes 4k-22k tokens because:

  • 79 elements × ~280 tokens/element = 22k tokens
  • Most tokens are metadata noise
  • Only text labels and relationships matter (~10% of content)

The Iron Law

Main agents NEVER read Excalidraw files. No exceptions.

Not for:

  • "Quick checks"
  • "Small files"
  • "Understanding format"
  • "One-time analysis"
  • "Optimal efficiency"

Always delegate. Isolation is free via subagents.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Create interactive 3D scenes for websites, including product views and scroll-driven animations. Covers choosing Three.js, React Three Fiber, or Spline, preparing lightweight models, showing loading progress, and adapting experiences for mobile devices.

中文简介正在准备中。当前显示英语简介。

  • Building an interactive 3D product configurator
  • Adding 3D scenes to a portfolio
  • Animating models and cameras as visitors scroll
davila7/claude-code-templates3.3万2026年10月18日 更新

Plan A/B tests that compare page or product changes, with clear hypotheses, sample sizes, success metrics, and traffic allocation. Get a structured test plan and guidance for interpreting results and deciding what to try next.

中文简介正在准备中。当前显示英语简介。

  • Comparing signup button copy
  • Planning a pricing page experiment
  • Estimating sample size and test duration
davila7/claude-code-templates3.3万2026年10月18日 更新

Prepare an academic CV for faculty, postdoctoral, or research applications. Organize publications, grants, teaching, and research experience, with section order and formatting adapted to the role and academic field.

中文简介正在准备中。当前显示英语简介。

  • Preparing a CV for faculty applications
  • Updating a CV for postdoctoral applications
  • Organizing publications and research funding
davila7/claude-code-templates3.3万2026年10月18日 更新

Audit and improve web accessibility using WCAG 2.1 guidelines. Covers image descriptions, color contrast, keyboard controls, forms, and screen reader support, with code examples and automated and manual checks to guide fixes.

中文简介正在准备中。当前显示英语简介。

  • Auditing accessibility before a website launch
  • Improving keyboard navigation
  • Fixing form labels and error announcements
davila7/claude-code-templates3.3万2026年10月18日 更新

Audit websites for accessibility barriers and improve image descriptions, color contrast, forms, keyboard navigation, and screen reader support. Provides code examples and automated and manual testing guidance for work toward WCAG 2.1 AA or AAA accessibility standards.

中文简介正在准备中。当前显示英语简介。

  • Auditing a website for accessibility issues
  • Fixing form labels and error announcements
  • Checking keyboard navigation and dialog focus
davila7/claude-code-templates3.3万2026年10月18日 更新

Design autonomous agents for Claude Code plugins, including when they should run, what tools they may use, and how they should respond. Provides configuration templates, prompt guidance, and validation steps for creating agent files.

中文简介正在准备中。当前显示英语简介。

  • Create a code review agent
  • Refine examples that trigger an agent
  • Limit the tools an agent can use
davila7/claude-code-templates3.3万2026年10月18日 更新

查看 davila7 的全部技能

报告此技能的问题