Agent Skills
› emilkowalski/skills
emilkowalski/skills
GitHub专注于构建高质量前端动画的实现技能,遵循Emil Kowalski的设计哲学。通过严格的决策流程判断是否添加动效、选择工具与参数,确保代码符合设计规范且性能最优。
Install All Skills
npx skills add emilkowalski/skills --all -g -y
Skills in Collection (15)
专注于构建高质量前端动画的实现技能,遵循Emil Kowalski的设计哲学。通过严格的决策流程判断是否添加动效、选择工具与参数,确保代码符合设计规范且性能最优。
用户请求创建新动画或过渡效果
需要为组件添加运动感或动态反馈
npx skills add emilkowalski/skills --skill animate -g -y
将模糊的动画描述反向查找为精确术语,帮助用户准确命名动效。适用于询问特定效果名称或描述运动感觉的场景,不涉及设计或实现。
用户询问某个动效的名称
用户描述视觉效果但不知道专业术语
npx skills add emilkowalski/skills --skill animation-vocabulary -g -y
提供 Apple 风格 Web 界面设计指导,涵盖手势交互、弹簧动画、动量过渡及响应式反馈,助力构建流畅自然的物理感 UI。
构建或审查手势驱动的 UI
实现弹簧动画或拖拽交互
优化界面响应延迟与动量过渡
npx skills add emilkowalski/skills --skill apple-design -g -y
提供 Sonner React toast 库的集成、配置、样式定制及故障排查指南,涵盖安装、调用方式、状态管理及多实例处理。
Sonner toast 不显示或重复出现
需要设置 Toaster 组件
自定义 toast 样式或主题
处理 toast 持久化与 dismiss
npx skills add emilkowalski/skills --skill ask-sonner -g -y
基于 Emil Kowalski 的设计工程哲学,提供 UI 打磨、组件设计、动画决策及细节优化的指导。专注于通过训练有素的品味和看不见的细节提升用户体验,使软件在功能之外更具吸引力。
UI 代码审查与优化
前端界面交互设计咨询
提升产品视觉质感与体验
npx skills add emilkowalski/skills --skill emil-design-eng -g -y
分析代码库或UI中未动画但应添加动效的区域,基于Emil Kowalski的克制哲学提出精确方案。仅只读搜索与规划,不修改代码,旨在提升界面生动感而非审查现有动画。
用户询问“这里可以加什么动画”
用户希望让界面感觉更生动
npx skills add emilkowalski/skills --skill find-animation-opportunities -g -y
作为高级动效顾问,只读分析代码库中的动画与运动代码。执行侦察、审计并生成高优先级的修复计划及自包含实施方案,供其他Agent或低成本模型执行,不直接修改源码。
improve the animations
audit the motion
make this app feel better
npx skills add emilkowalski/skills --skill improve-animations -g -y
根据前端任务从精选列表中推荐最合适的UI库,涵盖组件、动画、图表等。需先识别真实需求并检查已安装依赖,避免随意替换,确保技术选型一致性与合理性。
用户询问特定前端功能(如通知、拖拽)的库选择
需要为UI原语或视觉特效选择第三方库
npx skills add emilkowalski/skills --skill pick-ui-library -g -y
用于构建多个差异化的UI原型变体,并通过可视化选择器让用户实时浏览和挑选最优设计。专注于发散性设计探索,确保每个变体均符合高标准的交互与动效规范,支持快速迭代与最终方案的集成。
需要为特定UI组件生成多种不同风格或交互逻辑的视觉原型
用户希望在不修改生产代码的情况下对比并选择最佳设计方案
npx skills add emilkowalski/skills --skill prototype -g -y
专注于审查前端动画与交互代码,依据 Emil Kowalski 的设计工程哲学设定高标准。默认倾向于发现问题,确保运动符合直觉、性能优异且无障碍,不编写功能或修复无关 Bug。
请求审查 UI 动画代码
评估交互动效的流畅度与合理性
检查 CSS/JS 动画是否符合设计规范
npx skills add emilkowalski/skills --skill review-animations -g -y
提供现代 Swift (6.3/6.4) 最佳实践,涵盖值类型建模、并发安全、协议泛型及性能优化。用于指导 Swift 代码编写、审查及迁移,解决数据竞争、死锁等运行时问题。
编写或重构 Swift 代码
审查 Swift 代码质量
修复数据竞争或并发错误
迁移旧版 Swift 项目
npx skills add emilkowalski/skills --skill write-swift -g -y
专注 Expo/React Native 动画实现,基于 Reanimated 和 Gesture Handler,确保高性能、手势交互及无障碍支持。指导决策动画时机、线程分配及降级策略,适用于屏幕过渡、手势反馈等场景。
需要为 Expo 应用添加动画效果
修复移动端动画卡顿或性能问题
实现复杂手势与动画的结合
npx skills add emilkowalski/skills --skill animate-expo -g -y
诊断Web动画掉帧、卡顿问题,优化合成性能。指导选择高效属性(如transform),避免主线程阻塞,合理运用CSS/WAAPI及硬件加速,确保动画流畅。
动画出现卡顿或掉帧
需要选择高性能的动画属性
在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
专注于提升Web应用在移动端的原生体验,解决视口、触摸交互、滚动及安全区域等前端适配问题。适用于PWA开发、移动端布局优化及真机调试场景。
移动端Web应用体验优化
PWA开发
移动端CSS适配修复
npx skills add emilkowalski/skills --skill mobile-native -g -y


