Menu
Test-driven development with vertical tracer-bullet slices. Use when the user wants TDD or red-green-refactor on a vertical slice.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Alpine.js adapter for @stainless-code/alpine-layers; plugin magics, x-layer-outlet, layerStack data, and JS hooks for typed layer stacks
Angular adapter for @stainless-code/angular-layers (signals + DI + imperative renderStack); use when wiring provideLayerClient, renderStack/useStackHandles, useLayerGroup, useMutationFlow, or createStackHook
UI-agnostic layer stack engine for @stainless-code/layers. Use for opening layers imperatively from anywhere, ordered named stacks, typed await or fire-and-forget calls, lifecycle control, blockers, validation, singleton updates, serial or nested layers, multi-stack orchestration, or building a library/framework adapter.
Lit adapter for @stainless-code/lit-layers; open UI from anywhere and manage ordered, named stacks with typed or fire-and-forget `open` via Reactive Controllers and custom elements
Preact adapter for @stainless-code/preact-layers — use for awaitable confirm flows, singleton toasts, nested drawers, stack subscriptions, and custom layer hosts
React adapter for @stainless-code/react-layers; open UI from anywhere and manage ordered, named stacks with typed or fire-and-forget `open`
| name | tdd |
| description | Test-driven development with vertical tracer-bullet slices. Use when the user wants TDD or red-green-refactor on a vertical slice. |
Vertical RED→GREEN cycles — one behavior per loop, not horizontal "all tests then all code". Aligns with tracer-bullets and verify-after-each-step.
docs/architecture.md § Test matrix:
bun run test — fans out to every workspace's src/**/*.test.ts unit tests (core engine + framework adapter binding, with the framework module mocked or scoped). No DOM.bun run test:dom — packages/*/tests-dom/** (vitest + jsdom + each adapter's testing library) for real-renderer reactivity, outlet/render, and wrapper behavior.packages/core/src/layerStack.ts → packages/core/src/layerStack.test.ts).verify-after-each-step.solid-js / @angular/core / preact/compat, or scope via effectScope/createRoot), never inside packages/core/src/. See PATTERNS.md.Confirm behaviors to test (not implementation steps) with the user. Prefer deep modules — small public surface (LayerClient.open, LayerStack, layerOptions), complex internals (phase machine, scope queue, gcTime cache, batched notify).
Done when: the behaviors under test are confirmed with the user as observable outcomes through a public seam — not implementation steps.
RED: one test for first behavior → bun test <file> (or test:dom for DOM/render behavior)
GREEN: minimal code to pass → re-run
Done when: the first behavior has gone RED then GREEN on its touched test file.
For each behavior: RED → GREEN → run affected tests. One test at a time; no speculative features.
Done when: every planned behavior has its own RED→GREEN cycle and the affected tests pass.
After GREEN — look for duplication, long methods, shallow modules, feature envy. Run bun test <file> after each step. Never refactor while RED. For production polish on a completed slice, harden-pr lite may run in parallel with tracer-bullet commits.
Done when: duplication and shallow-module smells in the slice are resolved with tests green throughout.
[ ] Test describes behavior, not implementation
[ ] Test uses the public seam only (LayerClient.open / LayerStack / layerOptions / useStack)
[ ] Test would survive an internal refactor
[ ] Code is minimal for this test
[ ] bun test (or test:dom) passes on touched file(s)
PATTERNS.mdtracer-bullets · Verify: verify-after-each-step