Agent Skills
› Kiranism/next-shadcn-dashboard-starter
Kiranism/next-shadcn-dashboard-starter
GitHub用于创建独特且生产级的前端界面，避免通用AI美学。当用户需要构建网页、组件或应用时触发，提供从设计构思到代码实现的完整指导，强调大胆的审美方向和精细的视觉细节。
Install All Skills
npx skills add Kiranism/next-shadcn-dashboard-starter --all -g -y
Skills in Collection (21)
用于创建独特且生产级的前端界面，避免通用AI美学。当用户需要构建网页、组件或应用时触发，提供从设计构思到代码实现的完整指导，强调大胆的审美方向和精细的视觉细节。
构建网页组件
设计仪表盘
开发React/Vue应用
美化Web UI
npx skills add Kiranism/next-shadcn-dashboard-starter --skill frontend-design -g -y
将React项目从Radix UI迁移至Base UI。支持shadcn包装器及自定义组件，通过CLI获取基准代码并结合三路合并保留用户修改，确保构建稳定且逐步完成迁移。
从 radix 迁移
移动到 base-ui
转换 radix 原语
切换 shadcn 基础库
npx skills add Kiranism/next-shadcn-dashboard-starter --skill migrate-radix-to-base -g -y
提供Next.js开发最佳实践指南，涵盖文件规范、RSC边界、异步API、错误处理及性能优化等规则，辅助代码编写与审查。
Next.js项目代码审查
Next.js应用架构设计咨询
Next.js性能优化需求
npx skills add Kiranism/next-shadcn-dashboard-starter --skill next-best-practices -g -y
管理 shadcn/ui 组件库，支持组件添加、搜索、调试、样式调整及 UI 组合。提供项目上下文、文档和示例，遵循特定编码规范与最佳实践。
需要添加或管理 shadcn/ui 组件
处理包含 components.json 的项目
执行 shadcn init 或 --preset 操作
解决 UI 组件样式或结构问题
npx skills add Kiranism/next-shadcn-dashboard-starter --skill shadcn -g -y
用于创建、修改和优化技能，支持编写草稿、运行评估测试及性能基准分析。通过迭代反馈改进技能质量，并优化描述以提升触发准确率，适用于从零构建或增强现有技能的场景。
用户希望从零开始创建新技能
需要编辑或优化现有技能
运行评估测试以检验技能表现
进行基准分析和方差分析
优化技能描述以提高触发准确性
npx skills add Kiranism/next-shadcn-dashboard-starter --skill skill-creator -g -y
TanStack Form 是一个无头、高性能且类型安全的表单状态管理库，支持 TS/JS 及多种前端框架。提供字段级验证、数组字段、响应式更新及 Schema 适配器（Zod/Valibot），用于构建复杂表单逻辑。
需要实现复杂的表单验证逻辑
使用 React/Vue/Svelte 等框架构建表单
需要类型安全的表单状态管理
npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-form -g -y
提供 TanStack Query v5 数据获取模式，包括 useSuspenseQuery、useQuery、缓存管理及 API 集成。指导开发者在现代 React 应用中高效管理服务器状态与数据请求。
使用 TanStack Query 进行数据获取
实现 useSuspenseQuery 或 useQuery
处理数据变更（mutations）
管理查询缓存及失效策略
npx skills add Kiranism/next-shadcn-dashboard-starter --skill tanstack-query -g -y
提供React组件组合模式指南，解决布尔属性泛滥问题，支持构建灵活、可复用的组件库及设计组件架构，涵盖Compound Components、Context Provider及React 19新特性。
重构含大量布尔属性的组件
构建可复用组件库
审查组件架构设计
使用复合组件或上下文提供者
npx skills add Kiranism/next-shadcn-dashboard-starter --skill vercel-composition-patterns -g -y
提供Vercel维护的React与Next.js性能优化指南，涵盖消除数据瀑布、包体积优化及服务端/客户端渲染等规则。用于指导代码编写、审查及重构，确保应用高性能。
编写或重构React组件和Next.js页面
实现数据获取逻辑
审查代码以发现性能瓶颈
优化包体积或加载速度
npx skills add Kiranism/next-shadcn-dashboard-starter --skill vercel-react-best-practices -g -y
该技能用于审查Web界面代码，检查其是否符合Vercel Web Interface Guidelines。通过获取最新规范并比对指定文件，输出符合规范的审计结果，适用于UI审查、无障碍检查和UX审核场景。
审查UI代码
检查无障碍性
审计设计
审查用户体验
根据最佳实践检查网站
npx skills add Kiranism/next-shadcn-dashboard-starter --skill web-design-guidelines -g -y
用于创建独特、生产级的前端界面，避免通用AI美学。适用于构建网页、组件、仪表盘等，强调大胆审美、精细细节及高性能代码实现。
用户要求构建网页或前端页面
需要设计React/Vue组件
要求美化或重构现有UI界面
生成HTML/CSS布局或海报
npx skills add Kiranism/next-shadcn-dashboard-starter --skill frontend-design -g -y
提供Next.js开发最佳实践指南，涵盖文件约定、RSC边界、异步模式、错误处理、数据获取及性能优化等规范，辅助开发者编写符合框架标准的高质量代码。
需要遵循Next.js框架规范
审查或编写Next.js项目代码
解决React Server Components相关问题
npx skills add Kiranism/next-shadcn-dashboard-starter --skill next-best-practices -g -y
用于创建新技能、修改优化现有技能及评估性能。支持从构思到迭代优化的全流程，包括编写测试用例、运行评估、分析指标并根据反馈调整，最后优化触发描述以提高准确率。
用户希望从零开始创建一个新的技能
需要编辑或优化现有的技能定义
要求运行评估以测试技能表现或进行基准测试
希望优化技能的触发描述以提高准确性
npx skills add Kiranism/next-shadcn-dashboard-starter --skill skill-creator -g -y
提供React组件组合模式指南，解决布尔属性泛滥问题，涵盖复合组件、状态提升及React 19新API，适用于重构、库构建和架构审查。
重构含大量布尔属性的组件
构建可复用组件库
设计灵活组件API
审查组件架构
处理复合组件或上下文提供者
npx skills add Kiranism/next-shadcn-dashboard-starter --skill vercel-composition-patterns -g -y
基于Vercel工程团队的React和Next.js性能优化指南，提供64条规则。适用于编写、审查或重构代码时，解决瀑布流请求、包体积过大及渲染性能问题，确保最佳实践。
编写新的React组件或Next.js页面
实施数据获取逻辑
审查代码以发现性能瓶颈
重构现有代码以提升性能
优化包体积或加载时间
npx skills add Kiranism/next-shadcn-dashboard-starter --skill vercel-react-best-practices -g -y
审查Web界面代码是否符合设计规范与可访问性标准。通过获取最新指南，检查指定文件并输出违规位置，适用于UI审计、UX检查和最佳实践合规性验证场景。
review my UI
check accessibility
audit design
review UX
check my site against best practices
npx skills add Kiranism/next-shadcn-dashboard-starter --skill web-design-guidelines -g -y
帮助用户在开放智能体技能生态系统中发现和安装技能。当用户询问特定任务实现、寻求扩展能力或查找工具模板时触发，通过CLI搜索并验证质量后推荐合适技能。
询问如何实现某项功能
寻找特定领域的技能
希望扩展智能体能力
查找工具或工作流
npx skills add Kiranism/next-shadcn-dashboard-starter --skill find-skills -g -y
Dependencies:
<package>
vercel-labs/agent-skills@react-best-practices
<owner/repo@skill>
作为高级顾问审计代码库，生成供其他智能体执行的高价值、自包含实施计划。严格只读，不修改代码，涵盖bug、安全、性能及路线图分析，确保计划独立完整以便低能力模型执行。
审计代码库质量
寻找改进机会（如Bug、安全、性能）
建议新功能或产品方向
生成供其他Agent执行的移交计划
npx skills add Kiranism/next-shadcn-dashboard-starter --skill improve -g -y
提供基于Next.js 16和shadcn/ui的仪表盘开发规范，指导新建页面、功能模块、数据表格、表单及主题配置。涵盖从Mock API到前端组件的标准路径与编码模式，确保项目结构一致性。
添加新页面或路由
创建新功能模块
构建数据表格或表单
配置导航或主题
设置RBAC访问控制
npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -y
帮助用户发现并安装智能体技能。当用户询问如何实现特定功能、寻找现有技能或希望扩展代理能力时触发。通过CLI搜索和排行榜验证，推荐高质量技能供安装。
询问如何实现某项任务（如“如何优化React性能”）
明确请求查找或安装技能
询问代理是否具备某项专业能力
表达希望增强特定领域能力的意愿
npx skills add Kiranism/next-shadcn-dashboard-starter --skill find-skills -g -y
Dependencies:
<package>
vercel-labs/agent-skills@react-best-practices
<owner/repo@skill>
指导在 Next.js shadcn 仪表板模板中开发功能、页面、表格、表单及主题。涵盖路由配置、React Query 数据获取、RBAC 权限控制及 UI 组件规范，确保代码一致性。
添加新页面或功能模块
构建数据表格或表单
配置导航或主题
设置 RBAC 权限
处理 Clerk 认证相关逻辑
npx skills add Kiranism/next-shadcn-dashboard-starter --skill kiranism-shadcn-dashboard -g -y
