Development

.claude/agents/implementer.md

@@ -1,7 +1,7 @@
 ---
 name: implementer
 description: Implements a feature for Hacker House Protocol end-to-end following a plan from the Planner agent. Reads all relevant skills and existing code before writing anything, then executes the plan layer by layer. Runs pnpm build at the end and fixes all errors.
-tools: Read, Write, Edit, Glob, Grep, Bash(pnpm build), Bash(pnpm lint), mcp__claude_ai_Supabase__apply_migration, mcp__claude_ai_Supabase__execute_sql, mcp__claude_ai_Supabase__list_tables, mcp__claude_ai_Supabase__list_migrations
+tools: Read, Write, Edit, Glob, Grep, Bash(pnpm build), Bash(pnpm lint), mcp__supabase__apply_migration, mcp__supabase__execute_sql, mcp__supabase__list_tables, mcp__supabase__list_migrations
 ---
 
 You are a senior full-stack engineer for **Hacker House Protocol** — a Next.js 16 / Supabase / Privy app for Web3 builders.

.claude/agents/ux-ui-designer.md

@@ -14,10 +14,11 @@ You build production-grade UI that is visually distinctive, cohesive, and deligh
 
 Always read these before touching any file:
 
-1. `docs/design-system.md` — **source of truth** for colors, typography, spacing, and components
-2. `docs/navigation.md` — routes and page structure
-3. The specific feature doc in `docs/features/<feature>.md` if it exists (for UI spec)
-4. The existing component/page you're modifying or components similar to what you're building
+1. `docs/design/design-system.md` — **source of truth** for colors, typography, spacing, and components
+2. `.claude/skills/ui-components/SKILL.md` — required components and patterns. **Never rebuild what already exists in `components/ui/`** (Tabs, Select, Dialog, etc.)
+3. `docs/design/navigation.md` — routes and page structure
+4. The specific feature doc in `docs/features/<feature>.md` if it exists (for UI spec)
+5. The existing component/page you're modifying or components similar to what you're building
 
 ---
 
@@ -26,8 +27,8 @@ Always read these before touching any file:
 ### Visual language
 - **Always dark.** Never add light mode. The `html` element has a fixed `.dark` class.
 - **Surface hierarchy via luminosity** — use the token ladder, not box-shadows:
-  - `--background` (L=9%) → `--card` (L=13%) → `--muted` (L=17%) → `--secondary` (L=22%) → `--border` (L=28%)
-- **Neon on dark** — `--primary` (purple, L=62%) pops against dark surfaces. Use it for CTAs, active states, focus rings.
+  - `--background` (L≈18%) → `--muted` (L≈22%) → `--card` (L≈23.5%) → `--secondary` (L≈28%) → `--border` (L≈32%)
+- **Brand purple on dark** — `--primary` (`#6B00C9`, L≈45%) for CTAs, active states, focus rings. Text on primary is white (`--primary-foreground`).
 - **Archetype colors** for identity and role context: `--visionary` (magenta), `--strategist` (lavender), `--builder-archetype` (green).
 
 ### Typography
@@ -60,7 +61,10 @@ Always read these before touching any file:
 - **No hardcoded colors** — only `var(--token)` or `color-mix(in oklch, var(--token) X%, transparent)`
 - **No emoji on archetypes** — `ARCHETYPES` has no `emoji` field. Render `name` + `colorVar` only.
 - **No `<Input type="date">`** — use `DatePicker` from `@/components/ui/date-picker`
-- **Check `components/ui/` before building custom** — the component likely already exists (Button, Input, Textarea, DatePicker, Calendar, Popover, Dialog, etc.)
+- **Check `components/ui/` before building custom** — the component likely already exists (Button, Input, Textarea, DatePicker, Calendar, Popover, Dialog, Tabs, etc.)
+- **Never hand-roll tabs or segmented toggles** — use `Tabs`/`TabsList`/`TabsTrigger` from `@/components/ui/tabs` and restyle via `className` if needed
+- **`cursor-pointer` on custom clickables** — Tailwind v4 preflight sets `cursor: default` on buttons; any clickable that isn't the `Button` component needs explicit `cursor-pointer`
+- **No opacity modifiers on readable gray text** — `text-muted-foreground` is the lowest-contrast tier allowed; `/50`-style opacity is only for decorative glyphs (min `/40`)
 - **File names**: kebab-case English always. No Spanish folder or file names.
 - **No `next/image`** — use plain `<img>` tags (ESLint rule disabled for this project)
 - **Colocate route components**: `app/<route>/_components/` for non-shared components

