Agent Skills
› panel-ui/PanelUI
panel-ui/PanelUI
GitHub提供COSS UI组件的预构建代码片段索引，辅助开发者快速查找并集成表单、弹窗等UI模式，提升前端开发效率。
Install All Skills
npx skills add panel-ui/PanelUI --all -g -y
Skills in Collection (16)
提供COSS UI组件的预构建代码片段索引，辅助开发者快速查找并集成表单、弹窗等UI模式，提升前端开发效率。
需要实现特定UI组件功能
寻找可复用的前端代码示例
快速搭建页面布局
npx skills add panel-ui/PanelUI --skill coss-particles -g -y
指导 Agent 正确使用 coss UI 组件库，涵盖选择原语、编写代码、迁移 shadcn/Radix 及排查问题。强调遵循文档、组合模式、可访问性和 Tailwind v4 规范，避免自定义实现。
构建基于 coss 的 UI 界面
从 shadcn 或 Radix 迁移到 coss
npx skills add panel-ui/PanelUI --skill coss -g -y
管理shadcn/ui组件与项目，支持添加、搜索、修复、调试、样式调整及UI组合。提供项目上下文、文档和示例，适用于shadcn相关操作及包含components.json的项目。
使用shadcn CLI添加或管理组件
处理shadcn/ui组件的样式与布局问题
项目中存在components.json文件
执行shadcn init或preset相关操作
npx skills add panel-ui/PanelUI --skill shadcn -g -y
提供基于dither-core的React抖动视觉效果构建指南，涵盖引擎安装、版本校验及DitherShader/FillPattern等技术选型，支持生成渐变、噪点、图表等纹理。
用户需要创建抖动背景或纹理
代码中导入lib/dither模块
询问如何集成dithercn组件
npx skills add panel-ui/PanelUI --skill dithercn -g -y
用于设计应用图标、品牌标志或吉祥物。支持通过图像生成器或编写SVG矢量文件两种路径，遵循严格的设计规则与32x32可读性检查，确保标志在小尺寸下清晰可辨。
创建应用图标
设计品牌标志
生成吉祥物或头像
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
提供基于shadcn/ui和Tailwind CSS的React Web UI组件库技能，涵盖面板、图表及交互组件的使用规范与样式集成。
用户请求在React项目中构建PanelUI风格的Web界面
询问如何使用PanelUI组件（如KPI卡片、看板、图表等）
涉及shadcn/ui注册表或panelui-web包的安装与配置
npx skills add panel-ui/PanelUI --skill panelui-web -g -y
为 Expo/React Native 项目提供 PanelUI 组件库的开发指导，涵盖安装、主题配置、组件使用及样式调试。
用户询问 React Native 或 Expo 中的 UI 构建问题
提及 PanelUI、bottom sheet、dialog、form 等特定组件
npx skills add panel-ui/PanelUI --skill panelui -g -y
用于设计应用图标和品牌标识，确保在32x32像素下清晰可读。支持通过图像生成器或SVG矢量路径产出，遵循严格的设计与配色规则，提供多方案提案及自检流程。
创建应用图标
设计品牌标志
生成吉祥物头像
npx skills add panel-ui/PanelUI --skill logo-maker -g -y
为 React 项目提供基于 shadcn/ui 和 Tailwind CSS v4 的 PanelUI Web 组件构建技能，涵盖图表、面板及交互组件的使用规范与主题适配。
用户在 React 项目中请求使用 PanelUI 组件
需要实现特定 UI 元素如 KPI 卡片、看板或图表
npx skills add panel-ui/PanelUI --skill panelui-web -g -y
面向 Expo/React Native 项目的 UI 组件库技能，涵盖 PanelUI 组件构建、主题配置、组合布局及样式调试。指导如何识别项目集成方式、遵循语义化样式原则，并解决常见的样式未生效问题。
用户要求在 React Native 或 Expo 项目中构建底部抽屉、对话框、图表、表单等屏幕 UI
用户在讨论 PanelUI 组件的使用、主题定制或样式调试时
npx skills add panel-ui/PanelUI --skill panelui -g -y
面向 Expo/React Native 应用的动画构建技能，指导决策动画必要性、线程选择及手势交互，使用 Reanimated 等实现高性能动效。
在 Expo 应用中添加动画或手势
修复设备上的动画卡顿问题
实现屏幕过渡或触觉反馈
npx skills add panel-ui/PanelUI --skill animate-expo -g -y
Remotion技能路由，根据需求触发视频创建、项目设置、地图、多媒体、交互、渲染、字幕及SaaS开发等子技能。
创建或构建新视频/合成
初始化Remotion新项目
编写React Markup
处理地图与地理信息
浏览器内多媒体操作
提升Studio交互性
高级渲染配置
添加字幕
构建Remotion SaaS应用
查阅文档或升级
npx skills add panel-ui/PanelUI --skill remotion-best-practices -g -y
构建基于React Native的交互式等距机械图解，用于直观解释应用内部机制（如动画、算法），通过用户交互展示原理。
请求解释App内部工作原理
需要交互式技术图示或Onboarding引导
npx skills add panel-ui/PanelUI --skill apparatus -g -y
用于构建 React Native/Expo 交互式原理图，通过等距动画机器直观解释技术概念。
请求解释 App 内部机制（如缓存、算法）
需要可触摸交互的技术示意图或引导插画
npx skills add panel-ui/PanelUI --skill apparatus -g -y
通过严格的面试式对话，帮助用户打磨和优化计划或设计方案。
用户希望获得对现有计划的严格审查
用户需要针对设计进行深度质疑以完善思路
npx skills add panel-ui/PanelUI --skill grill-me -g -y
用于生成 shadcn/ui 风格的 README 徽章、图表、头部横幅及贡献者网格，支持替换 Shields.io 并优化项目文档视觉效果。
添加 README 徽章
生成下载图表
创建 README 头部横幅
替换 Shields.io 徽章
构建完整 README
npx skills add panel-ui/PanelUI --skill shieldcn-badges -g -y
Dependencies:
jal-co/shieldcn
jal-co/shieldcn@shieldcn-badges
