Skills
收录 97,501 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
解决方案阶段的 UX 规划技能（可选；当项目含 UI 时启用）。产出两份规划文档：DESIGN.md（视觉系统 —— 设计 token、调色板、排版、间距、组件规格、WCAG 2.1 AA 契约）与 EXPERIENCE.md（用户旅程、流程图、屏幕状态、错误/空/加载处理）。当用户说“设计 UX”“创建 UX 规划文档”“定义设计系统”“绘制用户流程”“该功能的 UX”“为流程绘制线框图”“用户旅程有哪些”“无障碍设计”“WCAG 合规”“设计 token”“响应式设计方案”“移动优先设计”或“创建 DESIGN.md / EXPERIENCE.md”时使用。在架构起草之后、故事创建之前运行。支持 Create / Update / Validate 意图。
从网站 URL 提取品牌标识——语气、颜色、排版、图像、价值观和目标受众——并整理为结构化的 brand-profile.json。该配置文件供下游 skill（seo-content-writer、email-composer、frontend-design、pro-deck-builder、cross-platform-audit）使用，以产出符合品牌调性的内容。适用于用户说 brand DNA、brand profile、extract brand、analyze brand、brand voice、brand identity、brand colors 或 brand style guide 时。
个人 IP 图解创作器。用你的 IP 形象，生成专属内容图解。用于把用户授权提供的照片、主页截图、简介、账号资料或角色档案转成稳定的极简手绘图解角色，并继续生成长文配图、图文号知识卡、手机海报、方法拆解图、分镜故事图、IP 演讲 PPT、直播分享课件和全图化手绘 PPT 页面等内容视觉。它强调 IP 主角 + 执行 Agent 的知识图解系统：用户 IP 做主讲、拆解、批注和调度，执行 Agent 做搬卡片、反馈、试错、标记风险和递交结果。用户想做个人 IP 形象、用自己的形象做知识图、图文号知识卡、文章配图、课程图解、内容海报、方法拆解图、IP 演讲 PPT、直播分享课件，或上传照片/主页截图/简介希望做内容视觉时，使用本 Skill。
诊断 weapp-tailwindcss 与 `weapp-tw` CLI 的样式未生成、JS/模板 class 未转译、classNameSet、@source/cssEntries、source candidates、rpx、伪类/custom variant、组件隔离、Rspack、压缩、watch/HMR、H5/Web/App/uni-app x 多端产物问题。Use for debugging, troubleshooting, CLI output failures, classes not working, broken hot reload, wrong output, or runtime compatibility；不用于新项目配置、自研 API 设计或 Lynx 专属接入。
Apple グラフィックス。Metal, Core Animation, Core Graphics, Core Image, SpriteKit, SceneKit。 MTLDevice, MTKView, MTLBuffer, MTLTexture, MTLResidencySet, MTLTensor, Metal 4 (MTL4CommandQueue, MTL4CommandBuffer, MTL4CommandAllocator, MTL4ArgumentTable, MTL4RenderCommandEncoder, MTL4Compiler), CALayer, CABasicAnimation, CADisplayLink, CAMetalDisplayLink, CAMetalDrawable, CGContext, CGPath, CGImage, CIFilter, CIContext, CIImage, CIRAWFilter, CIWarpKernel, CIBlendKernel, SKScene, SKSpriteNode, SKAction, SCNNode, SCNGeometry, SCNMaterial。
用 Astryx 构建完全可定制、面向 Agent 的设计系统——Meta 的生产级设计系统现已开源。提供 150+ 个基于 StyleX 构建的 React 组件，零样式锁定，支持组件 swizzling、品牌主题、深色模式和命令行工具。适用于构建组件库、设计系统、UI 应用、设计令牌，或团队需要 AI Agent 能理解并扩展的一致且可访问的组件时。触发词：astryx、design system、component library、design tokens、react components、accessible components、astryx design、stylesheets、theme customization、component composition。
将应用中的图表从 Recharts 或 TanStack Charts 迁移到 Bklit UI。检测 Recharts 用法（直接 `recharts` 导入或 shadcn/ui 的 `components/ui/chart.tsx` 封装：ChartContainer、ChartConfig、ChartTooltipContent、ChartLegendContent）及 `@tanstack/charts` 定义（使用 lineY／areaY／barY 标记的 defineChart），盘点所有图表并将其分类为可直接迁移／需要变通方案／保留；安装匹配的 `@bklit/*` shadcn 注册表项，并用等效的 bklit 组件重写各图表，同时保留数据、颜色和标签。无坐标轴的小图表（Recharts 的 “Tiny” 折线／面积／柱状图，TanStack KPI 迷你趋势图）改为 LineSparkline／AreaSparkline／BarSparkline。用户要求将 Recharts、shadcn 图表或 TanStack Charts 替换、迁移、转换或移植到 bklit，替换迷你趋势图或小图表，移除 recharts 或 @tanstack/charts 依赖，或询问更换图表库需要做什么时使用。
创建或编辑 PostHog 自由画布——一种存储在 PostHog 中、由桌面或 Web 应用渲染的沙盒化浏览器应用（数据看板、文档、表单、小工具、图形实验）。适用于任务要求构建、生成、更新或修复独立画布应用，或给定自由画布 id 作为发布目标时。对于网格/主页画布、组件放置或可复用组件，请改用 composing-grid-canvases。涵盖解析或创建目标画布、选择实现方式（React + Quill 还是纯 HTML/浏览器 API）、读 → 编辑 → 校验 → 发布 → 构建的循环，以及需要加载哪些配套画布技能来了解细节。
组合 PostHog 网格 canvas——由可复用组件 canvas 构建的组件网格（包括用户主页 canvas）。适用于以下任务：在网格或主页 canvas 上添加、填充、移动、调整大小或移除组件；用一次请求组合出整个组件 canvas；构建可复用的组件/组件 canvas；或以某个放置 id 或网格 canvas id 为目标。涵盖组件库的搜索 → 配置 → fork → 构建阶梯、组件放置契约（size、configSchema）、放置生命周期（pending/generating/live/failed）、受保护的布局补丁循环，以及读取 canvas 的评论线程。
SVG Style Studio (/create-svg) — 艺术指导 + 矢量插画师，可制作精致、可编辑的 SVG（插画、标志、图标、海报、信息图、贴纸），涵盖 44 种风格 — 像素艺术、8/16 位、赛博朋克、Y2K、Frutiger Aero、玻璃拟态、黏土、等距、低多边形、剪纸、涂鸦、漫画、日式漫画、水墨画、浮世绘、新艺术、装饰艺术、包豪斯、粗野主义、复古海报、丝网印刷、孔版印刷、蓝图、技术/科学、中世纪、涂鸦字体、贴纸、儿童、编辑风、信息图、电影感、奇幻、科幻、恐怖、复古未来主义、哥特、奢华、单色、几何、植物。适用于任何 SVG/矢量艺术请求、风格混搭（"cyberpunk + minimalist"、"ukiyo-e but darker"）、同一主题多种风格（"in 5 styles"）或将 SVG/图像转换为某种风格。它会规划风格、应用其设计规则，然后在交付前进行校验、优化、渲染和检查。
用于 Vue 的 Floating UI（@floating-ui/[email protected]）。在编写导入 \"@floating-ui/vue\" 或使用 useFloating、arrow、floatingStyles 或 autoUpdate 的代码时，务必使用。可咨询中间件设置、锚定、虚拟元素以及 v1 到 v2 迁移相关问题。仅支持 Vue 3.3+。
首屏 hero 区块模式（居中、分栏、视频、极简排版）、背景技术，以及 LCP 性能，附带可直接用于生产的代码。适用于用户要求 "create a hero"、"build a hero section"、"design above the fold"、"make a hero banner"、"landing page header"、"build a homepage hero" 或仅重新设计页面顶部时。整页多区块营销页面请用 landing-page-design（其 hero 部分使用本技能）；静态 hero 图片或横幅图形请用 banner-design。
完全通过代码创作展示级动态图形视频 —— 用无头 Chrome 逐帧渲染 HTML 场景并带有真实运动模糊，同时为每个视频在同一节拍网格上谱写原创配乐。它根据对方提供的任何素材 —— 文字、网站、GitHub 仓库、应用、截图、自己的视频片段和照片或参考片段 —— 来执导影片本身，并据此设定音乐的节奏和能量。适用于任何宣传片、广告、发布视频、解说、混剪、Shorts 或 TikTok、片头、动态字体或 logo 动画，面向企业、产品、应用、网站、机器人、频道或个人，即使你手上只有一条链接或一个名字。
按照设计系统生成一致的 UI 组件、布局和设计令牌。在 React/TypeScript 项目中强制统一间距、颜色、排版和可访问性标准。在创建新 UI 组件、构建页面布局、选择颜色或排版、设置设计令牌，或审查 UI 代码的设计一致性时使用。涵盖 8pt 间距网格、Tailwind CSS 令牌用法、shadcn/ui 基础组件、WCAG 2.1 AA 合规、响应式断点、语义化 HTML 结构和 TypeScript 组件接口。不涵盖后端实现（请使用 python-backend-expert）、测试（请使用 react-testing-patterns）或部署（请使用 deployment-pipeline）。
面向 Refactoring UI 原则的 Flutter/Dart 实现模式。mobile-app-design-mastery 的配套技能。以下情况始终启用：Flutter 主题、ThemeData、ColorScheme、TextTheme、BoxDecoration、Material 3、Flutter 阴影、Flutter 间距、Flutter 排版、Flutter 深色模式、Flutter 组件、Flutter 样式、Dart UI、Widget 装饰。提供 ThemeData 设置、配色方案、排版样式、间距工具、装饰模式。土耳其语：Flutter tema, Flutter renk, Flutter tasarım, Dart UI, widget stil。英语：Flutter theming, Material Design, Flutter styling, widget decoration。
在创建 PPTX 幻灯片、演示文稿或 deck 并使用以下 30 种现代设计风格中的任何一种时，使用此技能：玻璃拟态、新野兽派、Bento 网格、暗黑学院、渐变网格、黏土拟态、瑞士国际主义、极光霓虹、复古 Y2K、北欧极简、粗体排版、双色调分割、单色极简、赛博朋克描边、杂志编辑风、柔和粉彩 UI、迈阿密暗黑霓虹、手工有机、等距 3D 扁平、蒸汽波、装饰艺术奢华、野兽派报纸、彩绘玻璃马赛克、液态斑块变形、孟菲斯波普图案、暗黑森林自然、建筑蓝图、极繁拼贴、科幻全息数据、孔版印刷。当请求中使用“sleek”“modern”“trendy”“designed”“stylish”或“visually striking”等词描述演示文稿时也激活。
在评审/评判已完成（或修订后）的线框图文档时使用 — 这是一道验收关口：下游高保真 + UI 工程能否据此构建屏幕结构。依据单一来源的可构建性 + 覆盖度 + 构图标准评判一份文本式 markdown 线框图：每个以流程命名的屏幕/状态都以高质量状态覆盖；布局在网格 + 共享应用外壳上无歧义，满足客观的布局质量标准；组件真实且一致；可操作性 + 数据显示有标注；微文案意图（标签中不泄露数据模型）；屏幕构图的可访问性（landmark/焦点顺序/目标尺寸）— 像素级对比度/焦点外观属于设计系统，不在此评判；响应式；差距被暴露；是结构性的而非高保真；修订按有范围、带版本的增量评审。输出 `VERDICT: approve|revise` + 可执行的发现；对达到标准的文档予以批准（不因屏幕内容单薄而误判为修订），仅在有明确差距时要求修订。不适用于撰写、导航图（user-flows）、视觉令牌（design-system）或高保真。
配置 Replay Vision `experiment` 扫描器，用于监视某个实验公开的会话，记录每个会话的变体，均匀抽取各变体样本，并在实验结束时停止。涵盖状态守卫、在各变体间保持可比性的提示词、根据实验自身的受众规模估算额度消耗、创建为禁用状态以便在真实会话中预览提示词，以及按变体读取结果。 触发条件：用户希望 Replay Vision 监视某个实验；要求用 AI 扫描或分析实验录制内容；询问“测试变体中的用户实际上在做什么”；或需要一个范围限定为实验公开会话的扫描器。 不要触发：创建与实验无关的通用扫描器（使用 creating-replay-vision-scanners）；读取扫描器已生成的观察结果（使用 exploring-replay-vision-observations）；或手动浏览实验录制内容而不进行 AI 分析（使用 analyzing-experiment-session-replays）。
设计和排查 weapp-tailwindcss 动态 class 组合与运行时封装，覆盖 @weapp-tailwindcss/runtime、merge、cva、variants、typography、theme-transition、ui、clsx、twMerge、weappTwIgnore、escape/unescape、rpx transformer、缓存和组件 class 覆盖。适用于动态 class、cn 助手、variant API、运行时包选择，或运行时 class 转义；不用于 bundler 初始接入、React Native 或 Lynx 编译器配置。
规划一套能促成转化的完整 Amazon 商品图片集。为主图和图片廊构建拍摄清单，设计每张信息图，规划场景图，并确定顺序，使图片廊按顺序逐一打消顾虑。当用户询问商品图片、主图、图片廊、信息图、场景图、图片顺序，或某个商品页面需要哪些图片时使用。触发短语: "listing images", "main image", "product photos", "image gallery", "infographics", "lifestyle images", "shot list"。无需任何工具即可使用。由用户描述商品及其买家。
用于在 HTML 和 ASP.NET Core Razor Pages/Views 中构建现代响应式 Web UI 的生产级 Bootstrap 5.3 模式。在使用 Bootstrap 5 创建或美化网页、布局、导航、表单、卡片、模态框、表格或任何 UI 组件时使用。涵盖网格系统、响应式断点、工具类、颜色模式（深色/浅色）、无障碍，以及与 ASP.NET Core 标签助手和 Razor 语法的集成。任何涉及 Bootstrap CSS 类、响应式 HTML 布局、Razor Page UI 设计或 .NET Web 应用前端样式的任务均可触发。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。