Agent Skillsslopus/happy › control-flow

control-flow

GitHub

分析并设计控制流与数据结构,通过解析源码生成紧凑的ASCII树状图,展示触发链、状态变更及重渲染影响。

.agents/skills/control-flow/SKILL.md slopus/happy

Trigger Scenarios

需要可视化代码执行流程 分析状态变更与组件重渲染关系 梳理数据结构及其依赖

Install

npx skills add slopus/happy --skill control-flow -g -y
More Options

Non-standard path

npx skills add https://github.com/slopus/happy/tree/main/.agents/skills/control-flow -g -y

Use without installing

npx skills use slopus/happy@control-flow

指定 Agent (Claude Code)

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

安装 repo 全部 skill

npx skills add slopus/happy --all -g -y

预览 repo 内 skill

npx skills add slopus/happy --list

SKILL.md

Frontmatter
{
    "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:

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:

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

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

Version History

  • eb980a5 Current 2026-08-20 11:11

Same Skill Collection

.agents/skills/agent-browser/SKILL.md
.agents/skills/dev/SKILL.md
.agents/skills/maintain/SKILL.md
.agents/skills/metrics-graphana/SKILL.md
.agents/skills/release/SKILL.md
.agents/skills/sessions/SKILL.md
.agents/skills/terminal-emulator/SKILL.md
.claude/skills/agent-browser/SKILL.md
.claude/skills/terminal-emulator/SKILL.md
.agents/skills/office-hours/SKILL.md

Metadata

Files
0
Version
b824cd0
Hash
23685ef2
Indexed
2026-08-20 11:11

- 위키
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-09-12 22:48
浙ICP备14020137号-1 $방문자$