前端开发 Skill技能列表
OrvalAPI客户端生成技能Skill generate-api-client
该技能用于从OpenAPI规范文档（如api-docs.yaml）自动生成类型安全的API客户端代码。它通过Orval工具链执行，确保前端应用能够以强类型、可维护的方式调用后端API，提升开发效率和代码质量。关键词：OpenAPI，API客户端，类型安全，自动生成，前端开发，TypeScript，代码生成。
渐进式网页应用Skill progressive-web-app
渐进式网页应用是一种结合了网页和移动应用特性的技术，它支持离线工作、可被安装到主屏幕、并通过推送通知与用户互动。关键词包括：离线支持、安装性、推送通知、服务工作线程、Web应用清单。
响应式网页设计Skill responsive-web-design
响应式网页设计是一种网页开发技术，它使用CSS Grid、Flexbox、媒体查询等现代CSS技术，以创建适应不同屏幕尺寸和设备类型的网页布局。
WebPerformanceAuditSkill web-performance-audit
进行综合性的网站性能审计，测量页面加载速度，识别性能瓶颈，并推荐优化措施以提升用户体验和搜索引擎优化（SEO）。
Web性能优化Skill web-performance-optimization
通过代码分割、懒加载、缓存、压缩和监控等技术手段提升Web应用的性能，改善用户体验和页面加载速度。
Supabase+Next.js技能Skill supabase-nextjs
利用Supabase和Drizzle ORM构建Next.js应用，实现认证、数据库查询和实时数据更新。
TypeScript技能Skill typescript
TypeScript 技能涵盖了使用 TypeScript 进行严格模式编程，结合 ESLint 和 Jest 进行代码质量和测试保障的最佳实践。关键词包括：TypeScript, ESLint, Jest, 代码质量，测试覆盖率。
FormHandlingwithReactHookFormandZodSkill FormHandlingwithReactHookFormandZod
使用 React Hook Form 和 Zod 构建类型安全、经过验证的表单，提高数据质量，减少表单放弃，提升用户体验。
InfiniteScrollPatternsSkill InfiniteScrollPatterns
专家级框架，用于实现无限滚动，包括使用Intersection Observer、虚拟滚动、React Query和针对大数据集的性能优化。
React状态管理Skill state-management
React状态管理技能涉及使用不同的状态管理库和模式来处理React应用中的本地和全局状态。关键词包括React State, React Context, Zustand, Redux Toolkit, TanStack Query, Jotai。
图像优化Skill image-optimization
该技能专注于实现响应式图像、优化图像格式和处理图像管道，包括生成srcset、转换到WebP/AVIF、懒加载和提供图像转换API，适用于无头CMS和现代Web开发。关键词：图像优化，响应式图像，WebP转换，AVIF转换，懒加载，图像处理API，焦点裁剪，性能优化。
设计主题系统Skill design-theme-system
这个技能用于为多站点/多租户 CMS 设计和实现主题化架构，包括设计 tokens、CSS 变量、Tailwind 配置等，支持品牌定制和前端开发集成。适用于网站主题管理、品牌一致性维护和用户体验优化。关键词：主题设计、设计 tokens、CSS 变量、Tailwind、多站点、CMS、前端开发。