mrgoonie/claudekit-skills · 上手攻略

  • 仓库：mrgoonie/claudekit-skills
  • 链接：https://github.com/mrgoonie/claudekit-skills
  • 分类：skill
  • 作者：Jay
  • 更新：2026-08-12

是什么

claudekit-skills 是 mrgoonie 在 GitHub 上维护的一套 Claude Agent Skills 合集，托管于 ClaudeKit.cc（一个非 Anthropic 官方的 Claude 第三方服务平台）。这并非 Anthropic 官方产品，而是社区将高频使用场景封装为可复用的 Skill 工作流——每个 Skill 约等于一个结构化的提示词模板，包含任务目标（mission brief）、约束规则（guardrails）和集成提示（integration hints），目的是让 Claude 在面对特定任务时有更稳定、可预测的表现。

ClaudeKit.cc 还提供了 Plugin Marketplace，支持 /plugin 命令一键安装和自动更新，无需手动 git clone；Skill 本身保存在仓库 .claude/skills/ 目录下，可以单独使用。

解决什么问题

Claude 本身是通用助手，但实际工作流中有大量重复场景：写一个 OAuth2 认证模块、用 Gemini 处理长视频、生成 Three.js 3D 场景、构建优雅的 shadcn/ui 界面——每次都重新描述上下文既费 token 又导致输出不稳定。claudekit-skills 将这些高频场景固化为 Skill，覆盖前端、后端、多模态 AI、认证框架、上下文工程等多个方向，减少每次重复描述的开销，同时让输出质量更可预期。

快速安装

方式一：ClaudeKit Plugin Marketplace（推荐）

/plugin marketplace add mrgoonie/claudekit-skills
/plugin install ai-ml-tools@claudekit-skills

⚠️ Plugin 命令依赖 ClaudeKit.cc 平台（非 Anthropic 官方 claude.ai 或 API），是否可用取决于 ClaudeKit 平台版本和账户类型，部分命令可能仅对付费账户开放。

方式二：手动 git clone

# 克隆到本地 Claude skills 目录
git clone https://github.com/mrgoonie/claudekit-skills.git ~/.claude/skills/claudekit-skills

# 或仅克隆单个 Skill（需要哪几个就 link 哪几个）
git clone https://github.com/mrgoonie/claudekit-skills.git /tmp/claudekit
ln -s /tmp/claudekit/.claude/skills/ai-multimodal ~/.claude/skills/ai-multimodal
ln -s /tmp/claudekit/.claude/skills/context-engineering ~/.claude/skills/context-engineering

核心 Skill 详解

claudekit-skills 目前收录约 30+ 个 Skill，涵盖以下主要方向。

AI 与多模态

ai-multimodal

用 Google Gemini API 处理多媒体内容：音频转录（最长 9.5 小时）、图片理解（caption/目标检测/OCR/视觉问答）、视频分析（场景检测/时间线 Q&A，YouTube URL 支持最长 6 小时内容）、PDF 解析（表格/表单/图表/示意图提取）、图片生成（文生图/编辑/合成）。支持 Gemini 2.5 / 2.0，上下文窗口最高 2M tokens。

⚠️ 依赖 Google Gemini API Key（Google AI Studio 或 Vertex AI），ClaudeKit 本身不提供 Key。

context-engineering

上下文工程完整指南：context fundamentals（context 是什么、如何被 LLM 使用）、degradation patterns（context 变长后的质量衰减规律）、优化技术（compaction、masking、caching）、压缩策略、memory 架构、多 Agent 模式、LLM-as-Judge 评测、tool design。适用于设计 agent 架构、debug context 失效、优化 token 使用、实现 memory 系统等场景。

前端与设计

frontend-development

React/TypeScript 前端开发规范：Suspense、lazy loading、useSuspenseQuery、特性目录组织（features/ 目录结构）、MUI v7 样式、TanStack Router（类型安全路由）、性能优化技巧、TypeScript 最佳实践。适用于需要新建 React/TypeScript 项目或对现有前端代码做重构的场景。

frontend-design

生成高设计质量的前端界面，定位为生产级 UI（production-grade），避免通用 AI 美学（"AI 味" UI）。适用场景：用户要求做某个 web 组件/页面/应用时作为主 workflow。

ui-styling

shadcn/ui（基于 Radix UI + Tailwind CSS）组件使用、Tailwind 工具类样式、canvas 视觉设计。包含：设计系统构建、响应式布局、无障碍组件（a11y）、主题定制、暗色模式、视觉设计图生成。

web-frameworks

Next.js 全栈指南：App Router、Server Components、React Server Components (RSC)、Partial Prerendering (PPR)、SSR/SSG/ISR；Turborepo monorepo 管理、task pipeline、remote cache；RemixIcon 图标库（3100+ SVG）。适用于需要快速搭建现代 React 全栈项目的场景。

aesthetic

界面美学设计工作流，覆盖四阶段： - BEAUTIFUL：美学原则与视觉语言定义 - RIGHT：功能性 + 无障碍合规 - SATISFYING：微交互（micro-interactions）设计 - PEAK：叙事化设计（storytelling）

工作流：用 chrome-devtools + ai-multimodal 捕获灵感截图并分析，迭代生成设计图直到满足审美标准。

threejs

Three.js（WebGL/WebGPU）3D Web 应用开发：场景构建、动画系统、自定义 GLSL shader、PBR 材质、VR/XR 体验、游戏中常用功能、数据可视化、产品配置器。支持资产加载：GLTF、FBX、OBJ；后处理效果（bloom、FXAA 等）；物理模拟；性能优化指南。

