Skills

V

vtex-io-storefront-theme-app

vtex / skills

在设计或修改 VTEX IO 店面主题应用时使用 —— 该应用负责 `store/blocks.json`、`store/routes.json`、`store/templates/`、`store/contentSchemas.json`，以及由 `store.home`、`store.product`、`store.search`、`store.custom` 等原生页面模板组装而成的店面页面树。涵盖主题应用如何扩展基础主题、声明路由、跨页面组合区块，以及其 `store/` 文件与商家 Site Editor 内容的关系。适用于主题脚手架、自定义页面路由、主题级覆盖，或审查某项变更应归属主题应用、组件应用还是应用设置。

F

feedback-page-generator

kostja94 / marketing-skills

用于构建 Feedback Page 的已弃用兼容条目。此页面现由 Pagina 维护；请安装并使用 page-builder 来构建新的 Feedback Page。

J

jury

juliobsz / skills

仅依据证据，像 Awwwards 评审团一样为任何网站评分。在桌面设备、限速手机和减少动态效果模式下截取每种页面类型的截图，测量 LCP、CLS、FPS，检查 axe、键盘焦点和悬停反馈，审查 SEO 和元数据；随后由一位从未看过代码的新评审对设计、易用性、创意、内容和六个开发者领域评分，并列出按优先级排序的修复清单。有人要求审查、点评、评分或吐槽网站、作品集或落地页，询问网站是否达到 Awwwards 或 Site of the Day 的水准，或希望对在线 URL 或本地构建进行设计 QA 时使用。不用于构建或重新设计网站；此类任务请使用 /awwwards。

S

startups-page-generator

kostja94 / marketing-skills

用于构建 Startup Program Page 的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 Startup Program Page。

A

anti-ui-slop

github / awesome-copilot

阻止编码 Agent 交付千篇一律的 UI。利用 UIZZE 的 80 万+ 真实网页与 iOS 界面来构建产品专属界面、定义设计契约、覆盖必需状态，并执行严格的完成度关卡。在 Codex、Claude Code、Cursor、Copilot 或其他编码 Agent 中设计、实现、重新设计、评审网页或 iOS 界面，或在发布前做审查时使用。可用「anti-ui-slop」「stop UI slop」「ground this UI in real screens」或「run the UI finish gate」触发。

W

webflow-cli:code-component

webflow / webflow-skills

为 Webflow Designer 创建并部署可复用的 React 组件。使用 webflow.json 配置现有 React 项目、构建并打包代码、验证输出，并通过 library share 部署到工作区。适用于为设计师构建自定义组件。

C

ce-polish-beta

everyinc / compound-engineering-plugin

[BETA] 启动开发服务器，在浏览器中打开该功能，并共同迭代改进。

R

resources-page-generator

kostja94 / marketing-skills

用于构建资源页面的已弃用兼容性条目。此页面现由 Pagina 维护；安装并使用 page-builder 来构建新的资源页面。

S

status-page-generator

kostja94 / marketing-skills

用于构建 Status Page 的弃用兼容条目。此页面现由 Pagina 维护；请安装并使用 page-builder 构建新的 Status Page。

W

webflow-cli:designer-extension

webflow / webflow-skills

为 Webflow Designer 构建自定义功能的 Designer Extensions。列出可用模板，从模板（default/react/typescript-alt）初始化扩展项目，打包扩展以供上传，并在本地运行以便开发

W

widgets-ui

inference-sh / skills

来自 ui.inference.sh、面向 React/Next.js 的 JSON 声明式 UI 组件。根据结构化的 Agent 响应渲染丰富的交互式 UI。能力：表单、按钮、卡片、布局、输入框、下拉选择、复选框。适用场景：Agent 生成的 UI、动态表单、数据展示、交互式卡片。触发词：widgets、declarative ui、json ui、widget renderer、agent widgets、dynamic ui、form widgets、card widgets、shadcn widgets、structured output ui

M

masonry

kostja94 / marketing-skills

用于构建 Masonry 的已弃用兼容性条目。此组件现由 Bricks 维护；安装并使用 component-builder 来构建新的 Masonry。

O

openscad

mitsuhiko / agent-stuff

创建并渲染 OpenSCAD 3D 模型。生成多个角度的预览图像，提取可自定义参数，验证语法，并导出适用于 MakerWorld 等 3D 打印平台的 STL 文件。

