Agent Skills
› panel-ui/PanelUI
panel-ui/PanelUI
GitHub提供基于coss原语的可复用UI组件模式索引，支持通过描述搜索并获取源码JSON，用于快速实现前端界面功能。
Install All Skills
npx skills add panel-ui/PanelUI --all -g -y
Skills in Collection (13)
提供基于coss原语的可复用UI组件模式索引，支持通过描述搜索并获取源码JSON，用于快速实现前端界面功能。
需要快速构建或复制粘贴UI组件
寻找特定类型的前端交互模式（如表单、对话框）
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 组件与项目，支持添加、搜索、调试及样式定制。提供项目上下文、组件文档和使用示例，强制遵循 Tailwind 布局、表单结构和组件组合规范，适用于含 components.json 的项目。
使用 shadcn CLI 添加或搜索组件
处理包含 components.json 的 UI 项目
进行 shadcn 初始化或预设切换
npx skills add panel-ui/PanelUI --skill shadcn -g -y
用于设计应用Logo、图标或品牌标识的Skill。支持基于图像生成器创建提示词或直接编写SVG矢量文件，遵循严格的设计规则，确保标志在小尺寸下清晰可读，并提供从需求分析到多方案提案的完整工作流。
需要为产品或应用设计Logo
请求生成应用图标或品牌标识
要求制作吉祥物或头像
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
构建基于 PanelUI 的 React Web UI，集成 shadcn/ui 组件并应用主题。涉及特定组件如 KPI、看板等的使用与组合，遵循严格的样式和数据绑定规则。
用户要求在 React 项目中添加 PanelUI 组件
提及使用 panelui-web 或 @panelui registry
需要实现点状地球、KPI 卡片、看板、节点图、活动网格或反馈对话框
npx skills add panel-ui/PanelUI --skill panelui-web -g -y
为 React Native/Expo 项目提供 PanelUI 组件库的使用指南，涵盖组件安装、主题配置、UI 构建及调试样式问题。
用户需要在 Expo 或 React Native 项目中添加 UI 组件
询问 PanelUI 相关组件的用法或属性
遇到 React Native 界面未正确样式化的问题
npx skills add panel-ui/PanelUI --skill panelui -g -y
用于设计应用图标和Logo的Agent。支持通过图像生成器或SVG矢量绘图两种路径，遵循严格的设计规则与32x32可读性检查，确保标志简洁、轮廓清晰且适用于多尺寸场景。
创建应用Logo
设计品牌标识
生成App图标
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
用于在已配置 shadcn/ui 的 React 项目中构建 PanelUI Web UI。通过组合主题化组件（如面板、图表）生成前端界面，严格遵循颜色语义、数据分离及无障碍规范。
用户要求在 React 项目中创建 PanelUI 风格的前端界面
提及使用 PanelUI 组件（如 KPI 卡片、看板、节点图）进行开发
npx skills add panel-ui/PanelUI --skill panelui-web -g -y
为 Expo/React Native 项目提供 PanelUI 组件库使用指南，涵盖安装、主题配置、组件调用及样式调试。指导 Agent 正确集成并开发 UI 界面。
用户询问如何在 React Native 或 Expo 项目中构建 UI
需要添加底部抽屉、对话框、表单或图表等组件
遇到 PanelUI 样式未生效或配置问题
npx skills add panel-ui/PanelUI --skill panelui -g -y
专为 React Native 和 Expo 应用构建高性能动画的 Skill。指导如何基于 Reanimated 和 Gesture Handler，在 UI 线程实现流畅的手势交互、屏幕过渡及触感反馈，确保真机性能并处理无障碍需求。
需要为 Expo 应用添加动画效果
实现手势驱动的运动或过渡
修复移动端动画卡顿问题
npx skills add panel-ui/PanelUI --skill animate-expo -g -y
Remotion技能路由中心，根据视频创建、项目设置、地图、多媒体、交互、渲染等具体需求，加载对应的子技能参考文档，辅助开发Remotion视频应用。
用户请求创建或构建新的Remotion视频/组合
用户需要初始化新的Remotion项目
用户询问Remotion相关的最佳实践（如Markup、地图、多媒体、渲染等）
npx skills add panel-ui/PanelUI --skill remotion-best-practices -g -y
通过严格的模拟面试或质询流程，帮助用户打磨和优化计划或设计方案。
用户希望优化现有计划
用户希望完善系统设计
npx skills add panel-ui/PanelUI --skill grill-me -g -y
用于为项目 README 生成美观的 shadcn/ui 风格徽章、图表、头部横幅及贡献者网格，替代 Shields.io。
添加徽章
替换 Shields.io 徽章
创建 README 头部横幅
添加下载图表
构建 README
npx skills add panel-ui/PanelUI --skill shieldcn-badges -g -y
Dependencies:
jal-co/shieldcn
jal-co/shieldcn@shieldcn-badges
