Utilisez-le pour construire des interfaces utilisateur stylisées avec les composants @nuxt/ui v4 – créez des formulaires avec validation, implémentez des tableaux de données avec tri, construisez des boîtes de dialogue modales et des superpositions, et configurez le thème Tailwind Variants. Utilisez la compétence vue pour les motifs de composants bruts et reka-ui pour les primitives sans style.
Cette compétence est spécialisée dans la création d'interfaces utilisateur élégantes et fonctionnelles à l'aide de la bibliothèque @nuxt/ui v4. Elle permet aux développeurs de générer rapidement des formulaires avec validation intégrée, de mettre en place des tableaux de données interactifs avec des fonctionnalités de tri, et de concevoir des boîtes de dialogue modales et des superpositions pour des expériences utilisateur riches. La compétence exploite également les capacités de Tailwind Variants pour un thème cohérent et personnalisable. Elle est conçue pour être utilisée avec des agents IA comme Claude Code, Cursor ou Codex, et fonctionne de manière complémentaire avec les compétences 'vue' pour les motifs de composants bruts et 'reka-ui' pour les primitives sans tête. En résumé, c'est un outil incontournable pour tout développeur souhaitant accélérer la construction d'interfaces utilisateur modernes dans un environnement Nuxt.
npx skills add https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-uiUtilisez-le pour construire des interfaces utilisateur stylisées avec les composants @nuxt/ui v4 – créez des formulaires avec validation, implémentez des tableaux de données avec tri, construisez des boîtes de dialogue modales et des superpositions, et configurez le thème Tailwind Variants. Utilisez la compétence vue pour les motifs de composants bruts et reka-ui pour les primitives sans style.
This repo contains 15 individual skills — each has its own dedicated page.
Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.
Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.
Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration
Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.
Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.
Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".