Agent Skills
› kokonut-labs/kokonutui
kokonut-labs/kokonutui
GitHub指导构建现代、可访问且可组合的 UI 组件。适用于新建组件、实现无障碍功能、设计组合式 API、设置设计令牌、发布至 npm 或编写组件文档等场景。
Install All Skills
npx skills add kokonut-labs/kokonutui --all -g -y
Skills in Collection (10)
指导构建现代、可访问且可组合的 UI 组件。适用于新建组件、实现无障碍功能、设计组合式 API、设置设计令牌、发布至 npm 或编写组件文档等场景。
构建新的 UI 组件
实现无障碍特性
创建可组合的组件 API
设置设计令牌和主题系统
将组件发布到 npm 或注册表
npx skills add kokonut-labs/kokonutui --skill building-components -g -y
用于创建具有独特设计感和生产级质量的Web前端界面。指导生成避免通用AI审美的创意代码，涵盖组件、页面及应用开发，注重排版、色彩与动效等美学细节。
构建网页组件或页面
生成React/Vue等框架代码
美化Web UI界面
制作海报或着陆页
npx skills add kokonut-labs/kokonutui --skill frontend-design -g -y
提供Next.js开发最佳实践指南，涵盖文件规范、RSC边界、异步API、错误处理、数据模式及性能优化等核心领域。
编写或审查Next.js代码
解决React Server Components相关问题
配置路由、元数据或性能优化
npx skills add kokonut-labs/kokonutui --skill next-best-practices -g -y
介绍 Next.js 16+ 缓存组件功能，支持 PPR、use cache 指令及缓存生命周期管理。
配置 Next.js 缓存策略
使用 use cache 指令优化性能
npx skills add kokonut-labs/kokonutui --skill next-cache-components -g -y
指导将 Next.js 项目升级至最新版本，包括检测版本、获取官方迁移指南、运行 codemods、更新依赖及测试验证。
需要升级 Next.js 框架版本
处理 Next.js 大版本迁移
应用 Next.js codemods 自动化重构
npx skills add kokonut-labs/kokonutui --skill next-upgrade -g -y
提供React组件组合模式的最佳实践，解决布尔属性泛滥问题，指导构建灵活、可维护的组件库及架构设计。
重构包含大量布尔属性的组件
构建可复用的组件库
审查组件架构设计
使用复合组件或Context Provider
npx skills add kokonut-labs/kokonutui --skill vercel-composition-patterns -g -y
提供 Vercel 官方 React 和 Next.js 性能优化指南，涵盖消除数据瀑布、包体积优化及服务端渲染等规则。用于指导代码编写、审查及重构，确保应用达到最佳性能标准。
编写新的 React 组件或 Next.js 页面
实现数据获取逻辑
审查代码以发现性能问题
重构现有 React/Next.js 代码
优化包体积或加载速度
npx skills add kokonut-labs/kokonutui --skill vercel-react-best-practices -g -y
提供React Native和Expo开发的最佳实践指南，涵盖性能优化、动画实现、UI模式及原生模块配置等规则，旨在提升移动端应用的性能与质量。
构建React Native或Expo应用
优化列表滚动性能
实现Reanimated动画
处理原生模块或字体配置
npx skills add kokonut-labs/kokonutui --skill vercel-react-native-skills -g -y
审查UI代码是否符合Web界面指南，支持访问性、UX审计及最佳实践检查。通过Fetch获取最新规则并输出文件行号格式问题。
review my UI
check accessibility
audit design
review UX
check my site against best practices
npx skills add kokonut-labs/kokonutui --skill web-design-guidelines -g -y
指导使用 shadcn CLI 安装 KokonutUI React 组件，包括查找注册表、安装及配置前置条件。
用户需要集成第三方 UI 组件库
用户询问如何添加特定 React 组件
npx skills add kokonut-labs/kokonutui --skill install-kokonutui-component -g -y
