К основному содержанию
скилл CX Codex

nuxt-modules — скилл для Claude Code: что делает и как установить

Скилл помогает создавать модули для Nuxt: локальные расширения в папке modules/, пакеты для npm, серверные роуты и плагины с настройкой тестов и CI/CD.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-code
Открыть на GitHub

Что делает nuxt-modules

Скилл систематизирует разработку модулей под Nuxt с применением defineNuxtModule и утилит Nuxt Kit. Он задаёт структуру проекта с точкой входа в src/module.ts, изолированным рантайм-кодом (components, composables, plugins, server) и песочницей playground/ для ручной проверки в процессе кодинга.

Вся справочная база разбита на три файла: разработка и хуки (development.md), E2E-тестирование и публикация в npm (testing-and-publishing.md), а также шаблоны CI/CD (ci-workflows.md). Инструкция требует не загружать эти файлы разом, поэтому контекст агента не забивается лишними деталями.

Базовый шаблон создаётся через npx nuxi init -t module <имя>, а для логики внутри рантайма скилл опирается на соседние инструкции по nuxt и vue.

Какие задачи решает

  • сконфигурировать локальный модуль Nuxt через defineNuxtModule
  • внедрить рантайм-компоненты, плагины и серверные роуты через Nuxt Kit
  • настроить E2E-тесты модуля в папке test/fixtures/
  • подготовить шаблоны CI/CD для публикации пакета в npm

Примеры запросов агенту

  • Помоги написать локальный модуль Nuxt в modules/ для регистрации серверного middleware
  • Как настроить E2E-тестирование модуля Nuxt с помощью тестового playground?
  • Сделай GitHub Actions workflow для публикации Nuxt-модуля в npm

Как установить nuxt-modules

1Через Skills CLI (Vercel)

npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-code

2Вручную: положить файлы

~/.claude/skills/nuxt-modules/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/nuxt-modules/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора8

reka-ui Скилл для работы с Reka UI — библиотекой unstyled компонентов Vue 3 с полной поддержкой доступности. Пригодится, если вы собираете интерфейсы с нуля или используете Nuxt UI и shadcn-vue. CX Codex +1 7 400установок nuxt-seo Помогает агенту настроить SEO в Nuxt: robots, карту сайта, OG-изображения и структурированные данные. Пригодится при работе с @nuxtjs/seo. CX Codex +1 3 100установок nuxt-content Скилл для работы с @nuxt/content: коллекции, схемы, запросы и рендер Markdown. Пригодится, когда проект на Nuxt растёт и контент пора приводить к типам. CX Codex +1 2 800установок nuxthub Помогает настраивать NuxtHub v0.10.8 с базой данных на Drizzle ORM, KV-хранилищем и blob. Пригодится при сборке бэкенда Nuxt под Cloudflare, Vercel или локальный PGlite. CX Codex +1 2 200установок nuxt-better-auth Направляет настройку аутентификации Nuxt через @nuxtjs/better-auth: от сессий и маршрутов до серверных API и плагинов. CX Codex +1 2 000установок nuxt-studio Помогает настроить self-hosted Nuxt Studio: авторизацию, медиа, черновики и публикацию через Git. Пригодится, когда контент-редактор надо поднять на своём домене. CX Codex +1 1 600установок nuxt-i18n Скилл для ИИ-агента, который помогает настроить локали, маршруты и SEO в Nuxt-приложении через @nuxtjs/i18n. CX Codex +1 589установок

Похожие

