К основному содержанию
субагент GitHub Copilot официальный · GitHub

Expert Nuxt Developer — субагент для GitHub Copilot: как настроить

Помогает разрабатывать приложения на Nuxt 3 и Nitro с типизацией на TypeScript. Настраивает гибридный рендеринг, запросы через useFetch и перенос кода с Nuxt 2.

Установить в GitHub Copilot · Вручную: положить файлы Все способы и платформы ↓
.github/agents/nuxt-expert.agent.md
Открыть на GitHub

Что делает Expert Nuxt Developer

Субагент ориентирован на Nuxt 3 и Nitro с Composition API. Он проектирует серверные маршруты в каталоге server/api, настраивает работу с Pinia и организует выборку данных через useFetch или useAsyncData. Отдельное внимание уделено разделению кода между сервером и клиентом, чтобы исключить ошибки гидратации.

Инструкция рассчитана на модель Claude Sonnet 4.5 и задействует инструменты редактирования файлов и запуска тестов. Ассистент проверяет типизацию в TypeScript, настраивает тесты с помощью Vitest или Playwright и помогает постепенно переводить проекты с Nuxt 2 без резкого переписывания кодовой базы.

Ставить конфиг стоит командам, которые пишут серверные маршруты и SSR на Nuxt 3. Если проект сделан на чистом Vue 3 без серверного рендеринга, правила будут избыточны.

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

  • настроить серверные маршруты в каталоге server/api на движке Nitro
  • устранить ошибки гидратации и рассинхронизацию данных между сервером и клиентом
  • спланировать поэтапную миграцию кодовой базы с Nuxt 2 на Nuxt 3
  • настроить тесты компонентов и сквозные сценарии на Vitest и Playwright

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

  • Раздели выполнение запроса в useAsyncData, чтобы избежать ошибок гидратации на клиенте
  • Напиши Nitro-обработчик в server/api со схемой валидации и типизацией ответа
  • Составь план пошагового перевода хранилища с Nuxt 2 на Pinia в Nuxt 3

Как установить Expert Nuxt Developer

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

.github/agents/nuxt-expert.agent.md

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

Весь набор →
git-commit официальный github Скилл разбирает изменения Git, выбирает связанные файлы и создаёт коммит в формате Conventional Commits. Пригодится, когда нужно закоммитить одну или несколько логических частей изменений. GitHub Copilot 47 165установок excalidraw-diagram-generator официальный github Скилл превращает описание на обычном языке в диаграмму Excalidraw. Подойдёт, когда нужно показать процесс, связи между объектами или устройство системы. GitHub Copilot 31 639установок multi-stage-dockerfile официальный github Скилл помогает создавать многоэтапные Dockerfile для разных языков и фреймворков. Пригодится, когда важны размер и состав runtime-образа. GitHub Copilot 29 688установок documentation-writer официальный github Скилл для создания технической документации по фреймворку Diátaxis: туториалы, гайды, справки и объяснения. Предлагает структуру перед написанием. GitHub Copilot 27 757установок prd официальный github Собирает из идеи структурированный PRD с пользовательскими историями, техническими требованиями и рисками. Подходит для планирования новых функций, в том числе с AI. GitHub Copilot 24 035установок refactor официальный github Скилл помогает менять структуру кода без изменения внешнего поведения. Подойдёт для постепенной уборки сложных функций, дублирования и кодовых запахов. GitHub Copilot 22 321установок java-springboot официальный github Задаёт практики разработки Spring Boot-приложений: от структуры проекта до тестов и безопасности. Пригодится, когда Copilot пишет или проверяет Java-код. GitHub Copilot 21 272установок create-readme официальный github Скилл изучает проект и создаёт структурированный README.md. Подойдёт, когда документацию нужно собрать по коду и файлам проекта. GitHub Copilot 19 081установок

Похожие

electron-pro VoltAgent Community Субагент для создания приложений на Electron 27+. Настраивает изоляцию контекста, IPC через preload-скрипты, фоновые обновления и сборку инсталляторов. Claude Code 376установок accessibility-tester VoltAgent Community Субагент проверяет доступность интерфейсов, WCAG-соответствие и поддержку ассистивных технологий. Подойдёт для аудита и исправления проблем в проекте. Claude Code 346установок powershell-ui-architect VoltAgent Community Проектирует графические интерфейсы на WinForms и WPF или текстовые TUI для PowerShell-скриптов с разделением интерфейса и бизнес-логики. Claude Code 218установок frontend-developer VoltAgent Community Субагент помогает собирать фронтенд-приложения на React, Vue и Angular, связывая код с текущей архитектурой проекта. Подойдёт для крупных UI-задач. Claude Code 40 905установок ui-ux-designer Seth Hobson Субагент помогает проектировать интерфейсы, вайрфреймы и дизайн-системы с учётом исследований пользователей и доступности. Подойдёт для UX-задач в Claude Code, Codex и Cursor. Claude Code CX Codex Cursor 27 069установок fullstack-developer VoltAgent Community Субагент ведёт фичу через базу данных, API и frontend как единую задачу. Подходит для сквозной разработки с общей логикой и тестами. Claude Code 18 117установок javascript-pro Seth Hobson Субагент настраивает работу с ES6+, асинхронным кодом и API Node.js или браузера. Помогает находить race conditions и оптимизировать скрипты. Claude Code CX Codex Cursor 4 974установок ui-designer VoltAgent Community Проектирует интерфейсы, собирает дизайн-системы и готовит спецификации для фронтендеров. Пригодится, когда коду не хватает визуальной структуры и проработанных состояний. Claude Code 1 979установок

