Agent Skills
› emilkowalski/skills
emilkowalski/skills
GitHub基于 Emil Kowalski 理念构建高质量前端动画，涵盖动机判断、工具选择及实现。遵循严格规则确保性能与体验，支持硬件加速优化。
Install All Skills
npx skills add emilkowalski/skills --all -g -y
Skills in Collection (17)
基于 Emil Kowalski 理念构建高质量前端动画，涵盖动机判断、工具选择及实现。遵循严格规则确保性能与体验，支持硬件加速优化。
请求创建新动画
为组件添加动态效果
构建页面过渡动画
npx skills add emilkowalski/skills --skill animate -g -y
将模糊的动画描述转化为精确的专业术语，帮助用户准确命名动效。适用于用户询问特定效果名称或想用正确词汇向AI/设计师提问的场景，不涉及设计或开发实现。
用户询问某个动效的名称
用户描述视觉感受但不知道专业术语
npx skills add emilkowalski/skills --skill animation-vocabulary -g -y
提供Apple风格Web界面设计指南，涵盖手势驱动UI、弹簧动画、拖拽交互及动量过渡。基于WWDC理念，利用CSS和Pointer Events实现流畅、直观的物理感交互体验。
构建Apple风格的流体界面
审查手势驱动的UI交互
实现弹簧动画或拖拽效果
npx skills add emilkowalski/skills --skill apple-design -g -y
提供React Toast库Sonner的使用指南，涵盖安装、配置Toaster、调用类型选择、样式定制及常见故障排查。
需要集成或配置Sonner组件
使用toast函数发送消息或提示
解决Toast显示异常或样式问题
npx skills add emilkowalski/skills --skill ask-sonner -g -y
基于 Emil Kowalski 的设计工程哲学，提供 UI 打磨、组件设计、动画决策及细节优化的指导。通过训练品味和关注不可见细节提升软件体验，并强制使用 Markdown 表格进行代码审查对比。
需要提升界面质感和交互流畅度
审查或优化 CSS/JS 动画与过渡效果
寻求 UI 组件设计的最佳实践建议
npx skills add emilkowalski/skills --skill emil-design-eng -g -y
用于扫描界面寻找值得添加动画的机会，依据Emil Kowalski的克制哲学提出精确的运动方案。它只读不修改代码，旨在过滤无效建议，提升用户体验而非增加负担。
用户询问界面中哪些地方可以添加动画
用户希望让界面感觉更生动或更有活力
npx skills add emilkowalski/skills --skill find-animation-opportunities -g -y
作为高级动效顾问，对代码库进行只读分析，识别高杠杆动效问题并生成自包含的优先修复实施计划。旨在为其他代理提供精确执行指南，不直接修改代码或审查单个差异。
improve the animations
audit the motion
make this app feel better
animation fixes roadmap
npx skills add emilkowalski/skills --skill improve-animations -g -y
根据前端具体任务从精选列表中推荐合适的UI库，如组件、动画或图表。需识别真实需求并检查现有依赖，避免随意替换，确保技术选型一致且最优。
用户询问特定功能的前端实现方案
需要选择UI组件、动画或数据可视化库
npx skills add emilkowalski/skills --skill pick-ui-library -g -y
该 Skill 用于 UI 原型设计，根据描述构建多个风格迥异的 UI 组件版本，并通过可视化选择器让用户实时预览和挑选最优方案，强调设计的发散性与高质量实现。
需要探索多种 UI 设计方案时
用户明确要求生成不同版本的 UI 原型
npx skills add emilkowalski/skills --skill prototype -g -y
基于 Emil Kowalski 设计理念审查动画代码，确保高工艺标准。严格检查运动合理性、频率适配、缓动曲线、性能及无障碍等规范，默认标记问题，仅批准符合高标准的实现。
用户请求审查前端动画或运动代码
需要评估 UI 过渡效果的流畅度与规范性
npx skills add emilkowalski/skills --skill review-animations -g -y
提供现代 Swift 语言的最佳实践指南，涵盖值类型建模、Swift 6 并发安全、协议泛型、性能优化及 ARC 管理。用于指导代码编写、审查、迁移或修复数据竞争与死锁等问题。
编写或重构 Swift 代码
审查 Swift 代码风格与最佳实践
修复数据竞争、死锁或性能问题
迁移至新版 Swift
npx skills add emilkowalski/skills --skill write-swift -g -y
专注于 React Native 和 Expo 应用的高质量动画实现。基于 Reanimated 和 Gesture Handler，解决 UI 线程性能、手势交互及真实设备适配问题，确保动画流畅自然且符合移动平台规范。
需要为 Expo 应用添加页面过渡或组件动画
处理手势驱动的运动效果如拖拽、滑动
修复移动端动画卡顿或掉帧问题
实现按下反馈或触觉震动效果
npx skills add emilkowalski/skills --skill animate-expo -g -y
诊断并解决 Web 动画掉帧、卡顿问题。指导如何选择合成属性、优化主线程负载，以及正确使用 will-change 和 Motion 库以提升渲染性能。
动画卡顿或掉帧
选择动画属性
CSS 与 JS 动画性能对比
will-change 使用决策
npx skills add emilkowalski/skills --skill animation-performance -g -y
用于对UI组件进行压力测试，通过注入长名、极值等真实最坏情况数据，发现布局与逻辑缺陷并提供修复建议。
用户要求对UI组件进行压力测试
尝试找出组件的边缘情况或最坏场景
npx skills add emilkowalski/skills --skill break-ui -g -y
协调多个动画元素的顺序、重叠与静止，实现流畅自然的交互体验。处理交错入场、多步骤流程及复杂动效编排，确保视觉连贯性与交互非阻塞性。
stagger
sequence
choreography
timeline
hero entrance
multi-step
npx skills add emilkowalski/skills --skill choreograph -g -y
修复 Web 应用在移动端体验不佳的问题，涵盖视口、触摸、滚动及安全区域等原生感优化。适用于 PWA、底部抽屉及全屏幕布局等场景，强调真机测试与 CSS/元标签解决方案。
Web 应用在手机上感觉像网页而非原生应用
构建或审查 PWA、底部抽屉、轮播图等移动交互组件
解决点击延迟、选中文字、状态栏匹配等移动端特定问题
npx skills add emilkowalski/skills --skill mobile-native -g -y
用于移除界面中不必要的动画，解决应用卡顿或过度动画问题。仅做减法，不添加或调整保留的动画，通过严格规则评估并删除低效动效及其残留代码。
用户反馈应用感觉慢
用户认为动画过多
用户希望减少动效
询问应移除哪些动画
npx skills add emilkowalski/skills --skill remove-animations -g -y
