Claude 进阶使用_skillClaude 进阶使用_skill什么是 Skillskill 的结构skill 的获取skill 的安装与使用下载安装 frontend-design命令安装 impeccable使用案例创建自己的 skill常用 skill 推荐什么是 Skillclaude code 是大模型的一个脚手架以擎天柱为比喻。claude code 就是擎天柱一个超级机器人。大模型 就是他的引擎 为他提供强大的动力来源。token 则是油箱里的油是能量来源每个动作都会消耗一定的能量。skill 则是他集装箱中武器更好的发挥他的战力。所以可以直接使用大模型但是使用脚手架配合可以更好地发挥出他的能力skill 也不是必须他只是能力的扩展。这里只是简单解释了一下我们常见的关于 claude 中更多的名词属于请参考官方术语表skill 的结构很多人以为 Skill 就是一个 Markdown 文件其实不是。一个完整的 Skill 是一个目录可以包含多种类型的文件就像一个能力包。打个比方如果把 Skill 比作一本食谱那么SKILL.md就是食谱本身菜名、步骤、注意事项scripts/就是配套的厨房小工具削皮刀、量杯 —— 封装好的辅助脚本resources/就是附赠的食材包和调料配比表模板、示例数据、配置references/就是食谱末尾的参考书目营养学标准、食品安全规范 —— AI 可随时查阅的参考资料skill 的目录结构skill-xxx/ # Skill 根目录命名规范小写短横线 ├── SKILL.md # 核心技能描述文件必选 ├── scripts/ # 辅助脚本目录可选 │ ├── helper.py # Python 辅助脚本 │ └── utils.js # JavaScript 工具函数 ├── resources/ # 配套资源目录可选 │ ├── template/ # 模板文件如代码模板、报告模板 │ ├── examples/ # 示例文件如输入/输出示例数据 │ └── config/ # 配置文件如规则定义、默认参数 ├── references/ # 参考文档目录可选 │ ├── best-practices.md # 最佳实践文档 │ ├── api-docs.md # API 参考文档 │ └── standards.md # 行业/团队编码规范 └── requirements.txt # 依赖声明可选列出脚本需要的第三方包提示Skill 的核心是SKILL.md其余文件均为辅助。如果你的 Skill 只需要一份指令说明只放一个SKILL.md就够了。但当 Skill 涉及复杂逻辑如数据处理、格式转换时配上scripts/、resources/和references/会大幅提升 Skill 的能力和可维护性。那 SKILL.md 的结构如下这是 Skill 的核心载体。它包含两部分头部的元数据Frontmatter和正文的具体指令。--- # 元数据FrontmatterYAML 格式 name: react-component-generator # 技能名称唯一标识 version: 1.0 # 技能版本 description: 根据需求生成符合项目规范的 React 组件文件集 # 技能简介 trigger: [创建组件, 新建React组件, 生成组件] # 触发关键词 tools: [typescript, react] # 依赖工具 author: your-name # 技能作者 --- ​ # React 组件生成器 ​ ## 执行步骤 1. 确认组件名称和功能需求 2. 在 src/components/{componentName}/ 目录下创建文件 3. 按照 resources/template/ 中的模板生成代码 4. 运行 scripts/validate.js 验证组件结构 ​ ## 输出规范 - 所有文件创建完成后报告创建的文件列表 - 给出组件的使用示例代码 ​ ## 错误处理 - 如果目录已存在提示用户确认是否覆盖 - 如果缺少依赖包提示安装命令 ​ ## 示例 给一个完整的输入→输出示例。至于其他的文件则是需要编程的脚本文件需要一定的编程能力当然借助于 ai 也可以实现。怎么使用什么使用使用则需要根据 skill 的要求定夺了。skill 的获取至于去哪里找开源的 skill 下面已经列出了一些 skill 的仓库和社区平台但是大部分都需要根据自己的需求来添加 skill 所以都是去各种论坛直接去找比如 UI 美化的项目管理的等等并不是 skill 越多越好他会使用大量的 token。skill 仓库资源方链接说明推荐星Anthropic SkillsGitHub - anthropics/skills: Public repository for Agent Skills · GitHubAnthropic 官方 Skill 仓库包含前端开发、文档、调研、命令开发、PR、测试等多个官方 Skill是学习SKILL.md编写规范的最佳参考。 (GitHub)⭐⭐⭐⭐⭐Vercel Labs SkillsGitHub - vercel-labs/skills: The open agent skills tool - npx skills · GitHubVercel 官方 Agent Skills CLI 及 Skill 仓库支持 Claude Code、Codex、Cursor 等多个 Agent可通过npx skills add安装和管理 Skills。 (GitHub)⭐⭐⭐⭐⭐antfu/skillsGitHub - antfu/skills: Anthony Fus curated collection of agent skills. · GitHubAnthony Fu 维护聚焦 Vue、Nuxt、Vite、TypeScript 等前端开发场景内容质量高。⭐⭐⭐⭐⭐baoyu-skillsGitHub - JimLiu/baoyu-skills · GitHub中文社区 Skill 仓库包含写作、PPT、图片生成、开发等多个实用 Skill。⭐⭐⭐⭐☆Deep-Research-skillsGitHub - Weizhena/Deep-Research-skills: Structured deep research skill for Claude Code/Open Code/Codex with human-in-the-loop control · GitHub面向 Deep Research、市场调研、信息检索等场景适合研究类工作流。⭐⭐⭐⭐☆antigravity-kitGitHub - vudovn/ag-kit · GitHub提供 Agent 模板和 Skills适合快速搭建自动化工作流。⭐⭐⭐⭐☆claude-seoGitHub - AgriciDaniel/claude-seo: Universal SEO skill for Claude Code. 25 sub-skills 18 sub-agents covering technical SEO, E-E-A-T, schema, GEO/AEO, backlinks, local SEO, maps intelligence, semantic clustering, e-commerce SEO, international SEO, Google APIs, and PDF/Excel reporting. Optional DataForSEO, Firecrawl, and Banana extensions. · GitHubSEO 分析与网站优化 Skill适合内容运营和技术 SEO。⭐⭐⭐⭐humanizerGitHub - blader/humanizer: Claude Code skill that removes signs of AI-generated writing from text · GitHubAI 文本优化 Skill用于调整文本表达、降低机械感。⭐⭐⭐⭐fact-check-skillGitHub - petar-nauka/fact-check-skill: Fact-checking and disinformation detection skill for Claude and Codex · GitHub用于事实核查、引用验证和内容可信度检查。⭐⭐⭐⭐awesome-claude-skillsGitHub - BehiSecc/awesome-claude-skills: A curated list of Claude Skills. · GitHubClaude Skills 导航合集收录大量社区 Skill 仓库方便发现优质资源。⭐⭐⭐skill 社区平台平台链接收录规模说明推荐星skills.shhttps://skills.sh18,000 Skills最早的 Agent Skill 注册平台之一支持搜索、安装、管理 Skills也是很多工具兼容的生态入口。 (arXiv)⭐⭐⭐⭐⭐SkillsMPAgent Skills Marketplace | Claude Codex Skills | SkillsMP200万 SKILL.md当前收录规模最大的 Skill 市场聚合 GitHub 公开 Skills支持中文、搜索、分类、创作者、API 等功能。 (SkillsMP)⭐⭐⭐⭐⭐AgentSkills.iohttps://agentskills.io开放标准Agent Skills 官方规范定义SKILL.md格式及跨 Agent 的兼容标准由社区维护。 (GitHub)⭐⭐⭐⭐⭐SkillDuckGitHub - william-zheng-tw/skillduck · GitHub开源项目基于 skills.sh 的桌面管理工具可视化管理、搜索和安装本地 Skills。 (Reddit)⭐⭐⭐⭐☆GitHub Topics · Agent Skillsagent-skills · GitHub Topics · GitHub数千个仓库GitHub 官方 Topic 页面可发现社区维护的 Skill 仓库和示例项目。⭐⭐⭐⭐☆GitHub Topics · Claude Codeclaude-code · GitHub Topics · GitHub数千个仓库聚合 Claude Code 相关 Skills、MCP Server、工具链和模板。⭐⭐⭐⭐☆skill 的安装与使用现在我们就从社区中寻找一个 skill 安装并使用他还是用之前创建的 静态网页为例虽然已经很好看但是还是想使用 skill 对他进行美化一下。这次我们使用同样的提示词配合 skill 看看回事什么样的效果。接下来采用两种不同的方式安装 skill方便应对不同的使用场景。这次我们使用两个 skill 分别是官方工具库中的 frontend-design: Anthropic 自己做的前端设计技能负责实现落地impeccable: 特定领域的参考设计文件以及精心挑选的反模式这些反模式能够准确地告诉模型哪些内容不应该生成。最终效果用户界面看起来是经过精心设计的而不是自动生成的。安装前说明skill 的安装分为全局安装和项目级安装对比项项目级安装Project Skill全局安装Global Skill安装位置当前项目目录如.claude/skills/用户目录如~/.claude/skills/生效范围仅当前项目当前用户所有 Claude 项目使用场景项目专属工具、团队共享能力个人常用工具、通用能力是否随 Git 仓库共享✅ 可以提交到仓库❌ 不会仅本机团队成员获取Clone 项目即可使用每个人需要单独安装配置维护跟随项目版本管理用户自行维护更新方式项目更新后同步更新每台机器单独更新是否影响其他项目❌ 不影响✅ 所有项目都会可用推荐用途项目规范、代码生成、部署流程、测试流程Git、Docker、Kubernetes、翻译、文档等通用 Skill优点团队一致性高、可版本管理、易于协作一次安装到处可用避免重复安装缺点多个项目可能存在重复 Skill团队无法自动同步容易出现版本不一致下载安装 frontend-design进入 官方工具库下载并解压刚安装的 claude 在.claude目录下没有 skills 目录需要手动新建进入用户目录下需要 按commandshift.展示隐藏文件才可以看见。这是一个 skill 包里面包含其他能力的 skill 我们挑选自己需要的进行 copy。我们这里仅仅只选用frontend-design复制或拖动到刚才新建的目录中,这就安装完成了。命令安装 impeccable进入 impeccable可以找到npx安装命令直接在项目目录先运行之前安装 claude 使用的项目为了看出 skill 的效果我 copy 了一下删除了资源之外的所有文件。运行命令npx impeccable install下面多出来的这个文件夹就是 我们安装到项目的一个 skill使用案例还是采用之前的提示词我们看看有什么效果上的差别你是一位世界级 Creative Frontend Designer请设计并实现一个具有 **Apple、Linear、Vercel、Awwwards** 水准的单页面 Landing Page。 ​ 项目 static 目录已包含图片请自动分析并选择最合适的图片作为 Hero、背景、Gallery、局部视觉及 Parallax 元素无需我手动指定。 ​ ### 设计风格 ​ 整体风格应具有 ​ * Premium、Elegant、Minimal、Editorial、Cinematic、Immersive * 像一本高端杂志而不是普通企业官网 ​ 避免 ​ * 廉价渐变 * 玻璃拟态泛滥 * 彩虹发光 * 夸张阴影 * Bootstrap/Admin Dashboard 风格 * AI 模板感 ​ ### 页面结构 ​ 自由设计页面节奏可参考 ​ Hero → Story → Image Showcase → Gallery → Highlight → Ending ​ 每个 Section 都要拥有不同的视觉节奏、留白和层次营造电影般的视觉叙事Visual Storytelling。 ​ ### UI 设计 ​ * 大胆留白Editorial Typography * 超大标题、舒适正文宽度 * 图片允许突破布局、局部裁切、全屏展示 * 配色根据图片自动提取以黑、白、灰、暖白、低饱和色为主仅少量 Accent Color * 整体克制、优雅、高级 ​ ### 动效 ​ 动画应自然且服务于内容不炫技。 ​ 包括 ​ * 页面进入Fade、Blur、Translate、Stagger * Scroll Reveal不同 Section 使用不同 Reveal * HeroSlow Zoom、Parallax、文字逐字出现 * 图片 Hover轻微 Scale、Brightness、Contrast * GalleryParallax、多层滚动 * Section Transition平滑过渡、Mask Reveal * 微妙背景 Noise/Grain * Ending 保持电影般的留白和收尾 ​ ### 技术要求 ​ 遵循当前项目技术栈HTML/CSS/JS 或 React/Next/Vue。 ​ 优先使用 GSAP、Framer Motion、Motion One、Intersection Observer 等实现高性能动画。 ​ 要求 ​ * 响应式Desktop / Tablet / Mobile * Lazy Load * GPU 加速 * 避免 Layout Thrashing * 代码结构清晰、组件化、可维护 ​ ### 最终目标 ​ 整个网页应像国际品牌发布会官网或 Awwwards 获奖作品而不是模板网站。打开页面后给人的第一感觉应该是 ​ **「这不是网页而是一段具有电影感的视觉体验。」** ​ 请直接输出完整、可运行的代码并充分利用 static 目录中的所有图片完成设计。这次用了 0.4 圆的 token 应该是好一点吧效果展示创建自己的 skill之前我们下载的 skill 工具中有一个skill-creator的他是帮助我们创建把他放到全局的 skill 目录下然后我们就可以直接让 claude 进行创建 skill 了/skill-creator表示主动指定使用这个 skill温馨提示本次教学创建的这个skill功能使用 hooks 触发会更合适只是举个例子帮我创建一个 skill 在每次使用其他的 skill 时触发告诉我使用了哪一个 skill 使用这个 skill 干什么 /skill-creator这就创建好了可以在他说的路径下查看到常用 skill 推荐根据自己的需求增加 skill 并不是越多越好的Skill地址简介karpathy-guidelinesGitHub - multica-ai/andrej-karpathy-skills: A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathys observations on LLM coding pitfalls. · GitHub遵循 Andrej Karpathy 的编程理念引导 AI先思考、再编码减少错误、精准修改、保持代码简洁。frontend-designskills/skills/frontend-design at main · anthropics/skills · GitHubAnthropic 官方前端设计 Skill帮助 AI实现高质量页面、组件和响应式布局将设计方案落地。skill-creatorskills/skills/skill-creator at main · anthropics/skills · GitHubAnthropic 官方 Skill用于创建、组织和优化新的 Skill帮助 AI 快速构建可复用的能力模块。remotion-best-practicesGitHub - remotion-dev/remotion: Make videos programmatically with React · GitHub提供 Remotion 视频开发最佳实践指导 AI构建视频场景、动画、时间轴以及视频渲染流程。superpowers-zhGitHub - jnMetaCode/superpowers-zh: AI 编程超能力 · 中文增强版 — superpowers116k ⭐完整汉化 6 个中国原创 skills让 Claude Code / Copilot CLI / Hermes Agent / Cursor / Windsurf / Kiro / Gemini CLI 等 16 款 AI 编程工具真正会干活 · GitHubAI 编程超能力中文增强版集成20 个开发 Skill覆盖头脑风暴、规划、TDD、代码审查、调试等完整开发流程支持 Claude Code、Cursor、Copilot CLI、Gemini CLI 等多种 AI 编程工具。(github.com)