Skills
收录 96,770 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
在三个维度上提取、定义和应用设计 DNA：设计系统（令牌）、设计风格（定性感觉）和视觉效果（Canvas、WebGL、3D、粒子、着色器、滚动效果等）。在以下情况下使用此技能：(1) 用户希望查看完整的三维设计结构/架构；(2) 用户提供参考设计的图片、截图或 URL，希望将其分析为覆盖三个维度的结构化 JSON 画像；(3) 用户有设计 DNA JSON 和内容，希望据此生成设计；或 (4) 以上阶段的任意组合。触发词：「设计 DNA」「提取设计风格」「分析设计」「从参考图提取设计令牌」「从 JSON 生成设计」「从截图生成设计系统」「设计画像」「风格指南 JSON」「视觉效果分析」「带效果的设计」「3D 设计分析」。
以自包含 HTML 的形式创建精致的设计成果：UI 模型、交互原型、线框图、落地页、仪表盘、应用界面、移动应用、幻灯片（即 PPT / PowerPoint 演示文稿）、文档与简历、动画、3D 对象、研究报告、HTML 邮件、图表、传单和视觉探索。只要用户要求设计、制作模型、原型、线框图、可视化、探索，或为界面、产品界面、用户流程、内容排版、视觉成果或路演/提案概念制作 PPT/幻灯片，即使没说"设计"也应使用。也用于将该技能创建的幻灯片导出为 PowerPoint（PPT/PPTX），但仅限在此创作的幻灯片（deck-stage / 本技能的幻灯片结构化 HTML），不适用于任意 HTML，请先确认目标属于此类幻灯片。还用于设置、导入或编写可复用的设计系统、UI 套件、品牌标识或组件库。适用于 Claude Code、Cursor、Codex Agent 等具备文件操作能力的 Agent，不依赖具体运行框架。
通过 magicpath-ai 命令行使用 MagicPath，用于查找、预览、检查、安装、导出、创建和编辑 UI 组件，以及管理 MagicPath 技能。适用于 MagicPath 设计/组件；个人或团队项目；活动画布及选中的组件/图片/版本；主题/设计系统；团队、成员、归属权、署名、已安装组件审计，以及分享/查看链接。当需要将精确的 MagicPath 组件或版本导出到本地文件夹或应用；以 1:1 保真度并按明确要求修改、适配或转换本地 UI；使用 inspect/add 安装 React/TypeScript 组件；以代码起始/提交方式编写响应式交互式画布组件；从本地路径或 GitHub/GitLab/Bitbucket 仓库导入或重建 UI 到 MagicPath；或创建、检索、更新、导入、启用、禁用、删除 MagicPath 技能时使用。在内嵌浏览器的宿主环境中，通过分享链接保持项目画布打开以便进行可视化工作。
基于可组合、无样式的 @assistant-ui/react primitives 构建和定制 assistant-ui 聊天界面：ThreadPrimitive、ComposerPrimitive（包含用于提及和斜杠命令的 Unstable_TriggerPopover）、MessagePrimitive 和 MessagePartPrimitive、ActionBarPrimitive、BranchPickerPrimitive、AttachmentPrimitive、ErrorPrimitive、AssistantModalPrimitive、ChainOfThoughtPrimitive、SelectionToolbarPrimitive、SuggestionPrimitive、QueueItemPrimitive，以及 ThreadList primitives。适用于组装或设置自定义 Thread、Composer、消息列表、操作栏、分支选择器或建议网格的样式；连接 composer 输入、听写、引用或附件；或处理编辑、分支、虚拟化、滚动或思维链界面。涵盖按部分类型渲染的 MessagePrimitive.Parts 函数、groupPartByType、选择器形式的 AuiIf，以及无样式使用时的注意事项（AssistantRuntimeProvider、className）。预构建界面请使用 setup，带样式的组件目录请使用 elements，多线程侧边栏请使用 thread-list
基于 PICKLES 方法论与 165 分评分的 Lightning Web Components。当用户创建或编辑 LWC 组件、构建 wire service 模式，或为 LWC 编写 Jest 测试时使用此技能。触发条件：用户创建/编辑 LWC 组件，触及 lwc/**/*.js、.html、.css、.js-meta.xml 文件，或询问 wire service、SLDS 或 Jest LWC 测试时。不触发：Apex 类（使用 platform-apex-generate）、Aura 组件或 Visualforce。
在 assistant-ui 中使用运行时关联的 ThreadList 和 ThreadListSidebar 元素、ThreadListPrimitive、ThreadListItemPrimitive、ThreadListItemMorePrimitive、useAui、useAuiState 和 threads.selectionChanged 来构建和定制多个会话列表。在添加会话侧边栏、切换、归档、重命名、删除、搜索、分组、分页或持久化线程，或在身份验证后线程状态过期时使用。涵盖 AssistantCloud、RemoteThreadListRuntime 和 ExternalStoreThreadListAdapter。活动会话运行时用 runtime，云端托管的认证与持久化用 cloud，元素用于注册表安装和样式设置。
当用户创建、生成、修改或验证 Salesforce Lightning 页面（FlexiPages）时使用。触发条件包括 RecordPage、AppPage、HomePage、Lightning 页面、向页面添加组件、页面自定义（例如“自定义记录页面”），或 .flexipage-meta.xml 文件（区域、组件、部署错误）。不要在以下情况触发：Visualforce 页面、UI 中的页面布局分配、UI Bundle/Experience Cloud 站点页面，或不涉及 FlexiPage 的 Aura/Lightning Web Component 开发。
在 PixiJS v8 中绘制图像时使用此技能。涵盖用于锚点、色调和纹理的 Sprite，用于逐帧动画的 AnimatedSprite，可调整大小的 UI 面板用 NineSliceSprite，以及用于滚动／重复背景的 TilingSprite。触发词：Sprite、AnimatedSprite、NineSliceSprite、TilingSprite、Sprite.from、anchor、tint、tilePosition、animationSpeed、gotoAndPlay、leftWidth、topHeight、构造函数选项、SpriteOptions、AnimatedSpriteOptions、NineSliceSpriteOptions、TilingSpriteOptions。
当任务涉及将应用页面、视图或多区块布局转换到 Figma 时，与 figma-use 配合使用此技能。触发语句包括：“写入 Figma”、“根据代码在 Figma 中创建”、“将页面推送到 Figma”、“把这个应用／页面放到 Figma 中构建”、“创建屏幕”、“在 Figma 中构建落地页”、“更新 Figma 屏幕以匹配代码”、“将此模态框／对话框／抽屉／面板转换到 Figma”。当用户希望根据代码或描述在 Figma 中构建或更新完整页面、模态框、对话框、抽屉、侧边栏、面板、表单、仪表板、列表、表格、卡片、页眉、消息预览或其他组合式产品 UI 时，这是首选的工作流技能，即使用户将这种组合式 UI 称为组件也适用。从 Code Connect 文件、现有屏幕和组件库搜索中发现设计系统组件、变量和样式，然后导入并逐区块增量组装视图，使用设计系统令牌而非硬编码值。
将回答转换为单页可视化 HTML 说明：模型撰写简短的 Markdown 草稿，随附的 CLI 据此生成页面。只要页面比纯文本更有助于读者理解，即使纯文本也可行，也应主动广泛使用，无需用户提出。适用于解释事物的运作方式或各部分之间的关系（流程、请求路径、架构、代码或文件夹结构、状态机、生命周期、历史）；比较、权衡或利弊决策；诊断、评审或调查，尤其是需要对多个原因或发现进行排序时；包含表格、编号或排名列表、步骤、分支或多个章节的回答；以及用户说“我没懂／画出来／用视觉方式解释／讲讲原理／没看懂／画个图”时。拿不准时就使用：制作页面快捷且成本低。也适用于说明视频（“make a video”“做个视频”）及其设置修改。仅在闲聊、极简单的一句话回答，或用户要求纯文本时跳过。
在 PixiJS v8 中渲染文本时使用此技能。涵盖用于绘制画布级质量样式标签的 Text、通过字形图集实现低成本逐帧更新的 BitmapText、通过 SVG 支持 HTML/CSS 标记的 HTMLText、用于逐字符动画的 SplitText 和 SplitBitmapText、TextStyle、tagStyles、构造函数选项、TextOptions、HTMLTextOptions、BitmapText、SplitTextOptions、SplitBitmapTextOptions。触发词：Text、BitmapText、HTMLText、SplitText、SplitBitmapText、TextStyle、HTMLTextStyle、BitmapFont.install、tagStyles、fontFamily、wordWrap。
把一篇文章或口播稿，做成“看起来像视频”的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → 一次产出口播稿 + outline 开发计划 → 用户一次对齐 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。outline 只规划节奏与信息密度，不规划动画 —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍，每一步独占整屏，进度条平时隐藏，只在悬浮时出现。适用场景：用网页做视频（动态 PPT 但不像 PPT）、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色，因此能复用到任意主题与美学。
当通过 filter 管线为 PixiJS v8 容器应用视觉效果时使用本技能。涵盖内置滤镜（AlphaFilter、BlurFilter、ColorMatrixFilter、DisplacementFilter、NoiseFilter）、使用 GLSL/WGSL 的自定义 Filter.from()、选项（resolution、padding、antialias、blendRequired）、filterArea 优化以及 pixi-filters 社区包。触发词：filters、BlurFilter、ColorMatrixFilter、DisplacementFilter、NoiseFilter、Filter.from、GLSL filter、pixi-filters、filterArea。
审计 Lightning Web Components 的 SLDS 设计系统合规性并生成评分质量报告。运行 SLDS linter，并分析 CSS 中主题化钩子的使用与配对，将各类 SLDS 发现汇总为总体评级。当用户询问「score my component's SLDS」「SLDS scorecard」「SLDS quality report」「audit SLDS compliance」「how good is my SLDS」「check SLDS quality」「rate my SLDS styling」「evaluate my component's SLDS」「is this component's SLDS ready to ship?」「look at my LWC for SLDS issues」「audit SLDS before I submit」「review my component's SLDS before code review」，或任何时候需要对 LWC 进行 SLDS 质量评估或上线准备度检查时使用。不适用于修复违规项（使用 design-systems-slds2-migrate）、构建新组件（使用 design-systems-slds-apply），或无障碍/WCAG/ARIA 审计（使用 experience-accessibility-validate）。
在 PixiJS v8 中使用混合模式合成显示对象时使用此技能。涵盖标准模式（normal、add、multiply、screen、erase、min、max）、通过 pixi.js/advanced-blend-modes 使用的高级模式（color-burn、overlay、hard-light 等），以及便于批处理的排序方式。触发词：blendMode、additive、multiply、screen、overlay、color-burn、color-dodge、advanced-blend-modes、glow、erase。
面向 GPT Image 2 的图像生成／编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报／UI／产品／信息图／学术图／技术架构图／漫画／头像／流程板／电影分镜／IP 周边／编辑工作流等场景。
在 PixiJS v8 画布上叠加 HTML 元素时使用此技能。涵盖带 element、anchor 和场景图驱动的 CSS 变换的 DOMContainer、pixi.js/dom 副作用导入、DOMPipe 注册、可见性同步、pointer-events 处理。触发词：DOMContainer、pixi.js/dom、DOMPipe、HTML overlay、画布上的输入、iframe overlay、DOMContainerOptions、element、anchor、构造选项。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。