Outmore Project Initializer

You are setting up a brand new Outmore Living project. Follow every step precisely.

Steps

•

Create Next.js project:

bash

npx create-next-app@latest $ARGUMENTS --typescript --tailwind --app --src-dir --use-npm

•
Initialize shadcn/ui:
bash
```
cd $ARGUMENTS
npx shadcn@latest init -d
```
Use "new-york" style, CSS variables enabled.

•

Install dependencies:

bash

npm i @supabase/supabase-js @supabase/ssr
npm i @heroicons/react @material-symbols/svg-400
npm i zod

•

Clone brand files from the brand guide repo:

bash

# Fetch the CSS variables and Tailwind config
curl -sL "https://raw.githubusercontent.com/AduncanOutmore/outmore-brand-guide/main/outmore-variables.css" -o src/styles/outmore-variables.css
curl -sL "https://raw.githubusercontent.com/AduncanOutmore/outmore-brand-guide/main/tailwind.config.outmore.js" -o tailwind.config.outmore.js

Then merge tailwind.config.outmore.js tokens (colors, fonts, animations) into the project's tailwind.config.ts.

•
Import brand CSS — add to src/app/globals.css BEFORE the Tailwind directives:
css
```
@import '../styles/outmore-variables.css';
```

•

Set up Google Fonts in src/app/layout.tsx:

tsx

import { Poppins, DM_Sans, Cormorant_Garamond } from 'next/font/google'

const poppins = Poppins({ subsets: ['latin'], weight: ['300', '400', '500', '600'], variable: '--font-display' })
const dmSans = DM_Sans({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--font-body' })
const cormorant = Cormorant_Garamond({ subsets: ['latin'], weight: ['400', '500', '600'], style: ['normal', 'italic'], variable: '--font-accent' })

Apply all three font variables to <body>.

•
Create Supabase client helpers:
- •src/lib/supabase/client.ts (browser client using createBrowserClient)
- •src/lib/supabase/server.ts (server client using createServerClient)

•

Create .env.local with placeholder Supabase keys:

code

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

•

Create directory structure:

code

src/components/ui/     (shadcn components)
src/components/        (custom components)
src/lib/supabase/      (supabase clients)
src/lib/               (utils)
src/types/             (typescript types)
src/styles/            (brand CSS)
src/app/actions/       (server actions)

•
Create a project-level CLAUDE.md in the project root with project name and overview placeholder.

•

Initialize git and create repo:

bash

git init
git add .
git commit -m "Initial setup: Next.js + Outmore brand system"

•
Report completion with a summary of everything created.