claude-toolkit 0.1.9 → 0.1.18

package/stacks/playwright/stack.json

@@ -0,0 +1,39 @@
+{
+	"name": "ct-playwright-patterns",
+	"description": "Playwright E2E testing patterns with Page Objects, fixtures, and CI/CD",
+	"defaultMappings": {
+		"e2e": "ct-playwright-patterns",
+		"playwright.config.ts": "ct-playwright-patterns"
+	},
+	"fileExtensions": ["spec.ts"],
+	"skillRules": {
+		"ct-playwright-patterns": {
+			"description": "Playwright E2E testing with Page Objects, fixtures, auth, and network mocking",
+			"priority": 7,
+			"triggers": {
+				"keywords": [
+					"playwright",
+					"e2e",
+					"end-to-end",
+					"page object",
+					"browser test",
+					"storageState"
+				],
+				"keywordPatterns": ["\\bplaywright\\b", "\\be2e\\b", "\\bpage\\s*object\\b"],
+				"pathPatterns": ["**/e2e/**", "**/*.spec.ts", "**/playwright.config.*"],
+				"intentPatterns": [
+					"(?:create|write|add).*(?:e2e|end.to.end|playwright).*(?:test)",
+					"(?:page object|fixture|browser test)"
+				],
+				"contentPatterns": [
+					"@playwright/test",
+					"page.goto",
+					"page.getByRole",
+					"storageState",
+					"base.extend"
+				]
+			},
+			"relatedSkills": ["ct-storybook-patterns", "ct-testing-patterns", "ct-vite-vitest-patterns"]
+		}
+	}
+}

package/stacks/solidjs/stack.json

@@ -46,7 +46,13 @@
 					"<Switch"
 				]
 			},
-			"relatedSkills": ["ct-vanilla-extract-patterns", "ct-testing-patterns"]
+			"relatedSkills": [
+				"ct-vanilla-extract-patterns",
+				"ct-testing-patterns",
+				"ct-vite-vitest-patterns",
+				"ct-storybook-patterns",
+				"ct-playwright-patterns"
+			]
 		}
 	}
 }

