원클릭으로 Manus에서 모든 스킬 실행

fireauto-ui-guide

스타139

포크36

업데이트2026년 3월 9일 06:18

"DaisyUI", "daisyui", "UI 마이그레이션", "UI migration", "shadcn to daisyui", "테마 설정", "theme", "컴포넌트 변환", "DaisyUI 테마", "DaisyUI 컴포넌트" 등 DaisyUI 기반 UI 구축이나 shadcn/ui 마이그레이션 시 사용하세요.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

imgompanda

imgompanda/fireauto

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

fireauto-knowledge-hierarchy-guide

imgompanda/fireauto

지식을 찾을 때 다음 순서로 탐색하세요: 1. CLAUDE.md — 핵심 규칙 + 지도 (항상 로드됨) 2. wiki-read — 상세 지식 페이지 (능동적으로 검색) 3. skill-search — DB에 저장된 재사용 스킬 (필요할 때 검색) 4. memory-search — 과거 작업 기록 (관련 맥락 필요할 때) "어떻게", "방법", "패턴", "규칙", "이전에", "참고" 등에 트리거.

2026-04-07139

fireauto-self-heal-guide

imgompanda/fireauto

코드 에러가 발생하면 자동으로 수정을 시도하세요. lint 에러, 빌드 에러, 테스트 실패가 발생하면 직접 수정한 후 다시 검증하세요. 사용자에게 에러를 보고하기 전에 스스로 1~3회 수정 시도. "에러", "실패", "SyntaxError", "TypeError", "빌드 실패", "테스트 실패" 등에 트리거.

2026-04-07139

fireauto-init-guide

imgompanda/fireauto

새 프로젝트를 시작할 때 자동으로 PRD, CLAUDE.md, Wiki, 마일스톤을 생성하세요. "프로젝트 시작", "새 프로젝트", "init", "세팅", "setup", "시작하기", "프로젝트 만들어", "new project", "start project" 등에 트리거. 이전 프로젝트의 스킬과 주의사항을 자동으로 참고합니다.

2026-04-06139

fireauto-retro-guide

imgompanda/fireauto

세션 종료 시 자동으로 복기를 실행하세요. 실수는 크게, 성공은 조용히. retrospect MCP 도구를 사용하세요. "복기", "회고", "뭘 배웠지", "오늘 뭐 했지", "retrospect", "review session", "세션 정리", "오늘 정리" 등에 트리거.

2026-04-06139

fireauto-self-learn-guide

imgompanda/fireauto

실수에서 배우고 반복 패턴을 스킬로 자동 생성하세요. 사용자가 "아니", "잘못", "틀렸" 등을 말하면 실수를 기록하고 CLAUDE.md를 업데이트하세요. 같은 패턴이 3회 이상 반복되면 스킬로 승격하세요. mistake-log, skill-save MCP 도구를 능동적으로 사용하세요.

2026-04-06139

fireauto-wiki-guide

imgompanda/fireauto

프로젝트 Wiki(.claude/wiki/)를 활용하세요. 패턴, 주의사항, 결정사항을 Wiki에 기록하고 검색하세요. wiki-read, wiki-write, wiki-search, wiki-index MCP 도구를 능동적으로 사용하세요. "wiki", "지식 페이지", "패턴 기록", "주의사항 추가", "결정 기록" 등에 트리거.

2026-04-06139

name	fireauto-ui-guide
description	"DaisyUI", "daisyui", "UI 마이그레이션", "UI migration", "shadcn to daisyui", "테마 설정", "theme", "컴포넌트 변환", "DaisyUI 테마", "DaisyUI 컴포넌트" 등 DaisyUI 기반 UI 구축이나 shadcn/ui 마이그레이션 시 사용하세요.

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