How does this skill handle the new Tailwind CSS v4 syntax?

It enforces the use of parentheses for CSS variables, such as 'bg-(--brand-color)', and correctly implements the new suffix-based important modifier and updated utility namespaces like 'inset-shadow'.

What accessibility standards does this skill follow?

It follows a strict checklist including WCAG AA contrast ratios, visible focus states using 'outline-offset', keyboard navigation, and proper use of Radix UI's 'asChild' patterns.

Can I use this for shadcn/ui customization?

Yes, it provides specific patterns for extending and wrapping shadcn/ui components to preserve upgradeability while applying custom brand styles.

Does it support complex component variants?

Absolutely. It utilizes 'class-variance-authority' (cva) for managing complex states and ensures class merging is handled safely via the 'cn()' utility to avoid Tailwind conflicts.

React & Tailwind v4 Component Builder

Name: React & Tailwind v4 Component Builder
Author: fiatkongen

byfiatkongen

0•

디자인 도구

Builds accessible, production-grade React components using Tailwind CSS v4, shadcn/ui, and Radix UI primitives.

This skill provides specialized guidance for developing modern frontend interfaces with the latest Tailwind CSS v4 features and industry-standard React patterns. It ensures developers correctly implement the new parentheses-based CSS variable syntax, optimize variant management with class-variance-authority (cva), and maintain robust accessibility standards. Whether you are migrating a project to Tailwind v4 or scaffolding a design system with shadcn/ui, this skill automates best practices for styling, component composition, and form integration.

주요 기능

01Tailwind CSS v4 parentheses syntax for CSS variables and arbitrary values

02Built-in accessibility (A11y) validation for focus states and ARIA attributes

030 GitHub stars

04Native support for Tailwind v4 container queries and inset shadow utilities

05Type-safe component variant management using cva and the cn() utility

06Advanced shadcn/ui and Radix UI integration patterns

사용 사례

01Migrating existing React component libraries from Tailwind v3 to v4 syntax

02Scaffolding accessible, form-heavy interfaces with react-hook-form and zod

03Developing high-performance design systems with dynamic CSS variable indirection

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fiatkongen/saurun-marketplace react-tailwind-v4-components

For use in Claude.ai and ChatGPT

Download Skill