Create the file ~/.claude/CLAUDE.md with this exact content. Create the ~/.claude/ directory if it doesn't exist.

# Global Developer Profile — CA Developer

## Who I Am
I am a Chartered Accountant building software for finance professionals and their clients in India. My primary stack is React with TypeScript, Supabase as the backend, and Tailwind CSS for styling.

## My Core Rules (Never Break These)

| Rule | Detail |
|------|--------|
| No TypeScript `any` | Use `unknown` or proper interfaces — no exceptions |
| Functional React only | Functional components + hooks. No class components ever. |
| RLS on every table | Every Supabase table with user data must have Row Level Security enabled |
| Soft-delete only | Never hard-delete rows — update `is_deleted = true` instead |
| Integers for money | Store amounts as paise (₹1 = 100 paise). Never floats or decimals. |
| IST for all dates | Display in IST (UTC+5:30), store in UTC |
| Auto-commit every turn | Commit Claude-touched files at the end of every turn. Push is my decision. |
| No .env in git | Credentials live in .env files (gitignored). Never committed. |
| No new libraries | Never add a dependency without asking me first |
| No trailing summaries | Don't recap what was just done — I can read the diff |

## Tech Stack Defaults
| Layer | Technology |
|-------|-----------|
| Frontend | React (functional + hooks), TypeScript strict mode |
| Framework | Next.js 15 (App Router) or Vite — check project CLAUDE.md |
| Styling | Tailwind CSS |
| Backend | Supabase (database, auth, storage, edge functions) |
| Server State | TanStack Query (React Query) — always use this, never useEffect for data |
| Global State | Zustand |
| Forms | React Hook Form + Zod |
| Icons | lucide-react |
| Date formatting | Check project CLAUDE.md — project-specific |

## Skill Routing
Before starting any significant task, check this table and load the matching skill file:

| Task type | Trigger keywords | Skill to load |
|-----------|----------------|--------------|
| Building something new | build, add, create, implement, new page, new form | new-feature |
| Fixing a problem | fix, bug, broken, error, not working, crash, fails | bug-fix |
| Database changes | database, table, schema, migration, RLS, column, index | supabase-migration |
| Pre-release check | before release, audit, pre-launch, check everything, go live | pre-launch-audit |

Always announce the skill you are using before starting: "Using [skill] for this task."

## Git Rules
- Commit after every meaningful unit of work — do not batch unrelated changes
- Commit messages: imperative mood ("add invoice form" not "added invoice form")
- Stage specific files by name — never `git add -A` or `git add .`
- Auto-commit every turn that touches files in a Git project
- DO NOT push automatically — pushing is always my decision

## Indian Locale Standards
- Phone validation: `/^[6-9][0-9]{9}$/` (10 digits, starts 6-9)
- Currency: store as paise (integer), display as ₹ using `new Intl.NumberFormat('en-IN').format(paise / 100)`
- Dates: IST for display, UTC for storage — never `toISOString().split("T")[0]` (returns wrong date for IST users)
- GSTIN format: 15 characters — 2-digit state code + 10-char PAN + 1 digit + Z + 1 check digit

## What I Do NOT Want
- No trailing summaries after completing a task — I can read the diff
- No over-explaining basic concepts
- No emojis unless I explicitly ask
- No walls of boilerplate without flagging it first
- For small decisions — make a reasonable choice and proceed, do not ask
- Always give a brief technical assessment before any significant task

Create the file ~/.claude/skills/new-feature.md with this exact content. Create the directory if it doesn't exist.

# New Feature Skill

## When to Use This Skill
Trigger keywords: build, add, create, implement, new page, new form, new component, new dashboard

## Before Writing Any Code

1. Extract the requirements as a numbered list
2. Confirm with the user: "Here is my understanding: [list]. Is this correct?"
3. Check which database tables already exist (read database.types.ts or the project CLAUDE.md)
4. Identify which existing hooks, components, or utilities can be reused
5. Identify what, if anything, needs to change in the database

## Building Sequence (Always in This Order)

1. **Database first** — if new tables or columns are needed, apply the migration before any React code
2. **Custom hook** — create the React Query hook in `src/hooks/use[FeatureName].ts`
   - The hook handles all Supabase queries and mutations
   - Components never call Supabase directly — always via the hook
3. **TypeScript types** — ensure all data shapes are typed properly (no `any`)
4. **Zod schema** — create the validation schema before building the form UI
5. **Component** — build the UI last, using the hook and schema you already created
6. **Three states** — every component that shows data must handle:
   - Loading: show a skeleton (not a spinner for content areas)
   - Error: show a user-friendly message + a retry option
   - Empty: show a helpful prompt (e.g., "No invoices yet. Create your first one.")

## Quality Checklist (Run Before Saying Done)

