Skip to content
cccskills
FreePublished on GitHub

control-flow

Trace application behavior and explain data structures using compact text tree diagrams. The diagrams connect user actions to real functions, data types, state changes, and the components that render again as a result.

OriginalShow the original 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.

See how to install

Good for

  • Tracing what happens after a user action
  • Investigating why a component renders again
  • Mapping data structures and their consumers
  • Understanding flows across an app, CLI, and server

Files included (1)

  • SKILL.md2.7 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

/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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

agent-browser

FreeSummary

Automate real browser tasks to test websites, complete forms, and collect page information. The skill guides agents through identifying clickable elements, interacting with pages, comparing page states, and saving screenshots or PDFs.

  • Testing form submissions and page navigation
  • Comparing page appearance before and after changes
  • Extracting page text and saving PDFs
slopus/happy24.2KUpdated Oct 18, 2026

dev

FreeSummary

Set up and run Happy components locally, including its CLI, server, mobile app, and desktop app. The guide covers building, testing, checking logs, and separating development data using pnpm, the project's package management tool.

  • Setting up a local Happy development environment
  • Rebuilding the CLI and checking its daemon
  • Running the server and app locally
slopus/happy24.2KUpdated Oct 18, 2026

maintain

FreeSummary

Organize Happy's GitHub issues, find duplicates, and check whether reported bugs are fixed on main, the primary development branch. Prepare replies and proposed actions for maintainer review, with explicit approval required before changes affecting contributors.

  • Grouping open issues and identifying duplicates
  • Checking whether reported bugs are fixed on main
  • Drafting replies and issue closure comments
slopus/happy24.2KUpdated Oct 18, 2026

metrics-graphana

FreeSummary

Query Prometheus metrics through Grafana and manage dashboards as JSON files. Use it to investigate current values and trends, add or adjust panels, and preview dashboard updates before applying them.

  • Investigating error rates and response times
  • Adding panels to a Grafana dashboard
  • Managing dashboard configuration as JSON
slopus/happy24.2KUpdated Oct 18, 2026

office-hours

FreeSummary

Develop a product or side-project idea through guided questions and premise checks. Startup discussions examine evidence of demand, while builder discussions explore possibilities and scope, producing a design document before implementation begins.

  • Examining demand for a startup idea
  • Defining the smallest useful internal project
  • Shaping a hackathon or side-project idea
slopus/happy24.2KUpdated Oct 18, 2026

release

FreeSummary

Guide releases of Happy's CLI, mobile app, web app, and server. Choose versions and release channels, follow build and test checks, publish through the designated services, and verify the resulting packages or app updates.

  • Publishing a stable or beta CLI release
  • Delivering preview or production mobile updates
  • Building native apps and submitting to stores
slopus/happy24.2KUpdated Oct 18, 2026

See all skills by slopus

Report a problem with this skill