Agent Skills
› open-slide/open-slide
open-slide/open-slide
GitHub提供Apple风格流体界面设计规范，涵盖手势、弹簧动画、直接操作及低延迟响应。用于构建或审查Web端具有物理动效、可中断过渡和直观交互的用户界面，提升用户体验的自然感与流畅度。
安装全部 Skills
npx skills add open-slide/open-slide --all -g -y
集合内 Skills (16)
提供Apple风格流体界面设计规范，涵盖手势、弹簧动画、直接操作及低延迟响应。用于构建或审查Web端具有物理动效、可中断过渡和直观交互的用户界面，提升用户体验的自然感与流畅度。
实现手势驱动的UI交互
添加弹簧动画或惯性滚动
优化界面响应延迟
设计拖拽/滑动/抽屉交互
审查Apple风格的视觉与动效规范
npx skills add open-slide/open-slide --skill apple-design -g -y
基于 Emil Kowalski 的设计工程哲学，提供 UI 细节打磨、组件设计与动画决策指导。强调通过训练提升审美，关注用户未察觉的隐形细节，以体验差异化为杠杆，确保界面质感卓越。
UI 代码审查与优化建议
前端交互与动画设计咨询
界面质感与用户体验评估
npx skills add open-slide/open-slide --skill emil-design-eng -g -y
指导创建独特且生产级的前端界面，避免通用AI美学。适用于构建Web组件、页面、应用或美化UI，强调大胆的审美方向和精致的视觉细节。
需要构建网站、落地页或仪表盘
要求生成React组件或HTML/CSS布局
请求美化或重新设计Web用户界面
npx skills add open-slide/open-slide --skill frontend-design -g -y
专注于审查前端动画代码，依据高工艺标准评估运动效果。检查合理性、频率、缓动、性能及无障碍性，确保动画流畅且符合设计规范，仅针对动画相关代码进行严格评审。
审查包含动画或过渡效果的代码变更
评估用户界面运动交互的质量与性能
npx skills add open-slide/open-slide --skill review-animations -g -y
管理shadcn/ui组件与项目，支持添加、搜索、修复及样式调整。提供上下文、文档与示例，遵循现有组件优先和组合原则，规范Tailwind样式与表单结构，适用于shadcn相关开发场景。
使用shadcn CLI添加或管理组件
构建基于shadcn/ui的UI界面
处理components.json配置
应用shadcn设计系统规则
npx skills add open-slide/open-slide --skill shadcn -g -y
提供 React 组件组合模式指南，涵盖架构、状态管理和实现细节。用于重构布尔属性泛滥的组件、构建可复用库及设计灵活 API，提升代码可维护性。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
设计灵活的组件 API
npx skills add open-slide/open-slide --skill vercel-composition-patterns -g -y
提供React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端渲染等规则。用于指导代码编写、审查及重构，确保应用达到最佳性能表现。
编写或重构React/Next.js组件
审查代码性能问题
优化数据获取逻辑
减少包体积或加载时间
npx skills add open-slide/open-slide --skill vercel-react-best-practices -g -y
用于审查Web界面代码是否符合设计规范与最佳实践，支持UI审查、无障碍检查及UX审计。通过获取最新指南并比对文件内容，输出具体的违规发现。
review my UI
check accessibility
audit design
review UX
check my site against best practices
npx skills add open-slide/open-slide --skill web-design-guidelines -g -y
用于自动生成营销图片（如 OG、社交媒体海报），通过研究仓库内容获取文案，利用 HTML/CSS 设计适配多尺寸的响应式页面，并渲染为 PNG。
请求生成 OG 图片或社交媒体帖子
需要制作 README 横幅或博客封面图
npx skills add open-slide/open-slide --skill create-image -g -y
根据功能名称自动生成营销视频，涵盖研究、分镜、脚手架搭建及场景编写，用于制作发布预告片或宣传片段。
需要创建营销视频
生成发布预告片
制作宣传短片
npx skills add open-slide/open-slide --skill create-video -g -y
解析并应用 Open Slide 编辑器中 @slide-comment 标记的修改指令。通过正则识别 JSX 中的注释标记，解码内容后执行对应的页面样式或文本编辑，并清理标记。
apply comments
process slide comments
apply the inspector comments
npx skills add open-slide/open-slide --skill apply-comments -g -y
用于在open-slide仓库中创建新幻灯片演示文稿。引导用户选择主题并确认内容需求，生成符合规范的幻灯片文件，不涉及框架代码修改。
制作关于X的幻灯片
创建演示文稿
起草幻灯片
添加slides目录下的内容
npx skills add open-slide/open-slide --skill create-slide -g -y
解析用户当前浏览的幻灯片、页面及选中元素状态，通过读取实时文件解决指代歧义，确保编辑操作针对正确位置。
用户提及'当前页面'或'这个幻灯片'
用户进行指代性修改指令如'修复这里'
用户要求继续编辑但未指定具体位置
npx skills add open-slide/open-slide --skill current-slide -g -y
用于生成符合规范风格的UI截图，展示开发界面的真实状态。通过启动临时服务器并执行脚本，将界面渲染为带圆角和阴影的WebP图片，适用于文档、更新日志和README等场景。
用户请求UI截图
需要文档或更新日志配图
要求生成美化/裁剪/带框的截图
刷新assets目录中的UI图片
npx skills add open-slide/open-slide --skill ui-screenshots -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 open-slide/open-slide --skill create-theme -g -y
提供幻灯片页面编写的技术规范，涵盖文件结构、设计系统、组件用法及动画规则。用于指导在指定目录下创建或修改幻灯片内容，确保符合框架约束与视觉标准。
编辑幻灯片
调整布局
更改配色
添加转场效果
编写演讲备注
生成脚本
npx skills add open-slide/open-slide --skill slide-authoring -g -y
