claude-toolkit 0.1.9 → 0.1.18

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # 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
+
+## 0.1.11 (2026-04-05)
+
+- refactor: rename skill folders to match ct- prefixed skill names
+
+## 0.1.10 (2026-04-05)
+
+- chore: update typescript to ^6.0.2 and require bun >=1.3.0
+
 ## 0.1.9 (2026-04-04)
 
 - docs: add Zod/Valibot runtime validation section to SolidJS data fetching

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

@@ -0,0 +1,117 @@
+---
+name: ct-testing-patterns
+description: Generic test-driven development practices and patterns applicable to any language or test framework.
+---
+
+# Testing Patterns
+
+## TDD Cycle
+
+1. **Red** -- Write a failing test for desired behavior. Confirm it fails for the right reason.
+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.
+
+## Factory Pattern
+
+```
+function getMockUser(overrides = {}) {
+  return { id: "user-1", email: "test@example.com", name: "Test User", role: "member", ...overrides };
+}
+const admin = getMockUser({ role: "admin" });
+```
+
+New required fields update the factory once, not every test.
+
+## Organization
+
+- 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.
+- Mock at boundaries only (external APIs, email, payments), not internal modules.
+- Keep mocks minimal -- only methods your code calls. Reset between tests.
+- Verify mocks match the real API. Update when APIs change.
+
+## Property-Based Testing
+
+When a function has a contract ("for all valid inputs X, property Y holds"), use property-based tests to verify it across generated inputs instead of hand-picked examples:
+
+```
+// Instead of testing 3-4 specific inputs:
+test("sort is idempotent", () => {
+  fc.assert(fc.property(fc.array(fc.integer()), (arr) => {
+    const sorted = mySort(arr);
+    expect(mySort(sorted)).toEqual(sorted);
+  }));
+});
+```
+
+Good candidates: serialization round-trips, math properties, parsers, encoding/decoding, sorting invariants.
+
+## Bun Test Runner
+
+Bun includes a built-in test runner. Use `bun test` for projects on the Bun runtime:
+
+```
+bun test                    # run all *.test.ts files
+bun test --watch            # re-run on changes
+bun test --coverage         # with code coverage
+bun test path/to/file.test.ts  # single file
+```
+
+Bun supports `describe`, `it`/`test`, `expect`, lifecycle hooks, and snapshot testing out of the box with no additional dependencies.
+
+## Test Pyramid
+
+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
+
+1. **Testing implementation** -- Asserting internal state or call counts breaks on refactors.
+2. **Overmocking** -- If most of the test is mock setup, you're testing mocks.
+3. **Copy-paste tests** -- Use factories and parameterized tests.
+4. **No assertions** -- Worse than no test. False confidence.
+5. **Ignoring flaky tests** -- Fix or delete; never skip indefinitely.
+6. **Happy path only** -- Error cases and boundary conditions are where bugs live.

package/core/skills/{typescript-conventions → ct-typescript-conventions}/SKILL.md

@@ -40,6 +40,47 @@ type AsyncState<T> =
   | { status: "error"; error: Error };
 ```
 
+## `satisfies` Operator
+
+Validate a value matches a type without widening it. Preserves the narrowest inferred type while ensuring conformance.
+
+```typescript
+type Route = { path: string; children?: Route[] };
+
+const routes = {
+  home: { path: "/" },
+  user: { path: "/user/:id", children: [{ path: "settings" }] },
+} satisfies Record<string, Route>;
+
+// routes.home.path is still "/" (literal), not string
+```
+
+## `const` Type Parameters
+
+Infer literal types from arguments without requiring callers to write `as const`:
+
+```typescript
+function createConfig<const T extends readonly string[]>(names: T): Record<T[number], boolean> {
+  return Object.fromEntries(names.map(n => [n, false])) as Record<T[number], boolean>;
+}
+
+// result type: Record<"debug" | "verbose", boolean> -- not Record<string, boolean>
+const flags = createConfig(["debug", "verbose"]);
+```
+
+## Template Literal Types
+
+Build precise string types from unions:
+
+```typescript
+type EventName = "click" | "focus" | "blur";
+type Handler = `on${Capitalize<EventName>}`; // "onClick" | "onFocus" | "onBlur"
+
+type Locale = "en" | "fr" | "ja";
+type Currency = "USD" | "EUR" | "JPY";
+type PriceKey = `price:${Locale}:${Currency}`; // 9 valid combinations
+```
+
 ## Generic Constraints
 
 ```typescript

package/core/skills/{verification-before-completion → ct-verification-before-completion}/SKILL.md

@@ -31,12 +31,22 @@ Do not assume edge cases work because the happy path works.
 - Verify consumers of changed APIs/schemas still work.
 - Smoke test the running application if applicable.
 
+## Security Check
+
+Before completing work that touches dependencies, inputs, or external data:
+
+- **Dependency audit** -- Run `bun audit` or `npm audit` and resolve critical/high vulnerabilities.
+- **Input validation** -- Verify user-facing inputs are validated at system boundaries (no SQL injection, XSS, command injection).
+- **Secret exposure** -- Confirm no secrets, API keys, or credentials in committed code or logs.
+
 ## Evidence Format
 
 ```
 ## Completed: [task name]
 - Tests: X passing (Y new, Z existing) -- [command output]
 - Types: tsc --noEmit: 0 errors
+- Lint: 0 violations
+- Security: audit clean, no exposed secrets
 - Manual: [endpoint/action]: [status/result]
 - Edge cases: [what was verified]
 ```

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. |