- [ ] TypeScript: no `any` in any file touched
- [ ] RLS: if a new table was created, it has RLS enabled and at least one policy per user role
- [ ] Loading state: visible when data is fetching
- [ ] Error state: friendly message shown when query fails
- [ ] Empty state: helpful prompt shown when no data
- [ ] Zod validation: all user inputs validated, errors shown inline below each field
- [ ] No direct Supabase calls in components — all via custom hooks in src/hooks/
- [ ] Responsive: works on mobile (375px) and desktop (1366px)
- [ ] Committed: changes committed with a descriptive message

## Anti-Patterns (Never Do These)

- Never call Supabase directly inside a React component — always via a hook
- Never use the `any` type — use `unknown` or define proper interfaces
- Never hard-delete data — soft-delete: `{ is_deleted: true }` update instead of `.delete()`
- Never expose the Supabase service role key in frontend code — edge functions only
- Never introduce a new library without asking the user first
- Never store monetary amounts as decimal/float — always integers (paise)
- Never use `useEffect` for data fetching — always use React Query's `useQuery`

## After the Feature Is Built

1. Update the project CLAUDE.md with any new tables, routes, or architectural decisions made
2. Mention the commit SHA in your response: "Committed `abc1234` to `development` locally."

Create the file ~/.claude/skills/bug-fix.md with this exact content.

# Bug Fix Skill

## When to Use This Skill
Trigger keywords: fix, bug, broken, error, not working, crash, fails, wrong behavior, unexpected

## Before Investigating

Define precisely what is happening:
1. **Expected behavior:** What SHOULD happen?
2. **Actual behavior:** What IS happening instead?
3. **Reproduction steps:** Exact steps to see the bug
4. **Environment:** Development only, or also on the live site?

## Investigation Sequence (Always in This Order)

1. **Read the component** where the bug appears
   - Check the hook it calls
   - Look for `as any` casts hiding a type mismatch
   - Check the TypeScript types

2. **Check the data layer** — read the hook and the Supabase query
   - Is the RLS policy blocking data that should be visible?
   - Is `.single()` used when `.maybeSingle()` should be? (`.single()` throws if no row found)
   - Is the query selecting the right columns?

3. **Check the React Query cache**
   - Is the cache key correct?
   - Is the cache being invalidated after a mutation?
   - Is the stale time too long (serving old data)?

4. **Check recent git changes** — run `git log --oneline -10`
   - Did something break after a recent commit?
   - Did a migration rename a column?

5. **Check the browser console** (DevTools → Console tab)
   - Red error messages
   - Network tab: failed API requests (shown in red)
   - Any Supabase authentication errors

## Root Cause vs Symptom

Always fix the root cause, not the symptom.

| Symptom | Common Root Cause |
|---------|------------------|
| Data not showing up | RLS policy blocking the user's role |
| Form not submitting | Zod validation failing silently |
| Old data after edit | React Query cache not invalidated after mutation |
| TypeScript error on data?.field | Return type from Supabase not matching defined interface |
| Page crashes on load | `.single()` throwing because no matching row exists |
| Auth state wrong | Race condition in auth initialization |

## Quality Checklist

- [ ] Root cause identified — not just the symptom
- [ ] Fix applied to the root cause
- [ ] Tested in the actual browser with real test account data
- [ ] Checked: could the same bug exist elsewhere in the codebase?
- [ ] No new `any` types introduced to work around the bug
- [ ] No `@ts-ignore` added to silence TypeScript

## Anti-Patterns (Never Do These)

- Never add `as any` to make TypeScript errors disappear — fix the type
- Never add `// @ts-ignore` — this hides real problems
- Never fix the symptom without finding the root cause — the bug will return
- Never use an empty catch block: `catch (e) { }` — always at minimum log the error
- Never delete data to "reset" a broken state — investigate what caused the state

## Bug Report Format

After fixing, always report:
1. **Root cause:** [one sentence — what was actually wrong]
2. **What was changed:** [file(s) and what changed]
3. **How to verify:** [exact steps to confirm the fix]
4. **Same bug elsewhere?:** [yes/no, and where if yes]

Create the file ~/.claude/skills/supabase-migration.md with this exact content.

# Supabase Migration Skill

## When to Use This Skill
Trigger keywords: database, table, schema, migration, RLS, RLS policy, column, add column, foreign key, index, trigger

## Before Writing Any SQL

Answer these five questions first:
1. What data are we storing? (entity name, attributes, data types)
2. Who should be able to READ this data? (which user roles, or public?)
3. Who should be able to WRITE this data? (only owner, admins, or anyone?)
4. How does it connect to existing tables? (foreign keys to profiles, users, etc.)
5. Will this break any existing queries? (check hooks that query affected tables)

## Migration File Structure

Every migration is a SQL file in `supabase/migrations/` with a timestamp prefix:

File naming: `YYYYMMDDHHMMSS_description_in_snake_case.sql`

