copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions
frosty/web/AGENTS.md
Tommy Chow f19da4151c
migrate web to next 16 template and redesign landing page (#526) 
* migrate web to next-template stack (next 16, react 19, tailwind 4)

replace all infrastructure with next-template conventions:
- next.js 14 -> 16 (turbopack default, typed routes, react compiler)
- react 18 -> 19
- tailwind css 3 -> 4 (css-first config, oklch theme system)
- eslint 8 (.eslintrc) -> 9 (flat config with stricter rules)
- add shadcn/ui, base-ui, cva component primitives
- upgrade theme toggle to light/dark/system dropdown
- migrate hardcoded neutral classes to semantic oklch tokens
- drop unused @tailwindcss/forms, autoprefixer

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add no-misused-promises config for async JSX handlers, warn on array index keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* base-vega

* sync frosty web with next-template runtime and claude tooling for cloudflare parity

* gitignore .dev.vars per cloudflare best practice

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add observability configuration to wrangler.jsonc

* remove marquee emote background from hero section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* improve CLAUDE.md and AGENTS.md files across project

Remove redundant root CLAUDE.md (kept in .claude/ instead), add Commands
and Source Structure sections to Flutter AGENTS.md, clarify global vs
feature store placement, and fill gaps in web AGENTS.md (shadcn base-vega
style, constants.ts, no-array-index-key rule, commit conventions).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* switch shadcn theme from neutral to violet, replace twitch-purple with primary token

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* initial redesign

* auto-infer nativeButton in Button wrapper when render prop is used

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* replace skeleton carousel with real screenshots and video, add responsive phone scaling and mobile menu

- Replace PhoneSkeleton with PhoneFrame/PhoneMedia using actual app screenshots and video
- Fluid phone sizing via aspect-ratio with responsive max-h/max-w caps
- Non-circular carousel with swipe gestures, dot indicator, and hover opacity boost
- Video plays only when focused, pauses when off-screen
- Collapse header actions into dropdown menu on mobile, add Contact link
- Viewport-height layout with no scrolling on any screen size
- Remove footer, move contact to header

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* improve header consistency, carousel layout, and responsive centering

- add icons to all header buttons (Contact, Donate, GitHub)
- switch theme toggle to ghost variant for consistency
- bump header collapse breakpoint from md to lg
- move carousel arrows to overlay positions with animated enter/exit
- hide arrows at first/last slide
- fix vertical centering of phone+description group across all screen sizes
- add smooth blur+slide transition for description text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add contact dropdown with copy email toast

- replace direct mailto link with dropdown: send email or copy email
- install sonner for toast notifications, show top-center on copy
- extract emailAddress constant for clipboard use
- add copy option to mobile hamburger menu too

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* replace mobile hamburger menu with icon buttons

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* redesign hero copy, badge-style download buttons, and mobile layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add consistent padding and object-contain to carousel media

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add emote physics background to hero section

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* move container styling to hero panel, refresh emote set with 2025 trending picks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add staggered entrance animations and remove grid gap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add 30-day cache headers for video and logo assets

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add emote collisions and aspect-ratio tracking, refine hero layout

Emote physics: add particle-particle elastic collisions, per-particle
width measurement for correct aspect ratios, new emotes (aga, WW, o7,
FLASHBANG, LULW, Deadass), bump count to 30. Layout: absolute-position
header with z-20, increase mobile carousel ratio to 2fr/4fr, reserve
min-h-10 for description text, remove panel rounding.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix carousel lint warnings: useSyncExternalStore, ref naming, stable keys

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add seo metadata, sitemap, and robots.txt

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* add privacy link to header and footer credit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* update privacy policy content and restyle with mono layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* reorder header nav and add mobile hamburger menu

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refresh web dependencies and smooth footer credit hover transition

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 19:53:43 -08:00

3.5 KiB
Raw Blame History

AGENTS.md

Commands

pnpm dev          # Start development server
pnpm build        # Production build
pnpm start        # Start production server (Node.js)
pnpm preview      # Build and preview on local Cloudflare Workers
pnpm deploy       # Build and deploy to Cloudflare Workers
pnpm upload       # Build and upload to Cloudflare Workers (no deploy)
pnpm cf-typegen   # Generate CloudflareEnv types from wrangler.jsonc
pnpm lint         # Run ESLint
pnpm typecheck    # TypeScript type checking (tsc --noEmit)
pnpm format       # Format with Prettier
pnpm clean        # Delete .next, .open-next, and node_modules
pnpm nuke         # Delete .next, .open-next, node_modules, and pnpm-lock.yaml

Architecture

Next.js 16 landing page for Frosty using the App Router with React 19. Deployed on Cloudflare Workers via @opennextjs/cloudflare.

Key Configuration

  • React Compiler: Enabled in next.config.ts for automatic memoization
  • Typed Routes: Enabled for type-safe navigation (use Route type from next/navigation)
  • Path Alias: @/* maps to ./src/*
  • Strict TypeScript: noUncheckedIndexedAccess, noImplicitReturns, noFallthroughCasesInSwitch, noImplicitOverride, verbatimModuleSyntax

Source Structure

  • src/app/ - App Router pages and layouts
  • src/components/ - React components (ui/ subdirectory for shadcn base-vega style — add with pnpm dlx shadcn@latest add <component>)
  • src/lib/ - Utilities (cn() for className merging, constants.ts for external links)
  • src/assets/ - Static images (screenshots)

Cloudflare Workers

  • wrangler.jsonc - Cloudflare Workers configuration (bindings, R2, KV, etc.)
  • open-next.config.ts - OpenNext adapter config (ISR requires uncommenting R2 incremental cache)
  • cloudflare-env.d.ts - Generated types for Cloudflare bindings (run pnpm cf-typegen to regenerate)
  • Dev mode calls initOpenNextCloudflareForDev() in next.config.ts for local Cloudflare emulation

Naming Conventions

  • Components: PascalCase (Button.tsx)
  • Utilities: camelCase (formatDate.ts)
  • Hooks: use prefix (useDebounce.ts)
  • Types: PascalCase (UserProfile)

ESLint Rules

Config: eslint.config.mjs. Ignores src/components/ui/.

Notable strict rules enforced:

  • eqeqeq: 'smart' - Strict equality (except == null)
  • no-console - Warn on console usage (allows console.warn and console.error)
  • @typescript-eslint/strict-boolean-expressions - No implicit boolean coercion (but allowNullableBoolean and allowNullableString are enabled)
  • @typescript-eslint/switch-exhaustiveness-check - Exhaustive switch statements
  • @typescript-eslint/consistent-type-imports - Use import type for types (fixStyle: 'inline-type-imports')
  • @typescript-eslint/no-unnecessary-condition - No redundant conditions
  • @typescript-eslint/no-misused-promises - Prevent floating promises (checksVoidReturn.attributes disabled for JSX)
  • @eslint-react/jsx-shorthand-boolean - Use shorthand boolean JSX props
  • @eslint-react/no-array-index-key - Warn on array index as key
  • react-you-might-not-need-an-effect - Avoid unnecessary useEffect
  • Unused variables must be prefixed with _

Commits

Lowercase, no prefixes (e.g., remove marquee emote background from hero section). Keep commits tightly scoped.

Dev Tooling

  • Prettier: Auto-sorts imports (prettier-plugin-organize-imports) and Tailwind classes (prettier-plugin-tailwindcss)
  • react-scan: Runtime render performance visualization (dev only)