AI SummaryThis skill applies shadcn/ui components to React pages and components while integrating with the project's custom theme defined in . Use this skill when the user requests to: The user will provide either:
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "apply-shadcn" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/apply-shadcn && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/apply-shadcn/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/apply-shadcn/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/apply-shadcn/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/apply-shadcn/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Apply shadcn/ui components to React pages and components. This skill should be used when styling specific pages or components with shadcn/ui in a React project that has custom theming. The user will specify which pages or components to style.
Overview
This skill applies shadcn/ui components to React pages and components while integrating with the project's custom theme defined in frontend/src/index.css.
When to Use This Skill
Use this skill when the user requests to: • Style specific pages with shadcn/ui components • Apply shadcn/ui to a list of components • Add shadcn/ui styling to authentication pages, navigation, or other UI elements The user will provide either: • A list of page/component names to style (e.g., "Style Login.jsx, SignUp.jsx, and NavBar.jsx") • A category of pages to style (e.g., "Style all authentication pages")
Step 1: Create a Todo List
Create a todo list with one task per page or component that needs styling. Each task should be named after the file being styled (e.g., "Style Login.jsx", "Style NavBar.jsx").
Step 2: Install Required shadcn Components
Before styling any pages, ensure the necessary shadcn components are installed. Common components needed: `bash npx shadcn@latest add card input button table label separator navigation-menu ` Adjust the component list based on what the pages require.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster