New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Fireauto UI Guide

by imgompanda in imgompanda/fireauto

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

MITAuto-check passedFrontend & Design

Install Fireauto UI Guide

skills CLI
$ npx skills add imgompanda/fireauto --skill fireauto-ui-guide -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install imgompanda/fireauto fireauto-ui-guide --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/imgompanda/fireauto.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugin/skills/fireauto-ui-guide .claude/skills/fireauto-ui-guide && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fireauto-ui-guide
GitHub stars
140
Token cost
~578 tokens
SKILL.md length
119 words
Files
4 (incl. references)
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 4 steps: 시맨틱 컬러 우선: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용 → 클래스 기반: React 컴포넌트 import 없이 HTML 클래스로… → 테마 일관성: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지 → …
  • Tasks that involve Design systems
  • SKILL.md covers 핵심 원칙, shadcn → DaisyUI 빠른 변환, 색상 전환 and 컴포넌트 카탈로그 요약, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

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

Its SKILL.md is about 580 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/components.md`, `references/migration-cheatsheet.md` and `references/oklch-colors.md`).

It sits in Frontend & Design, covering Design systems. It works with shadcn/ui and daisyUI. The repository describes itself as: Claude Code 자동화 플러그인 — SEO, 보안, 팀 에이전트, PRD, 레딧 리서치를 커맨드 하나로. The licence is MIT.

When your agent uses it

  • Tasks that involve Design systems

Example prompts

  • “DaisyUI”
  • “daisyui”
  • “UI 마이그레이션”
  • “/fireauto-ui-guide”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. 시맨틱 컬러 우선: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용
  2. 클래스 기반: React 컴포넌트 import 없이 HTML 클래스로 UI 구성
  3. 테마 일관성: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지
  4. 최소 JS: CSS-only 솔루션 활용 (modal, collapse, swap)

What it can do on your machine

Read from SKILL.md and the folder at commit 694d941. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fireauto UI Guide loads about 578 tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 49 tokens; SKILL.md has 119 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~49
When it runs · the whole SKILL.md, loaded when a task matches
~578
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from imgompanda/fireauto at commit 694d941, republished under its MIT licence (© imgompanda). 119 words, ~578 tokens.

Download SKILL.mdSave it as .claude/skills/fireauto-ui-guide/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
fireauto-ui-guide
description
"DaisyUI", "daisyui", "UI 마이그레이션", "UI migration", "shadcn to daisyui", "테마 설정", "theme", "컴포넌트 변환", "DaisyUI 테마", "DaisyUI 컴포넌트" 등 DaisyUI 기반 UI 구축이나 shadcn/ui 마이그레이션 시 사용하세요.

DaisyUI v5 Best Practices

핵심 원칙

  1. 시맨틱 컬러 우선: 하드코딩 색상 대신 DaisyUI 시맨틱 토큰 사용
  2. 클래스 기반: React 컴포넌트 import 없이 HTML 클래스로 UI 구성
  3. 테마 일관성: oklch() 컬러 시스템으로 테마 간 일관된 색상 유지
  4. 최소 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

컴포넌트 카탈로그 요약

카테고리컴포넌트
Layoutnavbar, drawer, footer, hero
Navigationmenu, tabs, breadcrumbs, pagination
Data Displaycard, table, stat, countdown, timeline
Inputbutton, input, select, textarea, checkbox, toggle, range
Feedbackalert, toast, loading, progress, skeleton, tooltip
Overlaymodal, dropdown, swap, collapse

테마 설정 (globals.css)

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

© imgompanda, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in plugin/skills/fireauto-ui-guide of imgompanda/fireauto.

  • SKILL.md
  • references/components.md
  • references/migration-cheatsheet.md
  • references/oklch-colors.md

Open the folder on GitHubat commit 694d941

Compare with similar skills

Fireauto UI Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fireauto UI Guide compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fireauto UI Guide this skillimgompanda/fireauto140—~578Automated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Shadcnsupabase/evals14342 repos~4.5kAutomated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Activepieces Design Systemactivepieces/activepieces25k—~3.6kAutomated safety check: PassCustom licence
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Shadcn

    supabase/evals

    Official

    Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

    143 GitHub starsUsed in 42 repos~4.5k tokens
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Activepieces Design System

    activepieces/activepieces

    Design system for Activepieces (open-source AI automation platform, "open source replacement for Zapier").

    25k GitHub stars~3.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • DaisyUI Component Library

    saadeghi/daisyui

    Official daisyUI skill for Tailwind CSS projects, routing to install, usage, configuration, color and per-component guides before writing any HTML or JSX with its classes.

    43k GitHub stars~1.3k tokensUpdated 8 days ago
    Frontend & DesignAuto-check passed

More from imgompanda/fireauto

All 15 skills in this repo

  • Fireauto Lsp Guide

    imgompanda/fireauto

    "정의로 이동", "참조 찾기", "심볼 검색", "타입 확인", "호출 계층", "코드 찾기", "함수 찾기", "어디서 쓰이는지", "어디에 정의된", "구현체 찾기", "인터페이스 구현", "코드 추적", "코드 탐색" 등 코드 탐색이나 심볼 검색이 필요할 때 자동으로 LSP 도구를 우선 사용하세요.

    140 GitHub stars~456 tokensUpdated 6 mo ago
    Auto-check passed

  • Fireauto Project Guide

    imgompanda/fireauto

    프로젝트 생성, 마일스톤 관리, 태스크 추적이 필요할 때 사용하세요. An agent skill from imgompanda/fireauto.

    140 GitHub stars~674 tokensUpdated 6 mo ago
    Auto-check passed

  • Fireauto Secure Guide

    imgompanda/fireauto

    "보안 점검", "security check", "security audit", "취약점 분석", "vulnerability scan", "보안 감사", "시크릿 노출", "API 보안", "인증 점검", "rate limit" 등 보안 관련 코드 리뷰나 취약점 감사 시 사용하세요.

    140 GitHub stars~371 tokensUpdated 6 mo ago
    Auto-check: notes

  • Fireauto Team Guide

    imgompanda/fireauto

    "팀 에이전트", "team agent", "병렬 작업", "parallel work", "워크스트림", "workstream", "여러 에이전트", "동시에 작업", "에이전트 팀", "에이전트 간 대화", "team chat", "컴퍼니", "company model" 등 멀티 에이전트 병렬 작업이나 에이전트 간 협업 시 사용하세요.

    140 GitHub stars~456 tokensUpdated 6 mo ago
    Auto-check passed

  • Fireauto Research Guide

    imgompanda/fireauto

    "레딧 리서치", "reddit research", "수요조사", "시장조사", "리드 스코어링", "lead scoring", "market research", "레딧에서 고객 찾기", "레딧 데이터 수집", "reddit lead generation" 등 레딧 기반 시장 조사나 고객 발굴 시 사용하세요.

    140 GitHub stars~524 tokensUpdated 6 mo ago
    Auto-check passed

  • Fireauto SEO Guide

    imgompanda/fireauto

    "SEO 감사", "SEO audit", "기술 SEO", "technical SEO", "구조화 데이터", "schema markup", "JSON-LD", "robots.txt", "sitemap", "메타 태그", "검색엔진 최적화", "pSEO", "Rich Results", "Core Web Vitals" 등 SEO 관련 최적화나 감사 시…

    140 GitHub stars~450 tokensUpdated 6 mo ago
    Auto-check passed

Works with

Categories

Questions about Fireauto UI Guide

What does Fireauto UI Guide do?

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

When should I use Fireauto UI Guide?

Fireauto UI Guide fits situations like: tasks that involve Design systems.

How do I install Fireauto UI Guide in Claude Code?

Run `npx skills add imgompanda/fireauto --skill fireauto-ui-guide -a claude-code`. Or copy the skill folder (plugin/skills/fireauto-ui-guide in imgompanda/fireauto) into .claude/skills/fireauto-ui-guide in your project. Claude Code loads it when a task matches its description.

How do I install Fireauto UI Guide in Codex?

Run `npx skills add imgompanda/fireauto --skill fireauto-ui-guide -a codex`. Or copy the skill folder (plugin/skills/fireauto-ui-guide in imgompanda/fireauto) into .agents/skills/fireauto-ui-guide in your project. Codex loads it when a task matches its description.

Can I use Fireauto UI Guide in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add imgompanda/fireauto --skill fireauto-ui-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fireauto-ui-guide, .gemini/skills/fireauto-ui-guide, .github/skills/fireauto-ui-guide and .opencode/skills/fireauto-ui-guide in your project.

What does Fireauto UI Guide need to run?

SKILL.md names no scripts, command-line tools or credentials: Fireauto UI Guide is instructions for the agent only.

Does Fireauto UI Guide access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Fireauto UI Guide safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Fireauto UI Guide use?

Fireauto UI Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fireauto UI Guide use?

About 578 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.9k tokens, read only when the agent opens those files.

What are the alternatives to Fireauto UI Guide?

Skills that share tags, products or a category with Fireauto UI Guide: UI Styling (Ohh-889/skyroc, 795 stars), Shadcn (supabase/evals, 143 stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Activepieces Design System (activepieces/activepieces, 25k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fireauto UI Guide?

imgompanda (a GitHub user) maintains it in imgompanda/fireauto, which has 140 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on April 9, 2026.

Source: imgompanda/fireauto on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.