react-component-creation

Standardize React component creation by enforcing consistent file organization, prop typing with TypeScript interfaces extending React.ComponentProps, and styling with Tailwind via a shared cn utility. This reduces boilerplate and ensures maintainability across web UI component libraries.

Scaffold a React design system component by defining TypeScript interfaces for props, applying Tailwind-based styling through a cn helper, and integrating Radix primitives when available. This approach provides fully typed, themed components that satisfy front-end engineering standards.

Yes, you can use Radix primitives with Tailwind for UI component design. The Skill guides developers through integrating Radix primitives when available, combining them with Tailwind styling via the cn utility to ensure accessible and consistent component behavior.

Your React component library lacks consistency because it lacks standardized scaffolding, prop typing, and styling rules. Enforcing TypeScript interfaces extending React.ComponentProps and shared Tailwind cn utilities reduces boilerplate and ensures reuse across projects.

TypeScript is required for this scaffolding approach because it enforces prop typing with interfaces extending React.ComponentProps. This ensures typed props, reduces boilerplate, and satisfies front-end engineering standards for building maintainable web UI components.

You should not use Radix primitives in React component development when they are not available in your project environment. The Skill integrates Radix primitives conditionally, guiding developers to use them only when appropriate for the specific component being built.