| name | tool-page-builder |
| description | Code-generation skill. Use only when creating or editing Career Hub tool pages, calculator pages, tool metadata, or tool registry code in this repo. |
| metadata | {"family":"code","owner":"engineering","last_reviewed":"2026-04-30T00:00:00.000Z","version":"1.0.0"} |
Tool Page Builder
This is a code-generation skill. Use it only when the outcome is a tool-related repo diff.
Use When
- creating a new tool page
- editing an existing tool page
- wiring tool metadata
- adding tool FAQs
- updating related tool behavior
First Files To Check
src/features/tools/shared/ui/ToolPageShell.tsx
src/features/tools/shared/data/tool-registry/data.ts
src/features/tools/shared/data/tool-registry/helpers.ts
- an existing tool route under
src/app/(career-hub)/tools/*/page.tsx
Required Pattern
Route
Use a thin route file under:
src/app/(career-hub)/tools/<tool>/page.tsx
Page Shell
Prefer:
This already handles:
- breadcrumbs
- tool hero
- FAQ schema
- software application schema
- support section
- disclaimer
- author row
- CTA/internal-link behavior
Client
Put interactive tool UI in:
src/features/tools/<tool>/<ToolName>Client.tsx
Put pure calculator and business logic in:
src/features/tools/<tool>/logic.ts
The client component should primarily manage inputs, local UI state, and rendering around exported logic helpers.
Metadata Rule
Prefer:
from:
src/features/tools/shared/ui/ToolPageShell.tsx
Registry Rule
Check whether the tool belongs in:
src/features/tools/shared/data/tool-registry/data.ts
Use the registry for:
- tool name
- description
- keywords
- FAQ templates
- related tools
- category
- schema fields
Forbidden Patterns
- custom one-off tool page layout when
ToolPageShell already fits
- tool FAQs defined in a random page file if they belong in the registry
- metadata hand-built when
generateToolPageMetadata fits
- burying calculator math or result derivation inside JSX/event handlers when a pure
logic.ts helper can own it
Testing Rule
- Unit-test tool and calculator logic as exported pure functions under
tests/unit.
- Run
pnpm smoke when tool routes or public tool rendering change.
Output Standard
A correct tool implementation usually has:
- thin route file
- tool config derived from registry or aligned with it
ToolPageShell
- interactive client component
- unit-testable feature-local
logic.ts for non-React rules
- matching FAQ/schema wiring