后端与基础设施

backend-development

现代后端全栈指南，涵盖：运行时（Node.js、Python、Go、Rust）、框架（NestJS、FastAPI、Django）、数据库（PostgreSQL、MongoDB、Redis）、API 设计（REST、GraphQL、gRPC）、认证（OAuth 2.1、JWT）、测试策略、OWASP Top 10 安全实践、性能优化、DevOps（Docker、Kubernetes、CI/CD 流水线）、监控告警。

google-adk-python

Google Agent Development Kit（ADK）使用指南：基于 Python 构建 AI Agent、tool 集成、多 Agent 编排、工作流模式（顺序/并行/循环）、Agent 间通信、部署到 Vertex AI 或自定义基础设施。适用于需要在 Google 生态内构建 Agent 应用的场景。

better-auth

全栈 TypeScript 认证框架：email/password 登录、OAuth 2.0（Google/GitHub/Facebook 等主流 Provider）、2FA（基于 TOTP）、Passkeys（WebAuthn）、多租户（multi-tenancy）架构。适配 Next.js、Nuxt、SvelteKit 等主流框架，开箱即用。

工具类

chrome-devtools

Chrome DevTools 协议自动化，用于网页内容截取（DOM/网络/性能数据），可与 moli 等专用浏览器工具配合使用。典型用法：捕获页面 network 请求、提取 DOM 结构、做性能 profile。

典型适用场景

场景 推荐 Skill 组合
新项目快速启动（高设计质量 UI） frontend-design → ui-styling → frontend-development
AI Agent 系统架构设计 context-engineering + google-adk-python
长视频/音频内容分析 ai-multimodal
PDF 报告批量结构化提取 ai-multimodal
快速实现 OAuth2 + 2FA 登录 better-auth
3D 数据可视化 / 产品配置器 threejs
Token 使用量大的对话系统优化 context-engineering 中的 compaction/caching 章节
多 Agent 协调系统 context-engineering + google-adk-python
全栈 Next.js + shadcn/ui 项目 web-frameworks + ui-styling + frontend-design

坑与注意

  1. 非官方出品：这不是 Anthropic 或 Claude 官方维护的 Skill，质量和更新节奏依赖 mrgoonie 个人维护，存在 Skill 版本与 Claude 版本不兼容的风险；生产项目使用前建议 review skill 源码确认逻辑。
  2. ClaudeKit 平台依赖：Plugin Marketplace 安装方式依赖 ClaudeKit.cc 平台。Anthropic 官方 Claude（claude.ai / claude-api）不支持 /plugin 命令，需要手动 clone 后在本地使用。
  3. 外部 API Key 依赖：ai-multimodal 需要 Google Gemini API Key；better-auth 集成需要配置各 OAuth Provider 凭证（Google/GitHub 等）。
  4. Skill 边界模糊：部分 Skill 之间有重叠（如 frontend-design vs ui-styling vs aesthetic），初次使用需要花时间理解各自边界和适用场景，避免选错 skill。
  5. 无版本号标注：README 未标注各 Skill 版本号或兼容的 Claude 版本范围，建议固定使用某个 commit SHA，避免追踪 latest 引入的不兼容变更。
  6. 文档深度参差：头部 Skill（如 ai-multimodal、context-engineering、backend-development）文档较完整，覆盖多个子章节；部分小 Skill 只有简短描述，需要靠阅读源码补充。
  7. Plugin Marketplace 稳定性：ClaudeKit 作为第三方平台，其 plugin marketplace 可用性和 /plugin 命令支持情况需以 ClaudeKit 官方文档为准，本攻略不对第三方平台可用性做保证。

与同类对比

方案 来源 Skill 数量 侧重点 平台依赖
claudekit-skills 社区（mrgoonie） 30+ 前端/AI/后端/多模态全覆盖 ClaudeKit.cc（非官方）
Anthropic 官方 Skills Anthropic 官方 Skill 市场 各垂直领域，官方维护 ✅ 官方支持
awesome-claude-skills 社区 聚合收录 收录全网 Claude Skills 无（聚合列表）
Claude ADK + 内置 Tools Google / Anthropic 少量 Agent 编排 + 工具集成 Google ADK 官方

claudekit-skills 的核心优势是覆盖范围广、安装门槛低（一键 /plugin）、开箱即用，劣势是非官方维护带来的质量和兼容风险，以及对 ClaudeKit 平台的依赖。如果你在 ClaudeKit 生态内，这是一个省力的全家桶；如果你只用 Anthropic 官方 Claude，直接参考其中 Skill 的提示词设计思路即可，不必完整引入。

一句话推荐结论

claudekit-skills 是一个覆盖前端开发、AI 多模态处理、后端基础设施等多个场景的 Claude Skill 全家桶，ClaudeKit Plugin Marketplace 一键安装很方便，适合快速复用成熟工作流；但由于非官方维护，生产项目使用前建议 review 源码确认逻辑正确性，Anthropic 官方用户也可参考其中 Skill 设计思路而不必完整引入。

原始 commit/PR：https://github.com/mrgoonie/claudekit-skills/commits/main · ⚠️ 本仓库非 Anthropic 官方维护，Anthropic 不对此仓库内容提供支持；各 Skill 依赖的外部 API（Gemini 等）需要自备 Key