LC

laguagu/claude-code-nextjs-skills

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

72 stars 质量 67 趋势 34MIT

Claude 代码技能用于 AI 应用 • Next.js 16 • AI SDK 7 • pgvector • bun

概览

构建AI应用的技能,尤其是Next.js + bun运行时。 以代理插件(v1.0.0)形式打包,所以同样的技能可以在Claude Code、ChatGPT、Codex、Cursor、GitHub Copilot、VS Code和Kiro中加载。参见安装。 常见工作流程示例代理。随插件自动安装;否则复制到 .claude/agents/。 技能在基于漂移下,随着上游的变化。刷新一个:获取上游文件夹,与本地副本进行差对比,并复制更改的内容文件——但保留本地 SKILL.md 前置,因为名称/描述和跨技能引用通常是定制的。跳过盲目NPX技能更新:没有锁定文件,有些文件夹是从上游重命名的。 该仓库同时也是独立的市场,因此不需要克隆: 这会安装所有23个技能、两个特工和.mcp.json的两个MCP服务器。

概述(AI 翻译)

24项技能和2名代理,用于构建使用Next.js、Bun和现代UI工具的AI应用。

⚡ 快速启动

用Claude Code安装:

然后用/nextjs-ai-skills:ai-app来构建应用,或者 /nextjs-ai-skills:go,在浏览器中检查。相关技能也可激活 是你的请求。

要更新,先运行claude plugin marketplace update laguagu,然后 claude plugin update nextjs-ai-skills@laguagu 在一个壳体中。如果你安装了 插件用旧名 claude-code-nextjs-skills 安装,卸载后安装 nextjs-ai-skills@laguagu。

📋 技能

🚀 应用生成器

技能 描述
AI-应用 全栈AI应用(聊天机器人、代理、仪表盘)
Nextjs-shadcn Next.js + shadcn/ui,带有有意的排版、背景和设计系统lint,通过@shadcn/lint
Nextjs-聊天机器人 网络聊天机器人模式(HITL、持久化、流媒体)

🎨 界面与设计

技能 描述
SHADCN SHADCN/UI 组件管理
图标 获取图标、旗帜、文件类型徽章和品牌标志(Iconify、svgl)
前端设计 新UI或重塑UI的独特视觉方向和排版

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

🧠 Claude Code AI Skills

23 skills for building AI applications with Next.js, Bun and modern UI tools.

⚡ Quick Start

Install in Claude Code:

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

Then use /nextjs-ai-skills:ai-app to build an app or /nextjs-ai-skills:go to check it in the browser. Relevant skills also activate from your request.

To update, run claude plugin marketplace update laguagu and then claude plugin update nextjs-ai-skills@laguagu in a shell. If you installed the plugin under its old name claude-code-nextjs-skills, uninstall that and install nextjs-ai-skills@laguagu.

📋 Skills

🚀 App Generators

Skill Description
ai-app Full-stack AI app (chatbots, agents, dashboards)
nextjs-shadcn Next.js + shadcn/ui with deliberate typography, backgrounds, and design-system lint via @shadcn/lint

🎨 UI & Design

Skill Description
shadcn shadcn/ui component management
icons Sourcing icons, flags, file-type badges and brand logos (Iconify, svgl)
frontend-design Distinctive visual direction and typography for new or reshaped UI
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 Installed-version docs for routing, RSC and Next.js integration
react-best-practices React/Next.js performance optimization (Vercel)
cache-components Cache Components, freshness, invalidation and isolation
nextjs-seo SEO (metadata, sitemaps, JSON-LD)
vercel-react-view-transitions React View Transitions and navigation motion

🤖 AI SDKs

Skill Description
ai-sdk Vercel AI SDK version discovery and documentation
ai-sdk-6 AI SDK v6 (agents, streaming, tools)
ai-sdk-7 AI SDK v7 (WorkflowAgent, harnesses, v6→v7 migration)
ai-elements Existing elements.ai-sdk.dev AI Elements installs (deprecated upstream end of November 2026; new chat UI uses shadcn/ui AI Elements)
openai-agents-sdk OpenAI Agents SDK (Python)
Skill Description
在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add laguagu/claude-code-nextjs-skills
新手?先看 mcpskill.org 教程 →