frontend-feature

Scaffolds a complete TanStack Start feature with server functions, schemas, components, and thin routes.

Updated May 7, 2026
One-click install
npx skills add https://github.com/Pieter-1337/Euricom-tsz --skill frontend-feature-pieter-1337
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-feature
Source: https://github.com/Pieter-1337/Euricom-tsz/tree/main/.claude/skills/tsz-frontend-feature
Command: npx skills add https://github.com/Pieter-1337/Euricom-tsz --skill frontend-feature-pieter-1337

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new page or section to a TanStack Start web app requires wiring together API clients, server functions, zod schemas, components, and route files across many directories, which is repetitive and error-prone when done by hand. ## Core Features & Use Cases - End-to-end feature scaffolding: Creates the API client file, feature folder (schemas, server fns, components), and thin route files following the project's layered architecture. - Convention enforcement: Keeps routes as thin composers, isolates server-only code behind .server.ts files and createServerFn boundaries, and uses the #/ import alias consistently. - List and detail patterns: Provides ready-made patterns for simple tables and for paginated, sortable, searchable lists using useListQuery, ListShell, and TanStack Table column definitions. - Use Case: You need a new "projects" admin section. The Skill generates src/api/projects.server.ts, src/features/projects/ with schemas, server fns, and list/detail components, plus thin routes under src/routes/_protected/projects/. ## Quick Start Ask the assistant to scaffold a new protected frontend feature named projects with a list view and detail view in packages/web.

Frequently Asked Questions about frontend-feature

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a new feature page in a TanStack Start app?

Create an API client in src/api, a feature folder under src/features with schemas, server fns, and components, then add thin route files under src/routes that import the feature components. The route tree regenerates automatically on dev start.

How do I build a sortable paginated list with TanStack Table?

Define ColumnDef entries with ids constrained to backend sort keys using satisfies, then pass them to ListShell together with the state returned by useListQuery. SortableHeaderCell handles the asc/desc toggle on column headers.

Why should components not import .server.ts files directly?

Files with the .server.ts suffix carry the authenticated API client and must stay out of the client bundle. Components import createServerFn wrappers instead, which are replaced with RPC stubs on the client while executing on the server.

Does TanStack Router require manually editing routeTree.gen.ts?

No, routeTree.gen.ts is auto-generated and regenerates when the dev server starts. You only create the route files under src/routes and never edit the generated file by hand.

What happens if the backend API types are missing when scaffolding a feature?

The generated schema types come from openapi-typescript via the gen:api script. If a type is missing, note it and run bun --filter web gen:api once the backend API contract is ready.