Can I use these slots with Tailwind CSS?

Yes, it is designed for Tailwind's arbitrary variant syntax, allowing you to style slots using syntax like '[&_*[data-slot="name"]]:utility-class'.

What are component slots in this context?

Component slots are specific data-attributes added to elements within a component that act as stable anchors for external CSS targeting and documentation.

Should I add a slot to every element in a component?

No, the skill advocates for selective slotting—only adding them to important structural elements that consumers are likely to need to style or override.

How does this skill help Claude write better code?

It provides Claude with specific rules for naming, placing, and documenting these slots, ensuring your UI components follow a consistent architectural pattern.

How does this affect component documentation?

The skill enforces a JSDoc format that lists every available slot at the top of the file, making it easy for other developers to see exactly what parts of a component are targetable.

Component Slots for UI Targeting

Name: Component Slots for UI Targeting
Author: griffnb

bygriffnb

Design Tools

Implements standardized data-slot attributes within components to enable precise CSS targeting and automated developer documentation.

About

The Component Slots skill provides a structured methodology for enhancing React and TSX components with 'slots' using data-slot attributes. This approach allows developers to override styles of specific internal elements from a parent component without modifying the child component's core logic. By enforcing a strict naming convention and providing standardized JSDoc documentation patterns, this skill makes UI libraries more maintainable, themeable, and accessible for other developers. It is particularly effective for design systems using Tailwind CSS or CSS-in-JS where granular structural targeting is required.

Key Features

Best practice guidelines for selecting structural elements for slotting
Automated JSDoc documentation templates for component slot definitions
Pattern-based implementation for complex components like tables and cards
Support for bubbling up and documenting slots from nested sub-components
Standardized data-slot naming convention using the {component}-{element} pattern
0 GitHub stars

Use Cases

Building a highly customizable UI component library with clear override points
Generating self-documenting component codebases for larger engineering teams
Implementing granular styling overrides in Tailwind CSS projects using data-attribute selectors

About

Key Features

Best practice guidelines for selecting structural elements for slotting
Automated JSDoc documentation templates for component slot definitions
Pattern-based implementation for complex components like tables and cards
Support for bubbling up and documenting slots from nested sub-components
Standardized data-slot naming convention using the {component}-{element} pattern
0 GitHub stars

Use Cases

Building a highly customizable UI component library with clear override points
Generating self-documenting component codebases for larger engineering teams
Implementing granular styling overrides in Tailwind CSS projects using data-attribute selectors