Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fireauto
Guides DaisyUI v5 best practices, shadcn/ui to DaisyUI migration mappings, oklch theme configuration, color transitions, and component catalog for class-based Tailwind UIs.
npx claudepluginhub imgompanda/fireauto --plugin fireautoHow this skill is triggered — by the user, by Claude, or both
Slash command
/fireauto:fireauto-ui-guideThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. **시맨틱 컬러 우선**: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용
Guides building UI components, implementing themes, and creating responsive layouts with daisyUI and Tailwind CSS. Includes component categories, theming, and installation.
Guides building UI components, implementing themes, and creating responsive designs with daisyUI Tailwind CSS library.
Provides shadcn/ui expert guidance on CLI init/add, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and UI design. Use for setup, customization, or troubleshooting.
Share bugs, ideas, or general feedback.
Button variant="default" → btn btn-primary
Button variant="ghost" → btn btn-ghost
Button variant="outline" → btn btn-outline
Button variant="destructive" → btn btn-error
Card → card bg-base-100 shadow-xl
Badge → badge
Input → input input-bordered w-full
Dialog → modal (HTML dialog)
Tabs → tabs tabs-bordered
Switch → toggle
Separator → divider
Skeleton → skeleton
Sheet → drawer
bg-black → bg-base-100 (다크 테마에서)
text-white → text-base-content
text-zinc-400 → text-base-content/60
bg-zinc-800 → bg-base-200
border-zinc-700 → border-base-300
| 카테고리 | 컴포넌트 |
|---|---|
| Layout | navbar, drawer, footer, hero |
| Navigation | menu, tabs, breadcrumbs, pagination |
| Data Display | card, table, stat, countdown, timeline |
| Input | button, input, select, textarea, checkbox, toggle, range |
| Feedback | alert, toast, loading, progress, skeleton, tooltip |
| Overlay | modal, dropdown, swap, collapse |
@plugin "daisyui" {
themes: light --default, dark --prefersdark,
my_theme {
primary: oklch(0.7 0.2 75);
secondary: oklch(0.6 0.15 250);
accent: oklch(0.75 0.18 150);
neutral: oklch(0.3 0.01 260);
base-100: oklch(0.98 0.005 260);
base-200: oklch(0.93 0.005 260);
base-300: oklch(0.88 0.005 260);
base-content: oklch(0.2 0.01 260);
};
}
/fireauto-ui — 3가지 모드 (build, migrate, theme)references/components.mdreferences/migration-cheatsheet.mdreferences/oklch-colors.md