Vercel Composition Patterns
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
Scaffold a slice in this Vertical Slice Architecture template — one use case in its own folder, with its FastEndpoints endpoint, request, response, validator, and summary, plus the Feature and Group…
$ npx skills add SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SSWConsulting/SSW.VerticalSliceArchitecture add-slice --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/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/add-slice .claude/skills/add-slice && 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 "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .claude/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-sliceType 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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SSWConsulting/SSW.VerticalSliceArchitecture add-slice --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/add-slice .agents/skills/add-slice && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .agents/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SSWConsulting/SSW.VerticalSliceArchitecture add-slice --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/add-slice .cursor/skills/add-slice && 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 "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .cursor/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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/SSWConsulting/SSW.VerticalSliceArchitecture.git --path .claude/skills/add-slice--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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SSWConsulting/SSW.VerticalSliceArchitecture add-slice --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/add-slice .gemini/skills/add-slice && 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 "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .gemini/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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 SSWConsulting/SSW.VerticalSliceArchitecture add-sliceInstalls 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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/add-slice .github/skills/add-slice && 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 "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .github/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install SSWConsulting/SSW.VerticalSliceArchitecture add-slice --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/add-slice .opencode/skills/add-slice && 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 "add-slice" agent skill from https://github.com/SSWConsulting/SSW.VerticalSliceArchitecture/tree/main/.claude/skills/add-slice into .opencode/skills/add-slice/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "add-slice", 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.
add-sliceScaffold a slice in this Vertical Slice Architecture template — one use case in its own folder, with its FastEndpoints endpoint, request, response, validator, and summary, plus the Feature and Group…
Add Slice is an agent skill from SSWConsulting/SSW.VerticalSliceArchitecture. Scaffold a slice in this Vertical Slice Architecture template — one use case in its own folder, with its FastEndpoints endpoint, request, response, validator, and summary, plus the Feature and Group if they don't exist yet, plus tests. Use when the user says "add a slice", "add a use case", "add an endpoint", "add a command", "add a query", "expose X over the API", or names a use case such as "let users archive a team". Run /add-entity first if the use case needs a domain type that doesn't exist yet.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/command-slice.md`, `references/query-slice.md` and `references/tests.md`).
It sits in Development. The repository describes itself as: An enterprise ready solution template for Vertical Slice Architecture. This template is just one way to apply the Vertical Slice Architecture. The licence is MIT.
5 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 42e7a70. 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.
Shell commands in SKILL.md call:
dotnetFrom 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.
Add Slice loads about 2.3k tokens when it runs, and up to ~9.6k if it reads all its reference files. Until then it costs about 129 tokens; SKILL.md has 1,159 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 SSWConsulting/SSW.VerticalSliceArchitecture at commit 42e7a70, republished under its MIT licence (© SSWConsulting). 1,159 words, ~2,309 tokens.
.claude/skills/add-slice/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.A slice is one use case, owning everything it needs from HTTP surface to persistence, in its own folder. CreateHero is a slice. A Feature is the group of slices over the same aggregate, sharing a route prefix — Heroes is a Feature, and it is not itself a slice. CONTEXT.md at the repo root defines both, along with Group, Endpoint, and the rest of the vocabulary. Use those words, and avoid the ones it lists under Avoid.
This skill adds a slice. It creates the Feature and its Group too, but only when the slice is the first one in that Feature.
Not every slice is HTTP. PowerLevelUpdated is a slice triggered by a domain event rather than a request — the same folder-per-use-case shape, with an event handler in place of an endpoint.
src/WebApi/Features/Heroes/CreateHero/ — the canonical command slice, all five filessrc/WebApi/Features/Heroes/GetAllHeroes/ — a paged, sorted list querysrc/WebApi/Features/Teams/GetTeam/ — a single-item query with a route parametersrc/WebApi/Features/Teams/AddHeroToTeam/ — a command that loads aggregates through specssrc/WebApi/Features/Teams/PowerLevelUpdated/ — an event-triggered sliceThe templates in references/ follow these. If they disagree, the repo wins — follow it and fix the template.
| Input | Notes |
|---|---|
| Feature | The plural noun that owns the route prefix (Heroes, Teams). Does one already exist for this aggregate, or is this its first slice? |
| Use case | Verb + noun, PascalCase (CreateHero, ArchiveTeam). This names the slice folder, the endpoint, and the OpenAPI operation ID. |
| Command or query | A command mutates and returns 200 with an ID or 204; a query reads and projects. |
| HTTP verb and route | Relative to the Group prefix — Post("/") becomes POST /api/heroes. |
| Request shape | Body fields plus any route parameters. FastEndpoints binds both into one request record. |
| Response shape | Or none, for a 204. |
| Failure modes | Not found, conflict, forbidden — each needs a Produces(...) and a matching Send.*Async. |
Ask about anything not stated. Guessing a route or a verb produces a slice that compiles and is wrong.
src/WebApi/Features/{Feature}/ and add {Feature}Group.cs. Skip {Feature}Feature.cs unless the Feature registers its own services; most don't, and an empty one is noise. Template: references/command-slice.md.src/WebApi/Features/{Feature}/{UseCase}/, namespace mirroring the folder. The endpoint has to sit exactly two segments below Features — one for the Feature, one for the use case — or the architecture tests fail.IEventHandler<TEvent> instead of an endpoint: src/WebApi/Features/{Feature}/{Event}/{Event}EventHandler.cs. It belongs to the Feature that consumes the event, not the one that raises it.tests/WebApi.ArchitectureTests/FeatureTests.cs turns five of these into build failures rather than review comments:
*Endpoint and live in a slice namespace — exactly two segments below Features. A slice folder nested deeper or shallower fails.Validator<TRequest> in the same slice. Not a shared one and not a bare AbstractValidator — FastEndpoints only binds validators derived from its own Validator<T>, and the test matches that base. An endpoint whose request type can't be read fails too, so derive from Endpoint<TRequest, TResponse> or one of its aliases.PagedRequest needs a PagedRequestValidator<TRequest, TEntity>, not merely some Validator<TRequest>. The sort allow-list rules live in that base class, and the primitives throw on an unknown sort column rather than returning a 400 — so a bare validator would turn a documented 400 into a 500 with every other test still green.ApplicationDbContext — not the DbContext base type, and not a second DbContext. The check reads IL, so Resolve<T>() and handler-method injection are caught as well as constructor parameters.Run them with dotnet test tests/WebApi.ArchitectureTests. A failure here means the code broke a rule; fix the code, not the test.
These all compile, and no test catches them.
Group<{Feature}Group>() in Configure(). Without it the endpoint registers at the root instead of under /api/{prefix}, and it loses the Group's tag and its ProducesProblemDetails(500).Description(x => x.WithName("{UseCase}")). This is the OpenAPI operation ID, so it's what generated clients name the method. Missing, and callers get a mangled auto-generated name.await Send.*Async(...), never a bare return. Returning from HandleAsync without sending produces a 200 with an empty body. Every path out ends in a Send.return after Send.NotFoundAsync(ct). Send doesn't stop execution — HandleAsync carries on and will try to send twice.Produces(...) for every non-200 path you send. The status code has to be in the OpenAPI document or clients won't handle it.HandleAsync contains an if about domain state, that check belongs on the entity, returning ErrorOr<Success>.HasMany navigations need this — owned collections (OwnsMany(...).ToJson(), like Hero.Powers) always come with their parent. For a HasMany, either call a spec factory that declares the Includes (TeamSpec.ById does; HeroSpec.ById declares none) or .Include(...) explicitly. With neither, the children arrive silently empty.dotnet build && dotnet build -c Release
dotnet test tests/WebApi.UnitTests tests/WebApi.ArchitectureTests
dotnet test tests/WebApi.IntegrationTests # needs Docker or Podman runningThen exercise it for real — a green test suite doesn't prove the route is where you think it is. Boot with aspire start --isolated (see the aspire skill), wait for the WebApi resource to go healthy, and call the endpoint through https://localhost:7255/swagger or curl. Confirm the success path and at least one failure path, and check the route appears under the expected prefix.
Full detail: .claude/rules/verification.md.
{Feature}Feature.cs with an empty ConfigureServices. Add it when the Feature actually has services to register.Slices_Should_NotDependOnOtherSlices enforces it.IActionResult or use MVC attributes. This is FastEndpoints; see docs/adr/20251018-api-use-fastendpoints-instead-of-minimal-apis.md.HandleAsync for anything the validator can express. The validator runs first and auto-returns 400. ThrowError("...") is for the ad-hoc case that needs context only HandleAsync has.AddHeroToTeam does.The references/ templates are copies of the repo's shapes and will drift. When you find one that no longer matches the Heroes or Teams slices, update it as part of the same change.
© SSWConsulting, 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 3 other files (references) in .claude/skills/add-slice of SSWConsulting/SSW.VerticalSliceArchitecture.
Open the folder on GitHubat commit 42e7a70
Add Slice 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 |
|---|---|---|---|---|---|---|
| Add Slice this skillSSWConsulting/SSW.VerticalSliceArchitecture | 407 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Vercel Composition Patternssupabase/supabase | 111k | 59 repos | ~726 | Automated safety check: Pass | MIT | |
| Finishing a Development Branchobra/superpowers | 296k | 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 | 5 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.
SSWConsulting/SSW.VerticalSliceArchitecture
Scaffold a new domain entity or aggregate in this Vertical Slice Architecture template — the entity itself, its strongly typed ID, errors, specification, EF Core configuration, DbSet, the mandatory…
SSWConsulting/SSW.VerticalSliceArchitecture
A skill your agent uses when the user is working with an Aspire distributed application and needs to operate the AppHost or its resources through the Aspire CLI: start, restart, stop, or wait on the…
SSWConsulting/SSW.VerticalSliceArchitecture
Write an Architectural Decision Record in this repo's docs/adr/ following its Log4brains conventions — filename, title, metadata, and the sections that are required versus optional.
SSWConsulting/SSW.VerticalSliceArchitecture
Bump the SSW.VerticalSliceArchitecture.Template NuGet package version to cut a new release.
Categories
Scaffold a slice in this Vertical Slice Architecture template — one use case in its own folder, with its FastEndpoints endpoint, request, response, validator, and summary, plus the Feature and Group…. VerticalSliceArchitecture. Scaffold a slice in this Vertical Slice Architecture template — one use case in its own folder, with its FastEndpoints endpoint, request, response, validator, and summary, plus the Feature and Group if they don't exist yet, plus tests.
Add Slice fits situations like: the user says add a slice; add an endpoint; expose X over the API; names a use case such as let users archive a team.
Run `npx skills add SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a claude-code`. Or copy the skill folder (.claude/skills/add-slice in SSWConsulting/SSW.VerticalSliceArchitecture) into .claude/skills/add-slice in your project. Claude Code loads it when a task matches its description.
Run `npx skills add SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a codex`. Or copy the skill folder (.claude/skills/add-slice in SSWConsulting/SSW.VerticalSliceArchitecture) into .agents/skills/add-slice 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 SSWConsulting/SSW.VerticalSliceArchitecture --skill add-slice -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-slice, .gemini/skills/add-slice, .github/skills/add-slice and .opencode/skills/add-slice in your project.
Going by SKILL.md and its folder, Add Slice needs the command-line tools its instructions call (dotnet). Our summary lists: Docker.
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.
Add Slice is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.2k 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 7.2k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Add Slice: Vercel Composition Patterns (supabase/supabase, 111k stars), Finishing a Development Branch (obra/superpowers, 296k 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.
SSWConsulting (a GitHub organization) maintains it in SSWConsulting/SSW.VerticalSliceArchitecture, which has 407 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.
Source: SSWConsulting/SSW.VerticalSliceArchitecture on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.