前端开发 Skill技能列表
核心网页指标优化Skill core-web-vitals
该技能专注于优化核心网页指标(LCP、INP、CLS),通过技术手段提升网页加载速度、交互响应性和视觉稳定性,从而改善用户体验和搜索引擎排名。关键词:核心网页指标、LCP优化、INP优化、CLS优化、性能优化、SEO、页面体验、前端性能。
Web接口指南审查技能Skill web-design-guidelines
此技能用于自动审查网页UI代码,确保其符合Web接口指南,涵盖可访问性、性能、用户体验等多个方面,帮助前端开发者提升代码质量并遵循行业最佳实践。关键词:UI审查、Web设计指南、可访问性检查、前端开发、代码合规性。
FigmaMCP集成Skill figma
这个技能用于通过 Figma MCP 服务器从 Figma 设计工具中自动获取设计上下文、截图、变量和资产,并将 Figma 节点翻译成生产代码(如 React + Tailwind),实现设计到代码的自动化转换。适用于前端开发项目,提高开发效率,确保设计一致性,支持链接驱动的实现流程。关键词:Figma, MCP, 设计到代码, 前端开发, React, Tailwind, 自动化, 代码生成, 设计系统。
Figma设计实现Skill figma-implement-design
该技能用于将Figma设计节点转化为生产就绪的代码,确保1:1视觉保真度,通过Figma MCP工作流实现设计上下文提取、截图捕获、资产下载和项目约定翻译。关键词包括:Figma设计、代码实现、视觉保真度、MCP工作流、设计系统集成。
React组合模式技能Skill react-composition-patterns
这个技能专注于使用 React 组合模式来构建可扩展、易维护的前端组件。它避免布尔属性泛滥,通过复合组件、状态提升和上下文管理提升代码质量。适用于重构组件、开发组件库和设计 API。关键词:React, 组合模式, 前端开发, 组件架构, 状态管理, 复合组件, 渲染属性, React 19 API, 可维护性, 可扩展性, 组件库开发, 代码重构, 前端优化, UI 组件, 响应式设计, 前端框架, JavaScript, 软件开发最佳实践。
前端UI/UX开发专家Skill frontend-agent
该技能是一个前端开发专家工具,专注于使用React、Next.js和TypeScript构建高性能用户界面。采用FSD-lite架构组织代码,使用shadcn/ui组件库确保UI一致性,并严格对齐设计系统。涉及UI/UX设计、组件开发、状态管理、性能优化等任务,适用于现代Web前端开发。关键词包括:前端开发、React、Next.js、TypeScript、UI/UX、shadcn/ui、FSD架构、组件设计、性能优化。
网络性能审计Skill web-performance-audit
这是一个使用 Chrome DevTools MCP 进行网页性能审计的技能,专注于优化页面加载性能、提升 Lighthouse 得分和网站速度。它提供核心 Web 指标分析、网络优化建议和可访问性差距识别。关键词:网页性能、性能审计、Chrome DevTools、Core Web Vitals、网络优化、前端性能、可访问性审计、Web 指标。
Claude前端神器构建器Skill artifacts-builder
该技能是一个前端开发工具套件,专门用于为Claude.ai创建复杂、多组件的HTML神器,采用React、Tailwind CSS和shadcn/ui等现代技术,支持状态管理和路由,适用于构建高级前端项目。关键词:前端开发,React,Tailwind CSS,shadcn/ui,HTML神器,Claude.ai。
前端设计Skill frontend-design
该技能用于创建独特、生产级的前端接口,注重高质量设计和创意美学,避免通用AI风格。适用于构建Web组件、页面、应用程序等,生成功能性和美观性的代码与UI。关键词:前端设计、UI设计、Web开发、生产级、创意美学。
TypeScript高级类型Skill typescript-advanced-types
TypeScript高级类型技能专注于TypeScript的类型系统的高级特性,如泛型、条件类型、映射类型、模板字面量类型和工具类型,用于开发类型安全的软件应用。关键词包括:TypeScript, 高级类型, 泛型, 条件类型, 映射类型, 模板字面量类型, 工具类型, 类型安全, 前端开发, 后端开发。
现代JavaScript模式Skill modern-javascript-patterns
这个技能用于掌握现代JavaScript(ES6+)核心特性,包括箭头函数、解构、异步操作、函数式编程模式等,帮助开发者编写高效、可维护的前端代码,适用于重构遗留系统、优化Web应用性能及提升代码质量。关键词:JavaScript开发,ES6+,前端优化,异步编程,代码重构,函数式编程,性能提升。
算法艺术生成Skill algorithmic-art
此技能专为使用p5.js创建算法艺术而设计,涵盖算法哲学构思、交互式生成艺术实现和参数探索。它结合计算美学与前端开发,允许用户通过种子随机性和动态控件生成独特艺术变体。适用于生成艺术、前端开发、交互设计等领域。关键词:算法艺术、生成艺术、p5.js、交互式艺术、前端开发、种子随机性、参数控制、计算美学。