1---2name: code-reuse-enforcer3description: Enforce checking existing code before creating new implementations (USE → IMPROVE → ADD). Triggers on "create component", "add feature", "build", "new component", "new hook".4---56# Code Reuse Enforcer78**Core Philosophy:** USE → IMPROVE → ADD910**Before creating ANYTHING new**, search the codebase for existing implementations.1112## Search These Locations First1314| Directory | Contains |15|-----------|---------|16| `app/components/ui/` | Design system: Alert, Badge, Button, Card, EmptyState, Input, Modal, Table |17| `app/components/` | Shared: ContactButton, PlacesAutocomplete, PublicLayout, AdminLayout |18| `app/r/[tracking_code]/components/` | Route-specific: BottomSheet, CardSkeleton, BackgroundPicker |19| `app/r/[tracking_code]/hooks/` | Custom hooks: useRecommendations, useSwipeGesture, useRevealTransition, useMediaQuery |20| `lib/` | Utilities: supabase-admin, attribution-tokens, rate-limit, env, monitoring, validation, crypto-utils, tracking-code, billing-month |21| `lib/translations/` | i18n: es.ts (Spanish strings) |22| `app/globals.css` | Design tokens, utility classes (.liquid-glass, .btn-press-glow) |2324## Existing Hooks (Do Not Recreate)2526| Hook | Purpose |27|------|---------|28| `useRecommendations()` | Fetch recommendations by tracking code |29| `useSwipeGesture()` | Horizontal swipe with drag offset |30| `useRevealTransition()` | Reveal → deck crossfade animation |31| `useIsDesktop()` | Media query for desktop breakpoint |3233## Existing UI Components (Do Not Recreate)3435| Component | Purpose |36|-----------|---------|37| `ContactButton` | WhatsApp CTA with sendBeacon event tracking |38| `BottomSheet` | iOS-style slide-up modal with liquid-glass |39| `CardSkeleton` / `LoadingSkeleton` | Loading placeholder |40| `PlacesAutocomplete` | Google Places location input |41| `PublicLayout` / `AdminLayout` | Page layout wrappers |4243## Verification Steps44451. **Before creating**: Search with `Grep` for function names, class names, similar patterns462. **Check related files**: Look in the same directory and parent directories473. **Check globals.css**: Many effects are CSS utility classes, not components484. **After creating**: Search for overlap and consolidate4950## If Something Similar Exists5152- Extend the existing component with optional props53- Add parameters to existing hooks54- Create a thin wrapper that delegates to the existing implementation55- **Do NOT create a parallel implementation with a different name**
mbelenmontoya