Agent skill
nuxt-ui
Use when implementing or debugging UI features with Nuxt UI components, designing forms, tables, modals, or any user interface work - fetches current documentation to ensure accurate component APIs
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/nuxt-ui-colinmollenhour-dotfiles-a9f8c4b4
SKILL.md
Nuxt UI Skill
Source of Truth: https://ui.nuxt.com/llms.txt for all Nuxt UI component APIs.
Nuxt UI v4 is actively developed with frequent changes. Training data may be outdated. Always verify component APIs before implementing.
Mandatory Workflow
Step 1: Fetch Targeted Documentation
Before implementing ANY Nuxt UI component, execute a WebFetch request:
WebFetch to https://ui.nuxt.com/llms.txt with prompt:
"Extract ONLY the documentation for [UComponent] from Nuxt UI.
Include: Props, Slots, Events, code examples.
Exclude everything else. Return a concise summary."
CRITICAL: Never fetch the full documentation. Use targeted extraction to avoid context bloat.
Step 2: Read Relevant Guide
Read the appropriate guide for your task:
| Task | Guide |
|---|---|
| Form validation, inputs, selects | FORMS.md |
| Data tables with filtering | TABLES.md |
| Modals, slideovers, popovers | OVERLAYS.md |
| Buttons, dropdowns, badges, layout | COMPONENTS.md |
| Best practices, accessibility, common mistakes | PATTERNS.md |
Step 3: Implement with Type Safety
All implementations must use:
- Zod schemas for form validation
- Proper TypeScript types
FormSubmitEvent<Schema>for form handlers
Red Flags - Stop and Fetch Docs First
| Warning Sign | Why It's Dangerous |
|---|---|
| "I know how UModal works" | API may have changed |
| "This is a simple component" | Simple tasks have highest error rates |
Using @close instead of v-model:open |
Event names change between versions |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?