Skills
.Work. You
Rest

shadcn-add

Official

Keep shadcn components clean and consistent.

Software Engineering#shadcn#tailwind v4#component refactor#react cleanup#typescript exactOptionalPropertyTypes#import organization
Authorremeda
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill prevents inconsistent React and Tailwind patterns from creeping into new shadcn UI components by enforcing repo-specific cleanup and modernization rules immediately after adding components.

Core Features & Use Cases

  • Remove outdated React usage: drops global React namespace imports, React. type prefixes, export blocks, and any "use client" directives to match the project’s preferred component style.
  • Fix TypeScript exactOptionalPropertyTypes pitfalls: addresses issues caused by exact optional props during destructuring or prop handling.
  • Modernize Tailwind v4 data/size patterns: converts Tailwind v4 incompatible attribute and arbitrary value patterns to the repo’s expected conventions, then organizes imports for correctness.

Quick Start

Run the cleanup for the newly added shadcn component and apply the required import, React, exactOptionalPropertyTypes, and Tailwind v4 refactor rules to the files under src/components/ui.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-add
Download link: https://github.com/remeda/remeda/archive/main.zip#shadcn-add

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.