Skills

D

direct

adobe / skills

为现有网站设定重新设计方向。分析用户意图，选择配色方案和视觉方向，并编写目标规范（PRODUCT.md、DESIGN.md、DESIGN.json），以及记录在 stardust/direction.md 的推理过程。用户要求重新设计网站、更新设计、设定新的设计方向、定义重新设计目标，或调用 `$stardust direct`（在 Claude Code 中为 `/stardust:direct`）时使用。

T

tailwindcss

martinholovsky / claude-skills-generator

用于 JARVIS UI 组件的 Tailwind CSS 实用优先样式方案

C

continuous-infinite

dylantarre / animation-principles

构建持续循环动画时使用，例如加载状态、氛围动效，以及无限运行且不会让用户感到疲劳的背景效果。

G

graphic-design

travisjneuman / .claude

适用于数字和印刷媒体的专业平面设计原则。用于创作视觉设计、选择配色方案、字体排版和布局，或提供设计反馈。

M

migrate

adobe / skills

将 DESIGN、canon 和 modules 应用于清单中的每个页面，生成可部署的静态 HTML 网站。用于将捕获的整个网站迁移或渲染到重新设计的静态目录树中（“迁移页面”“渲染迁移后的网站”“将设计应用到所有页面”“构建可部署的网站”“将获批的原型转换为完整网站”）——这是原型与部署/发布之间的页面渲染步骤。包含三个渲染分支（获批页面、应用模板的同类页面、独特渲染），并为每页声明保真度等级。默认按页面增量处理、具备幂等性并保留内容。

P

prepare-migration

adobe / skills

通过协调准备级联流程，为整个网站的迁移做好准备：完整清单爬取（extract --prep）、页面类型和模块目录确认（direct --prep）、原型类型模板及设计规范（prototype --prep），以及资源准备；各阶段之间设有确认关卡。构建供 `migrate` 使用的类型化页面清单、已确认的模块目录和设计规范。适用于用户希望准备或设置整站迁移、运行迁移准备、在迁移网站前确认页面类型和模块、为大型网站的迁移做准备，或调用 `$stardust prepare-migration` 的情况。触发语包括“prepare the migration”、“migration prep”、“set up the migration data”和“get the site ready to migrate”。仅适用于重新设计流程；对于设计不变的迁移，`replica` 会运行自己的保留模式准备级联流程；切勿将 prepare-migration 与 replica 串联使用。它不用于执行迁移本身（`migrate`）或转换单个页面（`deploy`）。

A

alphaear-logic-visualizer

rkiding / awesome-finance-skills

创建并可视化金融逻辑图（例如 Draw.io XML），以解释复杂的金融传导链条或金融逻辑流程。

E

emotional-disconnect

dylantarre / animation-principles

当动画感觉不对、引发意料之外的情绪反应或与情境不匹配时使用

R

responsive-adaptive

dylantarre / animation-principles

构建依赖上下文的动画时使用，其持续时间会根据设备、距离、用户偏好或交互情境而变化。

S

state-changes

dylantarre / animation-principles

当元素在原地变换时使用，例如切换开关、展开的手风琴面板、复选框动画、按钮状态，或任何不涉及进入或退出的变换。

T

token-build

plugin87 / ux-ui-agent-skills