Example: `20260608090000_create_invoices_table.sql`

## What Every Migration Must Include

```sql
-- 1. Create the table
create table if not exists invoices (
  id uuid primary key default gen_random_uuid(),
  created_at timestamptz default now(),
  updated_at timestamptz default now(),
  user_id uuid references auth.users(id) on delete cascade not null,

  -- Your domain-specific columns
  amount_paise integer not null check (amount_paise >= 0),
  client_name text not null,
  status text not null default 'draft',
  notes text,

  -- ALWAYS include this for soft-delete
  is_deleted boolean not null default false
);

-- 2. Enable Row Level Security (ALWAYS — no exceptions)
alter table invoices enable row level security;

-- 3. RLS Policies — at minimum one per operation per role

-- Users can read only their own invoices (not deleted)
create policy "Users can read own invoices"
  on invoices for select
  using (auth.uid() = user_id and not is_deleted);

-- Users can create invoices for themselves only
create policy "Users can create own invoices"
  on invoices for insert
  with check (auth.uid() = user_id);

-- Users can update their own invoices only
create policy "Users can update own invoices"
  on invoices for update
  using (auth.uid() = user_id);

-- Soft-delete (update is_deleted = true) is covered by the update policy
-- Never create a DELETE policy — we never hard-delete

---

## Prompt 5 — Install the Pre-Launch Audit Skill

This creates the checklist Claude runs before you share your app with real users.

---

**PASTE THIS INTO CLAUDE CODE:**

# 1a. Service role key in frontend code (CRITICAL if found)
grep -r "service_role" src/ --include="*.ts" --include="*.tsx"
 
# 1b. Hardcoded API keys or secrets (CRITICAL if found)
grep -rE "(sk_live|sk_test|SUPABASE_SERVICE|SECRET_KEY)" src/ --include="*.ts" --include="*.tsx"
 
# 1c. .env protection (CRITICAL if .env is not in .gitignore)
cat .gitignore | grep -i ".env"
 
# 1d. TypeScript any (Important)
grep -r ": any" src/ --include="*.ts" --include="*.tsx"

# Console.log in production code (Important)
grep -r "console\.log\|console\.error\|console\.warn" src/ --include="*.ts" --include="*.tsx"
 
# Empty catch blocks (Important)
grep -rA2 "catch" src/ --include="*.ts" --include="*.tsx" | grep -B1 "{ }"
 
# TypeScript build clean (Critical)
npm run build

npm run build

---

## Prompt 6 — Create Your Project CLAUDE.md

**Run this prompt from inside your project folder.** This creates the project-level CLAUDE.md. After Claude creates it, you will fill in the sections marked with `[brackets]`.

---

**PASTE THIS INTO CLAUDE CODE:**

---

After Claude creates the file, open it in VS Code and fill in all the `[bracket]` sections. The most important one is the **Supabase project ref** — without it, Claude cannot run database operations for you.

---

## After Running All Six Prompts

You now have:

| File created | What it does |
|-------------|-------------|
| `~/.claude/CLAUDE.md` | Your universal developer profile — applies to every project |
| `~/.claude/skills/new-feature.md` | How Claude builds new features in your projects |
| `~/.claude/skills/bug-fix.md` | How Claude investigates and fixes bugs |
| `~/.claude/skills/supabase-migration.md` | How Claude handles database changes |
| `~/.claude/skills/pre-launch-audit.md` | How Claude checks before going live |
| `./CLAUDE.md` | This project's specific context (fill in the brackets) |

**Verify the setup by asking Claude:**

Claude should list the four routing rules (new-feature, bug-fix, supabase-migration, pre-launch-audit). If it does, the setup is working.

---

## Your First Real Task

Once the setup is complete, start your first feature with a prompt that gives Claude the full picture:

Claude will announce the skill it's using, extract a numbered requirements list, confirm with you, and then build in the correct sequence (database → hook → UI → three states → quality checklist → commit).

<Callout type="tip">
**The post-session habit:** At the end of every coding session, ask Claude: "Update the project CLAUDE.md with any decisions we made today." This keeps the project file current and makes every future session start with better context than the last.
</Callout>

<ModuleChecklist>
  <ChecklistItem>I have created ~/.claude/CLAUDE.md with my global developer profile</ChecklistItem>
  <ChecklistItem>I have installed all four skill files in ~/.claude/skills/</ChecklistItem>
  <ChecklistItem>I have created a project CLAUDE.md at my project root</ChecklistItem>
  <ChecklistItem>I have filled in the Supabase project ref in my project CLAUDE.md</ChecklistItem>
  <ChecklistItem>I verified the setup by asking Claude to read my config files</ChecklistItem>
  <ChecklistItem>I know the post-session habit: ask Claude to update the project CLAUDE.md with the day's decisions</ChecklistItem>
</ModuleChecklist>