package/stacks/storybook/skills/ct-storybook-patterns/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: ct-storybook-patterns
+description: Storybook interaction testing, CSF 3 stories, play functions, a11y, and visual regression for SolidJS components
+---
+
+# Storybook Patterns
+
+Storybook is the middle layer of the testing pyramid: component interaction testing, visual regression, and accessibility auditing in a real browser.
+
+## SolidJS Integration
+
+Uses community packages: `storybook-solidjs` (renderer) + `storybook-solidjs-vite` (builder).
+
+**Critical:** Always use `createJSXDecorator` for JSX decorators. Standard decorators cause duplicate DOM elements with SolidJS.
+
+```tsx
+import { createJSXDecorator } from "storybook-solidjs";
+
+const ThemeDecorator = createJSXDecorator((Story) => (
+  <ThemeProvider><Story /></ThemeProvider>
+));
+```
+
+## CSF 3 Stories
+
+Use CSF 3 (not CSF Factories -- React-only as of Storybook 10.3).
+
+```tsx
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: { variant: "primary", children: "Click me" },
+};
+```
+
+### Coverage Checklist
+
+Every component needs stories for: all visual states (default, hover, focus, active, disabled, loading, error, empty), viewport sizes where layout differs, theme variants, edge cases (long text, missing data).
+
+## Interaction Testing
+
+Import everything from `@storybook/test` (instrumented versions). Never import from `@testing-library/dom` directly.
+
+```tsx
+import { expect, fn, userEvent, within } from "@storybook/test";
+
+export const SubmitForm: Story = {
+  args: { onSubmit: fn() },
+  play: async ({ canvasElement, args, step }) => {
+    const canvas = within(canvasElement);
+    await step("Fill form", async () => {
+      await userEvent.type(canvas.getByLabelText("Email"), "user@example.com");
+    });
+    await step("Submit", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Sign in" }));
+    });
+    await expect(args.onSubmit).toHaveBeenCalledOnce();
+  },
+};
+```
+
+**Key rules:**
+1. Always `await` expect calls (enables Interactions panel logging).
+2. Use `step()` to organize complex interactions.
+3. Use `fn()` for spying (auto-restored between stories).
+
+## Running in CI (Vitest Addon)
+
+Use `@storybook/addon-vitest` (replaces old test-runner). No running Storybook instance needed.
+
+```typescript
+// vitest.config.storybook.ts
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+
+export default defineConfig({
+  plugins: [storybookTest()],
+  test: {
+    name: "storybook",
+    browser: { enabled: true, provider: "playwright", instances: [{ browser: "chromium" }] },
+    setupFiles: [".storybook/vitest.setup.ts"],
+  },
+});
+```
+
+## Accessibility
+
+Built on axe-core. Set globally in `.storybook/preview.ts`:
+
+```typescript
+export default {
+  parameters: { a11y: { test: "error" } }, // "error" | "todo" | "off"
+  tags: ["a11y-test"],
+};
+```
+
+## MSW for API Components
+
+```typescript
+// .storybook/preview.ts
+import { initialize, mswLoader } from "msw-storybook-addon";
+initialize();
+export default { loaders: [mswLoader] };
+```
+
+Per-story handlers via `parameters.msw.handlers`. Keep success handlers in shared `mocks/handlers.ts`, override with error/edge-case at story level.
+
+## Module Mocking (Storybook 10)
+
+`sb.mock` for internal module replacement. Register in `.storybook/preview.ts` only:
+
+```typescript
+import { sb } from "@storybook/test";
+sb.mock("../src/api/client", () => ({ fetchUser: async () => ({ name: "Mock" }) }));
+```
+
+MSW for network-level; `sb.mock` for internal modules.
+
+## Portable Stories
+
+Reuse stories in Vitest with `composeStories`:
+
+```tsx
+import { composeStories } from "storybook-solidjs";
+import * as stories from "./Button.stories";
+const { Primary } = composeStories(stories);
+
+test("renders primary", () => {
+  const { getByRole } = render(() => <Primary />);
+  expect(getByRole("button")).toBeInTheDocument();
+});
+```
+
+## Anti-Patterns
+
+1. **Destructuring SolidJS props in stories** -- Pass props via `args`; use `createJSXDecorator` for decorators.
+2. **Importing from `@testing-library/dom`** -- Use `@storybook/test` for instrumented versions.
+3. **Not awaiting `expect()` in play functions** -- Always `await expect(...)`.
+4. **Skipping error/edge-case stories** -- Always include loading, error, empty, boundary states.
+5. **Using `@storybook/test-runner`** -- Use `@storybook/addon-vitest` instead.
+6. **Registering `sb.mock` in story files** -- Register in `.storybook/preview.ts` only.

package/stacks/storybook/stack.json

@@ -0,0 +1,46 @@
+{
+	"name": "ct-storybook-patterns",
+	"description": "Storybook interaction testing, CSF 3 stories, and visual regression for SolidJS",
+	"defaultMappings": {
+		".storybook": "ct-storybook-patterns",
+		"src/**/*.stories.tsx": "ct-storybook-patterns"
+	},
+	"fileExtensions": ["stories.tsx", "stories.ts"],
+	"skillRules": {
+		"ct-storybook-patterns": {
+			"description": "Storybook CSF 3 stories, play functions, a11y testing, and visual regression",
+			"priority": 7,
+			"triggers": {
+				"keywords": [
+					"storybook",
+					"story",
+					"stories",
+					"csf",
+					"play function",
+					"interaction test",
+					"visual regression",
+					"chromatic"
+				],
+				"keywordPatterns": ["\\bstorybook\\b", "\\bstories\\b", "\\bplay\\s+function\\b"],
+				"pathPatterns": ["**/*.stories.tsx", "**/*.stories.ts", "**/.storybook/**"],
+				"intentPatterns": [
+					"(?:create|write|add).*(?:story|stories|storybook)",
+					"(?:interaction|visual|a11y).*(?:test|testing)"
+				],
+				"contentPatterns": [
+					"satisfies Meta",
+					"StoryObj",
+					"@storybook/test",
+					"createJSXDecorator",
+					"storybook-solidjs"
+				]
+			},
+			"relatedSkills": [
+				"ct-solidjs-patterns",
+				"ct-testing-patterns",
+				"ct-vite-vitest-patterns",
+				"ct-playwright-patterns"
+			]
+		}
+	}
+}