add-feature

Adding a UI Feature

For all component selection, layout decisions, and styling — invoke the kaizen-ui skill.

Gotchas

• This project uses code-based routing, not file-based. Do not use createFileRoute or the TanStack Router Vite plugin — use createRoute and createLazyRoute.
• View components are named by view type (e.g. WidgetsList, WidgetDetail), never with a Page suffix.
• router.tsx is pure composition — it only imports and wires route trees. Do not put route definitions or loaders in router.tsx.
• rootRoute.tsx is separate from router.tsx to avoid circular imports. Layout routes that span multiple features live at src/ root, not in a feature folder.
• Generated hooks, schemas, and mocks live in ui/src/generated/ — never edit these files. If the endpoint you need doesn't have generated hooks, update the appropriate spec in spec/ (control-plane-openapi.yaml, nvcf-openapi.yaml, or sis-openapi.yaml) then run task generate.
• All source files need Apache 2.0 license headers. Run task license:add before committing.

When to Create a New Feature Folder

• New domain (new data, new concepts, new API surface) → new feature folder
• Composition of existing domains (e.g. a home page assembling widgets) → new thin feature folder
• Extension of an existing domain (e.g. a "Create Function" page) → new route/component in the existing feature folder

Feature Folder Structure

A feature is a domain boundary, not a route. Each feature is self-contained under ui/src/features/<name>/:

features/<name>/
├── components/         # Smaller building blocks (badges, cards)
├── hooks/              # Feature-scoped hooks
├── types/              # Feature-scoped types
├── routes.tsx          # Route definitions, loaders, search validation (optional)
├── <View>.tsx          # Route-level view components (PascalCase, named by view type)
└── utils.ts            # Feature-scoped helpers (when needed)

• Not every subfolder is required — add components/, hooks/, types/ only when needed
• A feature may not have routes at all — it may only export hooks and components for other features
• Helpers go inline in the component file by default. Extract to a feature-root file only when shared across multiple files in the same feature