前端开发 Skill技能列表

Chrome扩展开发技能Skill chrome-extension

4.5

这个技能提供了Chrome扩展(Manifest V3)的性能和代码质量最佳实践指南,涵盖服务工作者生命周期、内容脚本优化、消息传递效率、存储操作、网络权限、内存管理、UI性能、API使用模式、代码风格、组件模式、错误处理和测试模式。适用于开发者编写、迁移或优化Chrome扩展代码,提升扩展性能和用户体验。关键词:Chrome扩展,Manifest V3,性能优化,代码质量,前端开发,浏览器扩展。

Web组件设计Skill web-component-design

4.5

这个技能专注于使用React、Vue和Svelte等现代前端框架设计和实现可重用的UI组件,涵盖CSS-in-JS样式方法、组件组合模式(如复合组件、渲染属性)、API设计等,适用于构建组件库、前端设计系统和提升代码可维护性。关键词:React, Vue, Svelte, CSS-in-JS, 组件设计, 前端开发, UI组件, 可重用架构, 组合模式, 样式管理。

国际化(i18n)Skill internationalization-i18n

4.5

这个技能专注于实现软件应用程序的国际化与本地化,包括多语言翻译管理、日期和数字格式化、以及从右到左语言支持。适用于构建需要支持多种语言的Web或移动应用,提升用户体验和全球市场适应性。关键词:国际化、本地化、多语言支持、i18next、React、前端开发、翻译管理。

UI组件创建技能Skill ui-component-creation

4.5

前端开发技能:使用shadcn/ui库和设计系统规范创建高质量UI组件。包含设计令牌使用、响应式布局、可访问性实现等前端开发最佳实践。适用于React前端开发、组件库开发、UI设计系统实施。关键词:前端开发、UI组件、shadcn/ui、设计系统、React组件、可访问性、响应式设计、设计令牌、前端架构

MotionVue动画库Skill motion

4.5

Motion Vue 是一个用于 Vue 3 和 Nuxt 的动画库,提供硬件加速的动画、手势交互、滚动链接效果、布局过渡等功能,适用于前端开发中的动画需求,关键词:Vue 3动画、Nuxt动画、手势动画、滚动动画、前端动画库。

Next.js开发专家Skill nextjs-developer

4.5

这是一个专注于 Next.js 14+ 框架开发的专家技能,擅长使用 App Router、服务器组件、服务器操作等现代 React 模式构建高性能、SEO 优化的全栈 Web 应用程序。核心能力包括性能优化、全栈集成、安全实践以及从旧架构迁移的决策指导。适用于需要构建企业级、可扩展且对搜索引擎友好的 React 应用场景。关键词:Next.js 开发,React 服务器组件,App Router,全栈开发,性能优化,SEO,TypeScript,Next.js 14。

TypeScript打包工具Skill tsdown

4.5

tsdown是一个基于Rolldown和Oxc的TypeScript打包工具,用于快速构建TypeScript库、生成.d.ts声明文件、支持ESM/CJS双输出、包验证和插件开发。适用于TypeScript库开发、npm包发布、Vue/React组件库构建等场景,提升开发效率和代码质量。关键词:TypeScript打包、tsdown、库构建、ESM/CJS、d.ts生成、插件开发、前端工具。

UI设计与样式技能Skill ui-styling

4.5

该技能用于创建美观、可访问的用户界面,结合shadcn/ui组件库、Tailwind CSS实用样式和canvas-based视觉设计系统,适用于前端开发、UI设计、响应式布局和可访问性优化。关键词:UI设计、前端开发、响应式布局、可访问性、Tailwind CSS、shadcn/ui、视觉设计、React框架、深色模式、设计系统。

配色方案生成器Skill color-palette-generator

4.5

配色方案生成器是一个专门用于创建符合WCAG无障碍标准的配色方案的工具。它能从基础颜色生成互补色、类似色、三色等多种配色方案,自动计算颜色对比度,确保AA/AAA级可访问性,并支持导出为CSS、SCSS、JSON等设计令牌格式。该工具还提供深色模式变体生成、无障碍替代方案建议和完整的合规性报告功能。关键词:配色方案生成,WCAG无障碍标准,颜色对比度计算,设计系统令牌,深色模式,可访问性设计,前端开发工具,UI设计辅助

3DWeb体验Skill 3d-web-experience

4.5

此技能专注于使用Three.js、React Three Fiber和WebGL等技术构建网页上的3D体验,包括产品配置器、交互式场景和沉浸式网站,平衡视觉冲击与性能优化,提升用户体验和SEO友好性。关键词:3D网页开发、Three.js、React Three Fiber、WebGL、交互式3D、产品可视化、性能优化、前端技术。

SVG优化器Skill svg-optimizer

4.5

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

React开发技能Skill react-development

4.5

React开发技能是专注于现代React应用构建的专业能力,提供React组件开发、Hooks模式实现、状态管理配置、性能优化和最佳实践指导。该技能涵盖TypeScript类型安全、自定义Hook设计、Context API和Redux状态管理、组件记忆化优化、React Testing Library测试等关键技术。适用于前端开发人员构建高性能、可维护的React应用,特别适合组件库开发、企业级应用架构设计和性能调优场景。