web

Imported from nafisazizir/frontier-gym (apps/web/AGENTS.md). Install upstream with npx skills add nafisazizir/frontier-gym --skill web. Copyright stays with the author.

This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in node_modules/next/dist/docs/ before writing any code. Heed deprecation notices.

Styling: ziiz over shadcn

The design layer is ziiz, vendored at styles/ziiz/ (theme.css + shadcn.css) from @ziiz/theme, which is not published to npm. Both files are copies — never edit them. Every frontier-gym override lives in app/globals.css.

What ziiz replaces

• Colour. theme.css sets --color-*: initial, wiping Tailwind's stock palette. bg-sky-500, text-slate-600, bg-blue-50 and friends no longer compile — that is deliberate, so an off-ramp colour fails loudly instead of quietly painting. What survives: the ramp (gray-100…gray-1000, gray-alpha-*, blue-*, red-*, amber-*, green-*, purple-*, teal-*, pink-*, background-100, background-200), plus white and black for literal content.
• Type. 31 named roles instead of text-sm/font-bold pairs: text-heading-{72…14}, text-copy-{24…13} (-mono variants), text-label-{20…12} (-mono), text-button-{16,14,12}. Long-form prose gets the typeset class.
• Surfaces. material-{base,small,medium,large,tooltip,menu,modal,fullscreen} carry the shadow-border and background together. Prefer them to a hand-rolled border bg-card shadow-sm.

What stays shadcn

Geometry. app/globals.css pins --radius: 0.45rem (base-vega's value) over ziiz's 0.875rem, and the whole --radius-sm … --radius-4xl scale multiplies off it. Component sizing, spacing and variant structure stay as shadcn ships them — don't restyle a component to look like ziiz's own registry.

Adding a component

shadcn add writes components against shadcn's slot vocabulary (bg-primary, text-muted-foreground, border-border). styles/ziiz/shadcn.css already bridges every one of those slots onto the ramp, so a stock component is correct as-is. After adding, read the file and fix only:

1. Raw Tailwind palette classes (bg-blue-500, text-green-600, border-gray-200 at an off-ramp step). These won't compile. Map them to the ramp — status colours go to {red,amber,green,blue}-{700,800,900}, chrome to gray-*.
2. Hardcoded type (text-sm font-medium, text-2xl font-bold) where a role exists. Swap in text-label-14, text-heading-24, etc.
3. Icon imports. The icon library is remixicon (@remixicon/react); registries often ship lucide-react.

Leave radius, sizing and variant names alone.

Fonts

app/layout.tsx supplies the two variables ziiz's type roles resolve through: --font-sans from the vendored app/fonts/InterVariable*.woff2, --font-mono from Geist Mono. theme.css turns on Inter's cv05 and ss03 features. Inter is vendored rather than fetched so the static export builds without network.