| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 21 | 12 | 0% |
| Commands | 3 | 5 | 4 | 25% |
| Section tags | 6 | 2 | 3 | 55% |
What each file covers
Sections
0 shared · 21 only in A · 12 only in B- − React + Vite + shadcn/ui Template - Premium Design System
- − CRITICAL RULES - READ FIRST
- − NEVER CREATE:
- − ALWAYS CREATE:
- − Essential Commands
- − DETAILED GUIDELINES
- − Tech Stack Overview
- − Project Overview
- − Key Architecture Rules
- − Design Principles
- − Project Structure
- − Supabase Integration
- − Quick Start
- − Usage Examples
- − Best Practices
- − Supabase CLI Commands
- − Local development (requires Docker)
- − Type generation
- − Migrations
- − Security Note
- − Important Reminders
- + CLAUDE.md
- + Development Commands
- + Core Development
- + Package Management
- + Architecture & Structure
- + Framework Stack
- + Key Architecture Patterns
- + Design System Integration
- + Configuration Files
- + Environment Variables
- + Testing & Quality
- + Development Patterns & Best Practices
Commands
3 shared · 5 only in A · 4 only in B- − npx supabase start
- − npx supabase stop
- − npx supabase gen types typescript --local > src/integrations/supabase/types.ts
- − npx supabase migration new migration_name
- − npx supabase db push
- + npm run build:dev
- + npm run preview
- + npm install
- + bun install
- npm run dev
- npm run build
- npm run lint
Section tags
6 shared · 2 only in A · 3 only in B- − security
- − do-not
- + setup
- + test
- + agent-behaviour
- build
- lint-format
- code-style
- architecture
- types
- ui
Line diff
chihebnabil/lovable-boilerplate · .github/instructions/global.instructions.md
@@ −1 @@
1---
2applyTo: '**'
3---
4# React + Vite + shadcn/ui Template - Premium Design System
5
6## CRITICAL RULES - READ FIRST
7
8### NEVER CREATE:
9- **Monolithic components** over 300 lines
10- **Copy-pasted code** - extract to reusable functions/hooks
11- **Inline API calls** in components - use service layer
12- **Poor accessibility** - maintain WCAG 2.1 AA contrast (4.5:1 minimum)
13- **Generic designs** - always adapt to target industry/audience
14
15### ALWAYS CREATE:
16- **Focused components** (20-100 lines, single responsibility)
17- **Custom hooks** for reusable logic
18- **Composition patterns** - build complex UI from smaller parts
19- **Shared types** in `lib/types.ts`
20- **Premium designs** with sophisticated animations and visual hierarchy
21
22## Essential Commands
23```bash
24npm run dev # Start development server (port 8080)
25npm run build # Production build
26npm run lint # Run ESLint - MUST pass before shipping
27```
28
29## DETAILED GUIDELINES
30
31This project uses a modular instruction system. For comprehensive guidance, see:
32
33- **[Architecture Guidelines](./architecture.instructions.md)** - Component organization, reusability patterns, custom hooks, and code structure
34- **[Design Guidelines](./design.instructions.md)** - Visual design system, industry-specific styling, accessibility, and premium UI patterns
35- **[Development Workflow](./development.instructions.md)** - Commands, configuration, testing, and quality standards
36- **[Component Guidelines](./components.instructions.md)** - UI, common, and feature component patterns
37- **[Hooks Guidelines](./hooks.instructions.md)** - Custom hook patterns for data, forms, and UI state
38- **[Page Guidelines](./pages.instructions.md)** - Page composition and organization rules
39- **[Library Guidelines](./lib.instructions.md)** - Utilities, types, constants, and service layer patterns
40- **[Quality Checklist](./quality.instructions.md)** - Code quality, design standards, and never-ship rules
41
42## Tech Stack Overview
43
44### Project Overview
45- **Framework**: React 18.3.1 with TypeScript
46- **Build Tool**: Vite 5.4.1
47- **UI Components**: shadcn/ui (Radix UI primitives)
48- **Styling**: Tailwind CSS with custom theme
49- **Routing**: React Router DOM v6
50- **State Management**: TanStack Query (React Query)
51- **Backend**: Supabase (Authentication, Database, Real-time)
52- **Form Handling**: React Hook Form with Zod validation
53- **Package Manager**: npm
54
55### Essential Commands
56```bash
57npm run dev # Start development server (port 8080)
58npm run build # Production build
59npm run lint # Run ESLint
60```
61
62### Key Architecture Rules
631. **No monolithic components** - Keep components under 300 lines
642. **Extract reusable logic** to custom hooks
653. **Use composition patterns** - build complex UI from smaller components
664. **Separate concerns** - UI, business logic, and API calls in different layers
675. **Shared types** - define interfaces once in `lib/types.ts`
68
69### Design Principles
701. **Industry-appropriate design** - adapt colors and style to target audience
712. **Accessibility first** - maintain WCAG 2.1 AA contrast standards
723. **Premium feel** - sophisticated animations and visual hierarchy
734. **Mobile-first** responsive design approach
74
75### Project Structure
76```
77src/
78├── components/
79│ ├── ui/ # shadcn/ui components
80│ ├── common/ # Reusable components
81│ ├── forms/ # Form components
82│ └── features/ # Feature-specific components
83├── hooks/ # Custom React hooks
84├── integrations/
85│ └── supabase/ # Supabase client and types
86│ ├── client.ts # Supabase client instance
87│ └── types.ts # Database type definitions
88├── lib/
89│ ├── utils.ts # Utilities (includes cn function)
90│ ├── types.ts # Shared TypeScript types
91│ ├── constants.ts # App constants
92│ └── validations/ # Zod schemas
93├── pages/ # Route components (composition only)
94├── services/ # API calls
95└── context/ # React context providers
96
97supabase/ # Supabase local development
98├── config.toml # Supabase CLI configuration
99└── migrations/ # Database migrations (auto-generated)
100```
101
102## Supabase Integration
103
104### Quick Start
1051. Create a Supabase project at [supabase.com](https://supabase.com)
1062. Copy `.env.example` to `.env` and add your credentials:
107 ```bash
108 VITE_SUPABASE_URL=https://your-project.supabase.co
109 VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key
110 ```
1113. Import and use the Supabase client:
112 ```typescript
113 import { supabase } from "@/integrations/supabase/client";
114 ```
115
116### Usage Examples
117
118**Data Fetching with TanStack Query:**
119```typescript
120import { useQuery } from "@tanstack/react-query";
121import { supabase } from "@/integrations/supabase/client";
122
123export const usePosts = () => {
124 return useQuery({
125 queryKey: ['posts'],
126 queryFn: async () => {
127 const { data, error } = await supabase
128 .from('posts')
129 .select('*')
130 .eq('published', true);
131
132 if (error) throw error;
133 return data;
134 }
135 });
136};
137```
138
139**Mutations:**
140```typescript
141import { useMutation, useQueryClient } from "@tanstack/react-query";
142import { supabase } from "@/integrations/supabase/client";
143
144export const useCreatePost = () => {
145 const queryClient = useQueryClient();
146
147 return useMutation({
148 mutationFn: async (newPost) => {
149 const { data, error } = await supabase
150 .from('posts')
151 .insert(newPost)
152 .select()
153 .single();
154
155 if (error) throw error;
156 return data;
157 },
158 onSuccess: () => {
159 queryClient.invalidateQueries({ queryKey: ['posts'] });
160 }
161 });
162};
163```
164
165**Authentication:**
166```typescript
167// Sign up
168const { data, error } = await supabase.auth.signUp({
169 email: 'user@example.com',
170 password: 'securepassword'
171});
172
173// Sign in
174const { data, error } = await supabase.auth.signInWithPassword({
175 email: 'user@example.com',
176 password: 'securepassword'
177});
178
179// Get current user
180const { data: { user } } = await supabase.auth.getUser();
181```
182
183**Type Safety:**
184```typescript
185import type { Tables, TablesInsert } from "@/integrations/supabase/types";
186
187// Use generated types
188type Post = Tables<'posts'>;
189type NewPost = TablesInsert<'posts'>;
190```
191
192### Best Practices
193- Always use TanStack Query for data fetching and mutations
194- Handle errors gracefully with try-catch or error boundaries
195- Use TypeScript types from `@/integrations/supabase/types`
196- Enable Row Level Security (RLS) on your Supabase tables
197- Never expose sensitive credentials in environment variables
198
199### Supabase CLI Commands
200```bash
201# Local development (requires Docker)
202npx supabase start # Start local Supabase
203npx supabase stop # Stop local Supabase
204
205# Type generation
206npx supabase gen types typescript --local > src/integrations/supabase/types.ts
207
208# Migrations
209npx supabase migration new migration_name # Create new migration
210npx supabase db push # Push migrations to remote
211```
212
213## Security Note
214This is a **client-side application**. Only use `VITE_` environment variables for public configuration. Never expose sensitive data like API secrets.
215
216## Important Reminders
217- Do what has been asked; nothing more, nothing less
218- NEVER create files unless absolutely necessary
219- ALWAYS prefer editing existing files over creating new ones
220- NEVER proactively create documentation files unless explicitly requested
chihebnabil/lovable-boilerplate · CLAUDE.md
@@ +1 @@
1# CLAUDE.md
2
3This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
5## Development Commands
6
7### Core Development
8- `npm run dev` - Start development server on port 8080
9- `npm run build` - Create production build
10- `npm run build:dev` - Create development build
11- `npm run lint` - Run ESLint linter
12- `npm run preview` - Preview production build locally
13
14### Package Management
15- `npm install` - Install dependencies (or use `bun install` for faster installs)
16
17## Architecture & Structure
18
19### Framework Stack
20- **React 18.3.1** with TypeScript for UI
21- **Vite 5.4.1** as build tool with SWC for fast compilation
22- **shadcn/ui** component library built on Radix UI primitives
23- **Tailwind CSS 3.4.11** for styling with custom design system
24- **React Router DOM v6** for client-side routing
25- **TanStack Query** for server state management
26- **React Hook Form + Zod** for form handling and validation
27
28### Key Architecture Patterns
29
30#### Component Organization & Structure
31- `src/components/ui/` - Pre-built shadcn/ui components (40+ available, READ-ONLY)
32- `src/components/common/` - Reusable components (20-100 lines each)
33- `src/components/forms/` - Form-specific components
34- `src/components/features/` - Feature-specific components
35- `src/pages/` - Route-level page components
36- `src/hooks/` - Custom React hooks including `use-mobile.tsx` and `use-toast.ts`
37- `src/lib/utils.ts` - Utility functions with Tailwind class merging via `cn()` function
38- `src/lib/types.ts` - Shared TypeScript types and interfaces
39- `src/lib/constants.ts` - Application constants
40- `src/lib/validations/` - Zod validation schemas
41
42#### Critical Architecture Rules
43- **Component Size Limit**: Never exceed 300 lines per component
44- **Composition Over Complexity**: Build complex UI from smaller, focused components
45- **Single Responsibility**: Each component should have one clear purpose
46- **Extract Reusable Logic**: Use custom hooks instead of duplicating code
47- **Service Layer Pattern**: No inline API calls in components - use service layer in `src/lib/`
48
49#### Import Aliases (configured in vite.config.ts)
50- `@/` maps to `./src/`
51- `@/components` for components
52- `@/lib` for utilities
53- `@/hooks` for custom hooks
54
55#### Routing Structure
56Routes are defined in `src/App.tsx`. Add new routes above the catch-all `*` route:
57```tsx
58<Routes>
59 <Route path="/" element={<Index />} />
60 {/* ADD NEW ROUTES HERE */}
61 <Route path="*" element={<NotFound />} />
62</Routes>
63```
64
65### Design System Integration
66
67This project uses a sophisticated design system based on comprehensive instructions in `.github/instructions/` and `.cursor/rules/`. Key principles:
68
69#### shadcn/ui Components
70Over 40 pre-built components available in `src/components/ui/`:
71- **Layout**: `card`, `separator`, `sheet`, `sidebar`, `tabs`, `accordion`
72- **Forms**: `button`, `input`, `form`, `select`, `checkbox`, `radio-group`
73- **Overlays**: `dialog`, `alert-dialog`, `drawer`, `popover`, `tooltip`
74- **Data Display**: `table`, `badge`, `avatar`, `chart`, `carousel`
75
76#### Styling Conventions & Quality Standards
77- Use Tailwind classes following the project's design system
78- Generous spacing: `py-16 lg:py-24` for sections
79- Consistent rhythm: `space-y-4 lg:space-y-6` for content
80- Mobile-first responsive design approach
81- Premium, sophisticated visual hierarchy with purposeful color psychology
82- **Accessibility**: Maintain WCAG 2.1 AA contrast ratios (4.5:1 minimum)
83- **Never ship** without running `npm run lint` - must pass without errors
84- **Industry-specific designs**: Adapt visual identity, emotional tone, and color psychology to target audience
85- **Design Philosophy**: Create unique, custom-crafted interfaces that feel premium and engaging
86- **Color Strategy**: Use colors intentionally to evoke the right emotions and enhance user experience
87
88### Configuration Files
89
90- `vite.config.ts` - Vite configuration with path aliases and port 8080
91- `components.json` - shadcn/ui configuration with default style and slate base color
92- `tailwind.config.ts` - Tailwind configuration with dark mode support
93- `tsconfig.json` - TypeScript configuration with strict mode
94
95### Environment Variables
96⚠️ **Security**: This is a client-side application. Only use `VITE_` prefixed environment variables for public configuration. Never expose sensitive data like API secrets.
97
98### Testing & Quality
99- ESLint configured with React and TypeScript rules
100- No test framework currently configured - determine testing approach from codebase if tests are needed
101
102### Development Patterns & Best Practices
103
104#### Code Organization
105- Use TypeScript interfaces for type safety - define shared types in `src/lib/types.ts`
106- Implement responsive design mobile-first
107- Follow React Hook Form patterns with Zod validation for forms
108- Use TanStack Query for API state management
109- Import UI components from `@/components/ui/`
110- Use the toast system via `use-toast` hook for notifications
111
112#### Cursor Rules Integration
113This project includes comprehensive Cursor rules in `.cursor/rules/` that auto-apply based on file context:
114- **Core Rules** (`core.mdc`) - Always active architecture and quality rules
115- **Component Rules** (`components.mdc`) - Auto-loads when editing `src/components/**`
116- **Design Rules** (`design.mdc`) - Auto-loads when editing UI/styling files
117- **Form Rules** (`forms.mdc`) - Auto-loads when editing form components
118- **Hook Rules** (`hooks.mdc`) - Auto-loads when editing `src/hooks/**`
119- **Service Rules** (`services.mdc`) - Auto-loads when editing `src/lib/**`
120
121Reference with `@rule-name` in prompts (e.g., `@quality` for quality checklist)
@@ −1 +1 @@
1−---
2−applyTo: '**'
3−---
4−# React + Vite + shadcn/ui Template - Premium Design System
1+# CLAUDE.md
52
6−## CRITICAL RULES - READ FIRST
3+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
74
8−### NEVER CREATE:
9−- **Monolithic components** over 300 lines
10−- **Copy-pasted code** - extract to reusable functions/hooks
11−- **Inline API calls** in components - use service layer
12−- **Poor accessibility** - maintain WCAG 2.1 AA contrast (4.5:1 minimum)
13−- **Generic designs** - always adapt to target industry/audience
5+## Development Commands
146
15−### ALWAYS CREATE:
16−- **Focused components** (20-100 lines, single responsibility)
17−- **Custom hooks** for reusable logic
18−- **Composition patterns** - build complex UI from smaller parts
19−- **Shared types** in `lib/types.ts`
20−- **Premium designs** with sophisticated animations and visual hierarchy
7+### Core Development
8+- `npm run dev` - Start development server on port 8080
9+- `npm run build` - Create production build
10+- `npm run build:dev` - Create development build
11+- `npm run lint` - Run ESLint linter
12+- `npm run preview` - Preview production build locally
2113
22−## Essential Commands
23−```bash
24−npm run dev # Start development server (port 8080)
25−npm run build # Production build
26−npm run lint # Run ESLint - MUST pass before shipping
27−```
14+### Package Management
15+- `npm install` - Install dependencies (or use `bun install` for faster installs)
2816
29−## DETAILED GUIDELINES
17+## Architecture & Structure
3018
31−This project uses a modular instruction system. For comprehensive guidance, see:
19+### Framework Stack
20+- **React 18.3.1** with TypeScript for UI
21+- **Vite 5.4.1** as build tool with SWC for fast compilation
22+- **shadcn/ui** component library built on Radix UI primitives
23+- **Tailwind CSS 3.4.11** for styling with custom design system
24+- **React Router DOM v6** for client-side routing
25+- **TanStack Query** for server state management
26+- **React Hook Form + Zod** for form handling and validation
3227
33−- **[Architecture Guidelines](./architecture.instructions.md)** - Component organization, reusability patterns, custom hooks, and code structure
34−- **[Design Guidelines](./design.instructions.md)** - Visual design system, industry-specific styling, accessibility, and premium UI patterns
35−- **[Development Workflow](./development.instructions.md)** - Commands, configuration, testing, and quality standards
36−- **[Component Guidelines](./components.instructions.md)** - UI, common, and feature component patterns
37−- **[Hooks Guidelines](./hooks.instructions.md)** - Custom hook patterns for data, forms, and UI state
38−- **[Page Guidelines](./pages.instructions.md)** - Page composition and organization rules
39−- **[Library Guidelines](./lib.instructions.md)** - Utilities, types, constants, and service layer patterns
40−- **[Quality Checklist](./quality.instructions.md)** - Code quality, design standards, and never-ship rules
28+### Key Architecture Patterns
4129
42−## Tech Stack Overview
30+#### Component Organization & Structure
31+- `src/components/ui/` - Pre-built shadcn/ui components (40+ available, READ-ONLY)
32+- `src/components/common/` - Reusable components (20-100 lines each)
33+- `src/components/forms/` - Form-specific components
34+- `src/components/features/` - Feature-specific components
35+- `src/pages/` - Route-level page components
36+- `src/hooks/` - Custom React hooks including `use-mobile.tsx` and `use-toast.ts`
37+- `src/lib/utils.ts` - Utility functions with Tailwind class merging via `cn()` function
38+- `src/lib/types.ts` - Shared TypeScript types and interfaces
39+- `src/lib/constants.ts` - Application constants
40+- `src/lib/validations/` - Zod validation schemas
4341
44−### Project Overview
45−- **Framework**: React 18.3.1 with TypeScript
46−- **Build Tool**: Vite 5.4.1
47−- **UI Components**: shadcn/ui (Radix UI primitives)
48−- **Styling**: Tailwind CSS with custom theme
49−- **Routing**: React Router DOM v6
50−- **State Management**: TanStack Query (React Query)
51−- **Backend**: Supabase (Authentication, Database, Real-time)
52−- **Form Handling**: React Hook Form with Zod validation
53−- **Package Manager**: npm
42+#### Critical Architecture Rules
43+- **Component Size Limit**: Never exceed 300 lines per component
44+- **Composition Over Complexity**: Build complex UI from smaller, focused components
45+- **Single Responsibility**: Each component should have one clear purpose
46+- **Extract Reusable Logic**: Use custom hooks instead of duplicating code
47+- **Service Layer Pattern**: No inline API calls in components - use service layer in `src/lib/`
5448
55−### Essential Commands
56−```bash
57−npm run dev # Start development server (port 8080)
58−npm run build # Production build
59−npm run lint # Run ESLint
60−```
49+#### Import Aliases (configured in vite.config.ts)
50+- `@/` maps to `./src/`
51+- `@/components` for components
52+- `@/lib` for utilities
53+- `@/hooks` for custom hooks
6154
62−### Key Architecture Rules
63−1. **No monolithic components** - Keep components under 300 lines
64−2. **Extract reusable logic** to custom hooks
65−3. **Use composition patterns** - build complex UI from smaller components
66−4. **Separate concerns** - UI, business logic, and API calls in different layers
67−5. **Shared types** - define interfaces once in `lib/types.ts`
68−
69−### Design Principles
70−1. **Industry-appropriate design** - adapt colors and style to target audience
71−2. **Accessibility first** - maintain WCAG 2.1 AA contrast standards
72−3. **Premium feel** - sophisticated animations and visual hierarchy
73−4. **Mobile-first** responsive design approach
74−
75−### Project Structure
55+#### Routing Structure
56+Routes are defined in `src/App.tsx`. Add new routes above the catch-all `*` route:
57+```tsx
58+<Routes>
59+ <Route path="/" element={<Index />} />
60+ {/* ADD NEW ROUTES HERE */}
61+ <Route path="*" element={<NotFound />} />
62+</Routes>
7663 ```
77−src/
78−├── components/
79−│ ├── ui/ # shadcn/ui components
80−│ ├── common/ # Reusable components
81−│ ├── forms/ # Form components
82−│ └── features/ # Feature-specific components
83−├── hooks/ # Custom React hooks
84−├── integrations/
85−│ └── supabase/ # Supabase client and types
86−│ ├── client.ts # Supabase client instance
87−│ └── types.ts # Database type definitions
88−├── lib/
89−│ ├── utils.ts # Utilities (includes cn function)
90−│ ├── types.ts # Shared TypeScript types
91−│ ├── constants.ts # App constants
92−│ └── validations/ # Zod schemas
93−├── pages/ # Route components (composition only)
94−├── services/ # API calls
95−└── context/ # React context providers
9664
97−supabase/ # Supabase local development
98−├── config.toml # Supabase CLI configuration
99−└── migrations/ # Database migrations (auto-generated)
100−```
65+### Design System Integration
10166
102−## Supabase Integration
67+This project uses a sophisticated design system based on comprehensive instructions in `.github/instructions/` and `.cursor/rules/`. Key principles:
10368
104−### Quick Start
105−1. Create a Supabase project at [supabase.com](https://supabase.com)
106−2. Copy `.env.example` to `.env` and add your credentials:
107− ```bash
108− VITE_SUPABASE_URL=https://your-project.supabase.co
109− VITE_SUPABASE_PUBLISHABLE_KEY=your-anon-key
110− ```
111−3. Import and use the Supabase client:
112− ```typescript
113− import { supabase } from "@/integrations/supabase/client";
114− ```
69+#### shadcn/ui Components
70+Over 40 pre-built components available in `src/components/ui/`:
71+- **Layout**: `card`, `separator`, `sheet`, `sidebar`, `tabs`, `accordion`
72+- **Forms**: `button`, `input`, `form`, `select`, `checkbox`, `radio-group`
73+- **Overlays**: `dialog`, `alert-dialog`, `drawer`, `popover`, `tooltip`
74+- **Data Display**: `table`, `badge`, `avatar`, `chart`, `carousel`
11575
116−### Usage Examples
76+#### Styling Conventions & Quality Standards
77+- Use Tailwind classes following the project's design system
78+- Generous spacing: `py-16 lg:py-24` for sections
79+- Consistent rhythm: `space-y-4 lg:space-y-6` for content
80+- Mobile-first responsive design approach
81+- Premium, sophisticated visual hierarchy with purposeful color psychology
82+- **Accessibility**: Maintain WCAG 2.1 AA contrast ratios (4.5:1 minimum)
83+- **Never ship** without running `npm run lint` - must pass without errors
84+- **Industry-specific designs**: Adapt visual identity, emotional tone, and color psychology to target audience
85+- **Design Philosophy**: Create unique, custom-crafted interfaces that feel premium and engaging
86+- **Color Strategy**: Use colors intentionally to evoke the right emotions and enhance user experience
11787
118−**Data Fetching with TanStack Query:**
119−```typescript
120−import { useQuery } from "@tanstack/react-query";
121−import { supabase } from "@/integrations/supabase/client";
88+### Configuration Files
12289
123−export const usePosts = () => {
124− return useQuery({
125− queryKey: ['posts'],
126− queryFn: async () => {
127− const { data, error } = await supabase
128− .from('posts')
129− .select('*')
130− .eq('published', true);
131−
132− if (error) throw error;
133− return data;
134− }
135− });
136−};
137−```
90+- `vite.config.ts` - Vite configuration with path aliases and port 8080
91+- `components.json` - shadcn/ui configuration with default style and slate base color
92+- `tailwind.config.ts` - Tailwind configuration with dark mode support
93+- `tsconfig.json` - TypeScript configuration with strict mode
13894
139−**Mutations:**
140−```typescript
141−import { useMutation, useQueryClient } from "@tanstack/react-query";
142−import { supabase } from "@/integrations/supabase/client";
95+### Environment Variables
96+⚠️ **Security**: This is a client-side application. Only use `VITE_` prefixed environment variables for public configuration. Never expose sensitive data like API secrets.
14397
144−export const useCreatePost = () => {
145− const queryClient = useQueryClient();
146−
147− return useMutation({
148− mutationFn: async (newPost) => {
149− const { data, error } = await supabase
150− .from('posts')
151− .insert(newPost)
152− .select()
153− .single();
154−
155− if (error) throw error;
156− return data;
157− },
158− onSuccess: () => {
159− queryClient.invalidateQueries({ queryKey: ['posts'] });
160− }
161− });
162−};
163−```
98+### Testing & Quality
99+- ESLint configured with React and TypeScript rules
100+- No test framework currently configured - determine testing approach from codebase if tests are needed
164101
165−**Authentication:**
166−```typescript
167−// Sign up
168−const { data, error } = await supabase.auth.signUp({
169− email: 'user@example.com',
170− password: 'securepassword'
171−});
102+### Development Patterns & Best Practices
172103
173−// Sign in
174−const { data, error } = await supabase.auth.signInWithPassword({
175− email: 'user@example.com',
176− password: 'securepassword'
177−});
104+#### Code Organization
105+- Use TypeScript interfaces for type safety - define shared types in `src/lib/types.ts`
106+- Implement responsive design mobile-first
107+- Follow React Hook Form patterns with Zod validation for forms
108+- Use TanStack Query for API state management
109+- Import UI components from `@/components/ui/`
110+- Use the toast system via `use-toast` hook for notifications
178111
179−// Get current user
180−const { data: { user } } = await supabase.auth.getUser();
181−```
112+#### Cursor Rules Integration
113+This project includes comprehensive Cursor rules in `.cursor/rules/` that auto-apply based on file context:
114+- **Core Rules** (`core.mdc`) - Always active architecture and quality rules
115+- **Component Rules** (`components.mdc`) - Auto-loads when editing `src/components/**`
116+- **Design Rules** (`design.mdc`) - Auto-loads when editing UI/styling files
117+- **Form Rules** (`forms.mdc`) - Auto-loads when editing form components
118+- **Hook Rules** (`hooks.mdc`) - Auto-loads when editing `src/hooks/**`
119+- **Service Rules** (`services.mdc`) - Auto-loads when editing `src/lib/**`
182120
183−**Type Safety:**
184−```typescript
185−import type { Tables, TablesInsert } from "@/integrations/supabase/types";
186−
187−// Use generated types
188−type Post = Tables<'posts'>;
189−type NewPost = TablesInsert<'posts'>;
190−```
191−
192−### Best Practices
193−- Always use TanStack Query for data fetching and mutations
194−- Handle errors gracefully with try-catch or error boundaries
195−- Use TypeScript types from `@/integrations/supabase/types`
196−- Enable Row Level Security (RLS) on your Supabase tables
197−- Never expose sensitive credentials in environment variables
198−
199−### Supabase CLI Commands
200−```bash
201−# Local development (requires Docker)
202−npx supabase start # Start local Supabase
203−npx supabase stop # Stop local Supabase
204−
205−# Type generation
206−npx supabase gen types typescript --local > src/integrations/supabase/types.ts
207−
208−# Migrations
209−npx supabase migration new migration_name # Create new migration
210−npx supabase db push # Push migrations to remote
211−```
212−
213−## Security Note
214−This is a **client-side application**. Only use `VITE_` environment variables for public configuration. Never expose sensitive data like API secrets.
215−
216−## Important Reminders
217−- Do what has been asked; nothing more, nothing less
218−- NEVER create files unless absolutely necessary
219−- ALWAYS prefer editing existing files over creating new ones
220−- NEVER proactively create documentation files unless explicitly requested
121+Reference with `@rule-name` in prompts (e.g., `@quality` for quality checklist)
