Next.js AI Skills — плагин
Плагин из 24 скиллов для Claude Code: ИИ-приложения на Next.js, AI SDK 7, shadcn/ui, pgvector, проверка интерфейса в браузере
- 71 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы дают агенту команды для Bun, `hcloud` и браузера, а mcp.json запускает через `npx` сторонний сервер Next.js DevTools MCP
- Скилл `hetzner-cloud` работает с облачной инфраструктурой Hetzner через токен
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/next-js-ai-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы дают агенту команды для Bun, `hcloud` и браузера, а mcp.json запускает через `npx` сторонний сервер Next.js DevTools MCP
- Скилл `hetzner-cloud` работает с облачной инфраструктурой Hetzner через токен
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин nextjs-ai-skills собирает 24 скилла вокруг одного стека: Next.js 16, Vercel AI SDK, shadcn/ui, Bun и Postgres с pgvector. Скилл ai-app строит приложение целиком, от чат-бота до панели агентов, и по умолчанию берет AI SDK 7. Рядом лежат `nextjs-shadcn` для каркаса, `frontend-design` и `web-design-guidelines` для оформления и ревью интерфейса, ai-sdk-6 и ai-sdk-7 со справкой по версиям, `postgres-semantic-search` для векторного и гибридного поиска и `next-best-practices`, `cache-components` и `nextjs-seo` по самому фреймворку. Скилл go выполняет дымовую проверку в браузере: открывает страницу и убеждается, что свежие правки интерфейса работают. Скилл chrome-devtools подключает Chrome DevTools MCP и дает смотреть DOM, консоль, сеть и производительность. В инструментальную часть входят `handoff` (файл HANDOFF.md для продолжения работы свежим агентом), `agent-harness-review` и `hetzner-cloud` для управления облаком Hetzner через `hcloud`. Вместе с плагином стартует сервер Next.js DevTools MCP из файла mcp.json. Slash-команды /nextjs-ai-skills:ai-app и /nextjs-ai-skills:go запускают главные сценарии, остальные скиллы включаются по контексту запроса. Те же скиллы можно скопировать в .claude/skills/ или .agents/skills/ для Claude Code и Codex.
Для кого. Веб-разработчикам, которые строят чат-ботов, агентов и панели на Next.js и хотят дать Claude Code готовые правила под этот стек.
Подходит, если
- Новое приложение с чатом на AI SDK 7: каркас, интерфейс на shadcn/ui и подключение моделей создаются одним сценарием
- Проект остается на AI SDK 6, и агенту нужна справка по нужной мажорной версии и план перехода на 7
- В базе Postgres нужен семантический или гибридный поиск через pgvector
- После правки интерфейса нужен дымовой тест в браузере, и сценарий go открывает страницу и проверяет ее
- Рабочий день закончился на полпути, и скилл `handoff` пишет HANDOFF.md для следующего агента
Не подходит, если
- Стек другой: скиллы заточены под Next.js, Bun и Vercel AI SDK, для других фреймворков отдельных правил нет
- Нужен чат-бот на устаревшем шаблоне: скилл `nextjs-chatbot` заморожен и больше не обновляется
- Приложение строится на библиотеке elements.ai-sdk.dev: для новых проектов автор ведет к shadcn/ui AI Elements, старая библиотека устаревает в конце ноября 2026
- Нужна минимальная установка: плагин приносит 24 скилла, и часть из них заведомо не понадобится
Пример запроса к агенту
Создай чат-бота на Next.js с AI SDK 7 и shadcn/ui, подключи pgvector для поиска по документам и проверь результат в браузереОграничения
- Скиллы рассчитаны на Next.js 16, Bun и AI SDK 6 или 7, для других версий нужна проверка по установленным пакетам.
- Скилл `nextjs-chatbot` заморожен автором и не обновляется.
- Библиотека AI Elements с elements.ai-sdk.dev помечена устаревающей в конце ноября 2026, для новых интерфейсов предписан shadcn/ui AI Elements.
- Скиллу chrome-devtools нужны Chrome и Chrome DevTools MCP.
- Скилл `hetzner-cloud` требует установленного `hcloud` и токена Hetzner.
- Часть скиллов основана на чужих источниках (Vercel, Supabase), в README приведена таблица происхождения. Лицензия MIT.
Как отключить. Плагин снимает команда `/plugin uninstall nextjs-ai-skills@laguagu`. Если ставили под старым именем claude-code-nextjs-skills, удалите его так же. Скопированные вручную папки скиллов удаляются из .claude/skills/ или .agents/skills/.
Частые вопросы
Как поставить Next.js AI Skills в Claude Code?
Выполните /plugin marketplace add laguagu/claude-code-nextjs-skills и `/plugin install nextjs-ai-skills@laguagu`. Обновляют плагин командами `claude plugin marketplace update laguagu` и `claude plugin update nextjs-ai-skills@laguagu`.
Работает ли набор в Codex?
Да, папки скиллов копируют в .agents/skills/ для проекта или в ~/.agents/skills/ для всех проектов. Клиенты с форматом Agent Plugins читают корневой файл plugin.json.
Какую версию AI SDK скилл выбирает по умолчанию?
Для нового приложения AI SDK 7 с пакетами ai@7 и @ai-sdk/react@4. Версию 6 скилл сохраняет, если на нее завязана нужная зависимость.
Как посмотреть консоль и сеть страницы?
Скилл chrome-devtools подключает Chrome DevTools MCP. Через него агент читает DOM, консоль, сетевые запросы и показатели производительности.
Что входит в mcp.json плагина?
Сервер Next.js DevTools MCP, он запускается командой `npx -y next-devtools-mcp@latest` по stdio. Chrome DevTools MCP настраивается отдельно по инструкции скилла chrome-devtools.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныClaude Code Skills and Agents
Claude Code Skills & Agents
Плагин Claude Code с набором скиллов и субагентов: глубокое исследование, генерация картинок, работа с GitHub, разбор кода и переключение моделей
Маркетплейс Claude Code из 19 плагинов и 76 скиллов по фронтенду, бэкенду, DevOps и безопасности с командой сборки цепочек
15 скиллов для Claude Code и Codex: Laravel, Docker, UI, отладка, тесты и документация в четырех готовых плагин-пакетах
ClaudeKit Skills
ClaudeKit - Agent Skills
Маркетплейс плагинов для Claude Code с набором из более чем тридцати скиллов: фронтенд, бэкенд, devops, базы, документы, отладка и работа с MCP
Набор из 116 скиллов, 44 агентов и хуков безопасности для Claude Code, Cursor, Codex, Gemini CLI и еще девяти редакторов
Больше двадцати скиллов для кодовых агентов: MCP и хуки, режим плана, протокол багфикса, промпты и защитный хук для bash
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Next.js AI Skills (эта карточка) | нет | 71 | ||
| Скиллы Next.js | нет | 143 488 | набор скиллов только по Next.js, без AI SDK, поиска по векторам и проверки в браузере | |
| Next.js DevTools MCP | да | не нужна | 836 | MCP-сервер диагностики Next.js, который здесь подключается как одна из частей плагина |
Коротко о README
README открывается быстрым стартом из двух команд /plugin и перечнем двух главных сценариев. Дальше 24 скилла разложены по группам: генераторы приложений, интерфейс, Next.js, SDK для ИИ, базы и поиск, инструменты. Отдельно упомянуты mcp.json, пример глобального файла инструкций для долгих автономных запусков и установка без плагина, а в конце приведена таблица источников.
Бейдж для README
Исходный SKILL.md
--- name: ai-app description: >- Builds full-stack Next.js AI applications with the AI SDK and the shadcn/ui AI Elements patterns. Use when creating a chatbot, agent dashboard or custom AI application. --- # AI application setup Build the requested app around its users, data and operations. Keep the existing stack and SDK major unless migration is part of the task; use Bun for new JavaScript projects. 1. Resolve the installed AI SDK major through `ai-sdk`; use `ai-sdk-6` or `ai-sdk-7` for implementation. For a new app, default to **AI SDK 7**: `ai@7`, `@ai-sdk/react@4` and each provider package at `latest` (provider majors differ; Node.js 22+). Keep v6 only when a required dependency pins it. Build new chat UI from the AI Elements patterns in shadcn/ui (https://ui.shadcn.com/docs/ai-elements); they need no v7 patch. The older elements.ai-sdk.dev library (`ai-elements`) will be deprecated at the end of November 2026, targets v6, and its `context.tsx` fails a v7 typecheck until patched. Read version-matched `ai/docs/` and provider docs before using web examples. 2. Use `nextjs-shadcn` for framework setup and `frontend-design` for visual direction. Compose chat UI from the shadcn/ui patterns (Message, Bubble, Message Scroller, Trace; the `shadcn` skill). For a chatbot, shadcn-ui/chatbot-template is a starting point after upgrading its Next.js (16.3.6) to a release without open security advisories (16.4.5+ on 2026-11-09). Use `ai-elements` only for components already copied from elements.ai-sdk.dev. Inspect installed source instead of assuming registry props. 3. Keep provider credentials and authorization on the server. Resolve model IDs from configuration or the selected provider's catalog. 4. Implement the smallest complete user flow. Add persistence, approvals, attachments, search, suggestions or dashboards when the app needs them. 5. Match the server stream to the client transport. Verify a second turn, relevant tool states, safe failures and mobile behavior, alongside the project's typecheck/build. ## Read for the app being built - [Chatbot](references/chatbot.md): conversation and stream contracts. - [Agent dashboard](references/agent-dashboard.md): execution, approval and run state. - [Examples](references/examples.md): current official implementations.