Agent Skills
› classroomio/classroomio
classroomio/classroomio
GitHub将文档所需的源图片转换为优化后的 WebP 格式，存放至指定目录并插入 MDX 页面引用。
安装全部 Skills
npx skills add classroomio/classroomio --all -g -y
集合内 Skills (19)
将文档所需的源图片转换为优化后的 WebP 格式，存放至指定目录并插入 MDX 页面引用。
需要为文档添加截图或图片
需要将 PNG 源图转换为 WebP
npx skills add classroomio/classroomio --skill add-docs-image -g -y
为ClassroomIO仓库添加新的组织落地页模板。需分三阶段执行：先构建HTML原型，再在UI包中实现组件化渲染，最后集成至Dashboard应用。每阶段结束需用户确认批准后方可进入下一阶段。
创建或添加新的着陆页模板
基于设计参考（图片、链接）构建新视觉主题
npx skills add classroomio/classroomio --skill add-landing-template -g -y
将模糊的动效描述反向查找为精确的专业术语，帮助用户准确命名或向AI/设计师提问。
询问特定动效的名称
描述视觉感受但不知专业术语
npx skills add classroomio/classroomio --skill animation-vocabulary -g -y
提供Apple风格的Web界面设计指南，涵盖流体动画、手势交互及物理运动模拟。适用于构建或审查具有弹簧动画、拖拽、动量过渡及即时反馈的直观用户界面。
实现手势驱动的UI交互
优化界面响应速度与动画流畅度
审查Apple风格的设计规范
npx skills add classroomio/classroomio --skill apple-design -g -y
用于在 GitHub 仓库中创建 Issue。通过复现步骤、环境证据和重复检查，自动生成结构化的 Bug、Feature 或 Improvement 报告并提交流程。
用户请求创建 bug 报告
用户请求提交功能建议
用户请求开启新任务
npx skills add classroomio/classroomio --skill create-issue -g -y
基于品牌规范生成1920x1080 ClassroomIO缩略图。通过HTML+CSS构建设计，利用无头Chrome渲染PNG，确保字体、Logo及配色符合品牌标准，支持多样化布局以避免重复。
创建缩略图
制作封面图片
生成视频或博客横幅
npx skills add classroomio/classroomio --skill create-thumbnail -g -y
基于 Emil Kowalski 的设计工程哲学，专注于 UI 打磨、组件设计、动画决策及提升软件体验的隐形细节。提供审美训练指导与严格的代码审查格式，帮助构建感觉优秀的界面。
UI 代码审查
前端交互优化咨询
动画效果调整建议
npx skills add classroomio/classroomio --skill emil-design-eng -g -y
用于扫描界面找出适合添加动画的交互点，并给出精确建议。强调克制原则，仅报告不修改代码，通过频率和目的筛选高价值机会，避免过度动画。
用户询问哪些地方可以添加动画
希望让界面感觉更生动
npx skills add classroomio/classroomio --skill find-animation-opportunities -g -y
用于创建具有独特美学风格的生产级前端界面。指导AI根据用户需求，结合设计思维确定视觉方向，并生成高质量、美观的HTML/CSS/JS或React/Vue代码，避免通用AI审美。
构建网页组件
开发前端页面
创建Web应用程序
需要高设计质量的UI实现
npx skills add classroomio/classroomio --skill frontend-design -g -y
识别并消除文本中的AI生成痕迹，如过度修饰、被动语态等，使内容更自然。基于维基百科指南，保留原意并匹配作者语调，适用于编辑和审阅场景。
需要去除AI写作特征的文本编辑
审查文章以使其听起来更像人类撰写
npx skills add classroomio/classroomio --skill humanizer -g -y
为ADHD读者定制输出风格，强调优先行动、步骤编号、状态重申及抑制无关内容，提升执行效率。
用户请求或启用ADHD适配模式
/i-have-adhd 指令
npx skills add classroomio/classroomio --skill i-have-adhd -g -y
作为高级动效顾问，只读分析代码库中的动画与运动代码，产出优先级的审计发现及自包含的实施计划。不修改源码，专为其他Agent或低成本模型执行修复提供精确指导，适用于提升应用动效体验的审计与规划场景。
用户要求改进动画效果
请求对动效进行审计
希望提升应用手感
需要动画修复路线图而非单一代码审查
npx skills add classroomio/classroomio --skill improve-animations -g -y
根据前端具体任务（如UI组件、动画、图表等）从精选列表中推荐最合适的第三方库，并指导安装与集成。
需要选择特定功能的UI库
询问拖拽、通知或图表等场景的最佳实践
npx skills add classroomio/classroomio --skill pick-ui-library -g -y
用于 UI 原型的发散性设计探索，根据描述构建多个真正不同的 UI 版本，并通过可视化选择器让用户实时预览和挑选最佳方案。
需要为特定 UI 组件生成多种不同风格的原型版本
需要通过可视化对比快速决策 UI 设计方案
npx skills add classroomio/classroomio --skill prototype -g -y
专注于审查动画与运动代码的专业技能，基于高工艺标准评估交互体验。仅执行审查任务，不编写功能或修复无关Bug，确保动画流畅、性能优异且符合无障碍规范。
请求审查动画相关代码
评估UI动效的流畅性与性能
npx skills add classroomio/classroomio --skill review-animations -g -y
端到端功能交付技能，涵盖实现、验证构建测试、提交代码及创建草稿PR。支持基于反馈的迭代循环，确保每次变更推送到同一PR，严格遵循项目规范与检查流程。
用户要求实现新功能
修复并推送变更
对现有功能PR进行迭代修改
npx skills add classroomio/classroomio --skill ship-feature -g -y
指导如何按规范暂存文件、运行格式检查和翻译处理，最后创建符合 Conventional Commits 标准的 Git 提交。
用户请求暂存或提交代码
需要执行 Git 工作流步骤
npx skills add classroomio/classroomio --skill stage-and-commit -g -y
用于为ClassroomIO平台编写准确的技术文档。要求基于源码和UI验证事实，严格遵循特定术语、导航路径及MDX格式规范，确保内容与实际产品功能一致。
需要创建新的产品指南页面
补充或扩展现有的薄文档内容
更新现有文档以反映最新代码变更
npx skills add classroomio/classroomio --skill write-docs -g -y
用于编写产品需求文档及构建可点击的HTML原型。通过澄清需求、研究代码库，生成规范文档与作为UX真理原型的界面文件，适用于规划新功能或产品场景。
write a PRD
spec a feature
plan a new product/feature
prototype a feature end to end
npx skills add classroomio/classroomio --skill write-prd -g -y
