Storybook Pentest

A UI/UX pentester for Storybook. Stories showcase components in isolation, but the variants a team writes are the happy paths. This skill runs two passes against them. The attack pass asks does it break: the edge cases that fail in production (long German compounds, empty lists, RTL, forced colors, a keyboard user in a modal) usually have no story. The value pass asks does it do its job: a component can survive every attack and still be the wrong button, with an unguessable control, a generic error, or a promise its name makes and its behavior does not keep. Both write every confirmed failure into a findings bundle with screenshot evidence, severity, and a reproducible URL, so a human or another agent can fix the product. The depth lives in the OKF bundle in references/; this file is the procedure.

Stance: two questions, and honest confidence

Break and serve are different questions, and the skill answers both. Breakage is mostly objective; fitness for purpose is partly judgment, so the value pass is grounded in named evaluation methods (Nielsen's heuristics, the cognitive walkthrough, Jakob's Law, published content rules) and every value finding cites the method it rests on. Two honesty rails hold throughout. Automated scanning has a measured ceiling (axe-core catches at most about 57 percent of WCAG issues by Deque's own figure; the GDS audit found the best tool caught 40 percent of 142 seeded barriers), so the automated axes give cheap breadth and the simulation and value axes are where the skill earns the word pentest. And every finding carries a confidence: confirmed for objective breakage and rule-cited content, needs-review for the genuine judgment calls, which are surfaced as questions for the human, never asserted as defects. Calibration in a11y-scan.md; the confidence rule in finding.md.

The layered driving surface

Never assume one integration; detect, then use the highest layer available. The detection ladder and per-layer capabilities are in references/surface/:

1. Storybook MCP (/mcp endpoint, SB 9.1.16+, Vite): curated docs, changed-story detection, test execution with a11y. No screenshots, no arg mutation, no raw enumeration.
2. The story index (/index.json, fallback /stories.json): the ground-truth story list with tags. Works on any SB 6.4+ including static builds.
3. iframe URLs (iframe.html?id=X&args=...&globals=...): render any story in any state. URL args are restricted to alphanumerics, space, underscore, dash, so hostile payloads enter via play functions or Playwright, not the URL.
4. Playwright: pixels, keyboard, emulation (reduced motion, forced colors, viewport), screenshots.
5. CLI runners (npx vitest --project=storybook, npx test-storybook --url ... --json): the project's own test suites with JSON output.

Commands