Shadcn skills for Claude Code

Find Shadcn skills to make your AI agents smarter.

42 skills available

Official only

giuseppe-trisciuoglio/developer-kit

This skill guides you through setting up shadcn/ui, installing components, and building accessible, Tailwind-styled React UI patterns.

shadcn-ui

google-labs-code/stitch-skills

2.0k

This skill helps you discover, install, and customize shadcn/ui components in your project with best practices and zero runtime overhead.

shadcn

shadcn-ui/ui

110.0k

This skill helps you manage and apply shadcn/ui components and presets across projects, providing docs, usage examples, and consistent styling.

rapid-prototyper

openclaw/skills

2.6k

This skill helps you rapidly build MVPs with Next.js 14, Supabase, Clerk, shadcn/ui, and Prisma for fast, testable prototypes.

web-ui-shadcn-ui

agents-inc/skills

This skill helps you implement and customize shadcn/ui components using a CLI-driven workflow, CSS variables, and cn() utility for consistent theming.

shadcn-tailwind

tenequm/claude-plugins

This skill helps you design themed UIs with shadcn/ui and Tailwind v4 by applying semantic tokens, dark mode, and responsive patterns.

copycat

uzhussain/copycat

This skill inventories a Next.js app's public and authenticated views, confirms view names with you, and plans a shadcn-based clean platform scaffold.

shadcn-baseui

thunderboltdev/shadcn-baseui

This skill enforces Base UI patterns in shadcn/ui projects, preventing incorrect Radix UI guidance and ensuring render prop usage.

shadcn-base

noklip-io/agent-skills

This skill helps you navigate and apply Base UI patterns from shadcn/ui, accelerating component usage, theming, and forms integration.

ui-ux-pro-max

apconw/aix-db

2.0k

This skill helps you design and implement polished frontend UI/UX for pages, dashboards, and apps with best-practice guidelines.

mapcn-docs

lucking7/mapcn-skills

This skill helps you build comprehensive Next.js App Router documentation sites with live previews, code samples, and accessible, theme-aware UI.

tool-ui

petekp/claude-code-setup

This skill helps you integrate Tool UI components into React apps quickly by discovering, installing, scaffolding, and validating runtime wiring.

skill

maquina-app/maquina_components

118

This skill helps you build production-quality Rails UIs with maquina_components, using Tailwind and data attributes to ensure consistent, accessible interfaces.

web

yugasun/skills

This skill scaffolds and maintains modern React web apps with Bun, Vite, Tailwind, and shadcn/ui to accelerate UI development.

tapforce-shadcn-svelte

tapforce/agents-skills

This skill guides setting up and using shadcn-svelte in SvelteKit projects, delivering best practices for components, theming, and integration.

styling

gluestack/agent-skills

This skill helps you implement Gluestack UI v4 styling patterns with semantic tokens, dark mode, spacing, and variant management.

react-shadcn

fusengine/agents

This skill helps you build accessible, themeable React UI with shadcn/ui and TanStack Form, accelerating component, form, and dialog development.

web-ux-command-palette

gwenwindflower/.charmschool

This skill helps you implement a keyboard-driven command palette using cmdk and shadcn/ui for fast, accessible navigation.

ui-styling

mamba-mental/agent-skill-manager

This skill helps you design accessible, responsive UIs with shadcn/ui components, Tailwind styling, and canvas-driven visuals for consistent design systems.

frontend-agent

first-fluke/fullstack-starter

181

This skill helps you build accessible, design-faithful React and Next.js UI using shadcn/ui, server components, and design tokens for performance.

checkout

flowglad/flowglad

1.7k

This skill helps you implement checkout sessions for Flowglad subscriptions and products, including upgrade buttons, redirects, and pricing display.

ai-elements

vercel/ai-elements

1.7k

This skill helps you create AI Elements interface components following shadcn/ui patterns and Vercel AI SDK conventions for rapid integration.

tailwind-pattern

srbhr/resume-matcher

26.1k

This skill provides production-ready Tailwind CSS patterns for responsive layouts, cards, forms, and navigation to accelerate UI development.

shadcn-layouts

jwynia/agent-skills

This skill helps you generate correct shadcn/Tailwind layouts by applying CSS layout mental models to ensure scrolling, height, and grid correctness.

styling-with-tailwind

tenequm/claude-plugins

This skill helps you build consistent Tailwind CSS themed UIs using shadcn/ui patterns, semantic tokens, and responsive dark mode across components.

shadcn-theme-default

openclaw/skills

2.6k

This skill enforces the default shadcn/ui Neutral theme across components, ensuring consistent OKLCH-based styling and seamless dark mode support.

component-variants

fusengine/agents

This skill helps you implement multi-style components using CVA variants (glass, outline, flat) with dark mode and hover states.

shadcn-ui

gwenwindflower/.charmschool

This skill guides you in adding, customizing, and troubleshooting shadcn/ui components with CVA, theming, and architecture guidance.

frontend-engineer

first-fluke/fullstack-starter

181

This skill helps you build production-grade frontend code with shadcn/ui, design-token fidelity, and accessibility in Next.js apps.

anima-design-agent

openclaw/skills

2.6k

This skill turns ideas into live, design-aware full-stack apps with editable code, built-in data, hosting, and brand-consistent UI.

nextjs-stack

fusengine/agents

This skill provides a complete Next.js 16+ stack integration guide with Prisma, Better Auth, shadcn/ui, TanStack Form, Zustand for productive apps.

generating-components

fusengine/agents

This skill helps you generate cohesive UI components using Gemini Design, 21st.dev inspiration, and shadcn/ui with animated, accessible results.

frontend-builder

openclaw/skills

2.6k

This skill generates a production-ready React TSX component from natural language UI goals, orchestrating frontend-design-ultimate, shadcn-ui, and react-expert.

nextjs-tanstack-form

fusengine/agents

This skill helps you build and validate complex TanStack Form UIs in Next.js 16 with server actions, Zod, and shadcn integration.

lb-shadcn-ui-skill

openclaw/skills

2.5k

This skill provides comprehensive shadcn/ui documentation covering installation, theming, components, forms, charts, and framework integrations.

nextjs-shadcn

fusengine/agents

This skill helps you implement accessible shadcn/ui components in Next.js App Router, with TanStack Form patterns and SOLID architecture.

Page 1 of 2