Use when writing or reviewing any CSS class, changing colors, modifying globals.css, or when hardcoded colors or inline styles are detected.
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
This skill references the following globals — read them BEFORE starting work:
system/globals/colors.md— OKLCH palette, token table, color semanticssystem/globals/effects.md— Border radius, shadows, card pattern
Tailwind v4 Expertise, @theme Directive, OKLCH, Utilities, Dark Mode
| Metric | Target | Measurement |
|---|---|---|
| Hardcoded Colors | 0 | npm run check:kpis |
| Inline Styles | 0 | npm run check:kpis |
| tailwind.config.mjs | must not exist | npm run check:kpis |
npm run check:kpis (.claude/scripts/check-kpis.mjs) is the single source of
truth for these checks — do not re-implement them with ad-hoc greps. The
convention guard hook additionally warns when a change introduces hardcoded
colors or inline styles.
AstroDeck uses Tailwind CSS v4 via @tailwindcss/vite (NOT @astrojs/tailwind).
tailwind.config.mjs — config lives in CSS@theme directive for token registration.dark class for dark mode overrides/* Token registration (Tailwind recognizes these as utilities) */
@theme {
--color-primary: oklch(11.2% 0.0079 286.75);
--color-primary-foreground: oklch(100% 0 0);
}
/* Dark mode overrides (only change values, no new tokens) */
.dark {
--color-primary: oklch(100% 0 0);
--color-primary-foreground: oklch(11.41% 0.0079 286.75);
}
Do NOT control colors with dark: prefix. Use CSS variables that automatically override in .dark:
<!-- Wrong -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
<!-- Correct -->
<div class="bg-background text-foreground">
/* Responsive (mobile-first) */
text-base md:text-lg lg:text-xl
/* Hover/Focus states */
hover:bg-primary/90 focus:ring-2 focus:ring-ring
/* Transitions */
transition-colors duration-200
/* Dark mode (automatic via CSS variables) */
bg-background text-foreground /* works in both modes */
These rules always apply — even under time pressure, even for "just a quick fix":
bg-blue-500 is never "just temporary" — it gets forgotten and breaks on the next theme change.tailwind.config.mjs. Not even "because a package expects it." Config lives in CSS via @theme.@astrojs/tailwind. AstroDeck uses @tailwindcss/vite. The old integration is incompatible with Tailwind v4.Read LEARNINGS.md in this directory to avoid known anti-patterns.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use when creating or modifying any UI element visible to the user, reviewing HTML markup, adding interactive elements, or when Lighthouse Accessibility drops below 90.
The English summary is being prepared. Showing the original description.
Use when creating or modifying .astro/.tsx files, configuring astro.config.mjs, working with Content Collections, or when TypeScript or build errors occur.
The English summary is being prepared. Showing the original description.
Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90.
The English summary is being prepared. Showing the original description.
Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.
The English summary is being prepared. Showing the original description.
Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts.
The English summary is being prepared. Showing the original description.
Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90.
The English summary is being prepared. Showing the original description.