W

web-animation-design

vercel-labs / open-agents

设计并实现自然且有目的的 Web 动画。用户询问动画、运动、缓动、时序、时长、弹簧、过渡或动画性能时，主动使用此技能。也适用于如何为特定 UI 元素制作动画、选择缓动方式、动画最佳实践或运动无障碍考量等问题。触发词包括：easing、ease-out、ease-in、ease-in-out、cubic-bezier、bounce、spring physics、keyframes、transform、opacity、fade、slide、scale、hover effects、microinteractions、Framer Motion、React Spring、GSAP、CSS transitions、entrance/exit animations、page transitions、stagger、will-change、GPU acceleration、prefers-reduced-motion、modal/dropdown/tooltip/popover/drawer animations、gesture animations、drag interactions、button press feel、feels janky、make it smooth。

T

tools-ui

inference-sh / skills

来自 ui.inference.sh 的 React/Next.js 工具生命周期 UI 组件。展示工具调用：待处理、进行中、需要批准、结果。能力：工具状态、进度指示器、批准流程、结果展示。适用场景：展示 Agent 工具调用、人在环路中的批准、工具输出。触发词：tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending

L

list

kostja94 / marketing-skills

用于 List 构建的弃用兼容条目。此组件现由 Bricks 维护；安装并使用 component-builder 构建新的 List。

S

solutions-page-generator

kostja94 / marketing-skills

用于构建 Solution Page 的已弃用兼容性条目。此页面现由 Pagina 维护；安装并使用 page-builder 来构建新的 Solution Page。

B

book-cover-design

inference-sh / skills

书籍封面设计，涵盖特定体裁的惯例、排版规则和 AI 图像生成。覆盖虚构与非虚构体裁、尺寸、缩略图测试和迭代工作流。用途：自助出版、电子书封面、印刷封面、有声书封面、封面样机。触发词：book cover、cover design、ebook cover、book art、novel cover、self publishing cover、kindle cover、audiobook cover、book jacket、cover illustration、fiction cover、nonfiction cover。

C

capacitor-keyboard

cap-go / capgo-skills

使用 @capacitor/keyboard 修复 Capacitor 应用中的屏幕键盘行为：iOS `resize` 模式（默认 `native`、`body`、`ionic`、`none`）、`keyboardWillShow`/`keyboardDidShow` 高度、`setAccessoryBarVisible`、`setScroll`、`style`（`DARK`/`LIGHT`/`DEFAULT`）、`autoBackdropColor`（8.0.4+）、Android edge-to-edge/SystemBars 交互（Capacitor 8 中移除旧版 `resizeOnFullScreen`）、iOS 26 修复，以及 iOS 输入自动缩放。当输入框被键盘遮挡、WebView 跳动或键盘上方出现白／黑色间隙、固定页脚浮在屏幕中间、`vh` 布局收缩或键盘事件未触发时使用。不要用于常规安全区域／刘海边距（safe-area-handling）、Ionic 组件样式（ionic-design）或表单无障碍性（capacitor-accessibility）。

T

template-page-generator

kostja94 / marketing-skills

用于 Template Page 构建的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 构建新的 Template Page。

M

migration-page-generator

kostja94 / marketing-skills

用于构建 Migration Page 的弃用兼容条目。此页面现由 Pagina 维护；安装并使用 page-builder 来构建新的 Migration Page。

O

optimized-nextjs-typescript

mindrally / skills

优化的 Next.js TypeScript 最佳实践，采用现代 UI/UX，注重性能、安全性和简洁架构

T

threejs-r3f

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

P

press-coverage-page-generator

kostja94 / marketing-skills

用于构建 Press Coverage Page 的已弃用兼容条目。此页面现由 Pagina 维护；请安装并使用 page-builder 来构建新的 Press Coverage Page。

W

webflow-code-component:component-audit

webflow / webflow-skills

审查 Webflow Code Components 的架构决策，包括属性暴露、状态管理、插槽机会和 Shadow DOM 兼容性。重点关注 Webflow 特定模式，而非通用 React 最佳实践。

D

design-audit

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

P

pitch-deck-visuals

inference-sh / skills

