Radix UI 技能是一个专注于使用 Radix UI 库构建现代化、高度可访问且可定制的前端组件的专家级助手。它擅长运用 Radix 提供的基础组件（Primitives），通过组合模式创建复杂的交互式UI，并确保严格遵循 WAI-ARIA 无障碍标准。无论是使用 CSS 还是 Tailwind CSS 进行样式设计，还是处理模态框、下拉菜单、标签页等复杂交互逻辑，该技能都能提供专业指导。 **关键词：** Radix UI, 前端组件库, 无障碍访问, WAI-ARIA, React 组件, 设计系统, Tailwind CSS, 组合模式, 交互设计, 前端开发

本技能指南详细介绍了如何在Next.js框架中，利用shadcn/ui组件库快速构建美观、可访问且现代化的用户界面。内容涵盖从项目初始化、常用组件（如按钮、表单、对话框、表格、侧边栏、通知）的安装与使用，到结合react-hook-form与Zod进行表单验证，以及深色模式的集成设置。适用于前端开发者、UI工程师快速上手基于Radix UI和Tailwind CSS的高质量UI开发。关键词：shadcn/ui, Next.js, React组件库, UI开发, 前端开发, 表单验证, 深色模式, Tailwind CSS, Radix UI。

这个技能用于构建自包含的交互式HTML仪表盘，使用Chart.js创建图表，集成下拉过滤器，具有专业样式，适用于创建仪表盘、构建交互式报告或生成无需服务器的可共享HTML文件。关键词：仪表盘构建、Chart.js、交互式报告、HTML/JS、数据可视化、前端开发、数据过滤、响应式设计。

组件设计技能用于创建一致、可重用的React和Vue UI组件，遵循原子设计原则和组合模式。适用于前端开发中的UI组件库构建，提升开发效率和代码维护性。关键词：组件设计、React、Vue、原子设计、组合模式、UI组件、前端开发、状态管理。

SVG优化器是一款用于前端开发的自动化工具，主要功能包括SVG图像压缩、精灵图生成和React/Vue组件转换。它能有效移除冗余元数据、优化路径结构、提升网页加载性能，并确保图标资源的可访问性，适用于构建现代Web应用和设计系统。关键词：SVG优化，前端开发，图标系统，React组件，性能优化，可访问性，精灵图生成，SVGO，svgr。

交互设计是一种专注于通过反馈模式、微交互和可访问性设计来优化用户界面体验的技能，适用于设计加载状态、错误处理、动画指南等，提升用户体验和交互效果。关键词：交互设计、用户体验、UI设计、反馈模式、微交互、可访问性、前端开发。

这个技能提供了一套工具，用于使用现代前端技术（如 React、Tailwind CSS、shadcn/ui）创建复杂的多组件 HTML 构件。它特别适用于需要状态管理、路由或 shadcn/ui 组件的项目，帮助开发者快速构建和打包前端应用，便于在 Claude 对话中共享。关键词：前端开发，React，Tailwind CSS，shadcn/ui，HTML 构件，工具套件，打包工具。

UI/UX Pro Max是一个全面的设计智能技能，专为网页和移动应用的UI/UX设计提供指导。它包含50多种样式、97种色彩调色板、57种字体配对、99个UX指南和25种图表类型，支持9种技术栈如React、Vue、Tailwind。用于设计新UI组件、选择颜色和字体、审查代码、构建落地页、实施可访问性，提高设计效率和专业性。关键词：UI设计、UX设计、前端开发、网页设计、移动应用设计、设计系统、可访问性、响应式设计、Tailwind CSS、React、Vue。

该技能用于系统化创建表格和数据网格，从简单HTML表格到处理数百万行的企业级虚拟化网格。它提供决策框架、性能优化策略、可访问性设计和响应式布局，适用于前端开发中的数据展示、排序、筛选、分页、内联编辑和数据导出等功能实现。关键词：表格、数据网格、前端开发、性能优化、可访问性、响应式设计、排序、筛选、分页。

Nuxt 是一个基于 Vue.js 的全栈 Web 开发框架，专注于服务端渲染（SSR）、自动导入和文件路由。它简化了现代 Web 应用的构建流程，支持混合渲染和跨平台部署，是构建高性能、SEO 友好的 Vue 应用的关键工具。关键词：Nuxt 框架、Vue SSR、服务端渲染、全栈开发、自动导入、文件路由、Nitro 服务器、混合渲染、Web 应用开发。

前端设计技能专注于创建独特、生产级别的前端用户界面，结合创意美学与代码实现，用于构建网站、登录页面、React组件、HTML/CSS布局等。强调个性化设计、高质量输出、避免通用AI美学，关键词包括前端开发、创意UI、代码实现、美学设计、网站构建、组件设计、生产级界面。

Vite 是一个用于前端开发的下一代构建工具，提供快速的开发服务器、优化的生产构建和服务器端渲染支持。它基于 Vite 8 使用 Rolldown 打包器和 Oxc 转换器，适用于现代前端框架如 Vue 和 React，并支持插件扩展。关键词：Vite、前端构建工具、Rolldown、SSR、Vue、React、插件 API、构建配置、开发服务器。