Skills
收录 97,222 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
通过对话生成 Outlook 兼容的邮件模板（EML + HTML）。三种模式：Design（从零创建）、Import（复刻现有 .eml）、Production（将 Excel 数据填入已固化的模板）。适用于用户想要：创建或设计邮件模板、生成 .eml 文件、制作简报、为 Outlook 排版邮件、导入/复刻邮件（导入/复刻邮件）、设计邮件模板、做邮件排版或邮件设计、构建像素级精确且兼容 Outlook 的 HTML 邮件。触发条件：周报邮件（周报邮件）、产品更新邮件、活动邀请邮件（活动邀请邮件）、公告邮件（公告邮件）、公司简报、.eml 导入、复刻邮件模板，或让邮件在 Outlook 中显得专业/美观。处理视觉设计、EML 生成与 EML 导入——不涉及 SMTP、发送或账户管理。缺少此技能时，Outlook 邮件会因 Outlook 使用 Word 渲染而忽略现代 CSS 而出错。
修补已部署在已连接 Salesforce org 中的现有 Data Capture Flow。通过 Tooling API 获取实时的 Flow Metadata JSON，应用用户请求的更改，再 PATCH 回去。当用户指定现有 flow 并要求添加/删除/重命名字段、更改可见性、修复 bug、添加视觉润色，或用真实组件替换占位符时使用（“为 Inventory_Transfer 添加一个 Notes 字段”“修复 Work_Order_Number 的可见性规则”“让 parts repeater 变为可选”“用真实的 dcSignature 组件替换 Signature 占位符”）。不要用此技能构建全新的 flow——那属于 fs-data-capture-form-designer 加上 fs-data-capture-form-deployer。
从品牌来源（URL、十六进制色码、品牌指南粘贴内容或颜色描述）推导 Field Service 移动应用的配色方案，验证浅色和深色模式下的 WCAG AA 对比度，并将 14 字段的方案应用到组织默认的 FieldServiceMobileSettings 记录。触发短语包括 ‘brand the mobile app’、‘apply branding to Field Service mobile’、‘update the mobile app colors’、‘use this brand guide for the app’、‘set the color scheme for the mobile app’。请勿将此技能用于 Dispatcher console / Gantt 品牌、Experience Cloud BrandingSet 记录或排班策略颜色——不在范围内。
当滚动到某个 section 时将其固定，然后通过 GSAP ScrollTrigger（pin + scrub + track 的 xPercent 补间）把纵向滚动变为横向滚动。当用户说 "gsap scrolltrigger"、"pin section"、"cuộn ngang"、"horizontal scroll section"、"scroll-driven horizontal"、"pinned horizontal scroll" 或 /gsap-scrolltrigger-pin 时调用。不同于 `scroll-effects`（7 个轻量 vanilla 效果，无依赖、无 pin）和 `lenis-smooth-scroll`（平滑整页滚动，无 pin/不改变滚动方向）——此技能需要 GSAP，且只适用于一个特定的 pin section。
使用 HyperFrames（HTML + GSAP + SVG + Canvas、Apache-2.0）制作展映级（Behance / OFFF / Awwwards 级）的动态图形视频。这是 remotion-motion-reel 的 HyperFrames 版本，采用无需 Remotion Company License 的配置。根据主题和素材（角色图片、音频等）补充世界观、文案、设计系统、时间线和声音，并以 120BPM/60fps 实现拍点同步的视频，直至完成渲染。用户提出“用 HyperFrames 做个很酷的视频”“免许可的动态图形”“用 HTML 制作 showreel”等需求时使用。
将设计 token 从代码推送到 Figma 中作为 variable——DTCG / tokens.json / token 对象 → Figma variable 集合、模式和值。当用户想要将 token 从代码同步到 Figma 时使用：触发词“import tokens into Figma”“create Figma variables from my tokens.json / DTCG / Tailwind config”“sync design tokens to Figma”“push tokens to Figma”。以非破坏性方式匹配现有 variable（通过保存的 id/key/name），因此重新导入是更新而不是重复创建。适用于任何 Figma 计划。反向操作（Figma → 代码）请使用 export-tokens-figma。
WebGL（Three.js）图像网格，通过坐标环绕实现无限滚动/拖拽——拖拽或滚动移动一个虚拟 offset，mesh 位置用取模重新计算，因此即使只有 N×N 个真实 tile 存在，网格看起来也是无限的。当用户说 "lưới ảnh vô hạn"、"infinite scroll grid webgl"、"draggable image wall"、"poster wall cuộn vô hạn" 或 /infinite-webgl-grid 时调用。不同于 `skills/threejs-particle-morph`（离散粒子随滚动进度汇聚成一张图，有固定的「目标」——这是持续浏览的 tile 网格，没有目标）也不同于 `skills/blur`（在一个平面上把一张图切换到另一张，不是浏览多张图的网格）。
Figma↔Storybook 双向桥接，通过原生 Figma MCP 实现。design→code：从 Figma 变量映射基础 token（颜色/间距/字体），并保证 design↔code 一致性 + 漂移检测，交付已批准的 Figma 组件（提取 → 构建 → 嵌入），按 sb-stories 的规则编写 stories。code→design：从组件 + stories + token 一致性 + 用法构建 Code Connect 映射，使 Figma Dev Mode 显示真实代码。适用于“同步我的 Figma token”、“将 Figma 变量映射到我的设计系统”、“交付这个已批准的 Figma 设计”、“检查 design↔code token 一致性”、“将我的组件连接到 Figma / code connect”。不适用于原型设计/迭代尚未确定的设计（那是 sb-explore）。
页面滚动效果中心——64 个逐字原始副本（freefrontend/CodePen，MIT）位于仓库 Rheinmir/uiux-asset，可原样复制文件，附带 7 个轻量 vanilla 效果：reveal-on-scroll、staggered text、scroll highlight、sticky shrink nav、scroll-to-top、scrollspy TOC、轻量 data-speed parallax。Vanilla HTML/CSS/JS，尊重 prefers-reduced-motion。当用户说 "hiệu ứng scroll"、"scroll reveal"、"scroll to top"、"scrollspy"、"parallax nhẹ"、"highlight khi cuộn" 或 /scroll-effects 时调用。不同于 `blur`（GPU 开销大的 WebGL 图像切换）和 `timeline`（时间线轴）——这些是日常使用的页面滚动效果，轻量、无依赖。
为 shadcn-svelte 提供专家指导，它是 shadcn/ui 的 Svelte 5 移植版。在使用 shadcn-svelte 组件、通过命令行安装 UI 组件、用 Superforms/Formsnap 实现表单、用 mode-watcher 添加深色模式、用 TanStack Table 创建数据表格、用 Tailwind CSS v4 和 OKLCH 颜色定制主题，或构建自定义组件注册表时使用此技能。触发条件：提及 shadcn-svelte、Bits UI 组件或 SvelteKit UI 组件库。
随页面滚动或进入视口时逐步绘制 SVG 线条（stroke-draw）——测量 `path.getTotalLength()`，设置 `stroke-dasharray`/`stroke-dashoffset`，将 dashoffset 从 length 动画到 0。当用户说 "vẽ svg khi cuộn"、"svg stroke draw"、"logo vẽ dần"、"path animation reveal"、"stroke-dashoffset" 或 /svg-stroke-reveal 时调用。不同于 `skills/scroll-effects`（7 个通用滚动效果——reveal/stagger/highlight/nav/top/toc/parallax，没有 stroke-draw）——此技能专用于带线条绘制的 SVG `<path>`（logo、签名、折线图、行程）。
面向真实产品界面的 UI 设计与实现，包含品味优先的批判、参考路由、项目专属设计简报、方案变体比较与实现验证。当 Codex 需要通过阅读项目上下文、探索品味、经由 `references/catalog.md` 路由、综合出 `PROJECT_DESIGN.md` 或 `design.md`、使用投入门槛避免错误的品味/参考/范围、在现有技术栈中实现并评估结果是否真的更好来重新设计、构建、打磨或批判前端 UI 时使用。最适合应用界面、仪表盘、落地页、查询工具、产品界面和设计探索；不适用于仅后端的工作或细小的外观修改。
粒子云 Three.js（THREE.Points + BufferGeometry）随页面滚动进度从随机位置汇聚成图像/logo —— 从隐藏 canvas 采样像素作为目标坐标，按滚动对 position 做 lerp。当用户说 "particle image"、"hạt hội tụ thành ảnh"、"three.js particle scroll"、"point cloud morph"、"particle cloud biến hình theo scroll" 或 /threejs-particle-morph 时调用。与 `skills/blur` 不同（那是 GLSL 径向模糊 shader，把一个平面上的图像变成另一张图像 —— 这里是离散的粒子云变形为图像，渲染技术完全不同 —— PointsMaterial/BufferGeometry，而不是 PlaneGeometry 上的 ShaderMaterial）。
在规划、构建、设计、代码审查、重构、修复、改进、优化、增强或检查 UI/UX 工作时使用。涵盖产品模式、落地页、图表选择、视觉风格、配色、排版、UX 规则，以及 9 种技术栈（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui）。项目：网站、落地页、仪表盘、管理面板、电子商务、SaaS、作品集、博客、移动应用、.html、.tsx、.vue、.svelte。元素：按钮、模态框、导航栏、侧边栏、卡片、表格、表单、图表。主题：配色方案、无障碍、动画、布局、排版、字体搭配、间距、悬停、阴影、渐变。
在为 Apple 风格界面添加动效时使用——弹簧物理、标志性的 smooth/snappy/bouncy 弹簧、流畅可中断的转场、hero/连续性转场、手势（滑动、拖拽、上下文菜单、Dynamic Island、滑动操作）、触觉反馈、控件/加载微交互，以及 Web 生动感原语（连续的滚动进度动效 + 指针响应式点缀）。属于 apple-design 系列。关键词：apple animation、spring、springs、damping fraction、response、fluid interface、interruptible、matchedGeometryEffect、zoom transition、hero、gesture、swipe to dismiss、drag、velocity handoff、context menu、haptics、taptic engine、sensory feedback、micro-interaction、button press、prefers-reduced-motion、css linear() spring、easing、scroll-progress、scroll progress mapping、damped scroll、scroll smoothing、mapRange、magnetic button、tilt、pointer-reactive、spotlight。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。