Flow Brief

Produce a single-file HTML swimlane brief that walks a system, module, or upcoming feature past a non-specialist reader, with provenance badges that separate what is measured from what is merely intended. Use this whenever someone needs to explain how something works to people outside the team — a flow diagram, an architecture walkthrough, an onboarding page, a design-review handout, a 介绍图 or 泳道图 — and especially when they describe the need without naming a format: "explain this to my boss", "draw how the data moves", "something the new hire can read", "I have to present this next week".

19 stars 1 forksSoftware Development

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add shaokeyibb/flow-brief --skill flow-brief

Manual install

git clone --depth 1 https://github.com/shaokeyibb/flow-brief.git /tmp/flow-brief
mkdir -p ~/.claude/skills
cp -r /tmp/flow-brief/. ~/.claude/skills/flow-brief

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Flow Brief

Produce one self-contained `.html` file: a swimlane walkthrough that explains a system,
a module, or an upcoming feature to someone who does not work inside it. No build step,
no assets beyond one Google Fonts link, opens by double-click.

Match every reader-facing string to the language of the user's request (a Chinese request
gets a Chinese page). Keep identifiers, file paths, commands, and error codes verbatim.

**The reader is not your peer.** A flow brief a fellow engineer enjoys is usually one a
director abandons after three lines. Everything below exists to prevent that.

## Fast path

1. **Frame it.** From the one-line request pin three things: the *subject boundary*, the
   *reader* (default: competent, but does not work in this module), and the *spine*
   (where the flow enters, where it exits). Pick a row from the Scenario router.
2. **Count the modes** — see Rule 1. Most subjects have one; decide before drafting.
3. **Collect by walking the call chain, not by reading docs.** Code first, documents last:
   documents lag behind implementations, and the gap between them is often the most
   interesting thing you will put on the page. Details in `references/collecting.md`.
4. **Draft the artifact before polishing anything.** Copy `templates/skeleton.html` and
   fill bands. **Do not redesign the layout.** The template owns geometry, color, theming,
   and responsiveness — that is what makes output stable across models and agents.

Read the full skill on GitHub

Details

Skill name: flow-brief
Repository: shaokeyibb/flow-brief
License: MIT
Repo updated: 30 August 2026

FAQ

What does the Flow Brief skill do?

How do I install the Flow Brief skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add shaokeyibb/flow-brief --skill flow-brief. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Flow Brief popular?

It lives in shaokeyibb/flow-brief, which has 19 GitHub stars and 1 forks.

Related skills

Termscope

mwunsch/termscope

Drive and inspect terminal applications programmatically. Use for TUI testing, visual regression, debugging rendering issues, and automating interactive CLI tools. Provides snapshot capture, keyboard/text input, text search, and a JSON-lines session protocol.

Software Development

Fpga Hardware Design and Review Guide

cobbpeng/fpga-hardware-design-and-review-guide

Comprehensive FPGA hardware design guide based on real-world project experience. Covers pipeline architecture, timing optimization, SystemVerilog coding patterns, CDC handling, and practical debugging techniques. Use this skill when: (1) designing FPGA modules with timing constraints, (2) implementing video processing or data path designs, (3) optimizing for resource utilization and timing closure, (4) reviewing RTL code for hardware implementation, (5) debugging synthesis or implementation issues.

Software Development

Antigravity CLI

SafeMantella/claude-code-agy-CLI-skill

Delegate heavy, multi-step, or specialized tasks to Google's Antigravity CLI agents. Use when a task would benefit from: (1) deep multi-file codebase analysis across many files, (2) web research with Google Search grounding, (3) image generation or visual assets, (4) a second AI perspective for code review or architecture decisions, (5) specialized scientific/biology database queries (gnomAD, UniProt, PubMed, etc.), (6) long-running refactors that would exhaust your context window, (7) tasks requiring many sequential tool calls that would consume excessive tokens. Also use when the user explic

Software Development

Clean Architecture

tokenaissance/clean-architecture

Clean Architecture practitioner's guide. Trigger when users ask about four-layer architecture, dependency direction & inversion (DIP), an entity directly depending on external SDKs, ORM/data access layer (Repository pattern) design, microservice decomposition, technology selection, over-engineering, or architecture refactoring. Covers business logic organization in Express/Next.js/Go/Spring projects, MongoDB→PostgreSQL migrate, REST→GraphQL migrate, third-party integration (Stripe/PayPal), Redis caching, and Kafka message queue evaluation. Evaluates architecture against Robert C. Martin's Clea

Software Development

Design Style

yanliudesign/design-style-skill

Recommend and apply design styles from a curated library of 67 visual aesthetics. Use when the user wants to choose a design style for their project, get style recommendations, or apply a style's CSS/colors/fonts to their code.

Software Development

Atlassian CLI

leweii/atlassian-cli

Use when working with Jira or Confluence from command line, including authentication, searching issues with JQL, bulk operations, sprint reports, or creating/updating work items using acli

Software Development

Browse the most popular Claude skills, all software development skills, or write your own with the skills generator.