claude-toolkit 0.1.12 → 0.1.18

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.1.18 (2026-04-05)
+
+- docs: update cross-references for vite, playwright, and storybook stacks
+
+## 0.1.17 (2026-04-05)
+
+- feat: add storybook stack with interaction testing and visual regression
+
+## 0.1.16 (2026-04-05)
+
+- feat: add playwright stack with E2E testing, Page Objects, and CI/CD
+
+## 0.1.15 (2026-04-05)
+
+- feat: add vite stack with Vitest testing, coverage, and browser mode
+
+## 0.1.14 (2026-04-05)
+
+- docs: add 3-layer testing strategy and shared principles to testing patterns
+
+## 0.1.13 (2026-04-05)
+
+- docs: add testing best practices for vitest, playwright, and storybook
+
 ## 0.1.12 (2026-04-05)
 
 - docs: update skills and docs to 2026 best practices

package/README.md

@@ -50,11 +50,14 @@ export default defineConfig({
 | Stack | Skills Added |
 |-------|-------------|
 | `solidjs` | SolidJS reactivity, signals, components |
+| `vite` | Vite build config, plugins, Vitest testing, coverage, browser mode |
 | `vanilla-extract` | Type-safe CSS, sprinkles, recipes, themes |
 | `rust-wasm` | Rust WASM for Cloudflare Workers |
 | `protobuf` | Protocol Buffers, code generation, contracts |
 | `cloudflare` | D1 database, KV cache, Wrangler |
 | `i18n-typesafe` | typesafe-i18n internationalization |
+| `playwright` | Playwright E2E testing, Page Objects, fixtures, CI/CD |
+| `storybook` | Storybook interaction testing, CSF 3, visual regression |
 
 ## Core Features (always included)
 

package/core/skills/ct-testing-patterns/SKILL.md

@@ -11,6 +11,35 @@ description: Generic test-driven development practices and patterns applicable t
 2. **Green** -- Minimal code to pass. No optimization yet.
 3. **Refactor** -- Clean up while keeping tests green. Commit at each stage.
 
+## 3-Layer Testing Strategy
+
+```
+          /  E2E  \           Real browsers, full user flows
+         /----------\
+        / Interaction \       Component sandbox, behavior, a11y
+       /----------------\
+      /      Unit        \    Pure logic, signals, utilities
+     /--------------------\
+```
+
+| Layer       | Target Ratio | What to Cover                                                                |
+| ----------- | ------------ | ---------------------------------------------------------------------------- |
+| Unit        | ~70%         | Business logic, utilities, data transforms, reactive primitives, error paths |
+| Interaction | ~20%         | Component variants, user interactions, accessibility, visual regression      |
+| E2E         | ~10%         | Critical user journeys, authentication flows, cross-page workflows           |
+
+### When to Use Which Layer
+
+| Question                                          | Layer                                  |
+| ------------------------------------------------- | -------------------------------------- |
+| Does this logic need a DOM?                        | **Unit** if no, **Interaction** if yes |
+| Does it involve multiple pages or navigation?      | **E2E**                                |
+| Am I testing a single component's visual states?   | **Interaction**                        |
+| Am I testing a reactive primitive (signal, memo)?  | **Unit**                               |
+| Does it require authentication or real network?    | **E2E**                                |
+| Am I testing component accessibility?              | **Interaction** (axe-core)             |
+| Does it need the full server running?              | **E2E**                                |
+
 ## Test Behavior, Not Implementation
 
 Test *what* code does (public interface, observable outputs), not *how* (internal state, call counts). Implementation-coupled tests break on every refactor.
@@ -31,6 +60,13 @@ New required fields update the factory once, not every test.
 - Co-locate tests or mirror source structure. One test file per module (`module.test.ext`).
 - Group with `describe`, name as sentences: `it("rejects expired tokens")`.
 
+## Shared Principles
+
+- **Prefer role-based queries.** Use `getByRole`, `getByLabel`, `getByText` over test IDs or CSS selectors.
+- **Never sleep.** Use framework-provided waiting mechanisms (`waitFor`, `findBy*`, web-first assertions).
+- **One assertion focus per test.** Multiple assertions are fine if they verify facets of the same behavior.
+- **Isolate tests.** No test should depend on another test's side effects. Reset state between tests.
+
 ## Mocking Rules
 
 - Prefer real dependencies (in-memory DB, local server) when feasible.
@@ -69,7 +105,7 @@ Bun supports `describe`, `it`/`test`, `expect`, lifecycle hooks, and snapshot te
 
 ## Test Pyramid
 
-Many unit tests (fast, focused) > some integration tests (multi-component) > few E2E tests (full flow).
+See 3-Layer Testing Strategy above. Many unit tests (fast, focused) > some interaction tests (component sandbox) > few E2E tests (full flow). Aim for 70/20/10 distribution.
 
 ## Anti-Patterns
 

package/docs/README.md

@@ -42,8 +42,11 @@ Stack-specific skills activated based on your `claude-toolkit.config.ts` configu
 | Skill                                                          | Stack             | Description                                                                    |
 | -------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------ |
 | [ct-solidjs-patterns](stacks/solidjs-patterns.md)                 | `solidjs`         | Reactivity, signals, effects, component patterns, and props handling           |
+| [ct-vite-vitest-patterns](stacks/vite-vitest-patterns.md)         | `vite`            | Vite build config, plugins, env vars, Vitest testing, coverage, browser mode   |
 | [ct-vanilla-extract-patterns](stacks/vanilla-extract-patterns.md) | `vanilla-extract` | Type-safe CSS with zero runtime: styles, recipes, themes, sprinkles            |
 | [ct-rust-wasm-patterns](stacks/rust-wasm-patterns.md)             | `rust-wasm`       | Rust WASM for Cloudflare Workers: routing, handlers, env bindings              |
 | [ct-protobuf-contracts](stacks/protobuf-contracts.md)             | `protobuf`        | Protocol Buffers for API contracts: schema design, versioning, code generation |
 | [ct-cloudflare-d1-kv](stacks/cloudflare-d1-kv.md)                 | `cloudflare`      | D1 database and KV cache: queries, migrations, caching patterns                |
 | [ct-i18n-typesafe](stacks/i18n-typesafe.md)                       | `i18n-typesafe`   | Type-safe internationalization with compile-time key checking                  |
+| [ct-playwright-patterns](stacks/playwright-patterns.md)           | `playwright`      | E2E testing with Page Objects, fixtures, auth, network mocking, CI/CD          |
+| [ct-storybook-patterns](stacks/storybook-patterns.md)             | `storybook`       | Interaction testing, CSF 3, play functions, a11y, visual regression            |

package/docs/best-practices/testing/README.md

@@ -0,0 +1,84 @@
+# Testing Best Practices
+
+> A curated collection of testing best practices for the rendezvous.nz stack, sourced from official documentation, framework maintainers, and the testing community as of 2026.
+
+This project uses a **3-layer testing strategy** that maps to the classic testing pyramid. Each layer targets a different scope, runs in a different environment, and catches a different class of bugs.
+
+```
+          /  E2E  \           Playwright (real browsers)
+         /----------\         Full user flows, cross-browser
+        / Interaction \       Storybook (component sandbox)
+       /----------------\     Component behavior, visual, a11y
+      /      Unit        \    Vitest (Node/JSDOM)
+     /--------------------\   Pure logic, signals, utilities
+```
+
+## The Three Layers
+
+| Layer                                   | Tool             | Scope                                | Environment                            | Speed             |
+| --------------------------------------- | ---------------- | ------------------------------------ | -------------------------------------- | ----------------- |
+| [Unit](vitest-unit.md)                  | Vitest 4.x       | Functions, signals, hooks, utilities | Node / JSDOM                           | ~ms per test      |
+| [Interaction](storybook-interaction.md) | Storybook 10.x   | Component rendering, behavior, a11y  | Real browser (via Vitest addon)        | ~100ms per story  |
+| [E2E](playwright-e2e.md)                | Playwright 1.58+ | Full user flows, API integration     | Real browser (Chromium/Firefox/WebKit) | ~seconds per test |
+
+## When to Use Which Layer
+
+| Question                                                  | Layer                                  |
+| --------------------------------------------------------- | -------------------------------------- |
+| Does this logic need a DOM?                               | **Unit** if no, **Interaction** if yes |
+| Does it involve multiple pages or navigation?             | **E2E**                                |
+| Am I testing a single component's visual states?          | **Interaction**                        |
+| Am I testing a reactive primitive (signal, memo, effect)? | **Unit**                               |
+| Does it require authentication or real network?           | **E2E**                                |
+| Am I testing component accessibility?                     | **Interaction** (axe-core addon)       |
+| Am I testing cross-browser rendering?                     | **E2E** (multi-browser projects)       |
+| Does it need the Cloudflare Worker running?               | **E2E**                                |
+
+## Distribution Guideline
+
+Aim for the pyramid shape -- many fast unit tests at the base, fewer interaction tests in the middle, and a focused set of E2E tests at the top.
+
+| Layer       | Target Ratio | What to Cover                                                                |
+| ----------- | ------------ | ---------------------------------------------------------------------------- |
+| Unit        | ~70%         | Business logic, utilities, data transforms, reactive primitives, error paths |
+| Interaction | ~20%         | Component variants, user interactions, accessibility, visual regression      |
+| E2E         | ~10%         | Critical user journeys, authentication flows, cross-page workflows           |
+
+## Shared Principles Across All Layers
+
+1. **Test behavior, not implementation.** Assert what the user sees or what the API returns, not internal state.
+2. **Prefer role-based queries.** Use `getByRole`, `getByLabel`, `getByText` over test IDs or CSS selectors.
+3. **Never sleep.** Use framework-provided waiting mechanisms (`waitFor`, `findBy*`, web-first assertions).
+4. **One assertion focus per test.** A test should verify one behavior. Multiple assertions are fine if they verify facets of the same behavior.
+5. **Isolate tests.** No test should depend on another test's side effects. Reset state between tests.
+6. **Mock at boundaries.** Mock network calls and external services, not internal modules.
+7. **SolidJS reactivity rules apply in tests.** Never destructure props. Use `renderHook` or `createRoot` for signal testing.
+
+## SolidJS-Specific Considerations
+
+SolidJS components run once -- only reactive expressions re-execute. This affects testing:
+
+- **`render()` takes a callback**: `render(() => <Component />)`, not `render(<Component />)`.
+- **Effects are async**: Use `testEffect` from `@solidjs/testing-library` for effect assertions.
+- **Storybook decorators need `createJSXDecorator`**: Standard decorators cause duplicate DOM elements with SolidJS.
+
+## Technology Versions (as of April 2026)
+
+| Tool                     | Version | Notes                                                |
+| ------------------------ | ------- | ---------------------------------------------------- |
+| Vitest                   | ^4.1.x  | V8 coverage, test tags, builder-pattern fixtures     |
+| @solidjs/testing-library | ^0.8.x  | SolidJS-specific render, renderHook, testEffect      |
+| Storybook                | ^10.3.x | ESM-only, `sb.mock`, testing widget                  |
+| storybook-solidjs-vite   | ^10.0.x | Community-maintained SolidJS renderer                |
+| @storybook/addon-vitest  | ^10.x   | Replaces old test-runner, uses Vitest browser mode   |
+| Playwright               | ^1.58.x | Timeline view, Chrome for Testing, WebSocket mocking |
+| @axe-core/playwright     | ^4.x    | WCAG 2.1 AA automated accessibility checks           |
+| MSW                      | ^2.x    | Network mocking for both Storybook and Vitest        |
+
+## Guides
+
+| Guide                                                     | Summary                                                                      |
+| --------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| [Vitest Unit Testing](vitest-unit.md)                     | AAA pattern, signal testing, mocking, coverage, performance, anti-patterns.  |
+| [Storybook Interaction Testing](storybook-interaction.md) | CSF 3, play functions, a11y, visual regression, MSW, portable stories.       |
+| [Playwright E2E Testing](playwright-e2e.md)               | Page Objects, fixtures, auth, network mocking, CI/CD, flaky test prevention. |