投资者路演演示文稿的结构，涵盖逐页框架、视觉设计规则和数据呈现。包括 12 页框架、图表类型、团队页和常见的投资者反感点。适用于：募资演示文稿、投资者演示、创业项目路演、演示日、资助申请。触发词：路演演示文稿、投资者演示文稿、创业项目路演、募资演示文稿、演示日、路演演示、投资者演示、种子轮演示文稿、A 轮演示文稿、路演幻灯片、创业演示、VC 路演、投资者会议

C

compose-modifier-and-layout-style

chrisbanes / skills

编写或审查 Jetpack Compose 布局 API、modifier 参数、modifier 链的构建、硬编码的根布局决策，或围绕单个条件语句的布局包装器时使用。

E

email-design

inference-sh / skills

电子邮件营销设计，包含布局模式、主题行公式与送达率规则。涵盖欢迎序列、促销邮件、事务性模板与移动端优化。用于：电子邮件营销、newsletter 设计、滴灌式营销、电子邮件模板、事务性邮件。触发词：email design、email template、email marketing、newsletter design、email layout、email campaign、drip campaign、welcome email、promotional email、transactional email、email subject line、email header image、email banner。

T

tab-accordion

kostja94 / marketing-skills

用于构建 Tabs 和 Accordion 的弃用兼容条目。此组件现由 Bricks 维护；请安装并使用 component-builder 来构建新的 Tabs 和 Accordion。

D

design-loop

jezweb / claude-skills

使用接力循环构建多页面网站的自主构建器。每次迭代都会读取 .design/next-prompt.md 中的任务，使用 HTML/Tailwind 生成页面，将其集成到网站中，进行视觉验证，然后写入下一项任务以保持循环运行。用户要求自主构建整个网站、构建网站的所有页面、按顺序生成多个页面，或运行“design loop”／“baton loop”／“autonomous site build”时使用——即使用户在流程中说“继续”或“构建下一页”或“下一页”也适用。

L

last-20-percent

juliusbrussee / skills

找出并完成已构建解决方案最后 20% 的工作——这是 Agent 常忽略的体验层：输出读起来的实际感受、应有的页面或屏幕、首次运行和空状态、明确设定的默认值，以及理想使用路径。规划任何构建时使用，确保体验亮点与底层实现一样具体地纳入规格；在宣称构建“完成”之前；解决方案能运行但感觉像演示时；或用户说 "last 20%"、"finish this"、"make it actually good"、"is this actually done" 或 "why does this feel flat" 时使用。

W

web-clone

nexu-io / open-design

网站复刻／克隆方法论。用户提出复刻或克隆网站、仿站、照着某网站制作、重现网站、还原网页效果、下载网站后修改，或复刻某个交互/WebGL/Canvas/Three.js 效果时使用。提供可移植的决策树：“先获取真实源码 → 判断路径 → 逆向拆解 → 搭建工程 → 替换内容”，涵盖静态站、React/Vue/Next 内容站、WebGL-Canvas 重前端站三类，并强制核对任何 AI 二手分析中的可执行代码。

G

game-designer

dylantarre / animation-principles

在设计游戏手感、玩家反馈系统，或制作能够增强游戏体验和玩家满意度的动画时使用。

N

nielsen-usability-heuristics

dembrandt / dembrandt-skills

Nielsen 的十大可用性启发式方法。适用于审查界面、设计交互流程、编写错误信息或评估可用性时。

W

webflow-code-component:component-scaffold

webflow / webflow-skills

生成新的 Webflow Code Component 样板代码，包含 React 组件、定义文件和可选样式。自动检查前置条件，并可设置缺失的配置或依赖项。

H

huashu-md-html

alchaincyf / huashu-md-html

md/html/docx/pdf/epub 多向流水线，落地「md 生产，多端消费」。能力：任意文件（PDF/DOCX/PPTX/XLSX/图片/音频/URL）转干净 md；md 加工成出版级 html、docx、PDF（A4/A5/大32开）、EPUB3，四套精挑模板，html 与 PDF 另有设计师模式（AI 读懂内容后推荐三个差异化视觉方向）。SKIP：需要新生成图片、或只做压缩截图的任务。

O

og-image-design

inference-sh / skills

