Rewrite agent guidance: sandbox notes, style guide, fonts, Vercel AI

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-28 16:20:56 -04:00
parent 20d666b375
commit 7467cdce3f
2 changed files with 149 additions and 5 deletions
--- 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 — `<html>` 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.