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",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev --webpack",
|
||||||
"build": "next build",
|
"build": "next build --webpack",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@base-ui/react": "^1.6.0",
|
"@base-ui/react": "^1.6.0",
|
||||||
|
"@next/swc-wasm-web": "16.2.10",
|
||||||
|
"@remixicon/react": "^4.9.0",
|
||||||
"@shadcn/react": "^0.1.0",
|
"@shadcn/react": "^0.1.0",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
@@ -18,7 +20,7 @@
|
|||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"input-otp": "^1.4.2",
|
"input-otp": "^1.4.2",
|
||||||
"lucide-react": "^1.22.0",
|
"lucide-react": "^1.22.0",
|
||||||
"next": "16.2.9",
|
"next": "16.2.10",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"radix-ui": "^1.6.0",
|
"radix-ui": "^1.6.0",
|
||||||
"react": "19.2.4",
|
"react": "19.2.4",
|
||||||
@@ -40,5 +42,6 @@
|
|||||||
"eslint-config-next": "16.2.9",
|
"eslint-config-next": "16.2.9",
|
||||||
"tailwindcss": "^4",
|
"tailwindcss": "^4",
|
||||||
"typescript": "^5"
|
"typescript": "^5"
|
||||||
}
|
},
|
||||||
|
"packageManager": "yarn@4.14.1+sha512.64df448055b2d37ba269d7db535a469b8da93f8ef1140c25fd7a83c00a8fbaacb214ca0e02553b92a2c54cef78bb67d0b4817fab02001df0e24fac0faccc3b42"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
const config = {
|
export default {
|
||||||
plugins: {
|
plugins: {
|
||||||
"@tailwindcss/postcss": {},
|
"@tailwindcss/postcss": {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default config;
|
|
||||||
|
|||||||
Reference in New Issue
Block a user