Run any Skill in Manus with one click

heater-appb-web-frontend

Stars2

Forks0

UpdatedJuly 6, 2026 at 19:01

Use when working in HEATER's web/ frontend — Next.js 16 / React 19 / Tailwind v4 pages, wiring a page to /api/* data, pnpm build/gen:api, page titles, PlayerLink/PlayerDialog, viewer team display, slot ordering, or hooking a page into Bubba. Also when a page refetches in a loop, shows the wrong tab title, or type errors appear after backend changes.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

hicklax13

hicklax13/HEATER_v1.0.0

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	heater-appb-web-frontend
description	Use when working in HEATER's web/ frontend — Next.js 16 / React 19 / Tailwind v4 pages, wiring a page to /api/* data, pnpm build/gen:api, page titles, PlayerLink/PlayerDialog, viewer team display, slot ordering, or hooking a page into Bubba. Also when a page refetches in a loop, shows the wrong tab title, or type errors appear after backend changes.

App B Web Frontend (web/) — Next 16 / React 19 / Tailwind v4 / pnpm 10

First rule (web/AGENTS.md): this is NOT the Next.js in your training data. Read the relevant guide in web/node_modules/next/dist/docs/ before writing Next-specific code. Verify from web/: pnpm build (the gate — web has no test suite; CI only checks type-gen sync), pnpm exec tsc --noEmit, pnpm run lint. pnpm is v10 — pnpm 9 misparses pnpm-workspace.yaml's ignoredBuiltDependencies (broke CI until ci.yml:227 pinned 10).

Data wiring pattern (copy /matchup)

