Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
#!/bin/sh

echo "Running lint check..."
echo ""
echo "🔍 Running lint check..."
if ! pnpm lint:check; then
echo ""
echo "Lint check failed! Fix issues with: pnpm lint:fix"
echo "Lint check failed pnpm lint:fix"
echo ""
exit 1
fi
echo "✅ Lint check passed"

echo "Running format check..."
echo ""
echo "🎨 Running format check..."
if ! pnpm format:check; then
echo ""
echo "Format check failed! Fix issues with: pnpm format:fix"
echo "Format check failed pnpm format:fix"
echo ""
exit 1
fi
echo "✅ Format check passed"

echo "All checks passed!"
echo ""
echo "🚀 All checks passed!"
echo ""
2 changes: 1 addition & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80,
"printWidth": 120,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
Expand Down
59 changes: 38 additions & 21 deletions CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co

## Project Overview

Seed is a generative art studio that turns natural language into p5.js sketches with parameter controls, version history, and multi-format exports.
Seed turns natural language into p5.js sketches you can shape with live controls and export 🌱

## Tech Stack

- **Frontend**: Next.js 16 with React 19, TypeScript
- **Styling**: Tailwind CSS 4 with shadcn/ui components (Radix-based)
- **AI/Chat**: Vercel AI SDK with ai-elements components
- **State Management**: Zustand (lightweight stores)
- **Backend**: Convex (serverless database and API)
- **Auth**: Clerk (JWT-based authentication)
Expand Down Expand Up @@ -49,24 +48,38 @@ This project follows a **colocation-first** approach: code lives closest to wher
1. **Single-file pages**: All components specific to a route should live in that route's file (page.tsx or layout.tsx), not abstracted into separate component files
2. **Shared-only in /components/**: The `/components/` folder is reserved for components used in 2+ places. Single-use components belong in the file where they're used
3. **Extract on actual reuse**: Only move code to `/components/` when you have a second consumer. Don't pre-emptively abstract
4. **Organize within files**: Use section comments to organize all files with multiple components/functions:
```tsx
// =============================================================================
// Section Name
// =============================================================================
```
4. **Organize within files**: Use section comments to group by **category/role** (e.g., Types, Constants, Components, Hooks, Page, Layout), not by individual item name. Format: label first, trailing hyphens padded to 120 chars total (matches `printWidth`)

### File Naming

- All files use **kebab-case**: `magnet-lines.tsx`, `split-panel-store.ts`
- All files use **kebab-case**: `magnet-lines.tsx`, `canvas-store.ts`
- Stores: `{feature}-store.ts`
- Hooks: `use-{name}.ts`

### Naming Conventions

**Default exports use generic names** — the file path provides semantic meaning:

- Components: `export default function Component()`
- Pages: `export default function Page()`
- Layouts: `export default function Layout()`
- Hooks: `export default function useHookName()` (keeps name for React rules of hooks)
- Props: `Props` (type or interface)

**Named exports use descriptive names** — they need to self-identify:

- Components: `AppSidebarHeader`, `CustomComponent`
- Props: `AppSidebarHeaderProps`, `CustomComponentProps`

**Other conventions:**

- Constants: `SCREAMING_SNAKE_CASE` (e.g., `MOBILE_BREAKPOINT`, `SIDEBAR_COOKIE_NAME`)
- Types: PascalCase (e.g., `SidebarState`)

### Exceptions

- **`/components/seed-provider.tsx`**: Must stay separate due to Next.js constraints. Root layout needs `metadata` export (Server Component), but providers need `"use client"` (Client Component). Next.js doesn't allow both in the same file.
- **`/components/provider.tsx`**: Must stay separate due to Next.js constraints. Root layout needs `metadata` export (Server Component), but providers need `"use client"` (Client Component). Next.js doesn't allow both in the same file.
- **`/components/ui/`**: shadcn-installed primitives. Never modify directly.
- **`/components/ai-elements/`**: AI SDK registry components built on top of `/components/ui/`. Never modify directly. To customize, create wrapper components or override styles via Tailwind classes.

## Architecture

Expand All @@ -77,9 +90,8 @@ This project follows a **colocation-first** approach: code lives closest to wher
layout.tsx # Studio shell (sidebar, nav - all inline)
/{feature}/page.tsx # Feature pages (components inline)
/components
/ai-elements # AI SDK components (chat, messages) - DO NOT MODIFY
/ui # shadcn primitives - DO NOT MODIFY
seed-provider.tsx # Root providers (exception - see Code Organization)
provider.tsx # Root providers (exception - see Code Organization)
{name}.tsx # Only shared components (used 2+ places)
/convex # Backend (colocate by domain)
schema.ts # Database schema (source of truth)
Expand All @@ -95,6 +107,10 @@ This project follows a **colocation-first** approach: code lives closest to wher

**Note:** Don't update this section for every new file. It documents _patterns_, not inventory.

## Library APIs

Never assume library APIs from memory. Always check the installed version in `package.json` and read the actual type definitions in `node_modules/{package}/dist/*.d.ts` before using any API. If type definitions are unavailable or insufficient, use the `context7` MCP server to fetch up-to-date documentation.

## Convex Backend

- Schema defined in `convex/schema.ts`
Expand All @@ -108,19 +124,20 @@ This project follows a **colocation-first** approach: code lives closest to wher
- shadcn components use CVA (class-variance-authority) for variants
- Theme variables defined in `app/globals.css` (OKLCh color space)
- Fonts: Inter (UI), JetBrains Mono (code)
- **NEVER modify files in `/components/ui/` or `/components/ai-elements/`** - these are registry-installed components. To customize, create wrapper components or override styles via Tailwind classes.
- **NEVER modify files in `/components/ui/`** - these are shadcn-installed primitives. To customize, create wrapper components or override styles via Tailwind classes.
- Use the `shadcn` MCP server to search for components, view their source/examples, and get install commands before adding or using any shadcn component.

## Authentication

- Middleware in `middleware.ts` protects routes
- Public routes: `/`, `/studio` (login page)
- Protected routes: `/studio/*` (redirects to sign-in if unauthenticated)
- Use Clerk's `<SignedIn>` and `<SignedOut>` components for conditional rendering
- Middleware in `proxy.ts` protects routes: only `/` and `/studio` are public, everything else redirects to `/studio`
- `/studio` shows `<SignedIn>` / `<SignedOut>` conditional UI (login page for unauthenticated users)
- `/studio/*` routes redirect unauthenticated users to `/studio` (not Clerk's default sign-in page)
- Clerk webhooks sync user data to Convex (see Convex Backend)

## State Management

- Uses Zustand for client-side state management
- Stores live in `/stores`
- Each store is a separate file named `{feature}-store.ts` (e.g., `sidebar-store.ts`)
- Use selector hooks for optimized re-renders (e.g., `useSidebarOpen()`)
- Stores live in `/stores` (currently empty - add stores as needed)
- Each store is a separate file named `{feature}-store.ts`
- Stores use default exports: `export default create<State>(...)`
- Server state (database) is managed by Convex, not Zustand
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Seed

AI-powered motion graphics you describe and control. Live controls, multi-format export 🌱
Seed turns natural language into p5.js sketches you can shape with live controls and export 🌱
71 changes: 0 additions & 71 deletions app/api/chat/route.ts

This file was deleted.

Binary file modified app/favicon.ico
Binary file not shown.
53 changes: 0 additions & 53 deletions app/global-error.tsx

This file was deleted.

Loading