By laguagu
Build, optimize, and review Next.js applications with AI-powered agents, SEO audits, performance optimization, and automated code reviews. Includes skills for AI SDK integration, shadcn/ui, caching, and database.
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
Tests web applications end-to-end by exercising real user flows, reviewing core usability and UI quality, and fixing verified code-level issues. Use when you want a full-app validation pass across critical flows such as forms, AI features, import/export, navigation, responsiveness, copy quality, and component fit. Reports infrastructure, environment, and product-level issues that require manual action.
Reviews Next.js + bun applications against established patterns. Fixes critical issues and reports recommendations. Use for auditing or validating projects.
Full-stack AI application generator with Next.js, AI SDK, and ai-elements. Use when creating chatbots, agent dashboards, or custom AI applications. Triggers: chatbot, chat app, agent dashboard, AI application, Next.js AI, useChat, streamText, ai-elements, build AI app, create chatbot
Build AI chat interfaces with pre-built shadcn-style components (Message, Conversation, PromptInput, Reasoning, Sources, Tool, Artifact, CodeBlock, Branch, Suggestions, Task, Image, ChainOfThought, InlineCitation, WebPreview, and more). Use when adding AI chat UI to a Next.js + AI SDK app, installing AI Elements components via the CLI (`bun x ai-elements@latest add <name>` or `npx shadcn@latest add @ai-elements/<name>`), composing message displays with markdown, building prompt inputs with attachments, or rendering streaming reasoning and tool output.
Vercel AI SDK v6 development. Use when building AI agents, chatbots, tool integrations, streaming apps, or structured output with the ai package. Covers ToolLoopAgent, useChat, generateText, streamText, tool approval, smoothStream, provider tools, MCP integration, and Output patterns.
Vercel AI SDK v7 development and migration. Use when building or upgrading AI SDK 7 apps, especially ToolLoopAgent, WorkflowAgent, HarnessAgent, Claude Code/Codex/Pi harnesses, runtimeContext, toolsContext, toolApproval, telemetry, reasoning, file or skill uploads, realtime, video generation, or v6-to-v7 breaking changes. For AI SDK v6 code use ai-sdk-6; for version discovery and general doc lookup use ai-sdk.
Answer questions about the AI SDK and help build AI-powered features. Use when developers ask about Vercel AI SDK, generateText, streamText, ToolLoopAgent, useChat, providers, tools, structured output, embeddings, streaming, or adding AI to an app. First identify the installed major version and route version-specific work: use ai-sdk-7 for AI SDK 7 features/migrations such as WorkflowAgent, HarnessAgent, reasoning, runtime/tools context, toolApproval, telemetry, realtime, or v6-to-v7 upgrades; use ai-sdk-6 for v6 code.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Skills for building AI applications, especially Next.js + bun runtime.
# Start a full-stack AI app
/ai-app
# Or use individual skills as needed
/ai-sdk-6 # AI agents & streaming
/postgres-semantic-search # Vector/hybrid search
| Skill | Description |
|---|---|
| ai-app | Full-stack AI app (chatbots, agents, dashboards) |
| nextjs-shadcn | Next.js 16 + shadcn/ui + bun |
| nextjs-chatbot | Production chatbot (HITL, persistence, GDPR) |
| Skill | Description |
|---|---|
| shadcn | shadcn/ui component management |
| frontend-design | Production-grade frontend interfaces |
| web-design-guidelines | UI/UX review against Web Interface Guidelines |
| chrome-devtools | Live browser inspection via Chrome DevTools MCP (DOM, console, network, performance) |
| go | Browser smoke test — verify recent UI changes work |
| Skill | Description |
|---|---|
| next-best-practices | RSC, async APIs, routing, optimization |
| react-best-practices | React/Next.js performance optimization (Vercel) |
| cache-components | Cache Components & PPR |
| nextjs-seo | SEO (metadata, sitemaps, JSON-LD) |
| Skill | Description |
|---|---|
| ai-sdk | Vercel AI SDK general guide (official) |
| ai-sdk-6 | AI SDK v6 (agents, streaming, tools) |
| ai-elements | AI Elements UI components |
| openai-agents-sdk | OpenAI Agents SDK (Python) |
| Skill | Description |
|---|---|
| postgres-semantic-search | pgvector semantic & hybrid search |
| supabase-postgres-best-practices | Postgres optimization (Supabase) |
| Skill | Description |
|---|---|
| skill-creator | Create, test, and optimize custom skills (extended) |
| handoff | Write a HANDOFF.md so a fresh agent can continue your work |
Example agents for common workflows. Copy to .claude/agents/ to use.
| Agent | Description |
|---|---|
| code-simplifier | Refines code for clarity (DRY/KISS/YAGNI) |
| nextjs-reviewer | Review reports for Next.js projects |
| e2e-tester | E2E testing via DevTools MCP, Playwright, or Claude in Chrome |
Skills under Based On drift as their upstreams change. To refresh one: fetch the
upstream folder, diff it against the local copy, and copy over the changed content files — but
keep the local SKILL.md frontmatter, since name/description and cross-skill references are
often customized. Skip a blind npx skills update: there is no lock file and some folders are
renamed from upstream.
Copy or symlink skills to:
npx claudepluginhub laguagu/claude-code-nextjs-skillsEditorial "Web Wizard" bundle for Claude Code from Antigravity Awesome Skills.
React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing/reviewing/refactoring React code for optimal performance. Covers async patterns, bundle optimization, server/client components, re-render optimization.
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
React, Next.js, and React Native best practices with web design guidelines.
Technical SEO with keyword strategy, meta optimization, snippets, and site structure