# Signoz Page Story

Explore a SigNoz page, map the endpoints, states and query params it has, then write...

- Repository: https://github.com/SigNoz/signoz (32495 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add SigNoz/signoz --skill signoz-page-story -g -a claude-code -y`
Codex: `npx skills add SigNoz/signoz --skill signoz-page-story -g -a codex -y`
Cursor: `npx skills add SigNoz/signoz --skill signoz-page-story -g -a cursor -y`
Gemini CLI: `npx skills add SigNoz/signoz --skill signoz-page-story -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

1. **Map the page**: [references/discovery.md](references/discovery.md). Produce the inventory (endpoints, states, params, permissions, caps) before writing code. No inventory, no story.
2. **Skeleton first**: story + empty `defineStoryMocks`, then run it. The console names the endpoints step 1 missed.
3. **Inventory to controls**: [references/controls.md](references/controls.md).
4. **Mock data and handlers**: builders in `__story_mockdata__`, handlers in the page's mocks module.
5. **Verify in the browser**: [references/verify.md](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.

The rest: https://github.com/SigNoz/signoz/blob/HEAD/.claude/skills/signoz-page-story/SKILL.md