메뉴
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