Agent Skills
› panel-ui/PanelUI
panel-ui/PanelUI
GitHub提供COSS UI粒子组件索引,帮助用户快速查找并获取可直接复用的UI模式源码。通过描述需求搜索匹配组件,获取JSON URL下载完整代码并适配,覆盖52种组件类型,加速前端界面开发。
Install All Skills
npx skills add panel-ui/PanelUI --all -g -y
Skills in Collection (11)
提供COSS UI粒子组件索引,帮助用户快速查找并获取可直接复用的UI模式源码。通过描述需求搜索匹配组件,获取JSON URL下载完整代码并适配,覆盖52种组件类型,加速前端界面开发。
需要实现特定UI功能如表单、对话框或标签页
寻找可复制粘贴的前端组件代码示例
基于COSS原语构建用户界面
npx skills add panel-ui/PanelUI --skill coss-particles -g -y
协助正确实现 coss UI 组件,涵盖组件选择、代码编写、shadcn/Radix 迁移及常见问题排查。提供导入、无障碍、Tailwind 样式指南及最佳实践规则。
构建使用 coss 原语的 UI
从 shadcn 或 Radix 迁移至 coss
组合基于触发的覆盖层组件
调试 coss 组件行为问题
npx skills add panel-ui/PanelUI --skill coss -g -y
管理 shadcn/ui 组件项目,支持添加、搜索、修复和调试 UI。提供上下文、文档及使用示例,适用于 shadcn/ui 相关开发及组件样式规范制定。
需要添加或搜索 shadcn/ui 组件时
涉及 shadcn/ui 项目的初始化、预设切换或组件样式调试时
npx skills add panel-ui/PanelUI --skill shadcn -g -y
用于设计应用图标、品牌标识或吉祥物。根据是否具备图像生成能力,选择通过提示词调用AI生成或使用SVG编写矢量图形。遵循严格的设计规则,确保标志在32x32像素下清晰可读,并输出最终资产文件。
需要创建应用图标或Logo
请求设计品牌标识或吉祥物
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
为 React Native 和 Expo 项目提供 PanelUI 组件库的使用指南,涵盖安装、配置、组件选择及样式规范。
用户提及 PanelUI
需要构建底部抽屉、对话框或表单等 UI
React Native 项目中的 UI 调试与样式修复
npx skills add panel-ui/PanelUI --skill panelui -g -y
用于设计应用图标、品牌标识或吉祥物。支持通过图像生成器或编写SVG两种路径,遵循严格的设计规则确保在小尺寸下的可读性,提供从需求分析到多方案提案及最终产出的完整工作流。
创建应用Logo
设计品牌标识
生成App图标
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
针对 Expo/React Native 项目的 PanelUI 组件库使用指南,涵盖 UI 构建、主题配置及调试。
用户询问如何在 React Native 中创建底部抽屉或对话框
用户遇到 PanelUI 样式未生效或组件未渲染的问题
用户需要集成或使用 PanelUI 组件进行界面开发
npx skills add panel-ui/PanelUI --skill panelui -g -y
用于在 React Native/Expo 应用中构建高性能动画的 Skill。涵盖动画决策、Reanimated 实现、手势处理及性能优化,确保在低端设备上流畅运行。
需要在 Expo 应用中添加屏幕过渡或弹窗动画
实现复杂的用户交互手势如拖拽、滑动
修复移动端动画卡顿或掉帧问题
npx skills add panel-ui/PanelUI --skill animate-expo -g -y
Remotion技能路由中心,根据用户需求引导至视频创建、项目搭建、地图、多媒体处理、交互优化、渲染、字幕及SaaS开发等具体最佳实践或文档。
用户请求制作或构建新视频/合成
初始化新的Remotion项目
编写Remotion React Markup
处理静态地图或地理动画
进行浏览器端多媒体操作如裁剪视频
提升Studio交互性
执行高级渲染任务
添加或管理字幕
开发基于Remotion的SaaS应用
查阅Remotion API文档
升级Remotion及相关包
npx skills add panel-ui/PanelUI --skill remotion-best-practices -g -y
通过模拟高压面试场景,对计划或设计进行严格审查与压力测试,以发现潜在缺陷并提升方案质量。
用户希望获得对现有计划的严厉反馈
需要模拟面试来打磨设计方案
npx skills add panel-ui/PanelUI --skill grill-me -g -y
用于生成符合 shadcn/ui 风格的 README 徽章、图表、标题及赞助者网格,替代 Shields.io,优化文档视觉效果。
添加 README 徽章
替换 Shields.io 徽章
生成下载量或提交统计图表
设计 README 头部横幅
创建贡献者或赞助者网格
npx skills add panel-ui/PanelUI --skill shieldcn-badges -g -y
Dependencies:
jal-co/shieldcn
jal-co/shieldcn@shieldcn-badges


