메뉴
Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when working with mise - creating/editing mise.toml or .mise.toml files, defining tasks with usage field arguments, managing dev tools and environments, configuring hooks, or when user mentions mise configuration.
Prisma 7 ORM with PostgreSQL — schema design, migrations, seeding, and Railway deployment patterns. This skill should be used when setting up Prisma in a new project, writing migrations, managing database schemas, or deploying Prisma-backed services to Railway.
Railway deployment and infrastructure management skill. This skill should be used when deploying applications to Railway, managing Railway services, checking deployment status, viewing logs, configuring environment variables, or troubleshooting Railway deployments.
NestJS 11 backend patterns with Fastify, modular architecture, guards, pipes, and Railway deployment. This skill should be used when building NestJS APIs, setting up backend services, or creating REST/GraphQL endpoints with NestJS.
shadcn/studio component library with MCP integration, theme generation, and block patterns. This skill should be used when building UI with shadcn components, selecting dashboard layouts, or generating landing pages. Canonical source for all shadcn-based work.
Build MCP Apps - interactive UI components that render inside AI hosts like Claude, ChatGPT, and VSCode. This skill should be used when creating tools with rich UI, building dashboards or forms for AI interactions, or adding visual interfaces to MCP servers.
| name | ui-themes |
| description | Theme generation with tweakcn for shadcn/ui and Magic UI animations. Use when setting up project themes, customizing color schemes, adding dark mode, or integrating animated components. |
Generate and customize shadcn/ui themes using tweakcn and enhance with Magic UI animated components. This skill covers theme selection, dark mode setup, and animation integration.
tweakcn is a visual theme editor for shadcn/ui that exports production-ready CSS variables.
globals.css with the exported themeChoose a preset based on your product's personality:
| Design Direction | Recommended Presets | When to Use |
|---|---|---|
| Precision & Density | graphite, mono, darkmatter | Dev tools, power user apps, terminals |
| Sophistication & Trust | vercel, cosmic night, claude | Finance, enterprise, B2B |
| Warmth & Approachability | modern minimal, notebook, soft pop | Collaboration tools, note apps |
| Boldness & Clarity | neo brutalism, bold tech, clean slate | Marketing sites, modern dashboards |
| Dark Professional | graphite, darkmatter, cosmic night | Any dark-first application |
| Light Professional | modern minimal, clean slate, vercel | Light-first applications |
tweakcn supports multiple export formats:
Replace the :root and .dark sections in globals.css with tweakcn export:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* tweakcn exported variables go here */
--background: 0 0% 100%;
--foreground: 224 71% 4%;
/* ... rest of light theme */
}
.dark {
/* tweakcn exported dark variables */
--background: 224 71% 4%;
--foreground: 210 20% 98%;
/* ... rest of dark theme */
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
For dark mode default, add className="dark" to the html element:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<body>{children}</body>
</html>
)
}
If using a sidebar layout, tweakcn includes sidebar-specific variables:
--sidebar-background: ...;
--sidebar-foreground: ...;
--sidebar-primary: ...;
--sidebar-primary-foreground: ...;
--sidebar-accent: ...;
--sidebar-accent-foreground: ...;
--sidebar-border: ...;
--sidebar-ring: ...;
Magic UI provides 150+ animated React components that integrate with shadcn/ui.
Magic UI uses the shadcn CLI for installation:
# Install individual components
pnpm dlx shadcn@latest add @magicui/component-name
# Examples
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button
Components install to components/ui/ alongside existing shadcn components.
Smooth dark/light mode toggle with animation:
pnpm dlx shadcn@latest add @magicui/animated-theme-toggler
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"
<AnimatedThemeToggler />
Hover effects with gradient tracking - perfect for cards and grid items:
pnpm dlx shadcn@latest add @magicui/magic-card
import { MagicCard } from "@/components/ui/magic-card"
<MagicCard className="p-6">
<h3>Card Title</h3>
<p>Card content with gradient hover effect</p>
</MagicCard>
Premium CTA buttons with shimmer loading state:
pnpm dlx shadcn@latest add @magicui/shimmer-button
import { ShimmerButton } from "@/components/ui/shimmer-button"
<ShimmerButton>Get Started</ShimmerButton>
Smooth entrance animations for content:
pnpm dlx shadcn@latest add @magicui/blur-fade
import { BlurFade } from "@/components/ui/blur-fade"
<BlurFade delay={0.1}>
<div>Content fades in with blur effect</div>
</BlurFade>
AI-like text reveal for generated content:
pnpm dlx shadcn@latest add @magicui/typing-animation
import { TypingAnimation } from "@/components/ui/typing-animation"
<TypingAnimation text="AI-generated content appears here..." />
Subtle animated border glow:
pnpm dlx shadcn@latest add @magicui/border-beam
import { BorderBeam } from "@/components/ui/border-beam"
<div className="relative">
<BorderBeam />
<div>Content with glowing border</div>
</div>
| Category | Components | Use Case |
|---|---|---|
| Effects | Magic Card, Border Beam, Shine Border | Cards, containers |
| Buttons | Shimmer Button, Rainbow Button, Pulsating Button | CTAs, actions |
| Animations | Blur Fade, Typing Animation, Text Animate | Content reveal |
| Backgrounds | Dot Pattern, Grid Pattern, Particles | Hero sections |
| Navigation | Dock, Smooth Cursor | App navigation |
| Theme | Animated Theme Toggler | Dark/light mode |
Set dark mode as the default without toggle:
// app/layout.tsx
<html lang="en" className="dark">
For user-controlled theme switching, use next-themes:
pnpm add next-themes
// components/theme-provider.tsx
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({ children }: { children: React.ReactNode }) {
return (
<NextThemesProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
{children}
</NextThemesProvider>
)
}
// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
)
}
Combine with Magic UI's Animated Theme Toggler:
"use client"
import { useTheme } from "next-themes"
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<AnimatedThemeToggler
checked={theme === "dark"}
onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
/>
)
}
Best for: Dev tools, dashboards, professional apps
# 1. Get theme from tweakcn (use "graphite" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button
pnpm dlx shadcn@latest add @magicui/blur-fade
Set dark default:
<html lang="en" className="dark">
Best for: Content apps, documentation, general purpose
# 1. Get theme from tweakcn (use "modern minimal" preset)
# 2. Install dependencies
pnpm add next-themes
pnpm dlx shadcn@latest add @magicui/animated-theme-toggler
Use ThemeProvider with default light.
Best for: AI tools, chat apps, generative products
# 1. Get theme from tweakcn (use "claude" or "cosmic night" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/typing-animation
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/blur-fade
pnpm dlx shadcn@latest add @magicui/shimmer-button
Use typing animation for AI-generated content.