设置或运行令牌构建流水线。使用 Style Dictionary / Tokens Studio / W3C DTCG 导出，将 DTCG tokens/*.json（事实来源）转换为平台产物（CSS 变量、Tailwind @theme、JS/TS、iOS Asset Catalog、Android、Compose）。适用于用户想从令牌生成平台主题文件、接入令牌 CI，或输出多平台令牌

B

brand-guidelines

composio-community / awesome-codex-skills

将 OpenAI 的品牌色和字体应用于需要符合 Codex/OpenAI 外观风格的作品。当涉及品牌颜色或风格指南、视觉格式或公司设计标准时使用。

P

professionalism-credibility

dylantarre / animation-principles

当为需要严肃、专业且可信赖呈现效果的商业场景制作动画时使用。

U

ux-design

donchitos / claude-code-game-studios

为屏幕、流程或 HUD 逐节编写 UX 规范。读取玩家旅程以提供上下文；也涵盖整个项目的无障碍设计。

C

comfort-safety

dylantarre / animation-principles

创建能够安抚用户、减轻焦虑或传达保护与安全感的动画时使用。

F

figma-integration

plugin87 / ux-ui-agent-skills

保持 Figma 与代码同步。将三层 DTCG 令牌映射到 Figma Variables（集合 + 模式），支持双向同步；连接后使用 Figma MCP，并验证组件一致性（变体/状态）。适用于用户想将令牌/组件推送到 Figma、将设计导入代码、设置令牌↔Variable 同步，或检查设计与代码的偏差

F

flyer-design-generation

eachlabs / skills

使用 each::sense AI 生成专业传单和宣传页。制作活动传单、促销材料、房地产房源介绍、餐厅菜单等，设计醒目，适用于印刷和数字发布。

I

implementation-debugging

dylantarre / animation-principles

当动画无法按预期工作、存在错误或表现不一致时使用

P

popmotion

dylantarre / animation-principles

使用 Popmotion 的函数式动画库实现 Disney 的 12 条动画原理时使用

T

technical-constraints

dylantarre / animation-principles

当动画受到浏览器支持、平台能力或技术要求限制时使用

A

architecture-diagram

nousresearch / hermes-agent

以 HTML 形式呈现的深色主题 SVG 架构／云／基础设施图表

I

iphone-duo-flutter

mirzaaghazadeh / iphone-duo-skills

将 Flutter 应用适配到 iPhone Duo（Apple 的首款可折叠 iPhone）——了解 MediaQuery 当前提供的信息、displayFeatures 在此处为何不起作用，以及如何通过平台通道接入 iOS 27.1 的保留区域、铰链和排列 API。Flutter 或 Dart 应用需要支持可折叠 iPhone 时使用。

F

friendliness-approachability

dylantarre / animation-principles

适用于创建温暖、友好且让用户乐于参与的动画。

L

large-500-800ms

dylantarre / animation-principles

适用于构建 500–800 ms 的较大幅度运动动画，例如主视觉过渡、复杂展现，以及讲述故事、值得关注的动画

L

luxury

bergside / awesome-design-skills

高端暗色美学，醒目的标题、单色调色板和高级质感，适用于奢侈品牌体验。

M

medium-300-500ms

dylantarre / animation-principles

构建时长为 300-500ms 的标准动画时使用，例如页面过渡、重要 UI 变化，以及需要清晰传达信息的动画插图

M

motion-sickness

dylantarre / animation-principles

当动画引起头晕、恶心、迷失方向感或前庭不适时使用。

U

universal-industry

dylantarre / animation-principles

为任何行业设计动画，或不适用特定行业指南时使用

D

design-system-creation

secondsky / claude-skills

创建包含字体、颜色、组件和文档的全面设计系统，确保 UI 开发保持一致。适用于制定设计标准、构建组件库或确保跨团队一致性。

D

deliberate-1200-2000ms

dylantarre / animation-principles

用于构建 1200-2000ms 的缓慢、有意设计的动画，例如应用开场、加载序列，以及营造情感共鸣的叙事时刻。

G

governance

plugin87 / ux-ui-agent-skills

管理设计系统的演进方式（令牌/组件的 SemVer、贡献工作流、弃用政策和变更沟通）。适用于用户想添加、升级或弃用组件或令牌，决定版本号更新，建立贡献流程，或防止系统碎片化

P

page-cro

sickn33 / agentic-awesome-skills

分析并优化单个页面的转化效果。

P

product-manager

dylantarre / animation-principles

用于确定动画功能的优先级、制定动效路线图，或帮助 PM 理解动画原则的业务价值。

S

small-200-300ms

dylantarre / animation-principles

构建 200–300 ms 的短过渡效果时使用，例如用户能明显感知的模态框出现、卡片展开和导航过渡

S

studio-css-reset

remotion-dev / remotion

在 `.css-reset` 容器内设置 Remotion Studio UI 的样式，而不依赖继承的重置属性

T

trust-reliability

dylantarre / animation-principles

用于创建能够增强用户信心、树立可信度并传达可靠性的动画。

U

universal-elements

dylantarre / animation-principles

为特定技能未涵盖的 UI 元素制作动画，或将通用动画原则应用于多种元素类型时使用。

W

website-cloner

horuz-ai / claude-plugins

通过专用子 Agent 以像素级精度克隆网站的 Agent 工作流。适用于用户想要克隆、复制或复刻网站、基于现有网站创建落地页，或需要提取并重建网站设计的情况。包含通过斜杠命令进行编排、四个专用子 Agent（screenshotter、extractor、cloner、qa-reviewer），并输出带有 Tailwind CSS 和 motion 动画的 React 组件。

A

academic-slides

evoscientist / evoskills

使用此技能创建或完善学术幻灯片及配套演讲：构建会议演讲、论文答辩、实验室会议或论文转幻灯片的结构；确定叙事脉络和幻灯片划分；改进幻灯片设计和视觉层级；规划排练、时间安排、问答和备用幻灯片；或生成 .pptx。用户正在构思演示本身时使用。不要用于撰写论文、制作独立的演讲者备注/脚本/文字稿、制作海报、创建幻灯片之外的独立图表，或制作非学术演示文稿。

U

universal-tool

dylantarre / animation-principles

使用任意动画工具或框架实现 Disney 的 12 条动画原则时使用

W

wp-block-themes

automattic / agent-skills

开发 WordPress 区块主题时使用：theme.json（全局设置／样式）、模板和模板部件、模式、样式变体，以及 Site Editor 故障排查（样式层级、覆盖、缓存）。

C

create-remotion-geist

vercel-labs / skill-remotion-geist

使用 Geist 设计系统美学创作 Remotion 视频。用于创作遵循 Vercel 视觉风格的视频、动画或动态图形，包括深色主题、弹簧动画、Geist 字体和 Geist 配色。

D

design-system

akillness / jeo-skills

在逐个打磨页面之前，定义或重构共享的前端 UI 系统。适用于用户需要令牌治理、视觉语言规则、基础组件命名、页面系统方向、跨产品一致性，或需要在落地页、仪表板、表单和组件库之间保持一致的设计交接，包括该系统负责的可复用基础组件／插槽／变体 API。不适用于仅修复响应式布局、仅进行无障碍补救或广泛的 UI 评审。触发词：design system、design tokens、visual language、component library foundations、UI governance、cross-product consistency、landing page plus dashboard system、primitive naming、token policy、component API architecture。

M

mck-ppt-design

likaku / mck-ppt-design-skill

使用 MckEngine（python-pptx 封装）从零开始创建具有麦肯锡风格的专业顾问级 PowerPoint 演示文稿。适用于用户要求创建幻灯片、路演材料、商业演示文稿、战略演示文稿、季度回顾、董事会会议幻灯片或任何专业 PPTX 的场景。AI 可调用 eng.cover()、eng.donut()、eng.timeline() 等——涵盖 12 个类别（结构、数据、框架、比较、叙事、时间线、团队、图表、图像、高级可视化、仪表板、视觉叙事）的 67 个高级方法；提供一致的排版，避免文件损坏；使用 BLOCK_ARC 原生形状制作圆形图表（圆环图、饼图、仪表盘）；并针对间距、溢出、图例一致性、标题样式统一、可变数量布局的动态尺寸、横向项目溢出防护和图表渲染提供经过生产环境验证的防护机制。还可通过 Tencent Hunyuan 2.0 生成封面图，采用专业抠图、冷灰蓝色调和麦肯锡风格的贝塞尔曲线丝带装饰。

O

open-pencil

open-pencil / open-pencil

与 Figma .fig 设计文件和正在运行的 OpenPencil 编辑器协作——检查结构、查询节点、分析设计令牌、导出 PNG／SVG／PDF／JSX，并以编程方式修改设计。当被要求打开、检查、导出、分析或编辑 .fig 文件，或控制正在运行的 OpenPencil 应用时使用。

U

user-persona-creation

aj-geddes / useful-ai-prompts

基于研究和数据创建详细的用户画像。构建真实的目标用户形象，以指导产品决策并确保以用户为中心的设计。

A

accessibility-issues

dylantarre / animation-principles

当动画排斥患有前庭障碍、认知障碍或需要辅助技术的用户时使用

R

redesign

educlopez / ui-craft

在保留现有有效部分的前提下，重新设计现有网站或应用：先审查当前界面，分类确定需保留的内容（品牌、IA、SEO、内容），选择更新、换肤或重建的范围，然后有计划地进行现代化改造。用户说“重新设计”“让这个网站现代化”“刷新 UI”“让它看起来更符合当下”，或提供希望改进而非从头重建的现有页面／URL 时使用。用户要求重新设计 UI，或在设计／UI／前端工作中提到“重新设计”时也可调用。

U

universal-practitioner

dylantarre / animation-principles

在任何情境或角色中应用动画原则，或需要了解 Disney 的 12 项原则时使用

U

universal-solutions

dylantarre / animation-principles

遇到任何动画问题时使用，作为全面的诊断框架

E

element-plus-skills

jiaiyan / element-plus-skills

Element Plus 技能库——帮助 AI Agent 理解和使用 Element Plus UI 组件的综合技能库。用户需要使用 Element Plus 组件、主题、i18n、暗色模式或设计规范时调用。

U

universal-fallback

dylantarre / animation-principles

当动画领域不明确或涉及多种情境时使用——提供通用的迪士尼动画原则指导。

U

ux-friction

dylantarre / animation-principles

当动画造成用户困惑、延误任务完成或引发挫败感时使用

A

accessibility-audit

webflow / webflow-skills

对 Webflow 页面运行全面的无障碍审查（WCAG 2.1）——检查按钮、表单、链接、焦点状态、标题层级、键盘导航，并生成带修复建议的详细报告。需要连接 Webflow Designer。不包含图片替代文本（由 asset-audit 技能覆盖）。

I

instant-0-100ms

dylantarre / animation-principles

构建 100ms 以内的即时 UI 反馈时使用，例如按钮按下、开关切换和状态变化，让操作感觉即时且响应迅速。

通过 codemod 或独立指南将 Material-UI (MUI) 迁移到 Backstage UI (BUI)。适用于迁移 MUI 组件和样式、运行 @backstage/mui4-to-bui-migration-recipe，或在 BUI 迁移后处理 TODO(backstage-codemod)。

A

accessibility-compliance

aj-geddes / useful-ai-prompts

实施 WCAG 2.1/2.2 无障碍标准、屏幕阅读器兼容性、键盘导航和无障碍测试。适用于构建包容性 Web 应用、确保符合法规要求或改善残障人士的用户体验。

更改现有的 Moda 画布——粘贴的（URL、分享链接、cvs_ ID）或本次会话中已创建的画布：改写文案、调整样式和颜色、缩放、替换图片、添加或删除版块，也可导出或分享。适用于更改或导出该画布、“修复这张幻灯片”，以及对 Moda 刚生成内容的所有简短后续指令。除 mp4/gif 外，优先级高于所有触发条件。不适用于：为其制作动态效果或 gif/mp4 → moda-video；引用 moda.page → moda-website；基于它创建新产物 → 对应格式技能。

R

roblox-ui-design

tabooharmony / roblox-brain

适用于 Roblox UI 构图、层级结构、视觉系统、样式继承、无障碍与设计评审。

C

copywriting

mblode / agent-skills

使用品牌语调、内部词汇、认知阶段框架与产品状态契约来撰写和编辑产品与营销文案。适用于被要求「撰写文案」「改进这个 CTA」「去除 AI 写作痕迹」，或为错误状态或空状态命名时。行为决策请使用 product-design；文档请使用 docs-writing。