Menú
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.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.
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 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 | dark-mode-and-theming |
| description | 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 CSS variables + Tailwind's dark: variant. Never hardcode #fff / #000 in components.
tailwind.config.ts → darkMode: ["class"]index.css defines tokens for :root and .dark::root {
--background: 0 0% 100%;
--foreground: 222 47% 11%;
--primary: 221 83% 53%;
--primary-foreground: 0 0% 100%;
--border: 214 32% 91%;
}
.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
--primary: 217 91% 60%;
--primary-foreground: 222 47% 11%;
--border: 217 33% 18%;
}
bg-background, text-foreground, border-border — never bg-white.// next-themes (works with Vite + React too)
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<App />
</ThemeProvider>
Persist user choice (localStorage) and respect prefers-color-scheme for first visit.
const { theme, setTheme } = useTheme();
<Button variant="ghost" size="icon" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
{theme === "dark" ? <Sun /> : <Moon />}
</Button>
For three-state (light / dark / system), use a DropdownMenu.
#000, rgb(...)).dark:invert.currentColor).light.css / dark.css) — use a single token system.bg-gray-900) when a semantic token exists.Companion: accessibility-pass for contrast verification.