Open Graph 与社交分享图像设计，包含平台规格、文字排版与品牌呈现。涵盖 OG meta 标签、Twitter 卡片、LinkedIn 预览与动态生成。用于：社交分享图像、博客缩略图、链接预览、社交卡片。触发词：og image、open graph、social sharing image、twitter card、social card、link preview image、og meta、sharing preview、social thumbnail、meta image、og:image、twitter:image、linkedin preview。

W

webflow-cli:devlink

webflow / webflow-skills

将 Webflow Designer 组件导出为外部项目使用的 React/Next.js 代码。在 webflow.json 中配置 devlink 设置，使用 devlink sync 同步设计更新，验证生成的代码、查看差异并提供集成示例。适用于基于 Webflow 设计构建 React/Next.js 项目。

H

huashu-motion

alchaincyf / huashu-motion

以可编辑代码制作动态图形、发布视频和解说视频。导演为你的产品挑选动态语言；你可以指向画格进行修改。动画、发布片、解说视频，指着画面改。

S

signup-login-page-generator

kostja94 / marketing-skills

用于构建 Authentication Page 的弃用兼容条目。此页面现由 Pagina 维护；请安装并使用 page-builder 构建新的 Authentication Page。

W

webflow-code-component:convert-component

webflow / webflow-skills

将现有 React 组件转换为 Webflow Code Component。分析 TypeScript 属性，将其映射到 Webflow 属性类型，生成 .webflow.tsx 定义文件，并指出所需的修改。

E

emil-design-eng

nexu-io / open-design

此技能编码了 Emil Kowalski 关于 UI 打磨、组件设计、动画决策和使软件感觉出色的隐形细节的哲学。

S

skyline-route

wechat-miniprogram / skyline-skills

Skyline 自定义路由与页面转场技能。涵盖自定义路由动画（routeBuilder）、预设路由（7 种 wx:// 类型）、页面返回手势、容器转场动画（open-container）、Router API。适用于实现半屏弹窗、页面缩放、底部弹出、卡片展开等转场效果。触发关键词：自定义路由、custom-route、routeBuilder、navigateTo、页面转场、半屏、预设路由、返回手势、open-container。

L

library-curator

nexu-io / open-design

搜索 OD Library（全局素材库）并将匹配的素材应用到当前项目的任务过程中。当用户要求复用此前截取或上传的图片、"从我的素材库中取一个 logo/截图"，或需要查找并放入正在构建的页面中的已存素材时使用。

A

applying-slds

forcedotcom / sf-skills

使用正确的蓝图、样式钩子、工具类和图标，应用符合 SLDS 的界面。在构建任何需要 SLDS 的界面、在 Lightning Base Components 与 SLDS Blueprints 之间选择、应用用于主题化的样式钩子、使用工具类进行布局和间距处理，或选择图标时使用。触发词包括「构建模态框」「创建表单」「数据表格」「SLDS 样式」「使用钩子设置样式」「添加图标」。

I

ink

assistant-ui / skills

使用 @assistant-ui/react-ink 和 @assistant-ui/react-ink-markdown 构建终端聊天 UI。适用于搭建 `create --ink`、在 `useChatRuntime` 外层挂载 `AssistantRuntimeProvider`、组合 `ThreadPrimitive`、`ComposerPrimitive`、`MessagePrimitive`、`LoadingPrimitive`、`TextInput`、线程历史、附件、通知与终端键盘导航，或聊天需要字形簇安全编辑、多行显示列、绝对后端 URL、本地文件存储、自定义 `RemoteThreadListAdapter`。终端 markdown、工具输出、消息渲染和 Ink 焦点问题转到此处处理。浏览器应用配置、Web 元素和标准 Web runtime 请使用 [setup](../setup/SKILL.md)。

C

canvas-generative

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

G

gsap

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

H

hyperframes-animation

calesthio / openmontage

HyperFrames 的全部动画知识——原子化运动规则、多阶段场景蓝图、场景转场、更广泛的运动设计技术，以及七个运行时适配器（默认 GSAP，另有 Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。用于任何运动或动画任务：挑选 2-4 条规则进行组合，或加载蓝图，或查阅特定运行时的 API（如 GSAP 缓动 / Lottie 播放器 / Three.js 混音器）。HyperFrames 原生：单一暂停时间线、可安全定位、确定性强。

U

ui-design

mindrally / skills

使用现代 Web 标准构建无障碍、高性能且易用的界面的 UI 设计最佳实践

A

accessibility-fix

