🧠 Claude Code AI Skills

Skills for building AI applications, especially Next.js + bun runtime.

Packaged as an Agent Plugin (v1.0.0), so the same skills load in Claude Code, ChatGPT, Codex, Cursor, GitHub Copilot, VS Code and Kiro. See Installation.

⚡ Quick Start

# 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

📋 Skills

🚀 App Generators

🎨 UI & Design

⚡ Next.js

🤖 AI SDKs

🗄️ Database & Search

🛠️ Tooling

🤖 Custom Agents

Example agents for common workflows. Installed automatically with the plugin; otherwise copy to .claude/agents/.

📦 Based On

🔄 Updating

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.

📥 Installation

Claude Code (plugin)

The repo doubles as its own marketplace, so no clone is needed:

/plugin marketplace add laguagu/claude-code-nextjs-skills
/plugin install claude-code-nextjs-skills@laguagu

That installs all 23 skills, both agents, and the two MCP servers from .mcp.json. Plugin skills are namespaced, so they invoke as /claude-code-nextjs-skills:go rather than /go, and model-invoked skills trigger as usual. Update later with /plugin marketplace update laguagu.

To try it without installing, clone the repo and run claude --plugin-dir ./claude-code-nextjs-skills.

Other agents (Agent Plugin)

This repo is also an Agent Plugins v1.0.0 package: plugin.json at the root, skills as immediate children of skills/, and MCP servers in mcp.json. Clone it and point a plugin-capable client at the folder:

git clone https://github.com/laguagu/claude-code-nextjs-skills.git

ChatGPT, Codex, Cursor, GitHub Copilot, VS Code and Kiro read this format, but the loading step itself is client-specific — installation, enablement and updates are deliberately outside the spec, so check your client’s docs. What the spec does guarantee is that all of them read the same skills/ and mcp.json, with no per-client rearranging.

Individual skills

Copy or symlink single skill folders to:

• Claude Code: ~/.claude/skills/ (global) or .claude/skills/ (project)
• Other agents (Codex, Windsurf, Cursor): ~/.agents/skills/ or .agents/skills/

🔧 MCP Servers

Recommended MCP servers that pair with these skills:

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    },
    "ai-elements": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://registry.ai-sdk.dev/api/mcp"]
    }
  }
}

Two files carry this, on purpose: mcp.json is the portable Agent Plugins copy that any plugin-capable client reads, and .mcp.json is the Claude Code project file. Both wire up next-devtools and ai-elements and must be kept in step. chrome-devtools is optional and shown here for reference only.

• Next.js DevTools MCP — pairs with next-best-practices, e2e-tester
• Chrome DevTools MCP — pairs with chrome-devtools, go, e2e-tester. Install via CLI: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
• AI Elements registry MCP — pairs with ai-elements, ai-app, nextjs-chatbot

📚 See Also

• agents-best-practices — .agents-first best practices, auditing (improving-skills), skill creation (skill-creator), and discovery (skill-finder) for cross-platform agent skills

📄 License

MIT (this repository)

Some skills are extended from open source originals — see Based On for details.