🧠 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/next-skills	-
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"]
    }
  }
}

• 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

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