Skills
收录 97,501 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。
设计与 UI
任何 Penpot 请求的轻量调度器/入口点。在任何 Penpot 任务中首先使用,以确保 high_level_overview 已运行、读取用户意图,并路由到恰好一个目标技能或工作流(构建画板、构建幻灯片、构建设计系统、审计无障碍、审计 token、从 Figma 迁移、重命名图层、代码审查、提取 DESIGN.md 等)。绝不改动画布。触发词:'work on this Penpot file'、'help me with Penpot'、'I want to design/build/audit/migrate in Penpot'、'where do I start'、'which skill should I use'、'route this request'、含糊的 Penpot 请求。
公众号排版|Markdown 转 HTML|排版主题|段落样式 — 公众号一键排版工具,Markdown 文稿转微信后台可粘贴 HTML,多主题、多字号、段落样式切换,所见即所得。面向公众号编辑、独立作者、排版岗。触发词:「排版」「版式」「美化」「格式化」「字号」「段落样式」「换个排版主题」「换个版式」「转 HTML」「弄好看点」「调整格式」。换预设包/品牌包/整套主题配色请走 aws-wechat-article-assets;需要多环节串联(写+审+排+配图+发)请走 aws-wechat-article-main。
将代码中的设计 token 作为变量推送到 Figma 中——DTCG / tokens.json / token 对象 → Figma 变量集合、模式和值。当用户想要将 token 从代码同步到 Figma 时使用:触发词为“将 token 导入 Figma”、“从我的 tokens.json / DTCG / Tailwind 配置创建 Figma 变量”、“将设计 token 同步到 Figma”、“将 token 推送到 Figma”。以非破坏性方式匹配现有变量(依据保存的 id/key/name),因此重新导入会更新而非重复创建。适用于任何 Figma 方案。若需反向操作(Figma → 代码),请使用 figma-export-tokens。
创建、更新、重命名、删除和组织 Figma 变量、集合和模式 —— 包括快速批量创建/更新、设置作用域、代码语法和添加主题模式。用于增量式变量工作:触发词 'create a variable'、'batch update variables'、'add a dark mode to my collection'、'rename this variable'、'set variable scopes'、'delete a variable/collection'、'add a mode'。适用于任何 Figma 套餐。若要从零构建系统,请使用 figma-setup-design-tokens;若要进行代码与 Figma 双向同步,请使用 figma-import-tokens / figma-export-tokens。
创建完整的设计系统、品牌形象和 UI 组件库。当用户说 "create design system"、"build brand identity"、"design UI components"、"generate design tokens"、"create figma specs"、"review my design"、"analyze design trends"、"audit accessibility"、"convert design to code" 或 "create presentation deck" 时使用。涵盖从系统架构到高管演示的 10 个专业角色。
当请求涉及可视化随时间的变化、前后对比或环比变动,且用户正在使用 @posthog/quill-charts 构建 UI(仪表盘、报告、mcp_analytics 前端、自定义可视化)时,帮助 PostHog 工程师和 Agent 选择正确的图表。适用于用户询问某事物在两个时间点或时间段之间如何 "changed"、"moved"、"grew"、"dropped"、"improved" 或 "regressed",或提到 "before/after"、"period over period"、"week over week"、"delta"、"slope graph"、"slopegraph",或跨两个快照比较多个序列时。同时提供 `SlopeChart` quill 组件和原生 `ChartDisplayType.SlopeGraph` 洞察显示作为选项。
通过 Codex 内置的 image_generation 工具生成符合品牌调性的营销图片。在用户要求以下情况时触发:(a) 为特定品牌创建营销素材(广告 / logo / 幻灯片 / 产品 mockup / 场景 / 光照变换 / LinkedIn 或社交轮播图),(b) 从 URL / Tailwind 配置 / tokens.json / Figma Variables / CSS 自定义属性 / 描述 / 现有品牌素材中提取或构建品牌资料(DESIGN.md),(c) 为同一品牌的多个图像任务保持品牌一致性。以下情况不要触发:UI 代码生成、前端参考图(改用 imagegen-frontend-web)、视频生成,或无品牌背景的通用图像编辑。运行时:需要 OpenAI `image_generation` 工具(经 Responses API 的 gpt-image-2)。Codex 原生支持(CLI / App / web)。Claude Code 用户需要一个暴露图像生成的 MCP 服务。若该工具不可用,本 skill 会硬停止并给出修复指引 —— 不会退回到 HTML/CSS/Canvas 渲染。
按照 WCAG 2.2 的 A、AA 或 AAA 一致性等级,在 iOS、Android、Web、macOS、Windows 与 Linux 上审计或修复 Flutter widget,涵盖 VoiceOver 与 TalkBack 下的 Semantics 标签与屏幕阅读器输出、触摸目标尺寸、拖拽替代方案、焦点顺序与键盘导航、颜色对比度、disableAnimations 下的动画门控以及表单 autofillHints,并包括将每项修复锁定的测试套件。在一个或多个上述平台上构建、审计或审查 Flutter widget 的无障碍性时使用。
生成可访问的配色方案:OKLCH 色阶(50-950)、带色调的中性色、语义色、WCAG 对比度检查、深色模式配色重映射、渐变,以及 CSS/Tailwind 颜色输出。仅在任务只涉及颜色时使用。触发语:“color palette”、“color scheme”、“generate colors”、“shade scale”、“color tokens”、“color system”、“accessible colors”、“contrast ratio”、“semantic colors”、“palette from hex”。若需 logo + 字体 + 规范,请使用 brand-identity;若需完整的 token/组件体系(间距、圆角、组件),请使用 design-system;若需完整的深色主题,请使用 dark-mode。
游戏环境美术的专家知识——模块化设计、视觉层级、色彩脚本、环境叙事、优化与世界观构建。从 blockout 到最终美术阶段,打造沉浸、高性能且可读的空间。当提到“environment art、level art、world art、modular kit、kit-bashing、set dressing、prop placement、biome design、visual hierarchy、color script、hero prop、trim sheet、environment composition、skybox、atmosphere、environment、level-art、world-building、modular、kit-bashing、set-dressing、visual-design、game-art、composition、optimization”时使用。
iOS 上 @expo/ui SwiftUI 组件的库参考 —— 涵盖 Host 边界、修饰符组合、iOS 26 Liquid Glass 与 Human Interface Guidelines 组合规则、布局/输入/导航/展示目录,以及 ObservableState 模式。每当编写或审查从 @expo/ui/swift-ui 或 @expo/ui/swift-ui/modifiers 导入的 React Native 代码时使用本技能 —— 包括采用原生 SwiftUI 视图的新 Expo 应用、从 React Native 基础组件迁移到 expo-ui,以及面向 iOS 26 特性(Liquid Glass、GlassEffectContainer、sheet detents)的代码。即使用户没有明确提到 "expo-ui",但正在编写应桥接到 SwiftUI 的 iOS 定向 Expo UI 代码,也触发。
Web 与移动 H5 的说法层——把用户说不准的界面描述,换成一句能直接发给 Agent 的准确需求,并顺手点出他刚刚描述了却叫不出名字的那个术语。每一轮对话都适用,不限于某个阶段:任何一轮对话里,只要用户用大白话描述了网页或 H5 的效果、交互、状态、动效、质感或故障(「鼠标放上去变个色」「点了没反应」「底下那条黑杠挡住按钮了」「弹窗底下还能滑」「键盘把输入框挡住了」「内容太长省略一下」「看着有点土」「太挤了不透气」「一条数据都没有的时候」「图片加载完页面往下跳」「在微信里打开显示不对」「电脑上打开这个 H5 很怪」),就该使用本 Skill:照常把用户要的活干完,再在进度或结果里自然带出对应术语、一句大白话解释,以及它最常见的那个坑。内置 142 条本地术语库(web · h5 · motion · mp · base 五册,覆盖布局 · 交互 · 状态 · 组件 · 表单 · 动效 · 质感 · 无障碍 · 性能 · 容器平台 · 小程序 · 前端基础),零网络依赖,用 `scripts/term.mjs find` 以用户的原话反查——检索的主键是「用户会怎么描述这件事」,不是「它叫什么」,因为说不出名字正是要解决的问题。三条硬门禁:每一条给出的术语都必须能指着用户这一轮的原话说出是哪几个字触发的,指不出来就不提,宁可不说也不硬凑;H5 的坑是成对的,词条 pairs 里标出的搭档必须一起说(吸底 ↔ 安全区、弹层 ↔ 滚动锁、输入框 ↔ 键盘顶起、图片 ↔ 宽高比占位),只给一半等于埋雷;永远先交付任务结果再补术语,一次最多 1–3 条,用户表达已经准确时不加任何教学。也用于反向场景:用户贴出 Agent 或同事的话看不懂时(「他说要做乐观更新和错误回滚」「他说这里 CLS 有问题」),挑出最影响下一步判断的那个概念,说清它在当前任务里具体指什么、以及一个容易混淆的边界。可选产出 `.finesse/lexicon.md`——本项目的说法对齐表,防止同一个组件在需求、代码和沟通里出现三种叫法。支持动作命令(say · name · explain · check · align · list)。触发词:「说专业一点」「这句话怎么说准确」「改成能发给 Agent 的需求」「这个叫什么」「专业的说法」「术语」「看不懂他说的」「H5」「移动端」「手机上」「响应式」「安全区」「吸底」「弹窗」「骨架屏」「空状态」「无障碍」「术语对齐」「/term」。
使用此技能来诊断和修复 Jetpack Compose Modifier 顺序 Bug —— background 的绘制区域错误、clickable 的点击区域错误、clip 的裁剪错误、padding/size 的测量错误、graphicsLayer 作用域出人意料。涵盖“包裹下一个 Modifier”的心智模型、典型陷阱(padding 与 background、clickable 的放置、clip 放在 background 之前、graphicsLayer 的放置),以及为什么通过 remember { Modifier.… } 提升整条 Modifier 链很少是真正的性能收益,因为 Compose 已经会驻留相同的链。适用于开发者问“为什么点击区域超出了可见按钮”、“为什么我的背景绘制在错误的位置”、“Modifier 顺序重要吗”、“我应该缓存我的 Modifier 链吗”,或审查重排 Modifier 的 diff 时。
将现有应用页面、视图或组件代码转换为绑定到现有设计系统的 Penpot 画板——把代码样式映射到语义 token,并复用库组件而非原始图形。当用户拥有真实代码/标记并希望在 Penpot 中逐节、按系统重建时使用。触发词:'build this in Penpot from code'、'turn this React/HTML/CSS into a Penpot screen'、'recreate this view in Penpot'、'port this page to Penpot'、'translate this component to Penpot bound to our tokens'、'code to Penpot'。
从静态 logo 图片创建动画 logo 文件(Lottie JSON、GIF、MP4)。当用户提供 logo 图片(PNG/SVG/JPG)并要求任何类型的 logo 动画、动态图形、动画 logo 效果、波形动画、弹跳 logo、旋转 logo、脉冲 logo、摆动 logo,或要求 "animate my logo" 或 "make my logo move" 时,应使用本技能。输出独立的动画文件(而非 React/HTML 制品)。生成 Lottie JSON 并自动渲染 GIF/MP4、进行完美循环校验,并运用专业的动效设计模式。
将自然语言描述的图表设计需求转换为准确的 Bklit UI(@bklit shadcn registry)组件和 props,并调整样式以适配宿主应用。当用户描述图表的外观而非指定 props 时使用,例如“逐渐淡出的斜纹背景”“方圆形柱”“3D 玻璃柱”“斜线填充区域”“点阵网格”“骨架加载状态”“虚线预测”“半圆环”“让图表符合我的品牌/深色模式/圆角”。检测项目的 Tailwind 版本、颜色格式、深色模式策略、圆角和现有图表设计令牌,然后选择经过验证的方案,安装合适的 @bklit/<item>,将颜色适配到主题令牌;如果 Bklit 没有对应需求的 prop,也会如实说明。为 Bklit 图表设置主题或重新设计样式时也使用。
(NS) 安全性/兼容性/无障碍 + Vercel Web Interface Guidelines。在加固安全性、修复 CSP/CORS/headers、审查 UI/检查无障碍/审计 UX,或涉及 Web Interface Guidelines 时使用——即使没说 "best practices";也用于 ns-proto-creator 收尾。不要用于 MR/SOLID(ns-reviewer)、视觉改版(ns-frontend-design)或功能开发(ns-coder / ns-spec-driven)。
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。
