What UI components are covered by this skill?

It includes patterns for buttons, forms, inputs, selects, checkboxes, modals, tables, cards, tabs, accordions, and many other common UI elements.

Does it support HeadlessUI integration?

Yes, it provides specific mapping and implementation patterns for HeadlessUI components like Dialogs, Menus, Listboxes, and Comboboxes to ensure accessibility.

Can I use this for polymorphic components?

Absolutely. The skill includes documentation on using the 'as' prop to render components as different HTML elements while maintaining their styling and behavior.

How does it handle component states like 'open' or 'active'?

It leverages Tailwind CSS data-attribute selectors (e.g., data-[open] or data-[checked]) which work seamlessly with HeadlessUI's internal state management.

Tailwind CSS Component Toolkit

Name: Tailwind CSS Component Toolkit
Author: peixotorms

bypeixotorms

0•

디자인 도구

Streamlines frontend development with standardized Tailwind CSS class recipes and HeadlessUI integration patterns for accessible UI components.

The tailwind-components skill is designed to accelerate frontend engineering by providing a comprehensive library of production-ready Tailwind CSS patterns and best practices. It covers a wide array of UI elements, from basic buttons and form controls to complex interactive structures like modals, data tables, and tab systems. By emphasizing HeadlessUI integration, data-attribute styling, and polymorphic component patterns, this skill ensures that developers can build highly accessible, performant, and visually consistent interfaces within the Claude Code environment.

주요 기능

01Polymorphic component guidance for flexible rendering using the 'as' prop.

02Comprehensive HeadlessUI integration maps for accessible interactive components.

030 GitHub stars

04Advanced composition techniques including slot patterns and className helpers.

05Standardized Tailwind class recipes for buttons, inputs, cards, and navigation elements.

06State-driven styling patterns using data attributes like data-[open] and data-[checked].

사용 사례

01Building a consistent design system from scratch using utility-first CSS patterns.

02Implementing accessible complex components like modals and dropdowns with HeadlessUI.

03Standardizing form layouts and validation states across a large-scale React or Next.js application.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills tailwind-components

For use in Claude.ai and ChatGPT

Download Skill