القائمة
Enforce checking existing code before creating new implementations (USE → IMPROVE → ADD). Triggers on "create component", "add feature", "build", "new component", "new hook".
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Build accessible React components with WCAG 2.1 Level AA compliance for Hara Vital. Use when creating interactive elements, forms, modals, bottom sheets, or any user-facing components. Triggers on "accessibility", "a11y", "ARIA", "keyboard", "focus", "screen reader", "WCAG".
Helps write conventional commit messages following Hara Vital standards. Triggers on "commit", "ready to commit", "push".
Hara Vital Supabase patterns — service-role client, RLS policies, attribution tokens, event tracking, and PQL billing flow. Triggers on "supabase", "database", "query", "API route", "service role", "RLS", "attribution", "token", "event", "PQL", "billing".
Hara Vital design system knowledge — tokens, liquid-glass patterns, animation easings, and UI conventions. Triggers on "style", "design", "component", "card", "button", "animation", "glass", "token", "color", "shadow", "UI".
Map Hara Vital's Codex commands, including start-session/end-session, audits, bug hunts, feature starts, PR prep, and test scaffolding, so they trigger automatically from chat requests.
Structured workflow for complex tasks requiring deliberate planning, step-by-step execution with pros/cons analysis, and built-in testing. Use when tasks involve multiple interdependent steps, code modifications, file operations, or any work where incremental validation prevents cascading errors. Particularly valuable for debugging, refactoring, system integration, or building complex features. Includes explicit triggers for consistent application across conversations and Codex CLI.
| name | code-reuse-enforcer |
| description | Enforce checking existing code before creating new implementations (USE → IMPROVE → ADD). Triggers on "create component", "add feature", "build", "new component", "new hook". |
Core Philosophy: USE → IMPROVE → ADD
Before creating ANYTHING new, search the codebase for existing implementations.
| Directory | Contains |
|---|---|
app/components/ui/ | Design system: Alert, Badge, Button, Card, EmptyState, Input, Modal, Table |
app/components/ | Shared: ContactButton, PlacesAutocomplete, PublicLayout, AdminLayout |
app/r/[tracking_code]/components/ | Route-specific: BottomSheet, CardSkeleton, BackgroundPicker |
app/r/[tracking_code]/hooks/ | Custom hooks: useRecommendations, useSwipeGesture, useRevealTransition, useMediaQuery |
lib/ | Utilities: supabase-admin, attribution-tokens, rate-limit, env, monitoring, validation, crypto-utils, tracking-code, billing-month |
lib/translations/ | i18n: es.ts (Spanish strings) |
app/globals.css | Design tokens, utility classes (.liquid-glass, .btn-press-glow) |
| Hook | Purpose |
|---|---|
useRecommendations() | Fetch recommendations by tracking code |
useSwipeGesture() | Horizontal swipe with drag offset |
useRevealTransition() | Reveal → deck crossfade animation |
useIsDesktop() | Media query for desktop breakpoint |
| Component | Purpose |
|---|---|
ContactButton | WhatsApp CTA with sendBeacon event tracking |
BottomSheet | iOS-style slide-up modal with liquid-glass |
CardSkeleton / LoadingSkeleton | Loading placeholder |
PlacesAutocomplete | Google Places location input |
PublicLayout / AdminLayout | Page layout wrappers |
Grep for function names, class names, similar patterns