Skills
收录 96,981 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
修复 Capacitor 应用中的刘海屏、Dynamic Island、主屏幕指示条、显示屏切口和系统栏重叠问题。涵盖 `viewport-fit=cover` + `env(safe-area-inset-*)`、Capacitor 8 SystemBars 核心插件（`insetsHandling`、为 Android WebView < 140 注入 `--safe-area-inset-*` CSS 变量、移除 `android.adjustMarginsForEdgeToEdge`）、Android 15/16 强制的 edge-to-edge（当 targetSdk 为 36 时，@capacitor/status-bar 的 `overlaysWebView` 和 `backgroundColor` 不再生效）、iOS `contentInset`，以及旋转、iPad／可折叠设备可调整大小的窗口中运行时变化的内边距。遇到页眉位于状态栏下方、标签栏被手势栏遮挡、Android 上 `env()` 返回 0，或升级到 Capacitor 8／targetSdk 35+ 后布局出错时使用。不适用于键盘重叠问题（capacitor-keyboard）、Ionic／Konsta 组件主题设置（ionic-design、konsta-ui）、Tailwind 实用类配置（tailwind-capacitor），或 iOS 多窗口／可调整大小功能支持（capacitor-ios-resizability）。
SwiftUI ↔ Figma 转换。用户提到 Swift、SwiftUI、iOS、iPhone 或 iPad 时，无论方向如何都使用：将 Figma 设计转换为 SwiftUI（设计 → 代码），或将 SwiftUI 视图／屏幕／令牌推送回 Figma 文件（代码 → 设计）。触发短语包括“在 SwiftUI 中实现此 Figma 设计”“用 Swift 构建此屏幕”“将此 SwiftUI 视图推送到 Figma”“在 Figma 文件中复现我的 Swift 代码”，以及 Figma URL 与 `.swift` 文件／`.xcodeproj` 同时出现的情况。根据方向转到对应的参考文档；代码 → 设计路径还会加载 `figma-use`。
当用户想规划网站结构、决定要创建哪些页面，或为新网站或现有网站确定页面优先级时使用。也适用于用户提及“website structure”“site structure”“which pages do I need”“page planning”“sitemap planning”“Must Have pages”“website architecture”或“site hierarchy”的情况。对于特定页面模板（例如首页），请酌情使用 homepage-generator 或 landing-page-generator。仅涉及自然搜索 SEO 路线图时不适用；请使用 seo-strategy。
为服务、产品、食品和饮料品牌打造高端滚动驱动落地页。规划访客旅程、页面语法、情感高潮和定制标志动作。创建具有独立视觉平面、克制动效和独立移动端构图的立体主视觉。使用提供的照片和素材，或通过 kie.ai 生成照片级真实的素材；编写语义化 HTML，并以视觉方式验证桌面端、移动端和减少动效的滚动状态。适用于 "scrollcraft"、"scroll craft"、"layered hero"、"premium hero"、"cinematic hero"、"scrollytelling"、"scroll animation site"、"a site where scrolling plays a video"、"Apple-style landing page"、"3D scroll world"、"interactive landing page"、"make my brand a scroll experience"、"this looks like a template"，或要求打造一个像体验而非文档的独特网站。
为 Magento 2 中的 Hyvä 主题编译 Tailwind CSS。当用户想要构建样式、生成 CSS、编译或运行 Tailwind，或为 Hyvä 主题创建生产/开发样式表时使用。Tailwind 类未生效，或模板更改后部分样式缺失时也使用——这通常意味着需要重新编译 CSS。触发词包括 "compile tailwind"、"build styles"、"generate css"、"styles not working"、"styles are missing"、"styles not applied"
为任何受众构建、重新设计和评审简洁、达到演示级水准的幻灯片（.pptx），适用于研究／实验室会议、工作进度更新、会议演讲、利益相关方汇报、论文答辩、教学和网络研讨会。只要用户想制作、创建、重做、整理、改进或评审幻灯片／演示文稿，就应使用，例如：“为我的项目做幻灯片”“根据这篇论文／代码／文档制作演示文稿”“把这些结果做成幻灯片”“重新设计这个 pptx”“我的幻灯片太密了”“评审我的演示文稿并指出不足”“做一张关于 X 的幻灯片”“帮我展示这项工作”。可使用或不使用模板（匹配用户模板，否则设计简洁样式），可使用或不使用源材料（挖掘所提供的代码／文档／图表，否则通过网络研究并核实事实），支持任何语言（如英语或中文）。先访谈，然后运行 Actor–Critic 循环，直到独立评审者同意。即使用户没有提到“skill”“deck”或“pptx”，也应触发。
使用流式容器、灵活单位、媒体查询和便于触控的设计，构建适用于各种屏幕尺寸的响应式移动优先布局。在创建或修改 UI 布局、响应式网格、断点样式、移动导航，或需要适配不同屏幕尺寸的界面时使用此技能。适用于响应式 CSS、媒体查询、视口设置、flexbox/grid 布局、移动优先样式、断点定义（移动设备、平板电脑、桌面设备）、触控目标尺寸、相对单位（rem、em、%）、针对不同屏幕的图像优化，或跨多种设备测试布局。适用于任何涉及多设备支持、响应式设计模式或自适应布局的任务。
使用 Playwright 截图、Chromatic、Percy 和 Argos CI 实现视觉回归测试。涵盖基线管理、差异阈值调整、动态内容遮罩、响应式视口测试以及审核/批准工作流。适用于：“视觉测试”、“截图”、“视觉回归”、“像素差异”、“快照差异”、“更新基线”、“Chromatic”、“percy snapshot”、“argos screenshot”。不适用于：重新设计导致大量测试失败后的批量基线再生成——使用 selector-drift-recovery；跨浏览器渲染矩阵——使用 cross-browser-testing；常规 Playwright 测试结构——使用 playwright-automation。相关：playwright-automation、ci-cd-integration、cross-browser-testing。
在 React / Next.js 应用中安装、组合、设置主题并制作 Bklit UI 图表（@bklit shadcn registry）。当用户需要图表或数据可视化时使用：折线、面积、柱状、实时/流式折线、组合、散点、蜡烛图/OHLC、饼图、环形图、雷达、仪表、热力图、漏斗、Sankey、旭日图或分级统计/世界地图；用于表格、KPI 卡片或密集仪表板的迷你折线图（LineSparkline、AreaSparkline、BarSparkline、useSparklineHover）；仪表板、分析页面、KPI 或统计卡片；图表工具提示、十字线、图例、标记、参考带、投影、趋势线、坐标轴或网格；或代码从 components/charts/* 导入，或提及 @bklit/* 或 bklit.com。对于样式词汇（图案、圆角方形/圆角/3D 柱、渐隐、加载样式、匹配应用主题），也使用 bklit-ui-design。从 Recharts、shadcn ChartContainer 或 TanStack Charts 迁移到 Bklit 时，使用 bklit-ui-migrate。
面向 Customware SPA 的配置-定价-报价（CPQ）垂直领域技能。定义模式、最低标准、布局模式、生命周期指标、产品配置器模式、业务规则模板，以及将 DOMAIN.md 转换为 CPQ 应用的映射规则。面向从电子表格和基于电子邮件的报价工作流迁移的中小企业客户（5–50 名员工）。原型必须明显优于 Excel，同时避免显得过于复杂、像企业级软件。模式是默认做法而非强制要求——实际工作流不同时应灵活调整。触发信号：报价、定价、产品配置、计算器、引导式信息收集表、评估工具、估算工具、提案工作流、资格检查器，以及任何“填写字段 → 计算 → 生成交付物”的模式。
让 Capacitor 应用支持 VoiceOver、TalkBack、动态字体/Android 字体缩放、切换控制、硬件键盘、减少动态效果和提高对比度。涵盖 Capacitor 特有的缺口：WKWebView 未遵循 iOS 动态字体、Android WebView 文本缩放导致布局错乱、zoomEnabled/user-scalable、SPA 路由变更未播报、WebView 下方的原生视图（地图、相机预览）无法访问、@capacitor/screen-reader（isEnabled、speak、stateChange）和 @capacitor/text-zoom（getPreferred、set）；还涵盖使用 Accessibility Inspector、simctl content_size、adb font_scale、TalkBack 和 axe-core 进行测试，并对应 WCAG 2.2。不要用于 Ionic 组件样式（使用 ionic-design）、刘海/主屏幕指示条布局（使用 safe-area-handling）、键盘遮挡问题（使用 capacitor-keyboard）、自动化测试框架配置（使用 capacitor-testing）或 App Store 元数据（使用 capacitor-app-store）。
重新设计 GitHub README 首页，或创建项目原生的纯 SVG、SVG 与 PNG/WebP 混合合成资源，以及可选的动画 GIF 资源。用户要求美化、重新设计、重塑品牌、视觉升级、简化或审核 GitHub README；仅创建主视觉、章节标题、图表、徽章、动态图形、展示模块或其他 README 资源；或将仓库首页打造为协调统一的视觉叙事时使用。如果不清楚用户需要整体 README 改造还是仅创建资源，请询问范围。对于纯 SVG 和生成的栅格素材都可行的主视觉资源，说明取舍并在创建资源前确认实现方案。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。