Agent Skills
› 1weiho/open-slide
1weiho/open-slide
GitHub提供Apple风格的Web界面设计指南,涵盖手势驱动UI、弹簧动画、拖拽交互及物理动效实现。指导开发者利用CSS和Pointer Events构建流畅、直观且符合直觉的用户体验。
Install All Skills
npx skills add 1weiho/open-slide --all -g -y
Skills in Collection (13)
提供Apple风格的Web界面设计指南,涵盖手势驱动UI、弹簧动画、拖拽交互及物理动效实现。指导开发者利用CSS和Pointer Events构建流畅、直观且符合直觉的用户体验。
构建手势驱动的UI组件
实现弹簧动画或惯性过渡
优化界面响应延迟和直接操纵体验
审查Apple风格的设计规范
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 UI界面
npx skills add 1weiho/open-slide --skill frontend-design -g -y
专注于审查前端动画与交互代码的专业技能,依据高工艺标准评估运动逻辑、性能及无障碍性。默认标记问题,需满足严格规范方可通过,旨在提升用户体验与设计工程品质。
审查包含动画或过渡效果的代码变更
评估UI交互的流畅度与物理正确性
npx skills add 1weiho/open-slide --skill review-animations -g -y
管理 shadcn/ui 组件与项目,支持添加、搜索、修复、调试和组合 UI。提供项目上下文、组件文档及用法示例,遵循特定样式与表单规范。
使用 shadcn/ui 构建或修改 UI 界面
需要添加、搜索或调试 shadcn 组件
涉及 shadcn CLI 操作如 init 或 preset 切换
npx skills add 1weiho/open-slide --skill shadcn -g -y
提供React组件组合模式指南,解决布尔属性泛滥问题,适用于重构、构建可复用库及审查组件架构,包含Compound Components和React 19最佳实践。
重构含大量布尔属性的组件
构建可复用的组件库
设计灵活的组件API
审查组件架构
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
审查UI代码是否符合Web界面指南,支持检查可访问性、UX及最佳实践。通过Fetch获取最新规则并输出文件行号格式的问题报告。
review my UI
check accessibility
audit design
review UX
check my site against best practices
npx skills add 1weiho/open-slide --skill web-design-guidelines -g -y
自动处理 open-slide 编辑器留下的 @slide-comment 标记。读取标记内容,结合 slide-authoring 规范修改对应 JSX 元素样式或文本,并删除标记。支持单页或全量处理。
用户要求应用评论
处理幻灯片评论
应用检查器评论
npx skills add 1weiho/open-slide --skill apply-comments -g -y
指导Agent在open-slide仓库中创建新演示文稿。通过引导用户选择主题和确认需求,调用slide-authoring技能生成幻灯片内容,严格限制仅修改slides目录下的文件。
制作关于X的幻灯片
创建演示文稿
起草幻灯片
为某主题添加新幻灯片
npx skills add 1weiho/open-slide --skill create-slide -g -y
解析用户当前查看的幻灯片、页面及选中元素状态。通过实时读取current.json文件,解决指向性指代,确保编辑操作针对正确内容。
用户提及'当前页面'或'此幻灯片'
用户进行继续编辑等上下文相关操作
npx skills add 1weiho/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 1weiho/open-slide --skill create-theme -g -y
提供 Open-Slide 页面编写的技术规范,涵盖文件结构、React 代码约束及设计系统引用。用于指导编辑幻灯片布局、样式、动画及演讲备注,确保符合框架标准。
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 1weiho/open-slide --skill slide-authoring -g -y


