Vuetify0

What it does

This skill enables AI agents to generate Vue.js components using Vuetify v0, a collection of headless UI primitives for Vue 3. It provides developers with 36 components and 63 composables across various categories like selection, forms, data management, disclosure elements, observers, and plugins. The focus is on providing the logic layer without pre-defined styling, allowing for maximum flexibility in UI design.

When to use it

• When building Vue.js applications requiring complex state management for user selections (e.g., tabs, filters).
• For implementing forms with asynchronous validation and dirty tracking.
• To create data tables that are sortable or filterable.
• When needing a reactive registry of IDs linked to values.
• For managing auto-dismissing queues like snackbars or toasts.

Key capabilities

• Selection Composables: Includes createSingle, createSelection, createGroup, createNested, and createStep for various selection scenarios.
• Form Composables: Provides tools like createForm, createValidation, createSlider, createCombobox, and numeric input helpers.
• Data Management Composables: Offers utilities for pagination (createPagination), virtualization (createVirtual), and data tables (createDataTable).
• Utilities & Foundation: Includes components for breadcrumbs (createBreadcrumbs), overflow menus (createOverflow), context management (createContext), and design token graphs (createTokens).
• System Composables: Provides functionality for popovers (usePopover), enter/leave animations (usePresence), and more.

Example prompts

• "Generate a Vue component with a single-choice selection using createSingle."
• "Create a form with asynchronous validation using createForm and createValidation."
• "Show me how to implement a sortable data table using createDataTable."

Tips & gotchas

• Refer to the Decision Table: Before writing custom logic, consult the provided decision table to determine which composable best fits your problem. Matching by problem is more effective than matching by keyword.
• No Global Plugin Required: Vuetify v0 components are tree-shakeable and do not require a global plugin for installation.
• Headless UI: Remember that this skill provides the logic; you'll need to handle styling independently.