quailyquaily/quail-ui/quail-ui
Claude Code and agent skill by quailyquaily/quail-ui
Trust tier 2
- community
Source check pending
Checking that the SKILL.md file is still in the repository.
Use this skill when integrating Quail UI into a Vue 3 frontend, migrating an existing screen to Quail UI components, or needing the library's themes, tokens, icons, demo-backed usage patterns, and agent-facing onboarding docs.
Install
npx vskill@latest install quailyquaily/quail-ui/quail-uiSKILL.md
Quail UI Frontend Integration
Read `docs/ai-agent-guide.md` first. It is the primary onboarding document for AI agents and already contains:
- installation patterns
- plugin vs named-import usage
- theme helpers and token families
- typography, utility classes, and common CSS patterns
- demo coverage under
src/app/home/* - the exported component catalog
- the icon catalog
- current API gotchas where older docs are stale
Workflow
- Open `docs/ai-agent-guide.md`.
- Default to
app.use(QuailUI)plusimport "quail-ui/style.css"unless the task clearly needs selective registration. - Prefer exported Quail components, icons, theme helpers, and utility classes over custom lookalikes.
- Copy composition patterns from `src/app/home/`.
- If a prop or event is unclear, inspect the source in `src/components/common/` before writing code.
Files To Read On Demand
- `docs/ai-agent-guide.md`
- `src/index.ts`
- `src/components/common/index.ts`
- `src/components/icons/index.ts`
- `src/theme/index.ts`
- `src/styles/base.scss`
- `src/styles/layout/helper.scss`
- `src/styles/component.scss`
- `src/styles/theme/morph.scss`
- `src/app/home.vue`
- `src/app/home/`
Rules
- Prefer the real component APIs from source over older README snippets.
- Remember the current gotchas from the guide:
- no
QFormItem - no
QInputWithButton; useQTextFieldWithButton QInputusesinputTypeQTextareausesmaxQPaginationusestotalPage,hasPrev,hasNext- selectors emit
changeinstead ofv-model
Security
- Security scanPassed, 93 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingquaily_ui_skill/SKILL.md
Popularity
- Repository stars
- 46
- Repository forks
- 1
- Repository npm downloads, 7 days
- 149
- 7-day trend score
- 32
Stars and forks are for the whole GitHub repository, not this skill alone. Downloads are for the repository's npm package. Refreshed 19 Mar 2026, 7 months ago.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/quailyquaily/quail-ui/quail-ui)