How to use the Sticky Flowchart Frame agent skill

What the Sticky Flowchart Frame skill makes the agent do

An agent skill is a folder with a SKILL.md file that gives an AI agent instructions for a specific kind of task. This skill covers one task: turning a description of a process, system, or workflow into a hand-drawn-looking flowchart.

The skill is a visual style guide and layout recipe. When it is active, the agent writes one HTML file on a 1920×1080 (16:9) canvas. Each step becomes a 240×180px sticky note in one of four colors (yellow, peach, mint, or blue), with slight rotation, a soft shadow, and a tape strip at the top. Steps are joined by SVG Bezier curves with round line caps and black arrowheads. Dashed lines can mark conditional branches. The source suggests 5 to 12 nodes.

The skill does not run code itself. It tells the agent how to structure and style the page, and the agent writes the HTML.

Install the skill from the ZIP

Download the ZIP for this skill from this page. It contains three files: SKILL.md, example.html, and open-design.json.

Option A: unzip it into your personal skills folder, ~/.claude/skills/. Option B: unzip it into a project's .claude/skills/ folder so it applies only to that project.

Option C: in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.

• Personal: ~/.claude/skills/
• Project: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills

How to trigger the skill with a natural request

You do not need a special command. Describe the process you want drawn and say that you want a sticky-note or whiteboard-style flowchart. Include the actual steps, because the skill is designed to use your real content rather than placeholder text.

The source's own example prompt asks the agent to turn your content into a whiteboard-brainstorm frame with SVG curve connectors and sticky-note nodes, and to avoid lorem ipsum and placeholder images. Reusing that wording is a reliable way to trigger the right behavior.

• "Make a whiteboard-style flowchart of our customer onboarding: sign up, verify email, connect a bank account, first purchase, and receive a welcome email."
• "Draw our order fulfilment process as sticky notes with curved arrows, 16:9 for a video frame."
• "Turn this incident response runbook into a hand-drawn flow with a branch for severity 1 incidents shown as a dashed line."

Examples of what you can ask for

The bundled example.html is a six-node user onboarding flow using a handwriting font on a paper background. Its description in the source is a 6-node onboarding flow with handwritten type and a whiteboard paper base. Use it as a reference for the look you should expect.

Describe your process in order and mention any branches or loops. The skill supports one node connecting to two outgoing lines (a fork) and two lines entering one node (a merge). It also supports a hover lift effect on nodes and a small cursor decoration with a name tag, styled to resemble a collaboration cursor.

What you need before you start

You need an agent runtime that can read SKILL.md skills and write an HTML file. You also need a browser to open the resulting single HTML file.

Handwriting fonts such as Kalam, Caveat, or Patrick Hand are referenced by name in the page. They are not included in the ZIP, so the page depends on those fonts being available on the viewing machine. The source names LXGW WenKai Screen or 霞鹜文楷 as options for Chinese text. The skill runs no scripts and makes no network requests.

Safety notes: scripts and network

According to the skill's metadata, it runs no scripts and uses no network access. The output is one HTML file with inline SVG, and the source says not to use an external icon library.

Because the skill only describes layout and style, review the generated HTML as you would any agent output before you publish it. Check that the text matches your real process and that no placeholder content remains.

Tips for better flowcharts

Write steps as short labels, ideally a title of 16 to 20 words plus one line of description, because each note is small. Keep the total under 12 nodes so the connectors stay readable.

Say which lines are conditional. The skill uses dashed lines for branches, so naming the condition in your request helps the agent place them correctly. Ask for a different layout if the notes start crossing lines.