Agent skill

Control Flow Diagrams

Traces how an action moves through your code and draws it as a compact ASCII tree: functions called, payload types, state changes and components that re-render.

MITAuto-check passedDevelopment

Install Control Flow Diagrams

skills CLI

$ npx skills add slopus/happy --skill control-flow -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install slopus/happy control-flow --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/control-flow .claude/skills/control-flow && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .claude/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/slopus/happy/tree/main/.agents/skills/control-flow

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add slopus/happy --skill control-flow -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install slopus/happy control-flow --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/control-flow .agents/skills/control-flow && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .agents/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add slopus/happy --skill control-flow -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install slopus/happy control-flow --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/control-flow .cursor/skills/control-flow && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .cursor/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/slopus/happy.git --path .agents/skills/control-flow

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add slopus/happy --skill control-flow -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install slopus/happy control-flow --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/control-flow .gemini/skills/control-flow && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .gemini/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install slopus/happy control-flow

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add slopus/happy --skill control-flow -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/control-flow .github/skills/control-flow && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .github/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add slopus/happy --skill control-flow -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install slopus/happy control-flow --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/slopus/happy.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/control-flow .opencode/skills/control-flow && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "control-flow" agent skill from https://github.com/slopus/happy/tree/main/.agents/skills/control-flow into .opencode/skills/control-flow/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-flow", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: control-flow
GitHub stars: 24k
Token cost: ~654 tokens
SKILL.md length: 175 words
Files: 1
Skills in repo: 8
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Traces how an action moves through your code and draws it as a compact ASCII tree: functions called, payload types, state changes and components that re-render.

Works in 5 steps: Parse topic into entry points → Grep/Explore to find the call chain → Read each step at the relevant lines → …
Tracing what happens in the code after a user taps or clicks a control
SKILL.md covers Format, Principles and Process
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

When you ask how a feature flows through the code, the agent reads the relevant source and answers with ASCII tree diagrams inside txt code blocks. Each user action or IO event gets its own tree, starting at the trigger and ending at the final visible effect.

The trees use real function names and types found in the code, show payloads as TypeScript types instead of prose, and note which state fields change and which components re-render and why. A flow that crosses packages, such as app to CLI to server, stays in one diagram, and trivial pass-throughs are skipped so the decisions stand out. For a data structure, the skill shows its shape and what depends on it.

When your agent uses it

Tracing what happens in the code after a user taps or clicks a control
Explaining the call chain between an app, a CLI and a server
Designing a data structure and showing what depends on it
Working out why a state change makes a component re-render

Example prompts

“Diagram what happens when the user taps Archive on a session row.”
“/control-flow message sending, from the composer to the server”
“Show me the shape of the settings store and which components read each field.”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

Parse topic into entry points
Grep/Explore to find the call chain
Read each step at the relevant lines
Build tree from trigger → final effect
Output as txt blocks

What it can do on your machine

