Agent Skills
› open-slide/open-slide
open-slide/open-slide
GitHubApple风格界面设计指南，涵盖手势驱动UI、弹簧动画、拖拽交互及响应式设计。用于构建流畅、物理感强的Web前端体验，强调低延迟和直接操作。
安装全部 Skills
npx skills add open-slide/open-slide --all -g -y
集合内 Skills (15)
Apple风格界面设计指南，涵盖手势驱动UI、弹簧动画、拖拽交互及响应式设计。用于构建流畅、物理感强的Web前端体验，强调低延迟和直接操作。
实现手势驱动的UI交互
开发弹簧动画或拖拽组件
优化前端界面的响应速度和流畅度
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
用于创建具有独特设计感和生产级质量的Web前端界面。指导生成避免通用AI美学的创意代码，涵盖组件、页面及应用开发，强调排版、色彩、动效及空间布局的精致细节。
构建网页组件或页面
设计仪表盘或着陆页
美化Web UI界面
生成React/Vue/H5代码
npx skills add open-slide/open-slide --skill frontend-design -g -y
专注于审查前端动画代码的专业技能，依据高标准工艺规范评估运动效果。检查性能、可访问性及设计一致性，确保动画流畅且符合用户预期，拒绝低质量实现。
需要审查动画或动效代码时
评估UI交互运动的流畅度与合理性时
npx skills add open-slide/open-slide --skill review-animations -g -y
管理shadcn/ui组件库，支持添加、搜索、修复、调试和组合UI组件。提供项目上下文、组件文档及使用示例，指导开发者遵循最佳实践构建前端界面。
使用 shadcn/ui 或相关组件注册表
项目中存在 components.json 文件
执行 shadcn init 或创建带 preset 的应用
npx skills add open-slide/open-slide --skill shadcn -g -y
提供React组件组合模式指南，避免布尔属性泛滥，涵盖复合组件、状态提升及React 19 API变更，用于重构、构建库和设计可复用API。
重构含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
npx skills add open-slide/open-slide --skill vercel-composition-patterns -g -y
提供Vercel工程的React和Next.js性能优化指南，涵盖消除瀑布流、包体积优化及服务端/客户端性能规则。用于指导代码编写、审查及重构，确保应用遵循最佳实践以提升加载速度和运行效率。
编写或重构React组件与Next.js页面
实施数据获取逻辑（客户端或服务端）
审查代码以发现性能瓶颈
优化Bundle大小或页面加载时间
npx skills add open-slide/open-slide --skill vercel-react-best-practices -g -y
审查UI代码是否符合Web界面指南，支持访问性、UX和设计审计。通过Fetch获取最新规则并检查文件合规性，输出file:line格式结果。
review my UI
check accessibility
audit design
review UX
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 文件样式或文本，删除已处理标记。
用户请求应用幻灯片评论
处理 slide comments
应用检查器评论
npx skills add open-slide/open-slide --skill apply-comments -g -y
指导Agent在open-slide仓库中创建新幻灯片或演示文稿。涵盖选择主题、确认需求及编写内容流程，仅限修改slides目录下的内容文件，不涉及框架代码修改。
make slides about X
create a presentation
draft slides for
new slide
a deck with speaker notes / a script
npx skills add open-slide/open-slide --skill create-slide -g -y
解析用户当前查看的幻灯片、页面及选中元素状态，通过读取current.json解决指代不清问题，确保编辑操作针对最新位置。
用户提及“当前页面”或“这个元素”等指代性描述
用户要求修改未明确指定ID的幻灯片内容
npx skills add open-slide/open-slide --skill current-slide -g -y
用于在open-slide仓库中创建、起草或提取幻灯片主题。生成themes/目录下的.md文档和.demo.tsx演示文件，定义配色、排版等视觉规范，供其他技能读取和预览，不修改真实幻灯片。
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
用于编写或编辑 open-slide 页面的技术参考，涵盖文件规范、布局、视觉设计、动画及演讲备注。适用于修改幻灯片内容、调整样式或添加过渡效果等场景。
edit slide
tweak this page
fix the layout
change the palette
reveal one by one
add a transition
morph transition
write the speaker notes
generate the script / talk track
investigate the slide framework
how do slides work here
npx skills add open-slide/open-slide --skill slide-authoring -g -y
