{
  "markdown": "# 🧠 Claude Code AI Skills\n\n> Skills for building AI applications, especially Next.js + bun runtime.\n\nPackaged as an [Agent Plugin](https://agent-plugins.org/) (v1.0.0), so the same skills load in\nClaude Code, ChatGPT, Codex, Cursor, GitHub Copilot, VS Code and Kiro. See\n[Installation](#-installation).\n\n## ⚡ Quick Start\n\n```bash\n# Start a full-stack AI app\n/ai-app\n\n# Or use individual skills as needed\n/ai-sdk-6              # AI agents & streaming\n/postgres-semantic-search  # Vector/hybrid search\n```\n\n## 📋 Skills\n\n### 🚀 App Generators\n\n| Skill | Description |\n|-------|-------------|\n| [ai-app](skills/ai-app/) | Full-stack AI app (chatbots, agents, dashboards) |\n| [nextjs-shadcn](skills/nextjs-shadcn/) | Next.js 16 + shadcn/ui + bun |\n| [nextjs-chatbot](skills/nextjs-chatbot/) | Production chatbot (HITL, persistence, GDPR) |\n\n### 🎨 UI & Design\n\n| Skill | Description |\n|-------|-------------|\n| [shadcn](skills/shadcn/) | shadcn/ui component management |\n| [icons](skills/icons/) | Sourcing icons, flags, file-type badges and brand logos (Iconify, svgl) |\n| [frontend-design](skills/frontend-design/) | Production-grade frontend interfaces |\n| [web-design-guidelines](skills/web-design-guidelines/) | UI/UX review against Web Interface Guidelines |\n| [chrome-devtools](skills/chrome-devtools/) | Live browser inspection via Chrome DevTools MCP (DOM, console, network, performance) |\n| [go](skills/go/) | Browser smoke test — verify recent UI changes work |\n\n### ⚡ Next.js\n\n| Skill | Description |\n|-------|-------------|\n| [next-best-practices](skills/next-best-practices/) | RSC, async APIs, routing, optimization |\n| [react-best-practices](skills/react-best-practices/) | React/Next.js performance optimization (Vercel) |\n| [cache-components](skills/cache-components/) | Cache Components & PPR |\n| [nextjs-seo](skills/nextjs-seo/) | SEO (metadata, sitemaps, JSON-LD) |\n\n### 🤖 AI SDKs\n\n| Skill | Description |\n|-------|-------------|\n| [ai-sdk](skills/ai-sdk/) | Vercel AI SDK general guide (official) |\n| [ai-sdk-6](skills/ai-sdk-6/) | AI SDK v6 (agents, streaming, tools) |\n| [ai-sdk-7](skills/ai-sdk-7/) | AI SDK v7 (WorkflowAgent, harnesses, v6→v7 migration) |\n| [ai-elements](skills/ai-elements/) | AI Elements UI components |\n| [openai-agents-sdk](skills/openai-agents-sdk/) | OpenAI Agents SDK (Python) |\n\n### 🗄️ Database & Search\n\n| Skill | Description |\n|-------|-------------|\n| [postgres-semantic-search](skills/postgres-semantic-search/) | pgvector semantic & hybrid search |\n| [supabase-postgres-best-practices](skills/supabase-postgres-best-practices/) | Postgres optimization (Supabase) |\n\n### 🛠️ Tooling\n\n| Skill | Description |\n|-------|-------------|\n| [skill-creator](skills/skill-creator/) | Create, test, and optimize custom skills (extended) |\n| [handoff](skills/handoff/) | Write a HANDOFF.md so a fresh agent can continue your work |\n| [hetzner-cloud](skills/hetzner-cloud/) | Hetzner Cloud infrastructure via the `hcloud` CLI |\n\n## 🤖 Custom Agents\n\nExample agents for common workflows. Installed automatically with the plugin; otherwise copy to\n`.claude/agents/`.\n\n| Agent | Description |\n|-------|-------------|\n| [code-simplifier](agents/code-simplifier.md) | Refines code for clarity (DRY/KISS/YAGNI) |\n| [e2e-tester](agents/e2e-tester.md) | E2E testing via DevTools MCP, Playwright, or Claude in Chrome |\n\n## 📦 Based On\n\n| Skill | Original Source | License |\n|-------|-----------------|---------|\n| [ai-sdk](skills/ai-sdk/) | [vercel/ai](https://github.com/vercel/ai/tree/main/skills) | Apache 2.0 |\n| [cache-components](skills/cache-components/) | [vercel/next.js](https://github.com/vercel/next.js/tree/canary/skills) | MIT |\n| [react-best-practices](skills/react-best-practices/) | [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md) | - |\n| [skill-creator](skills/skill-creator/) | [anthropics/skills](https://github.com/anthropics/skills/tree/main/skills/skill-creator) (extended) | Apache 2.0 |\n| [next-best-practices](skills/next-best-practices/) | [skills.sh/vercel-labs/vercel-plugin](https://skills.sh/vercel-labs/vercel-plugin/next-best-practices) | - |\n| [web-design-guidelines](skills/web-design-guidelines/) | [skills.sh/vercel-labs/agent-skills](https://skills.sh/vercel-labs/agent-skills/web-design-guidelines) | - |\n| [supabase-postgres-best-practices](skills/supabase-postgres-best-practices/) | [supabase/agent-skills](https://github.com/supabase/agent-skills/tree/main/skills/supabase-postgres-best-practices) | MIT |\n| [chrome-devtools](skills/chrome-devtools/) | [addyosmani/agent-skills](https://github.com/addyosmani/agent-skills/blob/main/skills/browser-testing-with-devtools/SKILL.md) | - |\n| [shadcn](skills/shadcn/) | [shadcn/ui](https://ui.shadcn.com/docs/skills) | MIT |\n\n## 🔄 Updating\n\nSkills under [Based On](#-based-on) drift as their upstreams change. To refresh one: fetch the\nupstream folder, `diff` it against the local copy, and copy over the changed content files — but\nkeep the local `SKILL.md` frontmatter, since `name`/`description` and cross-skill references are\noften customized. Skip a blind `npx skills update`: there is no lock file and some folders are\nrenamed from upstream.\n\n## 📥 Installation\n\n### Claude Code (plugin)\n\nThe repo doubles as its own marketplace, so no clone is needed:\n\n```\n/plugin marketplace add laguagu/claude-code-nextjs-skills\n/plugin install claude-code-nextjs-skills@laguagu\n```\n\nThat installs all 23 skills, both [agents](#-custom-agents), and the two MCP servers from\n[`.mcp.json`](.mcp.json). Plugin skills are namespaced, so they invoke as\n`/claude-code-nextjs-skills:go` rather than `/go`, and model-invoked skills trigger as usual.\nUpdate later with `/plugin marketplace update laguagu`.\n\nTo try it without installing, clone the repo and run `claude --plugin-dir ./claude-code-nextjs-skills`.\n\n### Other agents (Agent Plugin)\n\nThis repo is also an [Agent Plugins v1.0.0](https://agent-plugins.org/) package:\n[`plugin.json`](plugin.json) at the root, skills as immediate children of `skills/`, and MCP\nservers in [`mcp.json`](mcp.json). Clone it and point a plugin-capable client at the folder:\n\n```bash\ngit clone https://github.com/laguagu/claude-code-nextjs-skills.git\n```\n\nChatGPT, Codex, Cursor, GitHub Copilot, VS Code and Kiro read this format, but the loading step\nitself is client-specific — installation, enablement and updates are deliberately\n[outside the spec](https://github.com/agentplugins/agent-plugins-spec/blob/main/spec/1.0.0.md),\nso check your client's docs. What the spec does guarantee is that all of them read the same\n`skills/` and `mcp.json`, with no per-client rearranging.\n\n### Individual skills\n\nCopy or symlink single skill folders to:\n\n- **Claude Code**: `~/.claude/skills/` (global) or `.claude/skills/` (project)\n- **Other agents** (Codex, Windsurf, Cursor): `~/.agents/skills/` or `.agents/skills/`\n\n## 🔧 MCP Servers\n\nRecommended MCP servers that pair with these skills:\n\n```json\n{\n  \"mcpServers\": {\n    \"next-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"next-devtools-mcp@latest\"]\n    },\n    \"chrome-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\"chrome-devtools-mcp@latest\"]\n    },\n    \"ai-elements\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"mcp-remote\", \"https://registry.ai-sdk.dev/api/mcp\"]\n    }\n  }\n}\n```\n\nTwo files carry this, on purpose: [`mcp.json`](mcp.json) is the portable Agent Plugins copy that any\nplugin-capable client reads, and [`.mcp.json`](.mcp.json) is the Claude Code project file. Both wire up\n`next-devtools` and `ai-elements` and must be kept in step. `chrome-devtools` is optional and shown\nhere for reference only.\n\n- [Next.js DevTools MCP](https://nextjs.org/docs/app/guides/mcp) — pairs with `next-best-practices`, `e2e-tester`\n- [Chrome DevTools MCP](https://github.com/ChromeDevTools/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`\n- AI Elements registry MCP — pairs with `ai-elements`, `ai-app`, `nextjs-chatbot`\n\n## 📚 See Also\n\n- [agents-best-practices](https://github.com/laguagu/agents-best-practices) — `.agents`-first best practices, auditing (improving-skills), skill creation (skill-creator), and discovery (skill-finder) for cross-platform agent skills\n\n## 📄 License\n\nMIT (this repository)\n\nSome skills are extended from open source originals — see [Based On](#-based-on) for details.\n",
  "bytes": 8503,
  "sha": "62eca56f4a201da39dc766c90bbfd0deae3062249acb06ea3c44e43c9562c0a0",
  "repo_slug": "laguagu/claude-code-nextjs-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_laguagu_claude_code_nextjs_skills_nextjs_8c80259e/readme"
}