shadcn-ui-setup
Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.
Best use case
shadcn-ui-setup is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.
Teams using shadcn-ui-setup should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/shadcn-ui-setup/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How shadcn-ui-setup Compares
| Feature / Agent | shadcn-ui-setup | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Shadcn UI & Theming To set up Shadcn UI & Theming, refer to the fullstackrecipes MCP server resource: **Resource URI:** `recipe://fullstackrecipes.com/shadcn-ui-setup` If the MCP server is not configured, fetch the recipe directly: ```bash curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup ```
Related Skills
base-app-setup
Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.
workflow-setup
Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.
vercel-analytics-setup
Add privacy-focused web analytics with Vercel Web Analytics. Track page views, visitors, and custom events with zero configuration.
user-stories-setup
Create a structured format for documenting feature requirements as user stories. JSON files with testable acceptance criteria that AI agents can verify and track.
sentry-setup
Configure Sentry for error tracking, performance monitoring, and log aggregation. Integrates with Pino to forward logs to Sentry automatically.
resend-setup
Configure Resend for transactional emails like password resets and email verification.
ralph-setup
Set up automated agent-driven development with Ralph. Run AI agents in a loop to implement features from user stories, verify acceptance criteria, and log progress for the next agent.
pino-logging-setup
Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services.
nuqs-setup
Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.
neon-drizzle-setup
Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.
feature-flags-setup
Implement feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration.
better-auth-setup
Add user authentication using Better Auth with Drizzle ORM and Neon Postgres. Base setup with email/password authentication.