Scaffold Feature
Scaffold the co-located feature structure in frontend/src.
Install
npx skills add SigNoz/signoz --skill scaffold-feature -g -a claude-code -y- Repository
- SigNoz/signoz32.5k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 1,771 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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
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