.claude/agents/verifier.md

@@ -46,6 +46,11 @@ For every changed file, check the following. Report only actual violations.
 - [ ] Pages use `<PageContainer>` — no inline `max-w-* mx-auto px-* py-*` on `<main>`
 - [ ] No `<header>` blocks in pages
 
+### UI components
+- [ ] Tabs / segmented toggles use `Tabs`/`TabsList`/`TabsTrigger` from `@/components/ui/tabs` — never hand-rolled `<button>` toggles with manual active-state classes
+- [ ] Custom clickable elements that aren't the `Button` component include `cursor-pointer` (Tailwind v4 preflight sets `cursor: default` on buttons)
+- [ ] No opacity modifiers on readable `text-muted-foreground` text — opacity only on decorative glyphs (min `/40`)
+
 ### TypeScript
 - [ ] No `any` — use `unknown` + narrowing or proper interfaces
 - [ ] New entities typed in `lib/types.ts`

.claude/skills/forms/SKILL.md

@@ -474,6 +474,21 @@ For fields with many options, use `Combobox` from `@/components/ui/combobox`:
 />
 ```
 
+### Combobox inside a Dialog — portal it into the form
+
+The `Combobox` is **Base UI** and portals its popup to `document.body`; the `Dialog` is **Radix** in modal mode and makes everything outside its content inert — the dropdown opens but clicks on items do nothing. When a Combobox lives inside a `Dialog`, pass a `container` ref so the popup portals inside the dialog:
+
+```tsx
+const portalRef = useRef<HTMLFormElement>(null)
+
+<form ref={portalRef} onSubmit={handleSubmit(onSubmit)}>
+  ...
+  <ComboboxContent container={portalRef}>...</ComboboxContent>
+</form>
+```
+
+On regular pages (no dialog) omit `container` — the default body portal is correct.
+
 ---
 
 ## Cascading field resets
@@ -657,13 +672,13 @@ async function onSubmit(values: MyInput) {
   </Button>
 
   {step === STEPS[STEPS.length - 1] ? (
-    <Button type="submit" disabled={isSubmitting}
-      className="rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium px-6">
+    <Button type="submit" disabled={isSubmitting} variant="pill"
+      className="px-6">
       {isSubmitting ? submittingLabel : submitLabel}
     </Button>
   ) : (
-    <Button type="button" onClick={goNext}
-      className="rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium px-6">
+    <Button type="button" onClick={goNext} variant="pill"
+      className="px-6">
       Continue →
     </Button>
   )}

.claude/skills/ui-components/SKILL.md

@@ -18,17 +18,36 @@ Always dark. Never add a light mode class or `light:` variant. The `.dark` class
 | Text input | `Input` | `@/components/ui/input` | Always inside `Field` + `FieldLabel` wrapper. |
 | Textarea | `Textarea` | `@/components/ui/textarea` | Same as Input. |
 | Select dropdown | `Select`, `SelectTrigger`, `SelectContent`, `SelectItem` | `@/components/ui/select` | Never native `<select>`. |
+| Tabs / segmented toggle | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` | `@/components/ui/tabs` | Never hand-rolled `<button>` toggles with manual active-state classes. Use `<TabsList variant="pill">` for the full-width purple-pill segmented toggle (active = `bg-primary`). |
 | Form field wrapper | `Field`, `FieldLabel`, `FieldError`, `FieldDescription` | `@/components/ui/field` | Wrap every form control. |
 | Divider | `Separator` | `@/components/ui/separator` | Never `<div className="h-px bg-border">` or `style={{ background: "var(--border)" }}`. |
 | Date field | `DatePicker` | `@/components/ui/date-picker` | Never `<Input type="date">`. Accepts `value: string` (ISO `YYYY-MM-DD`), `onChange`, `placeholder`, `fromDate`. Works with react-hook-form `Controller`. |
 | Page content wrapper | `PageContainer` | `@/app/(protected)/dashboard/_components/page-container` | Use in every dashboard page for consistent `max-w-6xl` width. |
 | Skeleton | `Skeleton` | `@/components/ui/skeleton` | Always use for loading states — never manual `animate-pulse` divs. |
 
