storybook

# Storybook Scaffold and test Storybook stories — **three artefacts in two files** per component: a `Default` story and a `Playground` story (both in the visual regression file) plus an interaction test file under a `/Tests` namespace. Works on React (web) and React Native / Expo (native). Auth — when the running Storybook is gated — is opt-in and per-pathname, with secrets stored in the OS keychain instead of the repo. > **This `SKILL.md` is a thin index.** > Concern-specific rules live in [`rules/*.md`](./rules) and load on > demand. > Reference material lives in [`references/*.md`](./references). > Literal scaffolding lives in [`templates/*.md`](./templates). > Do not preload every file — load only what the current phase asks for. --- ## When to use Reach for this skill when any of the following is true: - A component has no story file yet and needs visual regression coverage. - An existing `*.stories.tsx` lacks an interaction test counterpart. - A `Playground` story is missing or out of sync with current props. - The Storybook target is gated by auth and the agent needs to log in. - A flaky interaction test needs to be iterated against the running Storybook URL. Do **not** reach for this skill when: - The task is to build the component itself. Scaffold stories **after** the component is implemented and named. - The repo has no Storybook installation at all. Halt and ask the user to install Storybook first — this skill does not bootstrap Storybook. - The co...