bun-nuxt secondsky Скилл объясняет агенту, как поднять Nuxt 3 на Bun: скрипты, пресет Nitro, серверные маршруты и деплой. Пригодится, если проект уже на Nuxt и вы хотите уйти с Node. CX Codex +1 387установок Expert Nuxt Developer официальный github Помогает разрабатывать приложения на Nuxt 3 и Nitro с типизацией на TypeScript. Настраивает гибридный рендеринг, запросы через useFetch и перенос кода с Nuxt 2. ★ 40 418звёзд репо nuxt Anthony Fu Скилл добавляет поддержку Nuxt 5 — полнофункционального Vue-фреймворка с серверным рендерингом, файловой маршрутизацией и автоимпортами. Помогает агенту писать серверные маршруты, работать с useFetch, middleware и гибридным рендерингом. CX Codex +1 24 100установок nuxt-ui nuxt Помогает агенту собирать интерфейсы на базе @nuxt/ui v4, настраивать темы Tailwind CSS и правильно выбирать компоненты библиотеки. CX Codex +1 19 800установок clerk-nuxt-patterns clerk Скилл подсказывает агенту паттерны авторизации @clerk/nuxt для Nuxt 3. Пригодится при настройке серверных роутов Nitro, SSR-гидратации и защите страниц. CX Codex +1 13 900установок nuxt-ui-v4 secondsky Скилл для сборки интерфейсов на Nuxt UI v4: 125+ компонентов, Tailwind v4, тёмная тема. Пригодится, когда агент пишет дашборд, форму или чат на Nuxt. CX Codex +1 410установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о nuxt-modules

Как установить nuxt-modules в Claude Code?

Выполните команду npx skills add onmax/nuxt-skills --skill nuxt-modules -a claude-code.

Для каких типов модулей подходит этот скилл?

Скилл охватывает три варианта: опубликованные npm-пакеты с префиксами @nuxtjs/ или nuxt-, локальные модули проекта в папке modules/ и инлайн-хуки внутри nuxt.config.ts.

Какие справочные файлы входят в скилл?

В него входят руководства development.md по Nuxt Kit и хукам, testing-and-publishing.md по тестам и публикации в npm, а также ci-workflows.md с шаблонами для пайплайнов.

Исходный текст

SKILL.md · MIT
---
name: nuxt-modules
description: "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."
license: MIT
---

# Nuxt Module Development

Guide for creating Nuxt modules that extend framework functionality.

**Related skills:** `nuxt` (basics), `vue` (runtime patterns)

## Quick Start

```bash
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev        # Start playground
npm run dev:build  # Build in watch mode
npm run test       # Run tests
```

## Available Guidance

- **[references/development.md](references/development.md)** - Module anatomy, defineNuxtModule, Kit utilities, hooks
- **[references/testing-and-publishing.md](references/testing-and-publishing.md)** - E2E testing, best practices, releasing, publishing
- **[references/ci-workflows.md](references/ci-workflows.md)** - Copy-paste CI/CD workflow templates

## Loading Files

**Consider loading these reference files based on your task:**

- [ ] [references/development.md](references/development.md) - if building module features, using defineNuxtModule, or working with Kit utilities
- [ ] [references/testing-and-publishing.md](references/testing-and-publishing.md) - if writing E2E tests, publishing to npm, or following best practices
- [ ] [references/ci-workflows.md](references/ci-workflows.md) - if setting up CI/CD workflows for your module

**DO NOT load all files at once.** Load only what's relevant to your current task.

## Module Types

| Type      | Location         | Use Case                         |
| --------- | ---------------- | -------------------------------- |
| Published | npm package      | `@nuxtjs/`, `nuxt-` distribution |
| Local     | `modules/` dir   | Project-specific extensions      |
| Inline    | `nuxt.config.ts` | Simple one-off hooks             |

## Project Structure

```
my-module/
├── src/
│   ├── module.ts           # Entry point
│   └── runtime/            # Injected into user's app
│       ├── components/
│       ├── composables/
│       ├── plugins/
│       └── server/
├── playground/             # Dev testing
└── test/fixtures/          # E2E tests
```

## Resources

- [Module Guide](https://nuxt.com/docs/guide/going-further/modules)
- [Nuxt Kit](https://nuxt.com/docs/api/kit)
- [Module Starter](https://github.com/nuxt/starter/tree/module)

© onmax · MIT · onmax/nuxt-skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой