Skills
.Work. You
Rest

apply-shadcn

Community

Style React pages with shadcn/ui, honoring your theme.

Design & Creative#ui#frontend#tailwind#shadcn# styling
Authorotoshek
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill standardizes applying shadcn/ui components to React pages while respecting the project's custom Tailwind theme tokens, ensuring consistent design and behavior.

Core Features & Use Cases

  • Creates a task-based plan to style target files one by one.
  • Installs needed shadcn components and fetches usage examples via MCP to match proper props.
  • Replaces plain HTML with shadcn/ui primitives, integrating with existing theme variables.
  • Verifies builds after styling to catch issues early.

Quick Start

Create a to-do of files to style, fetch usage examples, implement styling, and run a build to confirm correctness.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 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: apply-shadcn
Download link: https://github.com/otoshek/Claude-Code-Toolkit/archive/main.zip#apply-shadcn

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 223,000+ vetted skills library on demand.