# Scaffold Feature

Scaffold the co-located feature structure in frontend/src.

- Repository: https://github.com/SigNoz/signoz (32495 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

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

## Description

Scaffold the co-located feature structure in frontend/src. Use when creating a new page, feature, view (tab), or component folder, when a feature needs a shell with tabs, or when moving existing code out of src/container into src/pages. Generates the full folder tree (components/hooks/store/types/utils/constants/__tests__/README) and registers the page's routes with one command.

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

# Scaffold a feature

The frontend is moving to a co-located layout (Bulletproof React / FSD): everything a
feature owns lives in the feature's folder. Read `references/layout.md` for the full
target structure and the rules about what may live where.

**Never hand-create these folders.** Run the generator so every feature comes out
identical, then fill it in.

## Command

```bash
pnpm scaffold page <Name> [options]        # a page/feature under src/pages
pnpm scaffold component <Name> [options]   # a component folder
```

| Option | Applies to | Effect |
| --- | --- | --- |
| `--views A,B,C` | `page` | Makes the page a shell with tab switching and generates one view folder per name. |
| `--parent <path>` | `component` | Parent, relative to `src` (default `components`). A feature path like `pages/Traces/Explorer` nests the component under that feature's `components/`. |
| `--full` | `component` | Also adds `components/`, `hooks/`, `store/`, `types.ts`, `utils.ts`, `constants.ts`, `README.md` for a component that owns children. |
| `--no-tests` | both | Skips `__tests__/`. |
| `--dry-run` | both | Prints what would be written, writes nothing. |
| `--force` | both | Overwrites files that already exist (off by default; existing entries are reported as skipped). |

Folder names keep the casing you type, with the first letter forced up, so
`LLMObservability` stays `LLMObservability` rather than being re-cased. Separated names
collapse to PascalCase: `api-monitoring` and `api monitoring` both give
`pages/ApiMonitoring`. Test ids, headings, tab paths and constants are all derived from
that folder name, `TracesFunnels` gives `traces-funnels-page`, `Traces Funnels` and
`TRACES_FUNNELS_TABS`.

## What you get

```
pages/ApiMonitoring/
  index.tsx                       # the page component
  ApiMonitoring.module.scss
  components/  hooks/  store/     # empty, ready for the first file
  types.ts  utils.ts  constants.ts
  __tests__/ApiMonitoring.test.tsx
  README.md
```

The rest: https://github.com/SigNoz/signoz/blob/HEAD/frontend/.claude/skills/scaffold-feature/SKILL.md