ReddRadar
Agent skill
fireauto-ui-guide
"DaisyUI", "daisyui", "UI 마이그레이션", "UI migration", "shadcn to daisyui", "테마 설정", "theme", "컴포넌트 변환", "DaisyUI 테마", "DaisyUI 컴포넌트" 등 DaisyUI 기반 UI 구축이나 shadcn/ui 마이그레이션 시 사용하세요.
Install this agent skill to your Project
npx add-skill https://github.com/imgompanda/fireauto/tree/main/plugin/skills/fireauto-ui-guide
SKILL.md
DaisyUI v5 Best Practices
핵심 원칙
- 시맨틱 컬러 우선: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용
- 클래스 기반: React 컴포넌트 import 없이 HTML 클래스로 UI 구성
- 테마 일관성: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지
- 최소 JS: CSS-only 솔루션 활용 (modal, collapse, swap)
shadcn → DaisyUI 빠른 변환
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 |
테마 설정 (globals.css)
@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.md - 마이그레이션 치트시트:
references/migration-cheatsheet.md - oklch 색상 참조:
references/oklch-colors.md
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
imgompanda/fireauto
fireauto-prd-guide
"PRD 작성", "기획서", "제품 기획", "product requirements", "아이디어 구체화", "서비스 기획", "feasibility", "실현 가능성", "API 조사", "기술 스택 추천", "경쟁사 분석", "수익 모델" 등 아이디어를 PRD 문서로 변환할 때 사용하세요.
imgompanda/fireauto
fireauto-knowledge-hierarchy-guide
지식을 찾을 때 다음 순서로 탐색하세요: 1. CLAUDE.md — 핵심 규칙 + 지도 (항상 로드됨) 2. wiki-read — 상세 지식 페이지 (능동적으로 검색) 3. skill-search — DB에 저장된 재사용 스킬 (필요할 때 검색) 4. memory-search — 과거 작업 기록 (관련 맥락 필요할 때) "어떻게", "방법", "패턴", "규칙", "이전에", "참고" 등에 트리거.
imgompanda/fireauto
fireauto-research-guide
"레딧 리서치", "reddit research", "수요조사", "시장조사", "리드 스코어링", "lead scoring", "market research", "레딧에서 고객 찾기", "레딧 데이터 수집", "reddit lead generation" 등 레딧 기반 시장 조사나 고객 발굴 시 사용하세요.
imgompanda/fireauto
fireauto-mem-save-guide
개발 중 발견한 중요한 지식을 데이터베이스에 능동적으로 축적하세요. 사용자가 요청하지 않아도, 버그 수정·패턴 발견·설계 결정·주의사항 등 가치 있는 지식이 발생하면 자동으로 memory-save를 호출하세요. 사용자가 "기억해둬", "저장해둬", "remember this" 등으로 명시할 때도 사용하세요.
imgompanda/fireauto
fireauto-mem-compile-guide
축적된 개발 지식을 구조화된 문서로 종합하세요. 프로젝트 마무리, 인수인계, 회고, 또는 지식이 충분히 쌓였을 때 memory-compile로 패턴·결정·주의사항을 체계적으로 정리하세요. "정리해줘", "요약해줘", "지식 정리", "프로젝트 정리", "뭘 배웠지", "compile", "summarize project" 등 요청 시에도 사용하세요.
imgompanda/fireauto
fireauto-secure-guide
"보안 점검", "security check", "security audit", "취약점 분석", "vulnerability scan", "보안 감사", "시크릿 노출", "API 보안", "인증 점검", "rate limit" 등 보안 관련 코드 리뷰나 취약점 감사 시 사용하세요.
Didn't find tool you were looking for?