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

1. Open `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/`.
5. 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; use QTextFieldWithButton
  • QInput uses inputType
  • QTextarea uses max
  • QPagination uses totalPage, hasPrev, hasNext
  • selectors emit change instead of v-model