前端开发 Skill技能列表
动效设计技能Skill motion-design
动效设计技能专注于创建用户界面中的动画效果,包括HUD动画、时序管理、弹簧物理、微交互等,旨在提升用户体验、提供反馈并确保可访问性。适用于前端开发、UI设计和性能优化场景。关键词:动效设计、UI动画、前端动画、CSS动画、JavaScript动画、性能优化、无障碍设计、HUD动画。
Motion动画库Skill motion
Motion动画库是一个用于React的声明式动画库,支持手势控制、滚动动画、布局过渡和SVG动画等高级功能,适用于前端开发中的复杂交互设计。关键词:React动画库、前端开发、手势动画、滚动效果、性能优化。
浏览器调试Skill browser-debugging
浏览器调试工具帮助开发者识别和修复客户端问题,包括JavaScript错误、布局问题、性能问题等,是前端开发中常用的技能。
Windows应用程序开发专家Skill windows-app-developer
本技能提供专业的 Windows 桌面应用程序开发服务,专精于使用 WinUI 3、WPF 和 Windows App SDK 构建现代化应用。核心能力包括:MVVM 架构设计、XAML UI 开发、MSIX 打包部署、原生 Windows 功能集成(如通知、任务栏)、以及应用商店发布。适用于企业级软件、工具软件及需要深度系统集成的桌面应用开发。关键词:Windows 开发,WinUI 3,WPF,MVVM 架构,XAML,MSIX 打包,桌面应用,Windows App SDK,Fluent Design。
前端设计Skill frontend-design
这是一个用于创建独特、高质量、生产级前端界面的技能。它指导开发者避免通用AI美学,专注于创意设计思维、独特排版、色彩主题、动效和空间构成,生成具有鲜明美学观点和精致细节的代码。关键词:前端开发,UI设计,创意界面,生产级代码,美学设计,网页组件,React,Vue,CSS动画,独特排版。
原子设计:夸克Skill atomic-design-quarks
原子设计:夸克技能专注于使用原子设计方法论中的夸克级别来构建和维护设计系统的基础。它包括定义和管理设计令牌(如颜色、间距、字体大小、阴影等原始值),并将它们导出为CSS自定义属性,以实现样式一致性和主题支持。此技能适用于前端开发中的设计系统建设,确保可维护性和可扩展性,适用于创建可主题化的组件库、大型代码库一致性维护以及多品牌应用开发。关键词:原子设计、夸克、设计令牌、CSS变量、前端开发、设计系统、样式一致性、主题化。
UI动画设计Skill ui-animation
UI动画设计技能专注于用户界面中的动画和运动效果,用于提升用户体验、提供反馈和引导用户操作。它涉及动画原理、时序控制、缓动函数等技术,适用于前端开发、移动应用设计等场景。关键词:UI动画、运动设计、前端开发、用户体验、交互设计。
UI样式设计技能Skill ui-styling
这个技能用于创建美观、可访问的用户界面,结合shadcn/ui组件、Tailwind CSS工具样式和基于canvas的视觉设计系统。它适用于前端开发、响应式布局、可访问性设计、主题定制和视觉设计。关键词:UI设计、前端开发、Tailwind CSS、shadcn/ui、响应式布局、可访问性、暗模式、设计系统、视觉传达。
前端开发编码规范Skill coding-standards
这个技能专注于TypeScript、JavaScript、React和Node.js开发的代码标准、最佳实践和模式,帮助开发者编写高质量、可维护的代码。关键词:编码标准、最佳实践、TypeScript、JavaScript、React、Node.js、前端开发、代码质量、软件开发。
前端开发技能Skill frontend-developer-skill
前端开发技能是构建现代Web应用程序的核心能力,涵盖React、Vue、Angular等主流框架,以及状态管理、性能优化、测试工具链和组件化开发。该技能专注于创建高性能、可维护、响应式的用户界面,适用于企业级应用、电商平台、管理后台和移动端Web开发。关键词:前端开发、React、Vue、Angular、状态管理、性能优化、Web应用、组件化、TypeScript、测试框架。
Figma设计实现技能Skill "figma-implement-design"
该技能通过Figma MCP工作流,将Figma设计节点准确转化为生产就绪代码,实现1:1视觉保真度,适用于前端开发、设计系统集成和代码生成。关键词:Figma、设计实现、代码转换、视觉保真、前端开发、MCP工作流。
Next.js服务器组件Skill nextjs-server-components
这个技能是关于使用Next.js的Server Components来优化Web应用程序性能。它涉及服务器端渲染、数据获取、服务器操作、流式传输等,旨在减少客户端负担、提高加载速度、改善SEO,并适用于构建数据密集型和高性能的Next.js应用。关键词:Next.js、Server Components、服务器渲染、数据获取、性能优化、前端开发、SEO、流式传输、服务器操作。