Types come from pnpm gen:api → src/lib/api/generated.ts (never hand-edit; regen after backend schema changes).
src/lib/<page>-data.ts exposes fetch<Page>() = liveOrMock(liveFetcher, mockFetcher) (src/lib/api/live.ts:13-19; NEXT_PUBLIC_HEATER_LIVE=1 selects live; live errors PROPAGATE — no catch — so the state machine sees them).
apiGet/apiPost (src/lib/api/client.ts) hit same-origin /api/* (server-side rewrite, next.config.ts:3-13 → HEATER_API_BASE) and attach the Clerk Bearer token via authToken() — which awaits window.Clerk.loaded (client.ts:30-54); do not bypass it or hard-loads 401-bounce (the M-2/M-3 incident).
Page: const fetcher = useMemo(() => () => fetchX(args), [args]); const { state, retry } = usePageData(fetcher); — the fetcher MUST be identity-stable (use-page-data.ts:47); an inline arrow re-created per render = infinite refetch loop.
usePageData (src/lib/use-page-data.ts:56-119) states: loading / error / empty / loaded + locked (402 → paywall) + unlinked (409 TEAM_NOT_LINKED → "link your team"). Render ALL of them. Dev shortcut: ?state=loading|error|empty.
On loaded it publishes {pageId, data} to BubbaContext (line 92) — pageId from window.location.pathname, avoiding next/navigation's static-generation bailout. Wiring usePageData = Bubba context for free.

Canonical components & conventions

PlayerLink/PlayerDialog — the ONE player card. Keyed by mlbId, fetch-on-open, skeletonDetail fallback when live detail is missing; PlayerLink sets data-bubba-tag="name|mlbId" (Bubba's click-to-tag). Every player name/row goes through it.
Titles: per-route server segment layout.tsx with export const metadata = { title: "Matchup" }; root template "HEATER — %s" (app/layout.tsx:29). Failure story (M-4): a client-side DocumentTitle hack set titles after hydration — wrong title on hard load/SSR; deleted in favor of layout metadata. Don't reintroduce client title-setting.
Slot order: src/lib/slot-order.ts (SLOT_ORDER lines 17-34, IL_ALIASES) mirrors the backend's order — matchup + optimizer + start-sit must sort identically; order by the ASSIGNED slot (currentSlot), not the recommended position (LineupTable slotKey fix: a 2nd catcher belongs under Util/BN, not a second "C").
Viewer team: src/lib/viewer-team.ts module cache (default "Team Hickey", updated by fetchMyTeam from the API's identity-resolved team). Never hardcode a team name in a page (the pre-f2decf7 Standings/Trades bug).
Design tokens: src/lib/tokens.ts (COLORS, TIERS, MLB.headshot/teamLogo) + src/lib/motion.ts (EASE_SNAP, staggers, useCountUp) + Tailwind @theme in app/globals.css. No raw hex; no recharts — viz is hand-rolled SVG in components/viz/.
Route crossfade lives in app/template.tsx (reduced-motion aware).

When NOT to apply

Backend contract design → heater-appb-endpoint-slice / contracts-openapi. Bubba composer internals → heater-appb-bubba-ai. The Streamlit UI (Combustion lock etc.) is out of scope for App B work.

More from this repository

same repository

heater-appb-architecture

hicklax13/HEATER_v1.0.0

Use when starting any task on HEATER's live product — the api/ FastAPI backend (Railway service "celebrated-respect") or web/ Next.js frontend (heater-v1-0-1.vercel.app) — or when unsure where code lives, how a request flows, which database owns what, why CORS/Yahoo-writes/billing seem "missing", or which app (Streamlit vs React) is the real one. Load this first on App B work.

2026-07-062

heater-appb-auth-billing

hicklax13/HEATER_v1.0.0

Use when working on HEATER App B auth or billing — Clerk JWT verification, unexpected 401/402, HEATER_API_WRITE_TOKEN, Stripe checkout/webhooks/subscription tiers, require_pro gating, tier-based AI spend caps — or when auth "works locally but not live" (or vice versa), or a page bounces to /sign-in on hard load.

2026-07-062

heater-appb-bubba-ai

hicklax13/HEATER_v1.0.0

Use when working on Bubba, HEATER's AI assistant — /api/chat/* endpoints, provider streaming (src/ai/providers.py), token metering and spend caps, AI provider keys, attachments/page-context, saved prompts, or the chat composer in web/src/components/bubba/.

2026-07-062

heater-appb-calibration-backtest

hicklax13/HEATER_v1.0.0

Use when proving a HEATER algorithm works — calibrating constants, backtesting projections or recommendations, validating win probabilities, adding uncertainty intervals, checking calibration drift — or before letting any new math drive user-facing recommendations. Also when asked "is this signal real?" or when a calibration run finds no clear winner.

2026-07-062

heater-appb-contracts-openapi

hicklax13/HEATER_v1.0.0

Use when editing api/contracts/*, when api/openapi.json or web/src/lib/api/generated.ts drift (test_openapi_contract or the CI openapi-ts-sync job failing), when JSON responses 500 or render "nan"/"+nan" badges, or when adding/renaming fields on a response the live frontend already consumes.

2026-07-062

heater-appb-debugging

hicklax13/HEATER_v1.0.0

Use when App B misbehaves and the cause isn't obvious — works locally but not on Railway/Vercel (or vice versa), a live page renders empty/zero/wrong data, an endpoint 500s or times out, or tests see different data than the app. Run this playbook before changing code.

2026-07-062

name	heater-appb-web-frontend
description	Use when working in HEATER's web/ frontend — Next.js 16 / React 19 / Tailwind v4 pages, wiring a page to /api/* data, pnpm build/gen:api, page titles, PlayerLink/PlayerDialog, viewer team display, slot ordering, or hooking a page into Bubba. Also when a page refetches in a loop, shows the wrong tab title, or type errors appear after backend changes.

App B Web Frontend (web/) — Next 16 / React 19 / Tailwind v4 / pnpm 10

Data wiring pattern (copy /matchup)

Types come from pnpm gen:api → src/lib/api/generated.ts (never hand-edit; regen after backend schema changes).
src/lib/<page>-data.ts exposes fetch<Page>() = liveOrMock(liveFetcher, mockFetcher) (src/lib/api/live.ts:13-19; NEXT_PUBLIC_HEATER_LIVE=1 selects live; live errors PROPAGATE — no catch — so the state machine sees them).
apiGet/apiPost (src/lib/api/client.ts) hit same-origin /api/* (server-side rewrite, next.config.ts:3-13 → HEATER_API_BASE) and attach the Clerk Bearer token via authToken() — which awaits window.Clerk.loaded (client.ts:30-54); do not bypass it or hard-loads 401-bounce (the M-2/M-3 incident).
Page: const fetcher = useMemo(() => () => fetchX(args), [args]); const { state, retry } = usePageData(fetcher); — the fetcher MUST be identity-stable (use-page-data.ts:47); an inline arrow re-created per render = infinite refetch loop.
usePageData (src/lib/use-page-data.ts:56-119) states: loading / error / empty / loaded + locked (402 → paywall) + unlinked (409 TEAM_NOT_LINKED → "link your team"). Render ALL of them. Dev shortcut: ?state=loading|error|empty.
On loaded it publishes {pageId, data} to BubbaContext (line 92) — pageId from window.location.pathname, avoiding next/navigation's static-generation bailout. Wiring usePageData = Bubba context for free.

Canonical components & conventions

PlayerLink/PlayerDialog — the ONE player card. Keyed by mlbId, fetch-on-open, skeletonDetail fallback when live detail is missing; PlayerLink sets data-bubba-tag="name|mlbId" (Bubba's click-to-tag). Every player name/row goes through it.
Titles: per-route server segment layout.tsx with export const metadata = { title: "Matchup" }; root template "HEATER — %s" (app/layout.tsx:29). Failure story (M-4): a client-side DocumentTitle hack set titles after hydration — wrong title on hard load/SSR; deleted in favor of layout metadata. Don't reintroduce client title-setting.
Slot order: src/lib/slot-order.ts (SLOT_ORDER lines 17-34, IL_ALIASES) mirrors the backend's order — matchup + optimizer + start-sit must sort identically; order by the ASSIGNED slot (currentSlot), not the recommended position (LineupTable slotKey fix: a 2nd catcher belongs under Util/BN, not a second "C").
Viewer team: src/lib/viewer-team.ts module cache (default "Team Hickey", updated by fetchMyTeam from the API's identity-resolved team). Never hardcode a team name in a page (the pre-f2decf7 Standings/Trades bug).
Design tokens: src/lib/tokens.ts (COLORS, TIERS, MLB.headshot/teamLogo) + src/lib/motion.ts (EASE_SNAP, staggers, useCountUp) + Tailwind @theme in app/globals.css. No raw hex; no recharts — viz is hand-rolled SVG in components/viz/.
Route crossfade lives in app/template.tsx (reduced-motion aware).

When NOT to apply

Backend contract design → heater-appb-endpoint-slice / contracts-openapi. Bubba composer internals → heater-appb-bubba-ai. The Streamlit UI (Combustion lock etc.) is out of scope for App B work.