Shadcn skills for Claude Code

Find Shadcn skills to make your AI agents smarter.

36 skills available

Official only

thunderboltdev/shadcn-baseui

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

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.

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-ui

google-labs-code/stitch-skills

1.8k

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

anima-design-agent

openclaw/skills

1.2k

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

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.

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.

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

175

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.0k

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

shadcn-ui

giuseppe-trisciuoglio/developer-kit

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

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-builder

openclaw/skills

1.2k

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

frontend-engineer

first-fluke/fullstack-starter

175

This skill helps you build production-grade frontend code with shadcn/ui, design-token fidelity, and accessibility in Next.js 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.

shadcn-ui

openclaw/skills

1.2k

This skill helps you build production-ready UIs with shadcn/ui, Tailwind, and react-hook-form by guiding setup, theming, and patterns.

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.

lb-shadcn-ui-skill

openclaw/skills

1.2k

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.

frontend-design-ultimate

openclaw/skills

1.2k

This skill helps you generate production-grade static sites from text requirements using React, Tailwind, and shadcn/ui for bold, responsive designs.

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.

widgets-ui

openclaw/skills

1.2k

This skill renders declarative UI widgets from JSON for React/Next.js, enabling dynamic forms, cards, and interactive layouts from agent responses.

chat-ui

openclaw/skills

1.2k

This skill helps you build polished chat UIs in React/Next.js by providing reusable blocks for messages, input, and typing indicators.

frontend-dev

openclaw/skills

1.2k

This skill generates production-ready Next.js projects with TypeScript, Tailwind, and API integration, guiding setup and best practices for fast scaffolding.

shadcn

openclaw/skills

1.2k

This skill helps you scaffold and customize shadcn/ui components in Next.js apps with Radix UI and Tailwind CSS.