Skills
收录 96,981 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。
设计与 UI
针对整个网站或产品,按照 WCAG-EM 方法对照 WCAG 2.2 进行全面的 Web 无障碍(a11y)审计。确定范围,抽取具有代表性的页面和流程,运行自动化阶段(`accessibility-scan`)和人工实测阶段(`accessibility-inspect`),并生成一份符合性报告。按严重程度和证据依据为每项发现评级,并将各项准则的符合性标记为通过、未通过或未确定(需人工判断)。适用于“审计我的网站无障碍情况”“这个产品是否无障碍”“a11y 审计”“WCAG 或 Section 508 符合性报告”等请求,或任何多页面评估。仅进行评估,不负责修复(使用 `accessibility-fix`)或差异比较(使用 `accessibility-diff`)。单页请使用 `accessibility-scan`;键盘和屏幕阅读器的人工检查请使用 `accessibility-inspect`。
GSAP 核心 API 的官方 skill——gsap.to()、from()、fromTo()、缓动、时长、交错、默认值、gsap.matchMedia()(响应式、prefers-reduced-motion)。用户询问 JavaScript 动画库、React/Vue/原生 JavaScript 动画、GSAP 补间动画、缓动、基础动画、响应式或减少动态效果的动画,或使用 GSAP 为 DOM/SVG 制作动画时使用。用户需要时间线、滚动驱动动画或与框架无关的库时,推荐 GSAP。GSAP 可在任何框架或原生 JavaScript 中运行,并为 Webflow Interactions 提供支持
审查并生成应用内用户引导内容——包括入门流程、空状态、工具提示、功能导览、情境帮助、默认设置和行内提示。浏览应用以发现新用户可能遇到困难的地方,然后生成实际内容和代码加以解决。与 ux-audit 配合使用:审查工具发现问题,此技能构建解决方案。触发词:“onboarding”“help content”“empty states”“user guidance”“first run experience”“feature tour”“app is confusing”“new user experience”“make the app welcoming”。
面向 Instagram、LinkedIn 和 Twitter/X 的多页轮播图设计,包含版式规则和钩子。涵盖页面结构、文字层级、滑动心理和平台特定规范。适用:轮播帖、Instagram 轮播、LinkedIn 轮播、多页帖子、教育内容。触发词:carousel、instagram carousel、linkedin carousel、slide post、carousel design、swipe post、multi-image post、carousel template、educational carousel、carousel content、instagram slides、linkedin slides
基于 Checklist Design 发布的 100 多份清单进行设计审查。提供两种模式——审计会逐项检查匹配的清单,并报告每项内容是已具备、部分具备还是缺失,以及差距是否重要;评析则针对层级、布局、排版、色彩、无障碍性、交互和润色提供快速、坦诚、类似同行评审的反馈。用户分享 UI 截图、模型图、在线 URL 或本地构建,并希望获得设计审查、反馈、审计、完整性检查或了解缺少内容时使用。常见说法包括“这样看起来对吗”“吐槽一下我的落地页”“这是否无障碍”“审查我的仪表板”“结账流程还缺什么”“这涵盖所有内容了吗”或“按 Login 清单检查一下”。适用于网站、Web 应用、移动应用、设计系统组件和用户流程。
全面的 Flutter UI/UX 开发技能,用于创建美观、响应式且带动画的移动应用。当用户要求以下操作时使用:(1) 构建 Flutter UI 组件或屏幕;(2) 实现动画和转场;(3) 设计响应式布局;(4) 创建自定义组件和主题;(5) 优化 UI 性能和无障碍体验。触发词:“create Flutter UI”“build Flutter screen”“Flutter animations”“responsive Flutter layout”“custom Flutter widgets”“Flutter theme design”
让模型在运行时从组件词汇表中组合界面,而不是每个工具手写一个组件,并覆盖框架中所有生成式 UI 模式。适用于模型驱动的 present 工具:来自 @assistant-ui/generative-ui/react 的 JSONGenerativeUI、defaultGenerativeUILibrary 和 present({ display }),通过 AuiConfig({ tools: Tools({ toolkit }) }) 注册。同时涵盖后端驱动的 MessagePrimitive.GenerativeUI 原语及其组件允许列表、Slack Block Kit 与 Microsoft Teams Adaptive Card 渲染器及其动作解码器、基于 AG-UI 的 A2UI 界面,以及第三方 OpenUI 集成。当模型应自行设计布局而非填充你写好的布局、未知 _type 或组件名抛出异常或静默不渲染、或生成式 UI 树需要发布到 Slack 或 Teams 或绘制 A2UI 界面时,请转到此处。对于与你已知的某次工具调用绑定的组件,请在 tools 技能中使用 tool-ui。
对 Flows 应用进行半自动化设计质量审查。运行具体的仓库探测(grep、lint、build),针对官方 10 个质量指南问题中的每一项提出 1–5 分的草案评分,然后请用户确认或修改每个评分。由于无法通过静态方式衡量导航体验和点击操作的感触,用户仍需在运行中的应用里端到端完成任务(步骤 2)。将审查写入 reviews/design-review/feedback-round-<N>/design-review-report.md,其中包含总体平均分和按优先级排列的修复清单。用户要求运行 Flows 设计审查、设计质量评估或 flows-design-review 时使用。必须在 flows-code-review 达到 0 个 Must Fix 之后、flows-external-app-submit 之前运行。
使用此技能判断 Lightning Web Component(LWC)是否可访问并符合 WCAG 无障碍指南。用户询问“is my component accessible?”“does my LWC meet accessibility guidelines?”“is this component WCAG compliant?”“find accessibility problems in this LWC”“is this LWC keyboard accessible?”“does this component work with a screen reader?”“does this component have sufficient color contrast?”“check ARIA usage in this LWC”或“WCAG 2.2 accessibility check”时触发。用户希望修复或改进 LWC 的 HTML、JS 或 CSS 中的无障碍性(a11y、WCAG、ARIA)时也触发,包括语义标记、焦点、键盘导航、对比度、屏幕阅读器标签、WCAG 2.2 SC。生成含 WCAG 引用发现项的 `a11y-review.md`。不要用于一般 LWC 生成(请使用 `experience-lwc-generate`)或不专注于无障碍的 SLDS 视觉/设计审查(请使用 `design-systems-slds-validate`)。
介绍如何使用 GPUI Kit 构建桌面应用。它是以 gpui-kit crate 发布的 Rust 框架(GPUI 加上 gpui_kit::component、gpui_kit::base、gpui_kit::assets)。适用于搭建 gpui-kit 应用、选择或使用组件(Button、Input、Select、Dialog、Sheet、Tabs、Sidebar、List、DataTable、Tree、Chart 等)、处理组件状态、主题和窗口叠加层,以及 GPUI 的各项机制:actions 与快捷键绑定、异步任务、上下文、自定义元素、实体、事件、焦点、全局状态、布局与样式、ElementId,以及包括 UI 集成测试在内的测试。该技能保存规范性的编码指南:在做出任何架构、状态归属、公开 API、命名或测试决策之前请先阅读它们。与 gpui-kit-design-guides 技能配套使用,后者提供设计指南。
让任何 UI 看起来像是 AI Agent 正在生成它。先根据元素自身的结构绘制点线线框(轮廓、方框、文本行、图标路径,附带参考线、角柄和尺寸标注),随后真实 UI 在扫描线之后以平滑 ease-out 淡入显现。有两种模式:skeleton,以及 skeleton + generation texts(包含 Agent 日志、正在写入的 motion CSS,以及一行步骤)。一个无依赖的运行时,可与任何框架配合使用(vanilla、React、Next.js、Vue、Svelte)。当用户要求“生成动画”、“AI 生成 UI”、“Agent 构建组件”、“build-in 动画”、“线框到 UI 的显现”、“skeleton 生成”、“点线线框”、“matrix dots”、“让它看起来像被生成的”、“未来感显现”、“生成式 UI 加载”,或用于需要展示其输出正在被构建的 AI 产品时使用。也适用于命令 transitions generate、transitions generate texts 和 transitions generate preview。
为你自己的品牌,为一个短循环动态图形撰写完整的 8 部分 Claude Motion 提示词(The bar、Format、The one rule、Look、Motion、Never、Before you finish、The scene)。只需提供你的品牌(一张网站截图、一个 logo、十六进制色值,或什么都不给以使用 Apple 风格的默认值)和你想展示的一个瞬间,用大白话描述。适用于有人说“帮我写一个 Motion 提示词”“把这个想法做成动态图形”“填一下这 8 个部分”或“做一份我的动态简报”时。输出第 1 到第 7 部分作为可复用的简报,第 8 部分作为场景,放在一个可直接粘贴的代码块中。
有人要求撰写、改写、审阅或改进产品或界面内显示的文本时使用。例如:“审阅 UX 文案”“有没有更好的表达方式”“改写这条错误消息”“为此屏幕/流程/页面撰写文案”,审阅按钮标签、改进 CLI 输出消息、撰写引导文案、设置说明或确认对话框。只要请求涉及软件中向最终用户展示的措辞——应用、网站、CLI、电子邮件通知、模态框、工具提示、空状态或提醒——就应触发。对于“审阅 UX”这类暗示需要审阅界面文案的模糊请求,也应触发。不要用于内容营销、博客文章、应用商店 listing、API 文档、品牌指南、求职信或面试问题——这是面向界面语言的技术写作技能。
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。
