Web Tanstackstart Ui Contract Adoption

Archived: 2026-11-07 · roadmap-id: web-tanstackstart-template

Why

web-tanstackstart today ships an Astryx AppShell + TopNav skeleton whose only page pattern is "a page header plus one card". The UI contract that a domain package Web actually needs has already been designed, implemented and owner-accepted in a real product (domain-packages/apps/my-career-web), but none of it lives in the template: the shared layout primitives (PageShell, PageTopBar, SideDrawer, HorizontalFields), the one-screen skeleton, the drawer/disclosure/overflow-menu judgement calls, and the "cards are the exception" rule are all absent. A project scaffolded through pnpm init:web <package-id> therefore starts from a skeleton that does not match the accepted product UI, so every package re-derives the same decisions.

The environment must be stated plainly because it drives every rule: this Web is embedded in the TheFoolAI App's right-hand panel as an auxiliary workbench for the App's coding agent, not a standalone website. The panel is the normal viewport (default ~380px, hard minimum 360px), the mouse and keyboard are the normal input, and the primary reader is both a human and an AI agent. Screen width is the scarcest resource, responsiveness is a first-class acceptance criterion, and copy that does not change behaviour is noise.

Capabilities

New Capabilities

• web-tanstackstart-ui-language: the embedded-App-panel UI contract for the template — shell and layout primitives, the one-screen skeleton, drawer/disclosure/overflow-menu rules, form-control selection, card restraint, and the documentation/agent-guidance obligations that keep it legible.

Modified Capabilities

Non-goals

• Introducing any business domain into the demo; the sample stays a hello/example surface.
• Adding images, a licensed-image manifest, or the fetch:images pipeline of the reference product.
• Adding a second component library, an icon dependency, Tailwind, or any CSS-in-JS runtime.
• Changing the template's data layer, feature boundary, server functions, or generated route tree contract.
• Touching templates/web-tanstackstart-kids/**, .github/**, or the pnpm lockfile by hand.
• Publishing, pushing, or versioning anything before local verification and owner preview.