Lab

Knowledge brain

Any graph drawn as a 3D brain: nodes cluster by group inside a cloud of dots, outer nodes sit on a shell around it, and signals run along the links. Drag to turn it, hover a dot or a group to light up what it touches, and click a dot to fly to it and open a card with what it is and what it links to. The links on the card are buttons, so you can walk the graph. Three.js loads only when it nears the screen; without WebGL it's a plain list.

Think

  • grilling · Interrogates a plan until the weak spots show.
  • grill-with-docs · The same grilling, writing the glossary and decisions down as it goes.
  • reframe · Turns a fuzzy ask into a brief: outcome, constraints, finish line.
  • domain-modeling · Keeps the project's words and decisions written down and sharp.
  • wayfinder · Maps work too big for one session into decisions, solved one at a time.
  • to-spec · Turns a conversation into a spec on the issue tracker.
  • to-tickets · Splits a plan into small tickets with their blockers marked.
  • triage · Sorts incoming issues and PRs into briefs an agent can pick up.
  • research · Answers questions from primary sources, with citations.
  • eli5 · Explains anything like you're five.
  • how · Traces how existing code actually runs.
  • why · Digs through history for why the code is the way it is.

Design

  • architect · Sketches the interfaces first, then stays while the build fills them in.
  • arena · Makes several attempts at once and grafts the best parts into one.
  • codebase-design · A shared vocabulary for deep modules and where the seams go.
  • engineering-principles · The house rules: data models, interfaces, migrations, evidence.
  • improve-codebase-architecture · Finds structural improvements and backs them with evidence.
  • blast-radius · Checks what a change could break beyond its diff.
  • correct · Turns mistakes agents keep making into checks that stop them.
  • no-comments · Deletes comments that excuse code, and fixes the code instead.
  • writing-for-agents · How to write skills and instructions agents actually follow.

Build

  • orchestration · Picks a model for each job and coordinates the agents.
  • goal-swarm · Chases a goal to the finish, alone or with a swarm of attempts.
  • tdd · Red, green, refactor.
  • diagnosing-bugs · A loop for hard bugs and slowdowns.
  • prototype · Throwaway prototypes that answer a design question fast.
  • react-best-practices · React and Next.js speed: waterfalls, bundles, re-renders.
  • react-doctor · Scans React code for problems and traces performance.
  • snip-snap · Parks out-of-scope ideas in Snip Snap for later.
  • snipsnap-do-chores · Works through the parked chores.
  • gauntlet-loop · Writes a prompt for a builder-and-critic loop against a real bar.
  • agent-login · Signs agents into apps with approved credentials.

Prove

  • verify · Proves the work: real workflows, evaluation plans, invariants.
  • showroom · Shows the work in a form you can try before handoff.
  • review · An independent review that reports findings and fixes nothing.
  • review-sweep · Checks review and CI findings and fixes the real ones.
  • review-fix-loop · Rounds of independent review and fixes until it's clean.

Ship

  • pr · Writes, opens and tends a pull request.
  • gh-stack · Stacked pull requests on GitHub.
  • merge · Merges a ready PR or stack and tidies up after it.
  • repo-cleanup · Clears out finished worktrees, dev apps and simulators.
  • handoff · A compact note so the next session can pick the work up.
  • retro · A retrospective on a coding session.
  • setup-sreestack · Sets a repo up for this whole way of working.

Interface

  • ui-design · Visual hierarchy, design systems, CSS and accessibility.
  • animate · When to animate and how, on the web and Apple platforms.
  • web-component-inspiration · Finds and weighs UI references for a feature.

Apple

  • swiftui · SwiftUI views, state and navigation.
  • uikit · UIKit controllers, layout and accessibility.
  • app-intents · Opens an app's actions to Siri, Shortcuts and Spotlight.
  • ios-haptics · Designs and tunes haptics, in step with motion and sound.
  • swift-testing-modernization · Moves old XCTest suites to Swift Testing.
  • xcode-security-audit · Hardens an Xcode project's security settings.
  • app-store-connect · Builds, TestFlight, releases and App Review.
  • koubou · Designs App Store screenshots.
  • Matt Pocock · Shaped 20 skills.
  • Lauren Tan · Shaped 15 skills.
  • Emil Kowalski · Shaped 5 skills.
  • Vercel · Shaped one skill.
  • Anthropic · Shaped 2 skills.
  • GitHub · Shaped one skill.
  • React Doctor · Shaped one skill.
  • Rudrank Riyam · Shaped one skill.
  • Koubou · Shaped one skill.
  • RoboNuggets · Shaped one skill.
  • Ponytail · Shaped 2 skills.
  • Cursor · Shaped one skill.
  • good-css · Shaped 2 skills.
  • Refactoring UI · Shaped one skill.
  • OpenClaw · Shaped one skill.
  • transitions.dev · Shaped one skill.
  • xcode27-skills · Shaped 2 skills.
  • David Khourshid · Shaped one skill.
  • GPT-6.1 Sol · Codex. Builds, researches and does the first review.
  • Gemini 4 Argon · Antigravity. Watches YouTube, and reviews second.
  • Grok 4.7 · Reads X.
  • DeepSeek v4.1 Flash · OpenCode. First in line for an alternate review.
  • GLM 5.3 Flash · OpenCode. First in line for an alternate review.
  • Gemini 3.8 Flash · Antigravity. Third in line for review.
Color
Drift
Signals
Dust
Install
$ npx shadcn@latest add https://savi.fyi/r/knowledge-brain.json
Use it
import { KnowledgeBrain } from "@/components/knowledge-brain";
const groups = [
{ id: "plan", label: "Plan" },
{ id: "build", label: "Build" },
];
const nodes = [
{ id: "spec", group: "plan", description: "What we're making and why." },
{ id: "tickets", group: "plan", description: "The spec, cut into small pieces." },
{ id: "tests", group: "build", description: "Written first." },
{ id: "code", group: "build", description: "Makes the tests pass." },
{ id: "Ousterhout", outer: true, description: "Deep modules." },
];
const links: [string, string][] = [
["spec", "tickets"],
["tickets", "tests"],
["tests", "code"],
["Ousterhout", "code"],
];
export function Map() {
return (
<KnowledgeBrain
nodes={nodes}
links={links}
groups={groups}
/>
);
}
Props
nodes
{ id, label?, group?, description?, meta?, outer?, words? }[]
The dots. Outer ones sit on a shell around the brain, for sources, people or models.
links
[from, to][]
Who links to whom, by id. Signals run from → to.
groups
{ id, label, at? }[]
Clusters, each with a label you can hover. Pin one somewhere with at: [x, y, z].
words
{ out, in }
The card's headings for a node's links. Defaults to Links to / Linked from.
colors
{ accent, foreground, muted, background }
Any CSS colors. Defaults come from the text and background around it.
spin
number
How fast it drifts when left alone. 0 holds it still.
signals
boolean
Signals running along the links. On by default.
dust
number
How many faint dots make the brain's shape. 0 for none.
onSelect
(id | null) => void
Called when a dot is picked or let go.
classNames
{ node, group, card, title, text, link, … }
Classes for the labels and the card, to match your type.
fallback
ReactNode
Shown without WebGL. Defaults to a list of every node.
On this site