Agent Skills
› open-slide/open-slide
open-slide/open-slide
GitHub提供Apple风格的Web界面设计指导，涵盖手势驱动UI、弹簧动画、拖拽交互及响应式反馈。旨在通过物理运动模拟提升用户体验的流畅性与直观性。
Install All Skills
npx skills add open-slide/open-slide --all -g -y
Skills in Collection (15)
提供Apple风格的Web界面设计指导，涵盖手势驱动UI、弹簧动画、拖拽交互及响应式反馈。旨在通过物理运动模拟提升用户体验的流畅性与直观性。
构建或审查基于手势的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
指导创建独特且生产级的前端界面，避免通用AI审美。用于构建网页组件、页面或应用，强调大胆的美学方向、精细的排版与动效，生成具有记忆点的视觉代码。
用户要求构建网页组件或页面
需要美化或设计Web UI
生成React/Vue/H5前端代码
npx skills add open-slide/open-slide --skill frontend-design -g -y
专注审查前端动画与运动代码，基于高工艺标准评估其合理性、性能及无障碍性。不编写功能或修复无关bug，仅对动效代码进行严格评审，默认标记问题直至获得批准。
用户请求审查包含动画或过渡效果的代码
需要评估UI动效是否符合设计工程哲学
npx skills add open-slide/open-slide --skill review-animations -g -y
管理 shadcn/ui 组件与项目，支持添加、搜索、修复、调试、样式调整及 UI 组合。提供上下文、文档及使用示例，适用于包含 components.json 的项目或特定 CLI 命令触发场景。
需要添加、搜索或修复 shadcn/ui 组件时
进行 UI 样式调整、调试或组件组合时
执行 shadcn init、create app --preset 或切换 preset 时
项目中存在 components.json 文件且涉及组件开发时
npx skills add open-slide/open-slide --skill shadcn -g -y
提供React组件组合模式的指导，用于重构布尔属性泛滥、构建可复用库及设计灵活API。涵盖复合组件、状态提升和上下文提供者等架构模式，并包含React 19新特性建议。
重构具有大量布尔属性的组件
构建可复用的组件库
审查组件架构
设计灵活的组件API
npx skills add open-slide/open-slide --skill vercel-composition-patterns -g -y
基于Vercel工程的React和Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端性能等70条规则。用于指导代码编写、审查及重构，确保应用达到最佳性能表现。
编写或重构React组件与Next.js页面
实施客户端或服务端数据获取逻辑
进行代码审查以识别性能瓶颈
优化应用包体积或加载速度
npx skills add open-slide/open-slide --skill vercel-react-best-practices -g -y
审查UI代码是否符合Web界面指南，支持检查可访问性、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
解析并应用幻灯片中的评论标记，根据注释内容修改代码并移除标记。
apply comments
process slide comments
apply the inspector comments
npx skills add open-slide/open-slide --skill apply-comments -g -y
用于在open-slide仓库中创建或起草新的幻灯片演示文稿。引导用户选择主题、明确需求，并调用slide-authoring技能生成符合规范的幻灯片内容文件。
make slides about X
create a presentation
draft slides for
new slide
npx skills add open-slide/open-slide --skill create-slide -g -y
通过读取 current.json 定位用户当前查看的幻灯片、页面及选中元素，解决指代不明问题。每次交互前重新读取以获取最新状态，确保编辑操作针对正确目标。
用户提及“当前页面”、“这个幻灯片”等指代词
需要定位用户正在查看的具体内容或元素时
npx skills add open-slide/open-slide --skill current-slide -g -y
用于在 open-slide 仓库中创建、起草或提取幻灯片主题。生成包含视觉规范说明的 .md 文件和可运行演示的 .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
preview / screenshot a page
check how it looks
investigate the slide framework
how do slides work here
npx skills add open-slide/open-slide --skill slide-authoring -g -y