+**Cursor rule:** Tailwind v4 preflight sets `cursor: default` on `<button>`. Any custom clickable element that isn't the `Button` component must include `cursor-pointer` in its className.
+
 ## Button variants
 
 | Variant | When to use |
 |---|---|
 | `default` | Primary CTA — filled with `bg-primary` |
+| `pill` | Rounded-full primary CTA — "Create X", swipe Connect, hero actions |
+| `pill-outline` | Rounded-full purple border + text — secondary actions ("Join", "View event") |
+| `pill-builder` | Soft green pill — membership/success states ("Joined", "Connected"). `disabled` renders at opacity-60 (keeps semantic color, clearly non-clickable) |
+| `pill-muted` | Muted filled pill — waiting states ("Pending"). `disabled` renders at opacity-60 |
+| `pill-ghost` | Rounded-full neutral border — tertiary actions ("Cancel", "Decline") |
+| `pill-destructive` | Soft red pill — destructive confirmations ("Remove") |
+
+**Pill on a `<Link>`:** don't wrap with `<Button asChild>` — apply the styles directly with `buttonVariants`:
+
+```tsx
+import { buttonVariants } from "@/components/ui/button"
+
+<Link href="..." className={cn(buttonVariants({ variant: "pill" }), "px-5")}>
+  Create Community
+</Link>
+```
 | `outline` | Secondary / Back actions |
 | `ghost` | Tertiary / Skip actions — no border |
 | `destructive` | Destructive actions |

.mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "worldcoin-developer-portal": {
+      "type": "http",
+      "url": "https://developer.world.org/api/mcp",
+      "headers": {
+        "Authorization": "Bearer api_a2V5XzMxNjZmOGUxNTA0YTY1NmM0MDEyNTU5NjBkZmIzMGY0OnNrXzY3YWY2YTFkMjFkZmRiMzRjYTE1MjUyODY0YTY1MmFjOWNhNmI0Y2QzZTk0OGQwZg"
+      }
+    }
+  }
+}

CLAUDE.md

@@ -8,8 +8,9 @@ All product and design documentation lives in `docs/`. **Always read the relevan
 
 | Doc | When to read |
 |---|---|
-| [`docs/strategy/problem.md`](./docs/strategy/problem.md) | The problem, pain points, why current solutions fail |
-| [`docs/strategy/pitch.md`](./docs/strategy/pitch.md) | One-liner, value prop, differentiators, vision |
+| [`docs/strategy/pitch.md`](./docs/strategy/pitch.md) | Pitch — problem, solution, vision (Arbitrum Open House London Buildathon) |
+| [`docs/strategy/slides.md`](./docs/strategy/slides.md) | Deck de presentación (slides + notas de orador) para el PPT |
+| [`docs/strategy/plan-buildathon.md`](./docs/strategy/plan-buildathon.md) | Buildathon implementation plan — scope, Arbitrum escrow contract, communities |
 | [`docs/product/overview.md`](./docs/product/overview.md) | Vision, archetypes, user types, stack, roadmap, business decisions |
 | [`docs/product/prd.md`](./docs/product/prd.md) | MVP scope, acceptance criteria, Definition of Done |
 | [`docs/product/data-models.md`](./docs/product/data-models.md) | TypeScript types for all entities |
@@ -22,6 +23,10 @@ All product and design documentation lives in `docs/`. **Always read the relevan
 | [`docs/features/hacker-houses.md`](./docs/features/hacker-houses.md) | Hacker Houses — modalities, flow, UI card |
 | [`docs/features/matching-and-feed.md`](./docs/features/matching-and-feed.md) | Matching algorithm, feed, Builder card |
 | [`docs/features/link-wallet.md`](./docs/features/link-wallet.md) | Link wallet from profile, auto-import on-chain data |
+| [`docs/features/identity-gates.md`](./docs/features/identity-gates.md) | Identity verification, gates, multi-wallet, privacy model, matching evolution |
+| [`docs/web3/contracts-spec.md`](./docs/web3/contracts-spec.md) | Smart contract spec for HackerHouseEscrow, Factory, SpotNFT |
+| [`docs/web3/zerodev-integration.md`](./docs/web3/zerodev-integration.md) | ZeroDev hooks, env vars, pending decisions |
+| [`docs/web3/gmx-integration.md`](./docs/web3/gmx-integration.md) | GMX yield frontend — hooks, components, merge order for web3 branches |
 
 ## Skills — detailed rules for implementation