Signoz Page Story
Explore a SigNoz page, map the endpoints, states and query params it has, then write...
Install
npx skills add SigNoz/signoz --skill signoz-page-story -g -a claude-code -y- Repository
- SigNoz/signoz32.5k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Explore a SigNoz page, map the endpoints, states and query params it has, then write its Storybook page story with control-driven msw mocks that reach every state. Use when asked to create, extend or review a Storybook story for a page under frontend/src/pages, to add controls to an existing page story, or to write defineStoryMocks handlers and mock data for a page.
SigNoz page stories
A page story renders the real page inside the real app shell against msw, and its controls panel can reach every state the page has. The panel is the deliverable, not the story list.
frontend/src/storybook/README.md is the API surface (providers, parameters, control builders, module mocks, navigation). Read it first; this skill is the process on top of it.
Workflow
- Map the page: references/discovery.md. Produce the inventory (endpoints, states, params, permissions, caps) before writing code. No inventory, no story.
- Skeleton first: story + empty
defineStoryMocks, then run it. The console names the endpoints step 1 missed. - Inventory to controls: references/controls.md.
- Mock data and handlers: builders in
__story_mockdata__, handlers in the page's mocks module. - Verify in the browser: references/verify.md. Never report the story as done without it.
Where it lands in the sidebar
The sidebar mirrors the app's own side nav (container/SideNav/menuItems.tsx), so a page sits where someone would click it in the product. Four things decide that, and all four are part of writing the story, not a follow-up.
Title. Pages/<Area>/<Page>, where <Area> is the nav section and <Page> is the label the nav gives it.
