Does it support native HTML button or input attributes?

Yes, it uses React's ComponentPropsWithoutRef to ensure that all native HTML attributes are correctly typed and passed through to the underlying elements.

Does it help prevent code duplication?

Yes, it includes a workflow to search for existing components and suggests extending them via variants or composition before creating new ones.

How does this skill handle Tailwind CSS classes?

It implements a standardized cn() utility using clsx and tailwind-merge to handle conditional classes and allow for clean property overrides.

Can I use this for complex components like Modals or Cards?

Absolutely. The skill includes specific patterns for Compound Components and the Slot pattern, which are ideal for managing complex, nested UI structures.

React UI Component Patterns

Name: React UI Component Patterns
Author: goulkreek

bygoulkreek

0•

设计工具

Generates standardized, accessible, and reusable React UI components using TypeScript and Tailwind CSS best practices.

This skill provides a comprehensive framework for building high-quality React components by enforcing industry-standard patterns such as composition, explicit prop typing, and clean variant management. By utilizing TypeScript's type safety and Tailwind CSS's utility-first styling, it helps developers create a consistent and maintainable design system that scales across large codebases while minimizing technical debt and component duplication.

主要功能

01Smart component discovery to prevent duplication and promote reusability

02Advanced architecture support including Compound Components and Slots

03Type-safe prop interfaces using TypeScript and ComponentPropsWithoutRef

04Standardized PascalCase file structures and named export conventions

050 GitHub stars

06Dynamic Tailwind CSS variant management using the cn() utility pattern

使用场景

01Building a custom, production-grade design system from scratch

02Enforcing consistent styling and prop patterns across a frontend team

03Refactoring monolithic UI elements into modular, reusable components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add goulkreek/wizapp-claude-marketplace react-ui-patterns

For use in Claude.ai and ChatGPT

Download Skill