skills.rest
otoshek
otoshekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

apply-shadcn

Apply shadcn/ui primitives to React components while preserving Tailwind theme tokens.

2|Updated Nov 19, 2025
Search Tags:#ui#frontend#tailwind#shadcn# styling
One-click install
npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill apply-shadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apply-shadcn
Source: https://github.com/otoshek/Claude-Code-Toolkit/tree/main/skills/apply-shadcn
Command: npx skills add https://github.com/otoshek/Claude-Code-Toolkit --skill apply-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

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.

Frequently Asked Questions about apply-shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply shadcn/ui components to my React pages while keeping my custom Tailwind theme?▼

Apply shadcn/ui components by creating a plan to style files one by one, installing needed components, and replacing plain HTML with shadcn/ui primitives while integrating CSS variables from your Tailwind theme. The Skill fetches usage examples via MCP and validates the result with a build check to ensure theme tokens are preserved.

Can I use shadcn/ui with my existing Tailwind theme tokens in a React + Vite project?▼

Yes. This Skill automates styling React components with shadcn/ui while respecting custom Tailwind theme tokens. It integrates CSS variables from your frontend configuration, ensuring consistent design without overwriting your theme setup.

What's the best way to style authentication pages and dashboards with shadcn/ui components?▼

Use a task-based approach: plan which files to style, fetch shadcn/ui usage examples to match proper props, replace HTML with shadcn/ui primitives, and run a build check to verify correctness. This ensures consistent component behavior and theme integration across authentication, navigation, and dashboard sections.

Do I need to manually install each shadcn/ui component before styling my React pages?▼

No. The Skill automates component installation and fetches usage examples via MCP registries, matching proper props for each component. You focus on the styling plan while installation and example retrieval are handled automatically.

How do I verify that shadcn/ui styling works correctly with my Tailwind configuration?▼

After styling pages with shadcn/ui primitives, run a build check to catch integration issues early. The Skill validates that theme variables are correctly applied and components render as expected before deployment.

Related Skills

Explore More Design & Creative Skills→
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
RenyEnnosRenyEnnos
1

shadcn-ui

Integrate and configure shadcn/ui components in React projects.

Community
Advanced
MolcajeteAIMolcajeteAI
2

shadcn-ui-setup

Install and configure shadcn/ui components with Tailwind CSS and React Server Components.

Official
Intermediate