From 7467cdce3f07f2d34eb040eaf5454a4248e2fa4a Mon Sep 17 00:00:00 2001 From: Rami Bitar Date: Sun, 28 Jun 2026 16:20:56 -0400 Subject: [PATCH] Rewrite agent guidance: sandbox notes, style guide, fonts, Vercel AI Co-Authored-By: Claude Opus 4.8 (1M context) --- AGENTS.md | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- CLAUDE.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 149 insertions(+), 5 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 8bd0e39..b524d03 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,5 +1,75 @@ - -# This is NOT the Next.js you know +You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn. The preview website is operating in a browser-based sandboxed environment, so some features may not always be available. -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. - +- To install packages modify the package.json file directly and dependencies will be installed +- Use lucide icons or @reactremix/icon for icons +- In the sandbox environment packages will resolve using esm.sh +- In the sandbox environment Tailwind is loaded via the CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe + +# STYLE GUIDE +- Always use Tailwind CSS for styling via a globals.css file +- Sample globals.css setup: +```css +import "tailwindcss" +import "tw-animate-css" + +@custom-variant dark (&:is(.dark *)); + +@theme { + --color-background: hsl(0 0% 100%); + --color-foreground: hsl(222.2 84% 4.9%); + --color-primary: hsl(222.2 47.4% 11.2%); + --color-primary-foreground: hsl(210 40% 98%); + --color-secondary: hsl(210 40% 96.1%); + --color-secondary-foreground: hsl(222.2 47.4% 11.2%); + --color-muted: hsl(210 40% 96.1%); + --color-muted-foreground: hsl(215.4 16.3% 46.9%); + --color-accent: hsl(210 40% 96.1%); + --color-accent-foreground: hsl(222.2 47.4% 11.2%); + --color-destructive: hsl(0 84.2% 60.2%); + --color-destructive-foreground: hsl(210 40% 98%); + --color-border: hsl(214.3 31.8% 91.4%); + --color-input: hsl(214.3 31.8% 91.4%); + --color-ring: hsl(222.2 84% 4.9%); + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; +} +``` + +## Fonts + +Do not use `next/font`. Load fonts with `@font-face` directly in `app/globals.css` and wire them to the theme tokens. + +1. Add a `@font-face` block per family at the top of `app/globals.css`. Use the variable woff2 from Google's CDN (`fonts.gstatic.com`) with a weight range so one file covers all weights: + +```css +@font-face { + font-family: 'Geist'; + font-display: swap; + font-style: normal; + font-weight: 300 700; + src: url('https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2') format('woff2'); +} +``` + +2. Point the theme tokens at the family names inside `@theme inline`: + +```css +@theme inline { + --font-sans: 'Geist', sans-serif; + --font-mono: 'Geist Mono', monospace; + --font-heading: 'Geist', sans-serif; +} +``` + +3. Keep `app/layout.tsx` free of font imports — `` only needs `className="font-sans"` (applied via the base layer) and the fonts resolve from CSS. + +To swap a font, grab the latin woff2 URL from the Google Fonts CSS API (e.g. `https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap`) and replace the `font-family` name and `src` URL above. + +## Vercel AI + +You can build agentic applications using API routes with the Vercel `ai` v6 SDK. + +- When using this package you must use zod. +- The Vercel AI SDK depends on zod v3. Pin zod to version `3.25.76` — do NOT install zod v4 or higher, as it conflicts with the Vercel AI SDK v6 packages. diff --git a/CLAUDE.md b/CLAUDE.md index 43c994c..b524d03 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1 +1,75 @@ -@AGENTS.md +You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn. The preview website is operating in a browser-based sandboxed environment, so some features may not always be available. + +- To install packages modify the package.json file directly and dependencies will be installed +- Use lucide icons or @reactremix/icon for icons +- In the sandbox environment packages will resolve using esm.sh +- In the sandbox environment Tailwind is loaded via the CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe + +# STYLE GUIDE +- Always use Tailwind CSS for styling via a globals.css file +- Sample globals.css setup: +```css +import "tailwindcss" +import "tw-animate-css" + +@custom-variant dark (&:is(.dark *)); + +@theme { + --color-background: hsl(0 0% 100%); + --color-foreground: hsl(222.2 84% 4.9%); + --color-primary: hsl(222.2 47.4% 11.2%); + --color-primary-foreground: hsl(210 40% 98%); + --color-secondary: hsl(210 40% 96.1%); + --color-secondary-foreground: hsl(222.2 47.4% 11.2%); + --color-muted: hsl(210 40% 96.1%); + --color-muted-foreground: hsl(215.4 16.3% 46.9%); + --color-accent: hsl(210 40% 96.1%); + --color-accent-foreground: hsl(222.2 47.4% 11.2%); + --color-destructive: hsl(0 84.2% 60.2%); + --color-destructive-foreground: hsl(210 40% 98%); + --color-border: hsl(214.3 31.8% 91.4%); + --color-input: hsl(214.3 31.8% 91.4%); + --color-ring: hsl(222.2 84% 4.9%); + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; +} +``` + +## Fonts + +Do not use `next/font`. Load fonts with `@font-face` directly in `app/globals.css` and wire them to the theme tokens. + +1. Add a `@font-face` block per family at the top of `app/globals.css`. Use the variable woff2 from Google's CDN (`fonts.gstatic.com`) with a weight range so one file covers all weights: + +```css +@font-face { + font-family: 'Geist'; + font-display: swap; + font-style: normal; + font-weight: 300 700; + src: url('https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2') format('woff2'); +} +``` + +2. Point the theme tokens at the family names inside `@theme inline`: + +```css +@theme inline { + --font-sans: 'Geist', sans-serif; + --font-mono: 'Geist Mono', monospace; + --font-heading: 'Geist', sans-serif; +} +``` + +3. Keep `app/layout.tsx` free of font imports — `` only needs `className="font-sans"` (applied via the base layer) and the fonts resolve from CSS. + +To swap a font, grab the latin woff2 URL from the Google Fonts CSS API (e.g. `https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap`) and replace the `font-family` name and `src` URL above. + +## Vercel AI + +You can build agentic applications using API routes with the Vercel `ai` v6 SDK. + +- When using this package you must use zod. +- The Vercel AI SDK depends on zod v3. Pin zod to version `3.25.76` — do NOT install zod v4 or higher, as it conflicts with the Vercel AI SDK v6 packages.