- 📄 LICENSE.txt
- 📄 SKILL.md
frontend-design
创建具有高设计质量的独特的生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序(示例包括网站、登陆页面、仪表板、React 组件、HTML/CSS 布局或设计/美化任何 Web UI 时)时,请使用此技能。生成富有创意、精美的代码和 UI 设计,避免通用的 AI 美学。
创建具有高设计质量的独特的生产级前端界面。当用户要求构建 Web 组件、页面、工件、海报或应用程序(示例包括网站、登陆页面、仪表板、React 组件、HTML/CSS 布局或设计/美化任何 Web UI 时)时,请使用此技能。生成富有创意、精美的代码和 UI 设计,避免通用的 AI 美学。
将用户想法转化为可确认的 design 文档并落盘。用于头脑风暴、新功能/需求定义、需求澄清、写 design/PRD 之前;在开始任何实现(写代码/改配置/改行为)前应先使用此流程。
为网站和 Web 应用程序实施响应式设计 - 从标准的移动优先布局到复杂的模式(粘性元素、滚动协调、数据表、仪表板)。三种模式:改造现有网站、从头开始构建响应式网站或启动实时多断点预览。表面设计叉子没有单一的正确答案。在构建响应式布局、修复移动问题、添加断点、使用粘性/滚动模式、预览断点,或者当用户提及响应式、移动、断点、视口、自适应设计或响应式预览时使用。
量子环路自主开发流程的一部分(集体讨论→规范→计划→执行→审查→验证)。在实施之前对功能理念进行深入的苏格拉底式探索。一次提出一个问题,提出 2-3 种权衡的替代方法,逐节提出设计以供批准,并保存批准的设计文档。在开始新功能、探索想法或编写规范之前使用。触发点:集思广益、探索想法、设计、思考、ql-集思广益。
从克劳德代码中提取的生产级代理开发方法。涵盖工具设计、系统提示、权限与安全、多代理编排、通证经济、内存/状态、可扩展性的7维框架。支持架构设计、实施指导、代理审核。触发“代理设计”、“构建代理”、“人工智能代理”、“工具设计”、“系统提示架构”、“代理审查”、“多代理”或任何代理开发问题。
用于 UI 设计和实现工作,以避免通用的 AI 界面。提供防倾斜规则、编码前所需的发现阶段以及布局、排版、颜色、动作、可访问性、仪表板、表格、登陆页面、主题和润色的指导。在编辑 UI 代码或检查和优化组件、页面、屏幕、布局、动画、响应行为或设计系统时触发。
交互式幻灯片设计顾问,指导用户通过结构化问答来规划新的 DexCode 幻灯片,然后再构建它。通过对话收集目的、受众、内容大纲和设计偏好,然后输出结构化简要文档和 Deck.config.ts 参数。当用户说“设计演示文稿”、“演示文稿设计”、“计划演示文稿”、“碰壁”、“帮我设计演示文稿”、“计划演示文稿”、“帮我设计演示文稿”、“集思广益”或“计划幻灯片”时使用。
REST、gRPC 和 GraphQL 的 API 设计模式。用于:api 设计、REST、gRPC、GraphQL、protobuf、模式设计、api 版本控制、分页、速率限制、错误格式、OpenAPI、API 身份验证、JWT、OAuth2、API 网关、webhook、幂等性。
UI/UX 设计智能。 50 种样式、21 个调色板、50 种字体配对、20 个图表、9 个堆栈(React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui)。行动:计划、构建、创建、设计、实施、审查、修复、改进、优化、增强、重构、检查 UI/UX 代码。项目:网站、登陆页面、仪表板、管理面板、电子商务、SaaS、投资组合、博客、移动应用程序、.html、.tsx、.vue、.svelte。元素:按钮、模式、导航栏、侧边栏、卡片、表格、表单、图表。风格:玻璃形态、粘土形态、极简主义、野兽派、新形态、便当网格、深色模式、响应式、拟物化、平面设计。主题:调色板、辅助功能、动画、布局、排版、字体配对、间距、悬停、阴影、渐变。集成:shadcn/ui MCP 用于组件搜索和示例。
就计划或设计不断地采访用户,直到达成共识,解决决策树的每个分支。当用户想要对计划进行压力测试、对其设计进行盘问或提到“盘问我”时使用。
antd 6.x、Ant Design Pro 5/ProComponents、Ant Design X v2 和离线“@ant-design/cli”的决策指南。用于组件选择、主题/令牌、SSR、a11y、性能、路由/访问/CRUD、AI/聊天 UI 模式、本地 API 查找、调试、迁移和使用情况分析。
根据 Figma 文件和代码 (HTML/CSS/React/Vue/Tailwind) 的 18 条专业规则审核设计。自动检测框架,运行特定于类别的代码超级功能(咏叹调、焦点、对比度、令牌、响应式、运动、表单、导航、间距),审核暗模式和道德设计问题,在代码差异之前/之后输出,并生成结构化的开发人员移交报告。 触发条件:检查我的设计、审查我的 UI、审核我的布局、是否可访问、设计审查、排版检查、色彩对比、WCAG、a11y、像素完美、UI 批评、Figma 审核、CSS 检查、审查此组件、这看起来不错吗、深色图案、道德设计、是否符合 GDPR、检查我的入门、检查我的结帐、这是可操作的、这里有任何深色图案、检查我的登陆页面、我的 UI 是否可访问、检查我的设计系统,是这样吗?道德,我的表单是否可访问,检查我的导航,我的黑暗模式是否正确,这是否响应,检查我的空状态,检查我的错误状态。
skill-sample/ ├─ SKILL.md ⭐ 必备:技能说明入口:用途 / 安装 / 用法 / 示例 / 依赖 ├─ manifest.sample.json ⭐ 推荐:机器可读元信息:用于索引 / 校验 / 自动填表 ├─ LICENSE.sample ⭐ 推荐:授权与使用范围:开源 / 限制 / 商用说明 ├─ scripts/ │ └─ example-run.py ✅ 可运行示例脚本:让用户导入后立刻验证“能用” ├─ assets/ │ ├─ example-formatting-guide.md 🧩 输出规范:统一排版 / 结构 / 风格 │ └─ example-template.tex 🧩 模板资源:报告/文档模板,快速生成标准产物 └─ references/ 🧩 参考资料库:方法论 / 结构指南 / 最佳实践 ├─ example-ref-structure.md 🧩 结构参考:章节框架 / 目录组织 ├─ example-ref-analysis.md 🧩 分析参考:常用套路 / 指标口径 └─ example-ref-visuals.md 🧩 视觉参考:图表规范 / 可视化建议
更多 Agent Skills 规范 详见Anthropic官方文档:https://agentskills.io/home
├─ ⭐ 必备:YAML Frontmatter(必须存在,放在文件最顶部) │ ├─ ⭐ name :技能唯一名;须符合命名规则,并建议与目录名一致 │ └─ ⭐ description :技能描述;建议包含触发关键词(便于检索/匹配) │ ├─ ✅ 可选:Frontmatter 扩展字段(规范允许,但非强制) │ ├─ ✅ license :许可证标识(也可配合单独 LICENSE 文件) │ ├─ ✅ compatibility :兼容性/运行环境要求(仅在确实有限制时写) │ ├─ ✅ metadata :任意键值对(如 author/version/source_url 等) │ └─ 🧩 allowed-tools :允许工具白名单(规范标注为 experimental) │ └─ ✅ 推荐:Markdown 正文(自由格式,但建议按“渐进式披露”组织) ├─ ✅ Overview / Purpose :一句话说明目标 + 不做什么(边界) ├─ ✅ When to use :触发条件/适用场景(让模型/用户知道何时调用) ├─ ✅ Step-by-step :步骤化流程(最好 3–6 步,保证可复现) ├─ ✅ Inputs / Outputs :输入格式、输出格式、产物位置(文件/文本/JSON等) ├─ ✅ Examples :至少 1 个可复制示例(越“能跑”越好) ├─ 🧩 Files & References :引用assets/、references/、scripts/(相对路径) ├─ 🧩 Edge cases :边界情况/限制(大文件、速率限制、失败回退) ├─ 🧩 Troubleshooting :常见错误与解决(依赖缺失、路径不对、权限问题) └─ 🧩 Safety notes :涉及联网/写文件/执行命令时给出提醒(建议写)
在 GitHub 和各类社区里,技能文件分散、难检索、也难判断是否可靠。SkillWink 把开源技能集中整理成可搜索、可筛选、可直接下载使用的技能库,让你更快找到“正好能用”的那一个。并且支持在SkillWink上直接上传skills。
我们提供 AI 语义搜索 + 关键字检索,支持 版本更新与多维排序(下载/点赞/评论/更新),并为每个技能提供 SKILL.md 开放标准与来源信息。你还可以在详情页直接 评论讨论、交流用法与改进建议。
快速上手:
支持下载与导入 skills(.zip/.skill),本地放置后即可生效:
~/.claude/skills/(Claude Code)
~/.codex/skills/(Codex CLI)
~/.gemini/skills/(Gemini CLI)
同一份 SKILL.md 跨平台通用。
你需要了解的:技能是什么、怎么运行的、怎么找、怎么导入、怎么判断可信、怎么参与共建。
这里的“skills(技能)”是一种可复用的任务能力包,通常包含 SKILL.md 说明(用途、输入输出、使用方法)以及可选的脚本/模板/示例文件。
你可以把它理解为:给 AI 助手或工具链用的“插件说明书 + 资源包”,可被反复安装与分享。
技能系统采用“渐进式披露”策略,高效管理上下文信息,具体流程如下:
发现阶段:系统启动时,智能体仅加载各技能的名称与简要描述——信息精简,足以判断其适用场景,避免冗余加载。
激活阶段:当任务需求与某技能描述匹配时,智能体才将对应的完整 SKILL.md 说明文档动态载入上下文。
执行阶段:智能体严格遵循文档指引执行操作,并按需调用关联文件或运行内置代码模块。
核心优势:该设计使智能体始终保持轻量高效,同时具备“按需扩展上下文”的能力,既保障响应速度,又确保复杂任务拥有充分执行依据。
推荐 3 种方式组合使用:
注:以上导入方式文件大小控制在10M之内。
常见路径如下(不同系统略有差异,以你本机为准):
同一份 SKILL.md 通常可以跨工具复用。你在 SkillWink 导入后,也可以查看“放置指引/安装说明”。
可以。很多技能本质是标准化说明 + 资源,只要目标工具支持读取该格式,就能共享使用。
比如:检索类技能 + 写作类技能 + 自动化脚本,形成“发现 → 处理 → 输出”的工作流。
一部分skills来源于公开的 GitHub 仓库。我们会筛掉低质量仓库(至少 2 星),并扫描基本质量指标,还有一部分是SkillWink平台的创作者独立上传的。作为使用者,在安装前应始终审查代码,对安全问题负责。
最常见原因是这几类:
我们会尽量避免。你可以用 排序 + 评论 让“好用的”更靠前: