Using AI with Quiet

Quiet UI provides an Agent Skill to help AI assistants understand and work with the library. This is the preferred way to give AI coding assistants knowledge about Quiet UI.

Skills provide structured, on-demand documentation that AI tools like Claude Code, Cursor, and others can load when needed.

What's included Jump to heading #

• Core instructions for using components, slots, events, and styling
• Theming reference with design tokens, color palettes, and dark mode
• Restyle reference for Quiet UI's optional CSS reset
• CSS utilities reference for validation states, visibility, and layout helpers
• Component references for all 93 components with properties, slots, events, methods, CSS parts, and custom states

Installing the skill Jump to heading #

If you're using Claude Code or another skills-compatible tool, install the skill from your project directory:

npx skills add https://cdn.quietui.org/v2.4.0/skills/quietui

Or if you've installed Quiet via npm:

npx skills add ./node_modules/@quietui/quiet/dist/skills/quietui

How it works Jump to heading #

Once installed, the AI assistant will automatically load Quiet UI documentation when you're working on relevant tasks. The skill uses progressive disclosure — it loads the main instructions first, then fetches detailed component references only when needed, keeping context efficient.

Try asking your AI assistant:

• "Create a form with quiet-text-field and quiet-button"
• "How do I style quiet-button with CSS parts?"
• "What events does quiet-dialog emit?"
• "Show me how to use quiet-card with custom slots"

Manual usage Jump to heading #

For AI tools that don't support skills, you can upload the SKILL.md file directly. After installing Quiet via npm, the file is located at:

node_modules/@quietui/quiet/dist/skills/quietui/SKILL.md