Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
Create a durable, visual teaching artifact for a concept, diff, idea, or recent-work window, with an optional check-in that makes it stick.
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install leo-kuang-ai/spec-first spec-explain --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/spec-explain .claude/skills/spec-explain && rm -rf skills-srcUse ~/.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/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .claude/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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 install https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explainType 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.
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install leo-kuang-ai/spec-first spec-explain --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/spec-explain .agents/skills/spec-explain && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .agents/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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.
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install leo-kuang-ai/spec-first spec-explain --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/spec-explain .cursor/skills/spec-explain && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .cursor/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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 https://github.com/leo-kuang-ai/spec-first.git --path skills/spec-explain--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install leo-kuang-ai/spec-first spec-explain --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/spec-explain .gemini/skills/spec-explain && rm -rf skills-srcUse ~/.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/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .gemini/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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.
$ gh skill install leo-kuang-ai/spec-first spec-explainInstalls 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).
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/spec-explain .github/skills/spec-explain && rm -rf skills-srcUse ~/.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/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .github/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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.
$ npx skills add leo-kuang-ai/spec-first --skill spec-explain -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install leo-kuang-ai/spec-first spec-explain --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/leo-kuang-ai/spec-first.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/spec-explain .opencode/skills/spec-explain && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "spec-explain" agent skill from https://github.com/leo-kuang-ai/spec-first/tree/master/skills/spec-explain into .opencode/skills/spec-explain/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "spec-explain", 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.
spec-explainCreate a durable, visual teaching artifact for a concept, diff, idea, or recent-work window, with an optional check-in that makes it stick.
Spec Explain is an agent skill from leo-kuang-ai/spec-first. Create a durable, visual teaching artifact for a concept, diff, idea, or recent-work window, with an optional check-in that makes it stick. Use when the user asks to be taught or wants a deep explainer; not for ordinary Q&A, brief why-followups, diagnosis, status updates, or concise trade-off answers.
Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 22 other files, including reference files (for example `evals/cases/simple-qa-not-triggered.yaml`, `evals/eval.yaml` and `evals/fixtures/repos/mini-ledger/README.md`).
It sits in Development. The repository describes itself as: 仓库原生 AI Coding Harness —— 把一次性 AI 对话变成可治理、可验证、可沉淀的工程闭环 · spec-first.cn. The licence is MIT.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 74655dc. It shows what the files ask for, not the result of running them.
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.
Ships script files (Shell and JavaScript, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Spec Explain loads about 3.3k tokens when it runs, and up to ~7.1k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 1,731 words of instructions outside code blocks.
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.
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.
The full file from leo-kuang-ai/spec-first at commit 74655dc, republished under its MIT licence (© leo-kuang-ai). 1,731 words, ~3,318 tokens.
.claude/skills/spec-explain/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.Teach the user one thing well: a concept, a change, an idea, or a window of their own recent work. Agent-driven development removed the learning that writing code by hand used to provide; this skill is the replacement — the human keeps learning while agents do the writing.
Use the user's current request from the conversation as the explainer input.
Note: Use the current date from the active host context. Use this when weighting external sources and dating artifacts.
The user personally — dense, technical, one voice, no audience adaptation. Meeting prep preps the user; it never produces the deck. The artifact is display-only: no embedded quizzes, forms, or widgets — the doing happens in the session, where answers can be checked.
When you must ask the user a question, use the platform's blocking question tool: AskUserQuestion in Claude Code (call ToolSearch with select:AskUserQuestion first if its schema isn't loaded), request_user_input in Codex. Fall back to numbered options in chat only when no blocking tool exists in the harness or the call errors (e.g., Codex edit modes) — not because a schema load is required. In the fallback, stop and wait for the user's reply. Never silently skip the question. Ask one question at a time.
Dispatch is tiered by task shape, never hardcoded to a model name:
worker_model_override: supported; otherwise inherit.在派发 repo profiler 或 work-recap scout 前,记录:
worker_dispatch_authorization: authorized | missing
capability_probe: not_applicable | attempted | unavailable
worker_dispatch_capability: available | missing | unknown
worker_context_isolation: isolated | inherited | unknown
worker_model_override: supported | unsupported | unknown
worker_bounded_parallelism: supported | unsupported | unknownworkflow invocation does not authorize dispatch。只有当前用户或可见 upstream handoff 明确请求 subagent、delegated work、persona 或 parallel work 时才可派发。缺授权时不得探测 tool schema,固定为 capability_probe: not_applicable + worker_dispatch_capability: unknown,以同一预算 inline 或 serial 执行并记录 dispatch_authorization_missing。只有授权后才把 current-session registry/schema 作为 provider_untrusted evidence 检查:确认缺失时记录 subagent_capability_missing;surface 不可用、schema 不完整或候选不唯一时记录 worker_capability_unproven,均 inline 或 serial。隔离、模型覆盖和有界并发只取 live facts;required isolation 未满足时保持依赖 gate 打开,model unknown 时继承,parallelism unknown 时串行。记录 worker_dispatch_outcome。Inline fallback 不得声称 independent scout、fresh-context 或 multi-agent coverage。
Degradation rule. When authorized dispatch is available but worker_model_override is unsupported or unknown, dispatch scouts on the inherited model and keep their read budgets. When dispatch is unauthorized, missing, or unknown, run the scout work inline or serially with the same budgets and preserve the claim limitation above.
Read references/intake.md now and classify the request into one of the four input shapes — concept, diff, idea, or work-recap window. It owns the token table (diff:, since:, output:), the explicit-token-beats-inference rule, the concept-vs-diff tiebreak, and conflict handling. Do not improvise classification.
Bare invocation (no input at all): ask one blocking question — "What should I explain?" — offering a shortcut option for a recap of recent work in this repo alongside free-text. Do not produce a default artifact unprompted.
Operational-question gate. When an inferred concept request is really an
ordinary question about current behavior, configuration, status, or diagnosis,
answer it directly in chat. Do not create a run directory or teaching artifact.
Offer a durable visual explainer only when a substantial underlying concept is
present and the user plausibly wants to learn it. Explicit teaching language,
or a diff:/since: token, enters the full flow directly.
Match grounding to the input shape. Create the run directory first — every run gets one, before any artifact exists:
umask 077
RUN_DIR="$(mktemp -d "${TMPDIR:-/tmp}/spec-first-explain.XXXXXX")"
[ -d "$RUN_DIR" ] && [ ! -L "$RUN_DIR" ] || { echo 'private scratch creation failed' >&2; exit 1; }
chmod 700 "$RUN_DIR"
echo "$RUN_DIR"RUN_DIR is ephemeral, run-local scratch only. Recheck that it remains an owned, non-symlink directory before publishing any atomic temp-file rename into it; never leave the only durable explainer or handoff evidence there.
Repo-touching inputs (a concept with footprint in this repo, a diff, a recap): derive a run-local stack/conventions/vocabulary orientation from the current target repo/worktree. Record current git identity and dirty state when available, read active instructions and representative source directly, and retain direct source refs. Never persist or reuse the orientation across runs, branches, or worktrees. If git or a source cannot be read, record the exact degraded fact and narrow the explainer's project-specific claims. Topic-specific evidence — the diff, the concept's call-sites, and the window's commits — is always gathered fresh.
diff: ref, or the most recent substantial change when the request points at one implicitly) and gather its evidence — the diff itself, the files it touches, any plan or solution doc that motivated it. Gather silently: nothing learned here is narrated to the user until Phase 3's ordering rule is satisfied.references/agents/work-recap-scout.md (extraction tier), passing the resolved window, the repo root, and $RUN_DIR. Otherwise execute the same bounded recap scan inline or serially, record the matching fallback reason, and do not claim independent scout coverage. The scan returns an evidence summary with commit shas and file:line pointers. Empty window (no git activity, no doc changes): say so, offer to widen the window, write no artifact, and end the run after the user responds.spec-brainstorm's job), never generate and rank alternatives (spec-ideate's job).Judge whether the material warrants a check-in (a routine recap does not; a gnarly diff or a hard concept does), then offer it with the blocking question tool. The user can always decline, and declining is never re-litigated. Read references/check-in.md for the warrant test, the prediction protocol, and exercise design.
Diff mode with check-in accepted — hard ordering rule. No interpretive content — explanation, annotation, diagram, or surfaced opportunity — may be shown before the user's prediction turn ends. Show only the raw change reference (the diff or its stat summary), ask for the prediction ("What do you think this change does, and why was it made?"), and end the turn there. When no blocking tool exists, ask in chat and stop — never print the reveal in the same message as the prediction prompt. Compose the explainer only after the prediction lands; the reveal names the gaps between the prediction and what the change actually does.
Read the rendering reference for the resolved format now, not earlier: references/explainer-html.md (default) or references/explainer-markdown.md (when intake resolved output:md). Compose per its contract — visible metadata header, show-n-tell form matched to the material, ~70ch measure, single self-contained file — and write the artifact to $RUN_DIR/explainer.html (or $RUN_DIR/explainer.md when intake resolved output:md) before anything else happens with it. Display it to the user (inline summary plus the file path; open locally per Phase 6 when chosen). The artifact exists at that stable path from this moment — a declined destination ask never loses it.
For concepts, ideas, and dense recaps where the check-in was accepted: pose the exercises from references/check-in.md in chat, one at a time, using the blocking question tool where its option shape fits and free chat where the answer is narrative. Check each answer, correct it, and name the gap it exposed. Do not put exercises inside the artifact.
Detect destinations by capability — probe the agent's own toolset and session context, never a closed list, and never treat a missing binary, env var, or unloaded MCP tool as proof a destination is unavailable when a connector could supply it. Local file and Leave it are ungated and always offered. Offer only what is detected; absence hides an option silently. Ask once with the blocking question tool — counting visible options against the platform's cap first (Claude Code's AskUserQuestion allows up to 4 explicit options; Codex's request_user_input only 2-3): when the visible set exceeds the cap, render a numbered list in chat with "Pick a number or describe what you want." and wait instead. Per-option routing:
references/destinations.md: re-emit the explainer as body-only markup (no doctype/html/head/body, styles inline, no external font links); the surface wraps content in its own skeleton and blocks external hosts.$RUN_DIR to the path the user names, then where the platform exposes a browser-opening primitive (open on macOS, xdg-open on Linux, start on Windows) offer to open it; otherwise print the absolute path.references/destinations.md..spec-first/workflows/spec-explain/<run-id>/explainer.<html|md> using a
private temp file and atomic rename, then report that repo-relative path.
Never leave ephemeral $RUN_DIR as the only recoverable copy.Non-interactive degradation: when no interaction is possible at this ask,
do not hang or publish. Materialize the artifact under the same repo-local
.spec-first/workflows/spec-explain/<run-id>/ owner, report the path, and end.
If no target repo is available, preserve the owned private $RUN_DIR path and
state the durability limitation explicitly; never imply that it survives
reboot or cleanup.
Improvement observations. When composing the explainer surfaced things that could be better, route them by type after the destination ask — offer, don't auto-fire:
spec-ideate skill via the platform's skill-invocation primitive, passing the observations as seed context. Do not merely tell the user to run it.spec-simplify-code skill via the platform's skill-invocation primitive, passing the observations and the files they concern. Do not merely tell the user to run it.spec-polish themselves; spec-polish is user-invoked only ; do not invoke it automatically — the in-session observations carry into their run.spec-pov. spec-explain teaches what X is and how it works.spec-compound. spec-explain teaches the human, not the repo.© leo-kuang-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 13 other files (references) in skills/spec-explain of leo-kuang-ai/spec-first.
Open the folder on GitHubat commit 74655dc
Spec Explain 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Spec Explain this skillleo-kuang-ai/spec-first | 107 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 297k | 5 repos | ~1.9k | Automated safety check: Pass | MIT | |
| Typescript Advanced Typesrolling-scopes/rsschool-app | 10k | 25 repos | ~4.2k | Automated safety check: Pass | MPL-2.0 | |
| PR Babysitteropeninterpreter/openinterpreter | 69k | 3 repos | ~4.2k | Automated safety check: Pass | Apache-2.0 | |
| Code Review ChecklistshareAI-lab/learn-claude-code | 78k | 4 repos | ~1.1k | Automated safety check: Pass | MIT |
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
obra/superpowers
Walks the last step of a branch: confirm tests pass, detect the git environment, ask how to integrate, carry out your choice and clean up the worktree.
rolling-scopes/rsschool-app
Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.
openinterpreter/openinterpreter
Watches an open GitHub pull request until it merges, handling review comments, diagnosing CI failures and retrying flaky checks along the way.
shareAI-lab/learn-claude-code
Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.
onyx-dot-app/onyx
Iteratively improves a PR (GitHub), MR (GitLab), or shelved changelist (Perforce) until Greptile gives it a 5/5 confidence score with zero unresolved comments.
leo-kuang-ai/spec-first
Audit mobile App PRD/Figma/local-source consistency across page routes, KMP/Clean Architecture, components, analytics, i18n, engineering quality, and industry lenses before runtime validation; use…
leo-kuang-ai/spec-first
Create a durable cross-session handoff or resume from a user-selected continuity source.
leo-kuang-ai/spec-first
Give a decisive, project-grounded verdict on an external input — judged against the current project, not in the abstract.
leo-kuang-ai/spec-first
Resolve PR review feedback by evaluating validity and fixing issues with conflict-aware resolver dispatch.
leo-kuang-ai/spec-first
Analyze explicit Riffrec product-feedback captures, including riffrec-.zip, the Riffrec session.json + events.json + recording.webm + voice.webm bundle, or media/notes the user identifies as a…
leo-kuang-ai/spec-first
Document a recently solved problem or durable project vocabulary in docs/solutions/ or CONCEPTS.md.
Categories
Create a durable, visual teaching artifact for a concept, diff, idea, or recent-work window, with an optional check-in that makes it stick. Spec Explain is an agent skill from leo-kuang-ai/spec-first. Create a durable, visual teaching artifact for a concept, diff, idea, or recent-work window, with an optional check-in that makes it stick.
Spec Explain fits situations like: the user asks to be taught; wants a deep explainer; not for ordinary Q&A; brief why-followups.
Run `npx skills add leo-kuang-ai/spec-first --skill spec-explain -a claude-code`. Or copy the skill folder (skills/spec-explain in leo-kuang-ai/spec-first) into .claude/skills/spec-explain in your project. Claude Code loads it when a task matches its description.
Run `npx skills add leo-kuang-ai/spec-first --skill spec-explain -a codex`. Or copy the skill folder (skills/spec-explain in leo-kuang-ai/spec-first) into .agents/skills/spec-explain in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add leo-kuang-ai/spec-first --skill spec-explain -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/spec-explain, .gemini/skills/spec-explain, .github/skills/spec-explain and .opencode/skills/spec-explain in your project.
Going by SKILL.md and its folder, Spec Explain needs a shell and JavaScript for the scripts in its folder. Our summary lists: Node.js; A Bash shell.
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.
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.
Spec Explain is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.8k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Spec Explain: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 297k stars), Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars) and PR Babysitter (openinterpreter/openinterpreter, 69k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
leo-kuang-ai (a GitHub user) maintains it in leo-kuang-ai/spec-first, which has 107 GitHub stars. The repository holds 35 skills in this directory. The repository was last updated on October 8, 2026.
Source: leo-kuang-ai/spec-first on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.