skills/tailwind-patterns/SKILL.md
Tailwind CSS v4 design decisions. Use when: Tailwind, utility-first, container query, design tokens, dark mode strategy.
npx skillsauth add thkt/dotclaude tailwind-patternsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Design-level decisions that linters cannot catch.
| Topic | Key Point |
| -------------------- | -------------------------------------------------------------- |
| Container Query | Reusable component → @container, page layout → viewport |
| Color Token | Primitive + Semantic minimum. Arbitrary values = missing token |
| Dark Mode | v4: @custom-variant in CSS, no darkMode config key |
| Layout Selection | flex (1-axis), grid (2D), grid+spans (Bento) |
| Component Extraction | Same class combo 3+ times → extract. No @apply in v4 |
| Anti-Patterns | No dynamic class strings, no !important, no arbitrary values |
| v4 CSS-First Config | @theme in CSS replaces tailwind.config.js |
→ Details: Container Query, Color Token, Dark Mode, Layout, Component Extraction, Anti-Patterns, v4 Config
documentation
Generates and updates .claude/OUTCOME.md interactively. When the file is absent or empty (no Behavior / all sections TBD), collects content via AskUserQuestion and writes the stub; when present, shows the current state and applies updates.
development
Judge a SKILL.md against craft axes (single responsibility, description distinctiveness, imperative voice, verifiable completion, calibration, progressive disclosure) and apply the fixes the audit surfaces. Do not use for format-presence-only checks (use reviewer-prompt) or reproducibility loops (use /tuning).
tools
Internal helper for /think Step 11. Renders SOW.md + Spec.md as an integrated Astro view and returns a dev server URL.
development
Extract repository spec while detecting bugs, spec gaps, and consistency drift via dual-purpose documentation. OUTCOME.md-axis question-driven exploration with ephemeral output. Do NOT use for code review (use /audit or /polish), feature implementation (use /code), planning only (use /think), or single-bug fix (use /fix).