🧠 Claude Code AI Skills

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

⚡ 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

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)

🎨 UI & Design

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

⚡ Next.js

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)

🤖 AI SDKs

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)

🗄️ Database & Search

Skill Description
postgres-semantic-search pgvector semantic & hybrid search
supabase-postgres-best-practices Postgres optimization (Supabase)

🛠️ Tooling

Skill Description
skill-creator Create, test, and optimize custom skills (extended)
handoff Write a HANDOFF.md so a fresh agent can continue your work

🤖 Custom Agents

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

📦 Based On

Skill Original Source License
ai-sdk vercel/ai Apache 2.0
cache-components vercel/next.js MIT
react-best-practices vercel-labs/agent-skills -
skill-creator anthropics/skills (extended) Apache 2.0
next-best-practices skills.sh/vercel-labs/vercel-plugin -
web-design-guidelines skills.sh/vercel-labs/agent-skills -
supabase-postgres-best-practices supabase/agent-skills MIT
chrome-devtools addyosmani/agent-skills -
shadcn shadcn/ui MIT

🔄 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

Copy or symlink skills 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"]
    }
  }
}

This repo's own .mcp.json already wires up next-devtools and ai-elements; chrome-devtools is optional and shown here for reference.

  • 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.