前端开发 Skill技能列表
动态导入懒加载技术Skill bundle-dynamic-imports
这个技能涉及使用 Next.js 框架的 `next/dynamic` 功能实现组件懒加载，以优化网页性能和用户体验。适用于在初始渲染时不需要的大型组件，如代码编辑器、图表、富文本编辑器等。通过动态导入，可以减少初始加载时间，提升应用响应速度。关键词：动态导入、懒加载、Next.js、前端优化、性能提升、组件加载、代码分割。
现代JavaScript模式Skill modern-javascript-patterns
这个技能用于掌握现代JavaScript（ES6+）核心特性，包括箭头函数、解构、异步操作、函数式编程模式等，帮助开发者编写高效、可维护的前端代码，适用于重构遗留系统、优化Web应用性能及提升代码质量。关键词：JavaScript开发，ES6+，前端优化，异步编程，代码重构，函数式编程，性能提升。
正则表达式性能优化Skill js-hoist-regexp
这个技能用于优化前端React应用中的正则表达式使用，通过将RegExp创建提升到模块作用域或使用React的useMemo钩子进行记忆化，避免在每次渲染或函数调用时重复创建，从而提高性能并减少内存开销。关键词：React性能优化, 正则表达式提升, useMemo记忆化, 前端开发技巧, JavaScript最佳实践。
ClaudeAI工件构建工具套件Skill artifacts-builder
这是一个用于创建复杂Claude.ai HTML工件的工具套件，基于现代前端技术如React、Tailwind CSS和shadcn/ui，支持状态管理、路由等高级功能，帮助开发者快速构建多组件前端应用。关键词：前端开发、React、TypeScript、Vite、Tailwind CSS、shadcn/ui、HTML工件、Claude.ai、工具套件、状态管理、路由。
前端构建工具套件Skill artifacts-builder
这是一个前端构建工具套件，用于创建复杂的多组件HTML艺术品，基于React、TypeScript、Tailwind CSS和shadcn/ui等现代前端技术。支持状态管理、路由和组件集成，适合高级前端项目开发和Claude AI工具集制作。关键词：前端开发、React、TypeScript、HTML构建、工具集、Claude AI、状态管理、路由、组件库。
交互设计Skill interaction-design
交互设计是一种专注于通过反馈模式、微交互和可访问性设计来优化用户界面体验的技能，适用于设计加载状态、错误处理、动画指南等，提升用户体验和交互效果。关键词：交互设计、用户体验、UI设计、反馈模式、微交互、可访问性、前端开发。
优质前端设计技能Skill frontend-design
此技能专注于开发独特、生产级的前端界面，强调高质量创意设计和避免通用AI美学。用于构建Web组件、页面或应用程序，提供精致代码和美学优化，提升用户体验和视觉吸引力。关键词：前端开发、创意设计、Web界面、美学优化、生产级代码。
图像优化Skill image-optimization
这项技能涉及对网站图像进行优化，以减少文件大小而不牺牲质量，包括压缩、使用现代格式和响应式技术，以加快加载速度，提升网站性能和用户体验。
Makepad基础技能Skill makepad-basics
这个技能是关于使用Rust的makepad-widgets库进行跨平台UI开发的入门指南。它帮助开发者快速上手Makepad，学习如何编写实时设计的UI代码，处理事件，并构建适用于多个平台的应用。关键词：Rust, Makepad, UI开发, 跨平台, 实时设计, 前端开发, 入门教程。
功能性setState更新Skill rerender-functional-setstate
React功能性setState更新是用于优化React组件中状态管理的技术，通过使用函数形式的setState来更新基于当前状态的状态值，防止闭包陈旧问题并减少不必要的性能开销。关键词：React，setState，闭包，性能优化，状态管理，前端开发。
Shopify开发Skill shopify
Shopify开发技能用于构建和扩展Shopify电商平台上的应用、主题及API集成。涉及GraphQL/REST API调用、Shopify CLI工作流、Polaris UI组件和Liquid模板语言，支持结账自定义、管理界面扩展、POS零售开发等。关键词包括Shopify开发、电商应用、API集成、主题定制、Shopify CLI、Liquid模板、GraphQL API、电商平台开发。
Web工件构建器Skill web-artifacts-builder
Web Artifacts Builder是一个专为Claude.ai平台设计的HTML工件生成工具套件。该工具使用React、TypeScript、Tailwind CSS和shadcn/ui等现代前端技术，帮助用户快速创建复杂、交互式的多组件HTML工件。支持状态管理、路由功能，并能将完整的前端应用打包为单个HTML文件，便于在对话中直接分享和使用。适用于需要高级UI组件和复杂交互的Claude.ai工件开发场景。 关键词：Claude.ai工件开发、React前端工具、HTML打包工具、shadcn/ui组件库、Tailwind CSS主题、前端自动化构建、单文件HTML应用、AI助手工具开发