onmax/nuxt-skills
20 skills53.4k installs13.9k starsGitHub
Install
npx skills add https://github.com/onmax/nuxt-skillsSkills in this repo
1Nuxtnuxt is an agent skill for Nuxt 4.3+ projects providing progressive guidance on server routes file-based routing middleware plugins composables components and configuration. Reference files load on demand covering server.md for API routes validation with Zod WebSocket and SSE, routing.md for pages layouts and typed router, middleware-plugins.md for route guards and app lifecycle, nuxt-composables.md for useFetch and useRequestURL, nuxt-components.md for NuxtLink NuxtImg NuxtTime, and nuxt-config.md for modules auto-imports and layers. Quick start shows defineEventHandler with getValidatedQuery Zod parsing on server/api routes. Nuxt 4 differences include NuxtPage instead of Nuxt, getRouterParam instead of context.params, and useRequestURL origin instead of window.origin. The skill emphasizes token efficiency by loading only task-relevant reference files rather than all docs at once and points to official Nuxt h3 and Nitro sources for advanced cases. Related skills include vue for composables nuxt-ui nuxthub nuxt-content and nuxt-modules for specialized work.7.3kinstalls2VueUse 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 name vue description 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 license MIT Vue 3 Development Reference for Vue 3 Composition API patterns component architecture and testing practices Current stable Vue 3 5 with enhanced reactivity performance 56 memory 10x faster array tracking new SSR features and improved developer experience Overview Progressive reference system for Vue 3 projects Load only files relevant to current task to minimize context usage 250 tokens base 500-1500 per sub-file When to Use Use this skill when Writing vue components Creating composables use functions Building client-side utilities Testing Vue components composables Use nuxt skill instead for Server routes API endpoints File-based routing middleware Nuxt-specific patterns For styled UI components use nuxt-ui skill For headless accessible7kinstalls3Reka UiUse 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 name reka-ui description Use when building with Reka UI headless Vue components provides component API accessibility patterns composition asChild controlled uncontrolled state virtualization and styling integration license MIT Reka UI Unstyled accessible Vue 3 component primitives Current version v2 8 0 January 2026 When to Use Building headless unstyled components from scratch Need WAI-ARIA compliant components Using Nuxt UI shadcn-vue or other Reka-based libraries Implementing accessible forms dialogs menus popovers For Vue patterns use vue skill Available Guidance File Topics references components md references components md Component index by category Form Date Overlay Menu Data etc components md Per-component details dialog md select md etc Guides see reka-ui com https reka-ui com Styling Animation Composition SSR Namespaced Dates i18n Controlled State Inject Context Virtualization Migration Loading Files Consider loading these reference files based on your task referenc.6.7kinstalls4Nuxt UiAccordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string lang ts-type icon string lang ts-type trailingIcon string lang ts-type content string lang ts-type value string lang ts-type disabled boolean lang ts-type slot string lang ts-type with-custom-slot class any lang ts-type ui item ClassNameValue header ClassNameValue trigger ClassNameValue leadingIcon ClassNameValue label ClassNameValue trailingIcon ClassNameValue content ClassNameValue body ClassNameValue lang ts-type component-code ignore items external items externalTypes AccordionItem hide class props class px-4 items label Icons icon i-lucide-smile content You have nothing to do nuxt icon will handle it automatically disabled slot Usage vue UAccordion props here Slots body content Accordion A stacked set of collapsible panels Based on Reka UI Accordion https reka-ui com docs components accordion Key Props items as an array of objects with the following properties label string lang ts-type icon string lang ts-type trailingIcon string lang ts-type content string lang ts-type value stri.6.2kinstalls5VitestThe vitest skill covers the Vite-native Vitest framework with a Jest-compatible API for unit and integration tests in Vite, Vue, React, and Svelte projects. Quick start installs vitest as a dev dependency and defines vitest.config.ts with globals and node or jsdom environments. Tests use describe, it, expect, and vi imports for mocks. Reference files split configuration and CLI, test API and hooks, vi.fn and vi.mock mocking, expect snapshots and coverage utilities, and advanced environments plus browser mode guidance. The skill instructs agents to load only relevant reference files per task rather than reading all docs at once. Cross-skill pointers defer Vue component testing to the vue skill, library patterns to ts-library, and shared Vite settings to the vite skill. Use cases include mocking modules and timers, running concurrent tests, and TypeScript type testing. License is MIT and installation assumes an existing Vite-based project toolchain.2.5kinstalls6Nuxt SeoThe nuxt-seo skill guides configuration of the @nuxtjs/seo meta-module stack for Nuxt applications. Install via npx nuxi module add @nuxtjs/seo, then load only the reference files relevant to the current task rather than all at once for token efficiency. It covers site URL and name foundation via nuxt-site-config and useSiteConfig, robots.txt with useRobotsRule, sitemap generation with defineSitemapEventHandler, dynamic OG images via defineOgImage, JSON-LD through nuxt-schema-org, and utilities like breadcrumbs and canonical URLs. Nuxt Content v3 integrates via asSeoCollection for automatic sitemap, og-image, and schema-org from frontmatter when @nuxtjs/seo loads before @nuxt/content. The module overview table maps each package to purpose and key APIs. Main skill stays around 250 tokens with sub-files at 400 to 600 tokens each. Token-efficient loading keeps the main skill near 250 tokens. See SKILL.md for the authoritative workflow and constraints.2.3kinstalls7Nuxt ContentProgressive guidance for content driven Nuxt apps with typed collections and SQL backed queries Content collections content config ts defineCollection Remote sources GitHub repos external APIs via defineCollectionSource Content queries queryCollection navigation search MDC rendering ContentRenderer prose components Database configuration SQLite PostgreSQL D1 LibSQL Content hooks content file beforeParse content file afterParse i18n multi language content NuxtStudio or preview mode LLMs integration nuxt llms For writing documentation use document writer skill For Nuxt basics use nuxt skill For NuxtHub deployment use nuxthub skill NuxtHub v1 compatible Read specific files based on current work references collections md references collections md defineCollection schemas sources content config ts references querying md references querying md queryCollection navigation search surroundings references rendering md references rendering md ContentRenderer MDC syntax prose components Shiki references config md references config md Database setup markdown plugins renderer options references studio md references studio md NuxtStudio integration preview mode live editing2.1kinstalls8MotionAnimation library for Vue 3 and Nuxt Production ready hardware accelerated animations with minimal bundle size Current stable motion v 1 x Vue port of Motion formerly Framer Motion Progressive reference for Motion Vue animations Load only files relevant to current task 200 tokens base 500 1500 per sub file Simple declarative animations fade slide scale Gesture based interactions hover tap drag Scroll linked animations Layout animations and shared element transitions Spring physics animations GSAP Complex timelines SVG morphing scroll triggered sequences vueuse motion Simpler API less features smaller bundle CSS animations Simple transitions without JS The motion agent skill provides documented workflows prerequisites triggers and safety guidance from its SKILL md source Agents load it when user requests match the description and follow step by step instructions without inventing capabilities It integrates with standard agent tooling for the tasks inputs outputs and failure modes described in the repository documentation2.1kinstalls9Nuxt ModulesThe nuxt-modules skill guides developers through creating Nuxt modules that extend framework functionality across published npm packages, local modules directories, and inline config hooks. It covers defineNuxtModule anatomy, Nuxt Kit utilities, runtime injection of components, composables, plugins, and server routes, plus playground and fixture-based E2E testing. Reference files split guidance into development patterns, testing and npm publishing best practices, and copy-paste CI/CD workflow templates. The skill emphasizes loading only the reference file relevant to the current task rather than reading everything at once. Module types include published @nuxtjs/ or nuxt- packages, local modules/ extensions, and inline nuxt.config.ts hooks. Quick start uses nuxi init -t module with dev, dev:build, and test scripts. Related skills nuxt and vue cover framework basics and runtime patterns. Use when creating Nuxt modules, publishing to npm, setting up module CI/CD, or extending Nuxt with components, composables, plugins, API routes, or middleware.2kinstalls10Vitevite is a Claude Code skill from onmax/nuxt-skills for configuring Vite beyond default SPA setups. The skill documents library mode with defineConfig, entry resolution, fileName patterns, and rolldownOptions for externalizing Vue and React peers with globals mapping. It covers multiple library entries, SSR configuration, and package.json exports so distributable packages resolve correctly for consumers. Developers reach for vite when a Vite project needs library distribution, server-side rendering, or multi-page bundling and rollup externals or export maps are misconfigured.1.9kinstalls11Document WriterUse 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. The document-writer skill documents workflows and patterns from the repository SKILL.md. --- name: document-writer description: 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. license: MIT --- # Documentation Writer for Nuxt Ecosystem Writing guidance for blog posts and documentation following patterns from official Nuxt websites. ## When to Use - Writing blog posts for Nuxt ecosystem projects - Creating or editing documentation pages - Ensuring consistent writing style across content ## Writing Standard **Override**: When writing documentation, maintain proper grammar and complete sentences.1.8kinstalls12Ts LibraryThe ts-library skill 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. It covers starting a new TypeScript library single or monorepo. Key workflows include setting up package.json exports for dual CJS/ESM. - Starting a new TypeScript library single or monorepo - Setting up package.json exports for dual CJS/ESM - Configuring tsconfig for library development - Choosing build tools tsdown, unbuild - Designing type-safe APIs builder, factory, plugin patterns - Writing advanced TypeScript types - Setting up vitest for library testing - Configuring release workflow and CI For Nuxt module development: use Developers invoke ts-library when the task matches the triggers and reference files in SKILL.md for grounded, stepwise execution.1.8kinstalls13Nuxt Better AuthThe nuxt-better-auth skill documents authentication for Nuxt 4+ on Better Auth via @onmax/nuxt-better-auth. It covers module installation, environment variables, useUserSession composables, signIn/signUp/signOut flows, serverAuth helpers, requireUserSession for API routes, and client/server route protection with routeRules and definePageMeta. Reference files split installation, client auth, server auth, route protection, plugins such as admin/passkey/2FA, NuxtHub database integration, clientOnly external backends, and type augmentation for AuthUser and AuthSession. The module is alpha (v0.0.2-alpha.19) and APIs may change. Pair with nuxt and nuxthub skills for broader Nuxt and database patterns.1.7kinstalls14PnpmThe pnpm skill covers content-addressable store strict deps workspace protocol and catalogs for Node monorepos. Quick start install add dev deps recursive run and filter commands. Workspace setup via pnpm-workspace.yaml with catalog centralized versions and workspace protocol dependencies. Use installing packages monorepo setup catalog version management overriding transitive deps patching third-party packages and CI hardening for pnpm projects with supply chain security focus. Content-addressable store strict dependencies. pnpm-workspace.yaml and catalogs. workspace protocol and filter runs. Overrides patches CI configuration. Supply chain security hardening. pnpm workspace and catalog guide. User asks pnpm workspace catalog override.1.7kinstalls15NuxthubThe nuxthub skill documents NuxtHub full-stack framework with database KV blob and cache multi-cloud Cloudflare Vercel Deno Netlify AWS. Load wrangler-templates.md for Cloudflare wrangler.jsonc and providers.md for external database storage providers. Cross-reference nuxt skill server patterns and nuxt-content for database content. Use Nuxt serverless database KV blob cache deployment configuring providers and Cloudflare or Vercel hosting for Nuxt full-stack apps. NuxtHub database KV blob cache. Multi-cloud Cloudflare Vercel Deno Netlify. wrangler-templates for Cloudflare config. providers.md for external DB storage. Pairs with nuxt and nuxt-content skills. NuxtHub full-stack Nuxt framework skill. User asks NuxtHub database KV blob.1.6kinstalls16Tsdowntsdown is a Nuxt-skills entry for bundling TypeScript libraries with advanced plugin support and lifecycle hooks using the Rolldown engine. It documents supported plugin types: native Rolldown, Unplugin (most unplugin-* packages), Rollup (often with type cast), and some Vite plugins. Examples show defineConfig with UnpluginVue for Rolldown and custom transform plugins that export raw .txt files as modules. Developers reach for tsdown when publishing TS libraries that need Rolldown-speed bundling with hooks beyond a minimal tsc emit. The skill covers plugin composition patterns rather than application routing or SSR setup.1.1kinstalls17Tresjstresjs is an onmax/nuxt-skills agent skill for TresJS Vue 3D development using the @tresjs/cientos helper collection built on three-stdlib. Install with pnpm add @tresjs/cientos and import components such as OrbitControls directly inside TresCanvas without a Tres prefix. The skill documents camera orbit props including enableDamping, autoRotate, minDistance, and maxDistance plus change, start, and end events. Developers reach for tresjs when building interactive 3D dashboards, product viewers, or WebGL scenes in Vue/Nuxt apps and want prebuilt controls and loaders instead of raw Three.js setup code.1kinstalls18Nuxt Studionuxt-studio is a MIT-licensed Claude Code skill for Nuxt Studio, the self-hosted open-source CMS module for Nuxt Content websites in production. The skill walks developers through installing the nuxt-studio module, configuring authentication providers (GitHub, GitLab, Google OAuth, SSO, custom), setting up Git-based publishing with branch config, enabling visual content editing via MDC components and YAML/JSON forms, and connecting media backends including public directories, NuxtHub blob, S3, and R2. Developers reach for nuxt-studio when they need production-ready visual editing and Git-backed content workflows without leaving the Nuxt Content stack. It covers frontmatter editing, publishing flows, and operational setup rather than generic Nuxt app scaffolding.997installs19Writing Web Documentationwriting-web-documentation is an agent skill from onmax/nuxt-skills that produces clear, trustworthy, maintainable technical documentation for web projects. It applies information architecture, task-first page structure, runnable examples, version and prerequisite hygiene, accessibility rules, and docs-as-code maintenance habits across README files, docs homepages, quickstarts, tutorials, how-to guides, API and reference pages, conceptual explanations, migration guides, and troubleshooting content for frontend, backend, full-stack, SDK, API, and framework-based products. A developer reaches for writing-web-documentation when documentation is missing, outdated, or hard to navigate before onboarding contributors, shipping a release, or publishing an SDK. The skill explicitly excludes marketing copy, legal text, and non-technical customer-support articles.766installs20Phaser Best Practicesphaser-best-practices is a framework skill from onmax/nuxt-skills for Phaser 3 JavaScript or TypeScript browser games. It scaffolds new projects with Node.js/npm or existing bundlers and covers scenes, entities, physics, UI, tilemaps, animations, input, audio, cameras, and Phaser-specific bug fixes. Metadata pins phaser-major to 3 and skill-type to framework. Developers reach for phaser-best-practices when adding game features or fixing performance and architecture problems instead of generic JavaScript advice696installs