UI处理器是一个用于快速构建现代Web界面的技能工具。它通过集成Shadcn MCP和21st.dev MCP，提供原子组件（如按钮、输入框）和复杂区块（如英雄区、仪表盘）的自动化生成与管理。核心功能包括组件安装、主题定制、布局构建和样式管理，旨在提升前端开发效率，实现UI的快速原型设计和一致性维护。关键词：UI组件，前端开发，Shadcn，21st.dev，原子设计，区块生成，主题定制，React组件，Web界面构建。

Next.js 开发模式指南，涵盖应用路由器、服务器组件、客户端组件、数据获取、导航、字体优化和元数据管理等最佳实践。关键词：Next.js, App Router, 服务器组件, 客户端组件, 数据获取, SEO, 前端开发, React框架

本技能专注于使用 Next.js 15 的 App Router 构建现代 Web 应用，核心是掌握 React 服务器组件。它详细讲解了服务器优先架构、流式服务器端渲染、服务器操作以及高效的数据获取模式。内容涵盖组件边界设计、性能优化、高级路由（如并行路由和拦截路由）以及从旧版 Pages Router 的迁移策略。适用于希望构建高性能、SEO友好且具有优秀用户体验的下一代 React 应用的前端开发者。关键词：React Server Components, Next.js 15, 服务器端渲染, 流式渲染, App Router, 前端架构, 性能优化。

React 开发避坑指南，提供 React 组件模式、表单验证、错误边界、可访问性 (a11y) 和响应式设计的常见陷阱与最佳实践。适用于前端开发、代码审查、性能优化、用户体验提升。关键词：React 组件，表单验证，错误边界，可访问性，响应式设计，前端开发，React Hook Form，Zod，ARIA，useEffect。

这是一个专门针对Next.js 15框架的应用路由器技能指南，提供完整的服务器组件、客户端组件、数据获取、缓存策略、服务器操作和元数据管理的全面解决方案。包含150+实际代码示例和最佳实践，帮助开发者正确实现现代Next.js应用架构，避免常见错误，优化性能。关键词：Next.js 15, App Router, 服务器组件, 数据获取, 缓存策略, 服务器操作, React框架, 前端开发, Web性能优化。

这个技能用于自动审查Web界面代码是否符合最新的Web界面指南，提升UI/UX质量、确保可访问性和遵循最佳实践。关键词：UI代码审查、可访问性检查、Web设计指南、前端测试、用户体验审计。

本技能提供由 Vercel 维护的 React 和 Next.js 应用性能优化指南，包含 45 条规则，按优先级分类，用于自动化重构和代码生成。适用于编写、审查或重构 React/Next.js 代码，确保最佳性能模式。关键词：React, Next.js, 性能优化, Vercel, 前端开发, 代码优化, 自动化重构。

移动响应式网页开发技能专注于构建响应式、移动优先的网页应用，涵盖响应式布局设计、触摸交互优化、移动导航实现和屏幕尺寸适配。关键词包括移动响应式、前端开发、CSS、React、响应式设计、移动优先、断点、触摸事件、视口优化。

该技能用于构建和管理网站或应用的动态视觉体验系统。核心功能包括：创建和管理动画库（光束、剪辑、卡片、过渡等效果）、集成3D组件（Three.js）、构建灵感展示画廊和演示页面。它强调安全（如防癫痫）、可访问性（支持减少动画偏好）和性能优化，旨在通过丰富的动画和布局提升用户界面吸引力和交互体验。关键词：视觉体验引擎，网页动画，Three.js 3D，动画预设，可访问性动画，前端交互设计，UI/UX动画。

本技能提供nuqs在Next.js应用中实现类型安全URL查询状态管理的最佳实践指南，包含42条规则，覆盖8个类别，帮助开发者进行代码生成、重构和代码审查。关键词：nuqs, Next.js, URL状态, 查询参数, 类型安全, 前端开发。

React Web 开发技能，涵盖测试先行开发、组件和钩子测试模式、项目结构、组件模式、状态管理、路由、样式、表单处理、测试策略和性能优化。关键词：React, 测试先行，组件开发，状态管理，React Router，CSS 模块，Tailwind, 性能优化。

在React中使用Framer Motion、GSAP、React Spring和CSS动画创建高效、可访问的动画，包含最佳实践。