메뉴
Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.
Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.
Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.
Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.
Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.
Use when building dashboards, charts, KPI cards, trend lines, or analytics UI with Recharts or shadcn's chart components. Not for static landing-page graphics or product analytics tracking (use analytics-events).
| name | accessibility-pass |
| description | Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits. |
Report findings as: critical (blocks users), serious, minor.
tabIndex={0} on non-interactive divs for click hacks — use <button>.<Label htmlFor> or aria-label.aria-label.alt descriptive or alt="" if decorative.<button> for actions, <a href> for navigation.aria-describedby / FormMessage.aria-required.prefers-reduced-motion for large animations.<th scope="col"> on data tables.aria-live="polite" for toast/alert regions when appropriate.div onClick without role/keyboard support.Checklist table: issue | location | fix | severity.