velcrafting/codex-skills
Overview
This skill guides styling applications with Tailwind CSS using modern, CSS-first patterns. It emphasizes always using the latest Tailwind version, the @theme directive, OKLCH colors for perceptual uniformity, and container queries for component-aware responsiveness. The focus is practical: theme definitions in CSS, predictable design tokens, and accessible dark mode patterns.
How this skill works
Use the @theme directive in your global CSS to declare design tokens (colors, spacing, radii, shadows, animations). Consume tokens with Tailwind utility classes that map to those variables, enabling a single source of truth. Prefer OKLCH color values for perceptual consistency, and use @container modifiers to adapt components to their container size rather than the viewport. Configure PostCSS to include the Tailwind PostCSS plugin so the CSS-first setup is compiled with the latest Tailwind features.
When to use it
- When you need a maintainable design system driven by CSS variables and utility classes.
- When you want perceptually uniform color ramps using OKLCH.
- When components should respond to container size instead of global breakpoints.
- When implementing theme variants such as dark mode with minimal JS.
- When configuring Tailwind in modern build setups (PostCSS, Next.js, etc.).
Best practices
- Declare design tokens inside @theme so tokens live in CSS and are easy to override.
- Use OKLCH for color palettes; tune lightness and chroma for consistent ramps.
- Favor container queries (@container) for component-driven layouts over global media queries.
- Scope dark mode via CSS variable variants (@variant dark) for automatic adaptation or use the class strategy when you need explicit control.
- Keep utility-first markup concise and extract repeated patterns into components or semantic classes.
Example use cases
- Create a brand system: define primary/semantic palettes in OKLCH and consume with bg-primary-500, text-primary-700 utilities.
- Build responsive card components that change layout with @container rather than viewport breakpoints.
- Implement dark mode by overriding CSS variables inside a dark variant block for automatic color inversion.
- Add custom spacing and radii tokens in @theme and use them with p-18, rounded-2xl utility classes.
- Respect motion preferences with motion-safe and motion-reduce variants combined with tokenized animations.
FAQ
You can rely on @theme for most design tokens and avoid heavy config, but use tailwind.config.js only for advanced plugin settings or custom variant registration if needed.
Why use OKLCH instead of HSL/RGB?
OKLCH is perceptually uniform, so steps in lightness and chroma produce visually consistent palettes and better accessibility contrast control.
20 skills
This skill guides styling with Tailwind CSS using the latest patterns, enables theme customization, and applies modern, perceptually uniform OKLCH colors.
This skill helps you implement a robust external API adapter with timeouts, bounded retries, idempotency, and error mapping for reliable integrations.
This skill helps you add focused backend tests to verify invariants, endpoint behavior, and retries across services.
This skill captures non-trivial decisions as proposed entries for a repository's decision log to combat drift and enable ratification.
This skill guides seamless Stripe integration for payments, subscriptions, webhooks, and analytics, ensuring secure handling and reliable billing workflows.
This skill guides you to implement and customize shadcn/ui components using the latest version and modern patterns.
This skill creates a new UI component aligned with repo conventions, including structure, typing, styling, and exports for seamless integration.
This skill manages safe persistence-layer changes by guiding schema migrations, data-access updates, and rollout plans that prevent data loss.
This skill helps you extract and standardize domain logic into testable modules with explicit invariants and deterministic errors.
This skill creates a concise, executable plan from a user prompt, outlining scope, steps, validation, risks, and open questions.
This skill adds frontend tests to prove UI behavior and prevent regressions across components and routes.
This skill ensures UI changes meet accessibility standards by validating semantics, labels, focus, and ARIA usage across components.
This skill wires a UI to a data source using repo tooling with typed inputs/outputs and robust loading, error, and caching behavior.
This skill generates and updates typed API clients from canonical contracts to ensure type-safe, deterministic integration across languages.
This skill assesses API compatibility between versions, classifies as compatible, breaking, or unsafe, and lists breaking changes for informed shipping.
This skill bootstraps or refreshes a repo scaffold with governance files and Tree.txt to ensure fast, predictable structure.
This skill personalizes a bootstrapped repository by capturing intent and constraints to update docs and generate a canonical REPO_PROFILE.json.
This skill defines and enforces authorization rules for protected actions, ensuring explicit allows/denies, boundary enforcement, testing, and auditable
This skill helps you align governance artifacts with actual changes by generating a delta checklist after milestones.
This skill helps you access and analyze Kalshi market data including prices, orderbooks, trades, and events for quick insights.
