ui-storylisted

Create or update Storybook stories that mount a treq React component as a presentational component, driven purely by props/args (no live jj repo, no Tauri IPC, no NAPI). Use when the user runs /ui-story, asks to "add a story", "storybook this component", "preview this component in storybook", or asks for a component to get a Cloudflare Pages preview link on its PR. Scope is app components today (src/components/**, src/components/ui/**) — the long-term goal is a components package shared between the app (src/) and the marketing/docs site (web/), so prefer patterns that don't hard-code app-only assumptions when a component is genuinely presentational.
treq-dev/treq · ★ 5 · Web & Frontend · score 70

Install: claude install-skill treq-dev/treq

# ui-story (Storybook stories for treq components) ## What this skill is for Storybook here exists to let a reviewer *see* a changed presentational component in isolation — different props, different variants, light/dark — without running the full Tauri app or a real jj repo. It is not a replacement for `/app-qa`, which verifies real app behavior against a real repo. If the component you're working on can't be meaningfully rendered without live app state (a `useQuery` hook, `invoke()` calls, `ThemeProvider` context that reads settings from the Rust backend, etc.), that's a signal it isn't presentational yet — either stub/inject that dependency via props, or skip Storybook for it and rely on `/app-qa` instead. ## Setup already in place - `.storybook/main.ts` — stories glob is `src/**/*.stories.@(ts|tsx)`, framework is `@storybook/react-vite`. - `.storybook/preview.tsx` — imports `src/index.css` (Tailwind + the app's CSS variables), and adds a toolbar **Theme** control that toggles the `.dark` class on `<html>`, matching how `useTheme` applies dark mode in the real app. Stories automatically get real treq styling in both themes without needing `ThemeProvider`. - `npm run storybook` — dev server on port 6006. - `npm run build-storybook` — static build to `storybook-static/` (what CI deploys). - Example: `src/components/ui/button.stories.tsx`. ## Where stories live Colocate the story next to the component it documents: `src/components/ui/button.tsx` → `src/compo