원클릭으로 Manus에서 모든 스킬 실행

heater-appb-web-frontend

스타2

포크0

업데이트2026년 7월 6일 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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

hicklax13

hicklax13/HEATER_v1.0.0

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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.

이 저장소의 다른 Skills

같은 저장소

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.