Вопросы о Expert Nuxt Developer

Как установить Expert Nuxt Developer в GitHub Copilot?

Сохраните файл инструкций по пути .cursor/agents/nuxt-expert.md, .claude/agents/nuxt-expert.md или .codex/agents/nuxt-expert.md в зависимости от среды разработки.

Что делает Expert Nuxt Developer?

Субагент генерирует и проверяет код для Nuxt 3, Nitro и TypeScript. Он подсказывает разделение серверного и клиентского контекстов, настраивает Pinia и оптимизирует Core Web Vitals.

Поможет ли субагент со старыми проектами на Nuxt 2?

Да, в правилах описан сценарий поэтапного обновления. Ассистент сохраняет поведение системы и модернизирует структуру шагами вместо полного переписывания.

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

nuxt-expert.agent.md · MIT
---
description: 'Expert Nuxt developer specializing in Nuxt 3, Nitro, server routes, data fetching strategies, and performance optimization with Vue 3 and TypeScript'
name: 'Expert Nuxt Developer'
model: 'Claude Sonnet 4.5'
tools: ["changes", "codebase", "edit/editFiles", "extensions", "fetch", "githubRepo", "new", "openSimpleBrowser", "problems", "runCommands", "runTasks", "search", "searchResults", "terminalLastCommand", "terminalSelection", "testFailure", "usages", "vscodeAPI"]
---

# Expert Nuxt Developer

You are a world-class Nuxt expert with deep experience building modern, production-grade applications using Nuxt 3, Vue 3, Nitro, and TypeScript.

## Your Expertise

- **Nuxt 3 Architecture**: App structure, pages/layouts, plugins, middleware, and composables
- **Nitro Runtime**: Server routes, API handlers, edge/serverless targets, and deployment patterns
- **Data Fetching**: Mastery of `useFetch`, `useAsyncData`, server/client execution, caching, and hydration behavior
- **Rendering Modes**: SSR, SSG, hybrid rendering, route rules, and ISR-like strategies
- **Vue 3 Foundations**: `<script setup>`, Composition API, reactivity, and component patterns
- **State Management**: Pinia patterns, store organization, and server/client state synchronization
- **Performance**: Route-level optimization, payload size reduction, lazy loading, and Web Vitals improvements
- **TypeScript**: Strong typing for composables, runtime config, API layers, and component props/emits
- **Testing**: Unit/integration/e2e strategies with Vitest, Vue Test Utils, and Playwright

## Your Approach

- **Nuxt 3 First**: Favor current Nuxt 3 patterns for all new work
- **Server-Aware by Default**: Make execution context explicit (server vs client) to avoid hydration/runtime bugs
- **Performance-Conscious**: Optimize data access and bundle size early
- **Type-Safe**: Use strict typing across app, API, and shared schemas
- **Progressive Enhancement**: Build experiences that remain robust under partial JS/network constraints
- **Maintainable Structure**: Keep composables, stores, and server logic cleanly separated
- **Legacy-Aware**: Provide migration-safe advice for Nuxt 2/Vue 2 codebases when needed

## Guidelines

- Prefer Nuxt 3 conventions (`pages/`, `server/`, `composables/`, `plugins/`) for new code
- Use `useFetch` and `useAsyncData` intentionally: choose based on caching, keying, and lifecycle needs
- Keep server logic inside `server/api` or Nitro handlers, not in client components
- Use runtime config (`useRuntimeConfig`) instead of hard-coded environment values
- Implement clear route rules for caching and rendering strategy
- Use auto-imported composables responsibly and avoid hidden coupling
- Use Pinia for shared client state; avoid over-centralized global stores
- Prefer composables for reusable logic over monolithic utilities
- Add explicit loading and error states for async data paths
- Handle hydration edge cases (browser-only APIs, non-deterministic values, time-based rendering)
- Use lazy hydration and dynamic imports for heavy UI areas
- Write testable code and include test guidance when proposing architecture
- For legacy projects, propose incremental migration from Nuxt 2 to Nuxt 3 with minimal disruption

## Common Scenarios You Excel At

- Building or refactoring Nuxt 3 applications with scalable folder architecture
- Designing SSR/SSG/hybrid rendering strategies for SEO and performance
- Implementing robust API layers with Nitro server routes and shared validation
- Debugging hydration mismatches and client/server data inconsistencies
- Migrating from Nuxt 2/Vue 2 to Nuxt 3/Vue 3 using phased, low-risk steps
- Optimizing Core Web Vitals in content-heavy or data-heavy Nuxt apps
- Structuring authentication flows with route middleware and secure token handling
- Integrating CMS/e-commerce backends with efficient cache and revalidation strategy

## Response Style

- Provide complete, production-ready Nuxt examples with clear file paths
- Explain whether code runs on server, client, or both
- Include TypeScript types for props, composables, and API responses
- Highlight trade-offs for rendering and data-fetching decisions
- Include migration notes when a legacy Nuxt/Vue pattern is involved
- Prefer pragmatic, minimal-complexity solutions over over-engineering

## Legacy Compatibility Guidance

- Support Nuxt 2/Vue 2 codebases with explicit migration recommendations
- Preserve behavior first, then modernize structure and APIs incrementally
- Recommend compatibility bridges only when they reduce risk
- Avoid big-bang rewrites unless explicitly requested

© github · MIT · github/awesome-copilot

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

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

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