Read from SKILL.md and the folder at commit 7ea7017. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Control Flow Diagrams loads about 654 tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 175 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~69
When it runs · the whole SKILL.md, loaded when a task matches: ~654

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Download SKILL.mdSave it as .claude/skills/control-flow/SKILL.md (or your agent's skills folder).

name: control-flow
description: Analyze and design control flows and data structures. Produces compact ASCII tree diagrams showing triggers, call chains, payload shapes, state mutations, and re-render effects. Use when user asks to diagram, trace, visualize, or design a flow or data structure.

/control-flow — Analyze and design control flows and data structures

Read the relevant source code and produce ASCII tree diagrams inside ```txt blocks.

Format

Each user action or IO event is a separate tree root
Real function names and types — never invent
Payload shapes as TypeScript types, not prose
State mutations: which fields change, what triggers
Re-render chain: which components and why
Cross-package when the flow spans app → CLI → server
Compact — skip trivial pass-throughs, show decisions

Example:

txt

User taps "Archive"
│
├─ handleActionPress(action: SessionActionItem)
│  └─ onClose() → setActionsAnchor(null)
│
├─ sessionKill(sessionId: string)
│  ├─ POST /api/sessions/:id/kill
│  └─ → { success: boolean, message?: string }
│
└─ deleteSession(sessionId)
   ├─ mutates: sessions, sessionMessages, gitStatus, fileCache
   ├─ rebuilds: sessionListViewData
   └─ re-renders: SessionsListWrapper (data ref changed)

For data structures, show the shape and what depends on it:

txt

SessionRowData (flat primitives, cheap deep-equal)
├─ id, name, subtitle, avatarId     ← identity + display
├─ state: SessionState              ← collapsed from presence + agentState + thinking
├─ hasDraft: boolean                ← collapsed from draft string
├─ activeAt?: number                ← only inactive sessions (avoids heartbeat diffs)
├─ machineId, path, homeDir         ← grouping in ActiveSessionsGroup
└─ completedTodosCount, totalTodosCount
   │
   consumed by:
   ├─ SessionItem         → renders purely from props, no store hooks
   ├─ ActiveSessionsGroup → groups by machineId + path
   └─ useDeepEqual        → 12 primitive comparisons vs full Session tree

Principles

Expressive yet compact — every line earns its place
Show payload SHAPE not description
Show state mutations → which store fields, what rebuilds
Show re-render chain → component + reason
Pseudo code only for branching logic between nodes
Always output inside ```txt for alignment
File:line refs when helpful, not mandatory — the flow matters more than the location

Process

Parse topic into entry points
Grep/Explore to find the call chain
Read each step at the relevant lines
Build tree from trigger → final effect
Output as ```txt blocks

Files

Just SKILL.md in .agents/skills/control-flow of slopus/happy.

Open the folder on GitHubat commit 7ea7017

Compare with similar skills

Control Flow Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Control Flow Diagrams compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Control Flow Diagrams this skillslopus/happy	24k	—	~654	Automated safety check: Pass	MIT	today
Evolutionary Modular Architecturetech-leads-club/agent-skills	7k	—	~3.7k	Automated safety check: Pass	CC-BY-4.0	17 days ago
Archify Diagramstt-a1i/archify	79k	—	~2.9k	Automated safety check: Pass	MIT	today
Dark Architecture Diagram BuilderCocoon-AI/architecture-diagram-generator	7.4k	1 repos	~2.1k	Automated safety check: Pass	MIT	4 mo ago
SVG Diagram GeneratorJimLiu/baoyu-skills	26k	1 repos	~3.1k	Automated safety check: Pass	MIT	27 days ago
Senior Architect Toolkitmaslennikov-ig/claude-code-orchestrator-kit	259	7 repos	~1.2k	Automated safety check: Notes	Custom licence	7 mo ago

Similar skills

Evolutionary Modular Architecture
tech-leads-club/agent-skills
Guides design of modular-monolith platforms with DDD, flat-by-aggregate modules, anti-corruption layers, outbox events and resilience, plus an architecture document with SVG diagrams.
7k GitHub stars~3.7k tokensUpdated 17 days ago
DevelopmentAuto-check passed
Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
79k GitHub stars~2.9k tokensUpdated today
DevelopmentAuto-check passed
Dark Architecture Diagram Builder
Cocoon-AI/architecture-diagram-generator
Creates dark-themed system, cloud, security and network architecture diagrams as self-contained HTML files with inline SVG and CSS.
7.4k GitHub starsUsed in 1 repo~2.1k tokens
DevelopmentAuto-check passed
SVG Diagram Generator
JimLiu/baoyu-skills
Creates standalone dark-themed SVG diagrams, including architecture, flowchart, sequence, structural, mind map, timeline and state machine types.
26k GitHub starsUsed in 1 repo~3.1k tokens
DevelopmentAuto-check passed
Senior Architect Toolkit
maslennikov-ig/claude-code-orchestrator-kit
Comprehensive software architecture skill for designing scalable, maintainable systems using ReactJS, NextJS, NodeJS, Express, React Native, Swift, Kotlin…
259 GitHub starsUsed in 7 repos~1.2k tokens
DevelopmentAuto-check: notes
Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
1.4k GitHub starsUsed in 2 repos~4.1k tokens
DevelopmentAuto-check passed

Questions about Control Flow Diagrams

What does Control Flow Diagrams do?

Traces how an action moves through your code and draws it as a compact ASCII tree: functions called, payload types, state changes and components that re-render. When you ask how a feature flows through the code, the agent reads the relevant source and answers with ASCII tree diagrams inside txt code blocks. Each user action or IO event gets its own tree, starting at the trigger and ending at the final visible effect.

When should I use Control Flow Diagrams?

Control Flow Diagrams fits situations like: tracing what happens in the code after a user taps or clicks a control; explaining the call chain between an app, a CLI and a server; designing a data structure and showing what depends on it; working out why a state change makes a component re-render.

How do I install Control Flow Diagrams in Claude Code?

Run `npx skills add slopus/happy --skill control-flow -a claude-code`. Or copy the skill folder (.agents/skills/control-flow in slopus/happy) into .claude/skills/control-flow in your project. Claude Code loads it when a task matches its description.

How do I install Control Flow Diagrams in Codex?

Run `npx skills add slopus/happy --skill control-flow -a codex`. Or copy the skill folder (.agents/skills/control-flow in slopus/happy) into .agents/skills/control-flow in your project. Codex loads it when a task matches its description.

Can I use Control Flow Diagrams in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add slopus/happy --skill control-flow -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/control-flow, .gemini/skills/control-flow, .github/skills/control-flow and .opencode/skills/control-flow in your project.

What does Control Flow Diagrams need to run?

SKILL.md names no scripts, command-line tools or credentials: Control Flow Diagrams is instructions for the agent only.

Does Control Flow Diagrams access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Control Flow Diagrams safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Control Flow Diagrams use?

Control Flow Diagrams is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Control Flow Diagrams use?

About 654 tokens (SKILL.md is roughly 2.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Control Flow Diagrams?

Skills that share tags, products or a category with Control Flow Diagrams: Evolutionary Modular Architecture (tech-leads-club/agent-skills, 7k stars), Archify Diagrams (tt-a1i/archify, 79k stars), Dark Architecture Diagram Builder (Cocoon-AI/architecture-diagram-generator, 7.4k stars) and SVG Diagram Generator (JimLiu/baoyu-skills, 26k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Control Flow Diagrams?

slopus (a GitHub organization) maintains it in slopus/happy, which has 24,039 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 7, 2026.

Source: slopus/happy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Control Flow Diagrams

Install Control Flow Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

/control-flow — Analyze and design control flows and data structures

Format

Principles

Process

Files

Compare with similar skills

Similar skills

Evolutionary Modular Architecture

Archify Diagrams

Dark Architecture Diagram Builder

SVG Diagram Generator

Senior Architect Toolkit

Archify Diagram Builder

More from slopus/happy

Session History Search

Agent Browser CLI

Happy Monorepo Dev Guide

Happy Infra Metrics and Grafana

Interactive CLI Testing With tui-test

Happy Monorepo Release

Questions about Control Flow Diagrams

Install Control Flow Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

/control-flow — Analyze and design control flows and data structures

Format

Principles

Process

Files

Compare with similar skills

Similar skills

More from slopus/happy

Related

Questions about Control Flow Diagrams