前端开发 Skill技能列表
原型到生产Skill prototype-to-production
原型到生产技能是一款自动化工具，用于将设计原型（如HTML、CSS、Figma导出文件）高效转换为生产就绪、类型化的前端组件。它通过分析原型结构，智能提取设计令牌和可复用模式，并遵循原子化设计方法论，生成符合项目技术栈（如React、TypeScript、Tailwind CSS）的整洁、可访问的代码。适用于前端开发、UI设计、代码重构和设计系统构建，提升从设计到开发的转化效率和质量。关键词：原型转换、前端组件、设计令牌、原子化设计、React组件、TypeScript、Figma、HTML转React、代码生成、UI开发。
ProductDesignSkill product-design
自动化设计审查、标记提取、组件映射和实施计划，通过Figma MCP集成大幅减少设计交接时间。
Web构件构建器Skill web-artifacts-builder
这个技能提供了一套工具，用于使用现代前端技术（如 React、Tailwind CSS、shadcn/ui）创建复杂的多组件 HTML 构件。它特别适用于需要状态管理、路由或 shadcn/ui 组件的项目，帮助开发者快速构建和打包前端应用，便于在 Claude 对话中共享。关键词：前端开发，React，Tailwind CSS，shadcn/ui，HTML 构件，工具套件，打包工具。
VueUse函数应用技能Skill vueuse-functions
该技能是 VueUse 组合式函数的决策与实施指南，专为 Vue.js 和 Nuxt 项目设计，帮助开发者高效选择和使用 VueUse 函数来构建简洁、可维护的前端功能。它通过映射需求到最合适的 VueUse 函数，优先采用组合式解决方案，提升代码质量和开发效率。关键词：VueUse, Vue.js, Nuxt, 组合式函数, 前端开发, 代码优化, 响应式编程, 开发工具
Web组件设计Skill web-component-design
这个技能专注于使用React、Vue和Svelte等现代前端框架设计和实现可重用的UI组件，涵盖CSS-in-JS样式方法、组件组合模式（如复合组件、渲染属性）、API设计等，适用于构建组件库、前端设计系统和提升代码可维护性。关键词：React, Vue, Svelte, CSS-in-JS, 组件设计, 前端开发, UI组件, 可重用架构, 组合模式, 样式管理。
前端专家Skill frontend-expert
这个技能是前端开发专家，专注于帮助开发者审查和优化前端代码，应用UI/UX最佳实践，确保响应式设计和可访问性。支持多种技术栈如HTMX、Next.js、React、TypeScript等。关键词：前端开发、代码审查、UI/UX设计、响应式设计、可访问性、HTMX、Next.js、React、TypeScript。
Nuxt4+开发Skill nuxt
这个技能专注于Nuxt 4+框架的开发，提供服务器路由、文件路由、中间件、组合式API等全方位指导，助力开发者高效构建现代化Web应用。关键词：Nuxt 4+、前端开发、Vue.js、服务器端渲染、Web开发、Nuxt框架。
MotionVue动画库Skill motion
Motion Vue 是一个用于 Vue 3 和 Nuxt 的动画库，提供硬件加速的动画、手势交互、滚动链接效果、布局过渡等功能，适用于前端开发中的动画需求，关键词：Vue 3动画、Nuxt动画、手势动画、滚动动画、前端动画库。
UI组件创建技能Skill ui-component-creation
前端开发技能：使用shadcn/ui库和设计系统规范创建高质量UI组件。包含设计令牌使用、响应式布局、可访问性实现等前端开发最佳实践。适用于React前端开发、组件库开发、UI设计系统实施。关键词：前端开发、UI组件、shadcn/ui、设计系统、React组件、可访问性、响应式设计、设计令牌、前端架构
Bun开发技能Skill bun-development
Bun开发技能专注于使用Bun运行时进行现代JavaScript和TypeScript开发，涵盖包管理、打包、测试和从Node.js迁移。适用于提升开发速度、优化项目性能或迁移现有Node.js项目。关键词：Bun, JavaScript, TypeScript, 开发工具, 包管理, 测试框架, 性能优化, 迁移指南。
交互设计Skill interaction-design
交互设计是一种专注于通过反馈模式、微交互和可访问性设计来优化用户界面体验的技能，适用于设计加载状态、错误处理、动画指南等，提升用户体验和交互效果。关键词：交互设计、用户体验、UI设计、反馈模式、微交互、可访问性、前端开发。
国际化(i18n)Skill internationalization-i18n
这个技能专注于实现软件应用程序的国际化与本地化，包括多语言翻译管理、日期和数字格式化、以及从右到左语言支持。适用于构建需要支持多种语言的Web或移动应用，提升用户体验和全球市场适应性。关键词：国际化、本地化、多语言支持、i18next、React、前端开发、翻译管理。