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

0•

Herramientas de Diseño

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

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.

Características Principales

01Best practice guidelines for selecting structural elements for slotting

02Automated JSDoc documentation templates for component slot definitions

03Pattern-based implementation for complex components like tables and cards

04Support for bubbling up and documenting slots from nested sub-components

05Standardized data-slot naming convention using the {component}-{element} pattern

060 GitHub stars

Casos de Uso

01Building a highly customizable UI component library with clear override points

02Generating self-documenting component codebases for larger engineering teams

03Implementing granular styling overrides in Tailwind CSS projects using data-attribute selectors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add griffnb/assettradingdesk-ui component-slots

For use in Claude.ai and ChatGPT

Download Skill