Agent Skills
› 1weiho/open-slide
1weiho/open-slide
GitHub提供Apple风格流体界面设计规范，涵盖手势交互、弹簧动画、拖拽及动效原理，指导Web端实现自然流畅的用户体验。
Install All Skills
npx skills add 1weiho/open-slide --all -g -y
Skills in Collection (13)
提供Apple风格流体界面设计规范，涵盖手势交互、弹簧动画、拖拽及动效原理，指导Web端实现自然流畅的用户体验。
构建手势驱动UI
审查Spring动画效果
实现拖拽或滑动交互
npx skills add 1weiho/open-slide --skill apple-design -g -y
基于 Emil Kowalski 的设计工程哲学，专注于 UI 细节打磨、组件设计与动画决策，旨在通过提升界面质感与交互体验来增强产品竞争力。
UI 代码审查与优化
前端组件设计咨询
动画与交互效果调整
npx skills add 1weiho/open-slide --skill emil-design-eng -g -y
指导创建独特、生产级的前端界面，避免通用AI美学。适用于构建网页组件、页面、应用及UI美化，强调大胆的设计方向和精致的视觉细节。
构建Web组件或页面
设计Dashboard或着陆页
美化现有Web UI
生成React/Vue/H5代码
npx skills add 1weiho/open-slide --skill frontend-design -g -y
专注于审查动画与运动代码的高标准技能，基于Emil Kowalski的设计工程哲学。严格检查性能、无障碍及交互体验，默认标记问题，确保动画流畅且符合设计规范。
需要审查前端动画代码的质量
评估UI动效是否符合高 Craft 标准
检查动画性能与无障碍兼容性
npx skills add 1weiho/open-slide --skill review-animations -g -y
管理 shadcn/ui 组件，支持添加、搜索、修复、调试和样式定制。提供项目上下文与文档，遵循组合优先、语义化颜色及特定布局规范，用于构建高质量前端 UI。
需要添加或安装 shadcn 组件
使用 shadcn CLI 进行组件搜索或文档查询
修复或调试 shadcn 组件样式问题
基于 shadcn 构建聊天界面或复杂表单
npx skills add 1weiho/open-slide --skill shadcn -g -y
提供React组件组合模式指南，解决布尔属性泛滥问题。适用于重构复杂组件、构建可复用库及设计灵活API，涵盖复合组件、状态管理及React 19新特性。
重构具有大量布尔属性的组件
构建可复用的组件库
审查或设计组件架构
使用复合组件或Context Provider
npx skills add 1weiho/open-slide --skill vercel-composition-patterns -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除瀑布流、包体积优化等70条规则，用于指导代码编写、审查与重构以确保最佳性能。
编写或重构React/Next.js组件
实施数据获取逻辑
代码审查以发现性能问题
优化包体积或加载速度
npx skills add 1weiho/open-slide --skill vercel-react-best-practices -g -y
该技能用于审查Web界面代码是否符合设计规范。通过获取最新指南，检查指定文件并输出问题位置，支持UI审查、无障碍性检查和UX审计等场景。
review my UI
check accessibility
audit design
review UX
npx skills add 1weiho/open-slide --skill web-design-guidelines -g -y
应用由 open-slide inspector 工具生成的 @slide-comment 标记，解析注释内容并执行对应的代码编辑。
用户要求应用评论或处理幻灯片评论
提及 slides/<id>/index.tsx 中的标记
npx skills add 1weiho/open-slide --skill apply-comments -g -y
用于在 open-slide 仓库中从零创建或起草新的幻灯片演示文稿。流程包括选择主题、确认需求（主题、内容、风格等），并生成符合规范的幻灯片文件，不修改框架代码。
用户要求制作关于某主题的幻灯片
用户要求生成演示文稿或草稿
用户请求在 slides/ 目录下添加内容
npx skills add 1weiho/open-slide --skill create-slide -g -y
解析用户当前查看的幻灯片、页面及选中元素，通过读取 live cursor 文件解决指代歧义，确保每次交互时获取最新状态以精准编辑内容。
用户使用 'this page', 'this slide' 等指代词
需要确定用户当前浏览的具体幻灯片或元素位置
npx skills add 1weiho/open-slide --skill current-slide -g -y
用于在open-slide仓库中创建、起草或提取幻灯片主题。生成主题描述文档和可运行的演示组件，支持从图片、文本或现有幻灯片提取视觉风格，不修改真实幻灯片内容。
create a theme
make a theme called X
extract a theme from <slide>
build a theme from these images
npx skills add 1weiho/open-slide --skill create-theme -g -y
提供幻灯片页面编写的技术规范，涵盖文件结构、React代码契约、设计系统、资产管理及动画过渡规则。用于指导在slides目录下创建或修改幻灯片页面的具体实现细节。
编辑幻灯片
调整布局
更改配色方案
添加转场效果
修复幻灯片框架问题
npx skills add 1weiho/open-slide --skill slide-authoring -g -y
