How do I install the Use Quail UI In Frontend Project skill?

Run npx skillmds@latest add tomevault-io/use-quail-ui-in-frontend-project-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Use Quail UI In Frontend Project safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Use Quail UI In Frontend Project?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Use Quail UI In Frontend Project free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Use Quail UI In Frontend Project?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Use Quail UI In Frontend Project by tomevault-io

Name: Use Quail UI In Frontend Project
Author: tomevault-io

Use Quail UI In Frontend Project

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.

tomevault-io Updated Sep 17, 2026

File contents

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) plus import "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

Rules

Prefer the real component APIs from source over older README snippets.
Remember the current gotchas from the guide:
- no QFormItem
- no QInputWithButton; use QTextFieldWithButton
- QInput uses inputType
- QTextarea uses max
- QPagination uses totalPage, hasPrev, hasNext
- selectors emit change instead of v-model

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: use-quail-ui-in-frontend-project-2description: 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.---# Quail UI Frontend IntegrationRead [`docs/ai-agent-guide.md`](https://github.com/quailyquaily/quail-ui/blob/master/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## Workflow1. Open [`docs/ai-agent-guide.md`](https://github.com/quailyquaily/quail-ui/blob/master/docs/ai-agent-guide.md).2. Default to `app.use(QuailUI)` plus `import "quail-ui/style.css"` unless the task clearly needs selective registration.3. Prefer exported Quail components, icons, theme helpers, and utility classes over custom lookalikes.4. Copy composition patterns from [`src/app/home/`](https://github.com/quailyquaily/quail-ui/tree/master/src/app/home).5. If a prop or event is unclear, inspect the source in [`src/components/common/`](https://github.com/quailyquaily/quail-ui/tree/master/src/components/common) before writing code.## Files To Read On Demand- [`docs/ai-agent-guide.md`](https://github.com/quailyquaily/quail-ui/blob/master/docs/ai-agent-guide.md)- [`src/index.ts`](https://github.com/quailyquaily/quail-ui/blob/master/src/index.ts)- [`src/components/common/index.ts`](https://github.com/quailyquaily/quail-ui/blob/master/src/components/common/index.ts)- [`src/components/icons/index.ts`](https://github.com/quailyquaily/quail-ui/blob/master/src/components/icons/index.ts)- [`src/theme/index.ts`](https://github.com/quailyquaily/quail-ui/blob/master/src/theme/index.ts)- [`src/styles/base.scss`](https://github.com/quailyquaily/quail-ui/blob/master/src/styles/base.scss)- [`src/styles/layout/helper.scss`](https://github.com/quailyquaily/quail-ui/blob/master/src/styles/layout/helper.scss)- [`src/styles/component.scss`](https://github.com/quailyquaily/quail-ui/blob/master/src/styles/component.scss)- [`src/styles/theme/morph.scss`](https://github.com/quailyquaily/quail-ui/blob/master/src/styles/theme/morph.scss)- [`src/app/home.vue`](https://github.com/quailyquaily/quail-ui/blob/master/src/app/home.vue)- [`src/app/home/`](https://github.com/quailyquaily/quail-ui/tree/master/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`; use `QTextFieldWithButton` - `QInput` uses `inputType` - `QTextarea` uses `max` - `QPagination` uses `totalPage`, `hasPrev`, `hasNext` - selectors emit `change` instead of `v-model`---> Converted and distributed by [TomeVault](https://tomevault.io/claim/quailyquaily) — claim your Tome and manage your conversions.

Frequently asked questions