Skills
收录 96,770 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。
设计与 UI
面向光标和指针驱动的 GSAP 动画的生产级配方。官方 gsap-core 和 gsap-performance skill(API 参考)的配套内容。触发:cursor follower、cursor effect、mouse follower、magnetic button、spotlight cursor、cursor trail、particle trail、spring cursor、elastic cursor、pointer animation、custom cursor、cursor glow、clipPath cursor、quickTo cursor、image preview hover、perspective tilt、3D tilt cursor。非触发:不适用于悬停/倾斜卡片效果(使用 gsap-interact)、滚动动画(使用 gsap-scroll)、没有光标效果的普通鼠标事件。结果:产出带正确清理、覆写管理和性能优化(quickTo、ticker、will-change 生命周期)的光标驱动动画效果。
面向 GSAP SVG 动画的生产级配方。官方 gsap-plugins skill(API 参考)的配套内容。触发:SVG animation、GSAP SVG、path drawing、strokeDashoffset、DrawSVG、drawSVG、SVG morph、MorphSVGPlugin、circuit tree、circuit board、CTAHud、HUD animation、pulse ring、scallop wave、SVG stagger、SVG fill、SVG stroke、SVG cleanup、feGaussianBlur、SVG glow、SVG blink、shape overlay、page transition、section transition、smooth morph、morph interpolation、dynamic morphing、SVG curtain、shape transition。非触发:不适用于文字动画(使用 gsap-text)、不含 SVG 的滚动显现(使用 gsap-scroll)、鼠标交互(使用 gsap-interact)或非 SVG 视觉效果(使用 gsap-vfx)。结果:产出 SVG 动画——路径绘制、变形、电路板图案、HUD 系统、脉冲环和扇贝波浪。
专家级 UI 设计技能。创建高保真 HTML 设计、交互原型、幻灯片、动画和视觉探索。当用户要求设计、制作原型、创建 UI、制作幻灯片、制作样稿、构建交互演示、设计界面或探索视觉方案时使用。触发词:/design、/prototype、/ui、/mockup、/slides、/deck、"design a"、"prototype"、"mockup"、"make a UI"、"create slides"、"build a deck" 新手引导:输入 `/design 新手`、「这个怎么用」「第一次用」「能干嘛」时,走 SKILL.md 的〈新手上路〉,不要直接开始干活。
介绍 iOS 26+/macOS 26+ 至 iOS 27 的 Liquid Glass 和 SwiftUI 动画中有关动画、形变及着色器的最佳实践。用于玻璃效果动画或构建 UI 动效:glassEffectID、@Namespace 形变、GlassEffectContainer 间距、glassEffectUnion、glassEffectTransition(.matchedGeometry/.materialize)、withAnimation、弹簧、UnitCurve、PhaseAnimator、KeyframeAnimator、@Animatable、matchedTransitionSource、navigationTransition 缩放、scrollTransition、visualEffect、Metal 着色器(colorEffect、distortionEffect、layerEffect、[[stitchable]])、accessibilityReduceMotion 条件控制,以及使用 Instruments/xctrace 分析卡顿和动画掉帧。以下症状也会触发:玻璃形变动画未运行、视图突然出现而非形变、玻璃淡出而非显现、启用 Reduce Motion 后形变闪烁、菜单玻璃变成矩形形变、动画仅在插入时运行而不在移除时运行、PhaseAnimator 无限循环或只触发一次、着色器边缘被裁切(maxSampleOffset),以及滚动玻璃界面时动画卡顿或主线程挂起。对于静态玻璃效果、可用性条件控制、工具栏、UIKit/AppKit 玻璃,或材质本身的无障碍性,请优先使用 liquid-glass skill。
使用最新文档构建、审查、调试、配置、迁移或规划 Storybook 10 UI workshop。适用于 storybook、create storybook、CSF3、CSF Next、Meta、StoryObj、definePreview、preview.meta、args、argTypes、decorators、parameters、tags、autodocs、play functions、storybook/test、@storybook/react-vite、@storybook/nextjs-vite、@storybook/addon-docs、@storybook/addon-a11y、@storybook/addon-vitest、portable stories、composeStories、main.ts、preview.ts、ESM 配置、Chromatic、@storybook/addon-mcp、componentsManifest、storybook skills/tools agent CLI,以及从 Storybook 8/9 升级(当前为 10.6.x)。
将设计系统 Storybook 中设计和构建的 UI 落实到生产产品中,直至创建 pull request。逐区域评估工作,区分真实文案和占位内容,将 story 的标记和样式转换为产品自身的模板,接入产品数据、脚本、表单和链接,并在浏览器中验证产品与 story 一致。用户说“发布这个 story”“将这个 Storybook 页面投入生产”“把重新设计移植到网站”“将此内容从 Storybook 搬过来”“storybook to product”,或同时指向一个 story 和产品仓库时使用。与将产品界面引入 Storybook 的 product-to-storybook 相反。还可逐个 pull request 跟进并迁移后续的 Storybook 更改。
全面介绍如何实现 Syncfusion EJ2 JavaScript Notification 组件,包括 Message、Skeleton 和 Toast。适用于显示带有严重程度指示(Normal、Success、Info、Warning、Error)和展示样式(Text、Outlined、Filled)的上下文消息;创建具有不同形状(Circle、Square、Rectangle、Text)和闪烁效果(Wave、Pulse、Fade)的动画加载占位符;配置带定位、动画、模板和关闭模式的 Toast 通知;或自定义通知外观和无障碍支持。
专业的视觉设计工艺、UI 系统和像素级精准实现。在构建、设置样式、审查或润色任何界面时激活,包括网站、应用、仪表板、组件库、设计系统、落地页,或任何需要视觉润色的屏幕。触发条件包括:CSS 样式、组件设计、布局、间距、排版、颜色、暗色模式、响应式设计、设计令牌、Figma、UI 审计、视觉层级、图标、阴影、圆角、动画。也适用于“让它更好看”“改进设计”“看起来不对”“间距”“颜色”“排版”“设计系统”“组件库”“像素级精准”“现代设计”“布局”“响应式”“暗色模式”“设置样式”“润色”“改进视觉效果”等请求。只要创建或优化视觉界面,即使用户没有说“UI”也会激活。流程策略和心理学交给 ux-designer;设计令牌、组件基础设施和设计系统审计交给 design-system。不要用于:用户研究方法、心理学理论、后端逻辑、数据库架构、没有 UI 的 API 设计、DevOps、非设计语境中随口提及设计术语(例如规划、讨论或撰写设计内容但不构建/设置样式),或实际问题是数据、性能、基础设施或内容的任务,即使涉及 UI。需要明确的视觉/样式意图,不要仅因触发词而自动激活。
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。
