From ravn-ai-toolkit
Provides Tailwind CSS v4 design tokens, CSS variables, responsive layouts with container queries, dark mode, and spacing scales for web UIs.
npx claudepluginhub ravnhq/ai-toolkitThis skill is limited to using the following tools:
Design system patterns for consistent, accessible, responsive interfaces. Tailwind CSS v4 changes the game with CSS variables for runtime theming. Core patterns: design tokens (colors, spacing, typography), responsive breakpoints and container queries, dark mode with proper contrast, component composition, and spacing scales.
rules/_sections.mdrules/layout-avoid-important.mdrules/layout-max-width-containers.mdrules/layout-use-spacing-scale.mdrules/responsive-container-queries.mdrules/responsive-mobile-first.mdrules/responsive-touch-targets.mdrules/token-dark-mode-colors.mdrules/token-never-hardcode-colors.mdrules/token-use-cn-utility.mdBuild production-ready design systems with Tailwind CSS, design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, UI standardization, theming, and dark mode.
Builds production-ready Tailwind CSS design systems including design tokens, component variants, responsive patterns, and accessibility. Use for component libraries, theming, and UI standardization.
Guides Tailwind CSS usage with utility-first classes, responsive design, dark mode, custom configs, design tokens, and scalable patterns using component libraries like shadcn/ui.
Share bugs, ideas, or general feedback.
Design system patterns for consistent, accessible, responsive interfaces. Tailwind CSS v4 changes the game with CSS variables for runtime theming. Core patterns: design tokens (colors, spacing, typography), responsive breakpoints and container queries, dark mode with proper contrast, component composition, and spacing scales.
Key challenges: hardcoded values instead of tokens (unmaintainable), responsive design without mobile-first thinking, dark mode implemented post-hoc (inaccessible), container queries for component-level responsiveness (not just viewport-based).
When implementing visual designs:
@theme@container for container queriesdark: variants; ensure contrast ratiosPatterns are organized by concern:
See rules/ for implementation patterns and examples.
User: "Set up a Tailwind design token system with dark mode support for our component library."
Expected behavior: Use design-frontend guidance, apply token patterns with CSS variables and color pairs.
User: "Write a Node.js REST API for user authentication."
Expected behavior: Do not prioritize design-frontend; choose a more relevant skill or proceed without it.
Error: Hardcoding color values in classes; theme changes require refactoring
Cause: Not using design tokens; colors scattered across codebase
Solution: Use @theme to define colors as CSS variables; reference with var(--color-*)
Error: Dark mode looks washed out; low contrast on dark backgrounds
Cause: Color pairs not designed together; assumed inversion works
Solution: Test dark variants; use color scales with proper contrast ratios
Error: Container queries not working; elements not responding to container size
Cause: Parent not marked with @container class
Solution: Add @container to parent; use @sm:, @md:, @lg: variants on children
Error: Dark mode styles not applying; dark: variants ignored
Cause: Dark mode not configured; use darkMode: "class" or "media" in config
Solution: Configure dark mode in tailwind.config.js or CSS @custom-variant
Error: Touch targets too small; users struggle to tap buttons
Cause: Over-optimizing for desktop; assuming mouse precision on mobile
Solution: Use h-11 / w-11 (44px) minimum for touch targets