Compare commits
2 Commits
b37625007b
...
4c35335b64
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c35335b64 | ||
|
|
d919ec4788 |
78
AGENTS.md
78
AGENTS.md
@@ -1,78 +0,0 @@
|
||||
You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
|
||||
|
||||
# SANDBOX ENVIRONMENT
|
||||
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 installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
|
||||
- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
|
||||
|
||||
# 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.
|
||||
78
CLAUDE.md
78
CLAUDE.md
@@ -1,78 +0,0 @@
|
||||
You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.
|
||||
|
||||
# SANDBOX ENVIRONMENT
|
||||
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 installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
|
||||
- The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)
|
||||
|
||||
# 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.
|
||||
1
instrumentation.ts
Normal file
1
instrumentation.ts
Normal file
@@ -0,0 +1 @@
|
||||
export function register() {}
|
||||
34
next.config.js
Normal file
34
next.config.js
Normal file
@@ -0,0 +1,34 @@
|
||||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "images.unsplash.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "cdn.shopify.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "**.frontend.co",
|
||||
},
|
||||
],
|
||||
},
|
||||
experimental: {
|
||||
reactDebugChannel: false,
|
||||
},
|
||||
webpack: (config, { isServer }) => {
|
||||
config.cache = { type: "memory" };
|
||||
if (isServer) {
|
||||
config.optimization = config.optimization || {};
|
||||
config.optimization.splitChunks = false;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
11
package.json
11
package.json
@@ -3,13 +3,15 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"dev": "next dev --webpack",
|
||||
"build": "next build --webpack",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.6.0",
|
||||
"@next/swc-wasm-web": "16.2.10",
|
||||
"@remixicon/react": "^4.9.0",
|
||||
"@shadcn/react": "^0.1.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
@@ -18,7 +20,7 @@
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"input-otp": "^1.4.2",
|
||||
"lucide-react": "^1.22.0",
|
||||
"next": "16.2.9",
|
||||
"next": "16.2.10",
|
||||
"next-themes": "^0.4.6",
|
||||
"radix-ui": "^1.6.0",
|
||||
"react": "19.2.4",
|
||||
@@ -40,5 +42,6 @@
|
||||
"eslint-config-next": "16.2.9",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42"
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
const config = {
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
Reference in New Issue
Block a user