tool-page-builder

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:

• ToolPageShell

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:

• generateToolPageMetadata

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:

1. thin route file
2. tool config derived from registry or aligned with it
3. ToolPageShell
4. interactive client component
5. unit-testable feature-local logic.ts for non-React rules
6. matching FAQ/schema wiring