{"enrichment":{"faq":[{"a":"tailwindcss-advanced-components teaches CVA (class-variance-authority) as the foundation for building reusable component variants. CVA lets you define variants as first-class objects, mapping props to Tailwind classes with type safety. The skill shows how to structure base styles, variants, and compound variants so components scale without conditional class strings, making your component library predictable and maintainable.","q":"What is class variance authority setup and how does tailwindcss-advanced-components use it?"},{"a":"tailwindcss-advanced-components covers polymorphic components using the `as` prop pattern, allowing a single component to render as different HTML elements while preserving TypeScript types. You learn to combine this with slot-based composition, where child elements are passed as props rather than direct children, enabling flexible layouts while maintaining strict prop validation and autocomplete support.","q":"How do you build polymorphic components with type safety in tailwindcss-advanced-components?"},{"a":"tailwindcss-advanced-components explains that the `cn` utility (built on tailwind-merge) safely merges conflicting Tailwind classes, preventing specificity bugs. When combining base component styles with user-provided className props, cn intelligently removes duplicates and conflicting utilities, ensuring the last declaration wins. This pattern is essential for extensible components that accept custom styling without breaking.","q":"What does tailwind merge safe class composition mean for component design?"},{"a":"tailwindcss-advanced-components demonstrates styling headless primitives by leveraging data attributes and compound selectors. Radix and headless UI expose state via data-* attributes (e.g., data-state, data-disabled); you apply Tailwind classes using attribute selectors and group/peer patterns to style child elements based on parent state, creating fully styled accessible components without touching component internals.","q":"How does tailwindcss-advanced-components handle styling headless UI and Radix UI?"},{"a":"tailwindcss-advanced-components teaches group and peer as Tailwind modifiers for styling elements based on sibling or parent state. The `group` modifier lets you style children when a parent has a certain state (e.g., group-hover); `peer` styles siblings based on another sibling's state. Combined with data attributes, these patterns enable complex interactive states without JavaScript-driven class toggling.","q":"What are group and peer patterns in tailwindcss-advanced-components for state management?"},{"a":"tailwindcss-advanced-components shows how CVA's compound variants let you combine multiple props to trigger specific style combinations. For example, a button with size and variant props can have special styling when both are set to certain values. You define these relationships declaratively in the CVA config, avoiding nested conditionals and making component behavior explicit and testable across your design system.","q":"How do you create reusable component variants using CVA and compound variant patterns?"}],"shadow_tags":["variant-management","headless-integration","type-safe-styling","design-system-patterns","state-driven-ui","component-composition","accessibility-focus","animation-utilities","class-merging","slot-architecture"],"summary_rewrite":"Master advanced Tailwind component architecture using class-variance-authority for variant management, compound patterns for complex states, and utility helpers like cn for safe class composition. Learn context-based component systems, data-attribute styling, and polymorphic design patterns used in production design systems."},"files":[{"bytes":18891,"path":"plugins/tailwindcss-master/skills/tailwindcss-advanced-components/SKILL.md","sha256":"faa6274aeb59232ad3205abf27f65a45f3d1e151d580cb6aa0ed48be719a06a1","url":"https://skillfed.io/files/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components/46e287da/SKILL.md"}],"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components","links":{"html":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components","md":"https://skillfed.io/JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components.md","repo":"https://github.com/JosiahSiegel/claude-plugin-marketplace"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"Shell","last_updated":"2026-06-18","license":"MIT","name":"tailwindcss-advanced-components","publisher":"JosiahSiegel","stars":49},"relations":{"similar":[{"id":"pixel-point/animate-text/tailwind-design-system"},{"id":"calesthio/OpenMontage/tailwind-design-system"},{"id":"patricio0312rev/skills/component-scaffold-generator"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"wshobson/agents/web-component-design"},{"id":"curiositech/some_claude_skills/component-template-generator"},{"id":"bobmatnyc/claude-mpm-skills/headlessui"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"OneWave-AI/claude-skills/react-component-generator"}]},"slug":{"owner":"JosiahSiegel","repo":"claude-plugin-marketplace","skill":"tailwindcss-advanced-components"},"version":"46e287da"}