accesslint / skills

仅做修复——按 WCAG 2.2 修复网页无障碍（a11y）违规问题，采用「基线检测—编辑—验证」循环。接受目标对象（URL、文件、目录），或来自 `accessibility-scan`/`accessibility-inspect`/`accessibility-audit` 的问题清单，按既定规则应用机械化修复，将需要视觉或上下文判断的部分留作 TODO，并通过重新运行基线检查进行验证。它只负责修复。查找问题请使用 `accessibility-scan`（单页、自动）、`accessibility-inspect`（单页、手动）或 `accessibility-audit`（整站、WCAG-EM）；检查回归请使用 `accessibility-diff`。适用于「修复 X 中的 a11y 问题」「让这个页面具备无障碍」「补充缺失的替代文本和标签」「应用这些无障碍修复」「修复这些违规问题」等请求。

D

drawio-academic-skills

bahayonghang / drawio-skills

适用于 draw.io 的出版图表规范层。当图表用于论文、学位论文、期刊、会议、IEEE/ACM 投稿、手稿、终稿、Word/LaTeX 图表或其他出版物时，使用本工具代替 drawio。针对架构图、工作流图、路线图、网络拓扑图和复刻论文图，应用场合、图表类型、颜色、标题／图例、公式及论文可读性检查规则。

S

sf-industry-commoncore-omniscript

jaganpro / sf-skills

OmniStudio OmniScript 创建与验证，采用 120 分制评分。适用于构建引导式数字体验、多步骤表单，或编排 Integration Procedures 和 Data Mappers 的交互流程。以下情况触发：用户创建 OmniScripts、设计步骤流、配置元素类型或审查现有 OmniScript 配置。以下情况不要触发：构建 FlexCards（使用 sf-industry-commoncore-flexcard）、直接创建 Integration Procedures（使用 sf-industry-commoncore-integration-procedure）或分析依赖项（使用 sf-industry-commoncore-omnistudio-analyze）

F

framer-motion

athevon / genjutsu

面向 Claude Code、claude.ai 和 Cowork 的创意编码技能，涵盖 Web（GSAP、Motion、Three.js、CSS）、Android（Jetpack Compose）和 Apple（SwiftUI）的动效、微交互与设计系统。先提出交互方案供你批准，再编写代码。拒绝 AI 垃圾设计。

H

hyperframes-creative

calesthio / openmontage

HyperFrames 视频的非动画创意方向。用于设计规范（frame.md / design.md）处理、调色板、排版、旁白、节拍规划、音频响应式视觉、构图模式以及品牌/风格决策。对于原子运动模式和场景蓝图，请使用 `hyperframes-animation`。

V

validating-slds

forcedotcom / sf-skills

审计 Lightning Web Components 是否符合 SLDS，并生成带评分的质量报告。运行 SLDS linter，分析 CSS 中主题钩子的使用及配对情况，检查 HTML 的可访问性属性，并按类别对发现项评分，得出总体等级。当用户要求“为我的组件打分”、“SLDS 评分卡”、“质量报告”、“审计 SLDS 合规性”、“我的 SLDS 做得怎么样”、“检查组件质量”、“给我的组件评级”、“评估我的组件”、“这个组件可以发布了吗？”、“检查我的 LWC 是否有问题”、“提交前审计”、“代码审查前审查我的组件”，或希望评估 LWC 或 SLDS 组件质量及生产就绪程度时使用。不用于修复违规（使用 uplifting-components-to-slds2）或构建新组件（使用 applying-slds）。

D

dokie-ai-ppt

myzy-ai / dokie-ai-ppt

AI 演示文稿生成器。通过对话创建专业的 HTML 幻灯片。触发词：创建／编辑 PPT、演示文稿、幻灯片、演示稿、主题演讲、推介演示、季度报告、产品介绍、培训材料、路演、工作报告。核心功能：需求分析、大纲生成、主题选择、HTML 幻灯片生成、本地预览。

F

flutter-accessibility

flutter / agent-plugins

暂无简介

K

knowledge-site-creator

joeseesun / qiaomu-knowledge-site-creator

一句话生成任何领域的知识学习网站。AI 自动理解主题、创作内容、生成页面并部署上线。适用于任何需要系统学习的知识领域：进化心理学、大模型术语、化学元素、历史事件等。