Enforce React, TypeScript, and Tailwind v4 cleanup after adding shadcn components.
npx skills add https://github.com/remeda/remeda --skill shadcn-add
Please help me install this Agent Skill. Skill: shadcn-add Source: https://github.com/remeda/remeda/tree/main/.agents/skills/shadcn-add Command: npx skills add https://github.com/remeda/remeda --skill shadcn-add
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.
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.
High-intent search queries and answers about installing and using this skill.
To clean up shadcn UI components, you need to remove outdated React namespace imports and "use client" directives, fix exactOptionalPropertyTypes destructuring issues, and modernize Tailwind v4 patterns. This ensures newly added files remain consistent with your repository's preferred style.
The exactOptionalPropertyTypes TypeScript configuration causes shadcn component destructuring issues because it strictly checks optional props. Fixing this requires correcting the prop handling logic during the component refactor process to prevent type errors when passing undefined values.
The best way to modernize Tailwind v4 conventions is to convert incompatible attribute patterns and arbitrary values to the expected data-* and size-* formats. This modernization happens during the follow-up refactor after adding new UI components.
Yes, adding shadcn components often requires removing React namespace imports and React. type prefixes. Dropping these global imports, along with "use client" directives, aligns the new files with a modern, repo-specific component style.
You sort imports correctly by applying the Organize Imports feature after refactoring shadcn UI files. This step happens last, ensuring import correctness and consistency once React usage and Tailwind v4 patterns are updated.
Yes, you can automate React cleanup and Tailwind v4 modernization for src/components/ui by applying dedicated refactor rules. This removes outdated directives and converts Tailwind attributes immediately after introducing new files via the add CLI command.
IDEA-on-ActionGenerate React component files with PascalCase names and shadcn/ui integration.
sigridjinethResolve TypeScript build errors with minimal code changes and verify via re-running builds.
sckrollEnforce Tailwind CSS v4 syntax and prevent outdated v3 patterns in generated code.
ThomashighbaughGuide Tailwind CSS v4 component patterns for React and Vue variants.
