这个技能涵盖了React Web应用的样式模式，包括Tailwind CSS、CSS Modules、主题设计、响应式设计和组件样式。关键词：Tailwind CSS、CSS Modules、响应式设计、主题系统。

CSS布局助手是一个工具，用于帮助前端开发者解决CSS布局问题，如对齐和间距，通过解释问题并推荐flexbox或grid布局，提供修复方案。关键词包括CSS布局、前端开发、flexbox、grid、响应式设计、对齐、间距、布局问题修复。

此技能专注于在Shopify电子商务平台上构建应用、扩展和主题，涉及使用GraphQL/REST API、Shopify CLI、Polaris UI组件和Liquid模板语言进行全栈开发。关键词：Shopify开发、电子商务平台、应用开发、主题定制、API集成、前端UI、后端逻辑、扩展功能。

这个技能专注于使用Next.js框架构建生产级全栈应用程序的最佳实践和模式，包括App Router、服务器组件、数据获取、认证、部署等。关键词：Next.js, 全栈开发, React, App Router, 服务器组件, 数据获取, 认证, 部署, SEO, 性能优化。

本技能提供 Framer Motion 在 React 应用中的动画性能优化综合指南，包含 42 条规则覆盖 9 个优先级类别，帮助开发者优化包大小、防止重渲染、实现高效动画，提升前端性能。关键词：Framer Motion, React 动画, 性能优化, 前端开发, 动画指南, 性能最佳实践

这是一个用于优化React和Next.js应用程序性能的技能，基于Vercel的最佳实践指南。它提供57个规则，涵盖8个关键类别，如消除瀑布流、包大小优化和重渲染优化，帮助开发者在代码编写、审查和重构中提升应用性能。关键词：React, Next.js, 性能优化, 最佳实践, Vercel, 前端开发, 代码优化。

Next.js Server Components技能用于通过服务器端渲染React组件来优化Web应用性能，减少客户端JavaScript负载，提升SEO和用户体验。关键词包括Next.js、Server Components、服务器端渲染、性能优化、React、前端开发、SEO、Core Web Vitals、流式渲染、数据库访问。

原子设计模板技能用于在前端开发中，基于原子设计方法论创建可重用的页面布局模板。它涉及定义内容区域、实现响应式设计、组合组件以提高开发效率和一致性。关键词包括原子设计、模板、页面布局、前端开发、React、CSS、响应式设计、组件组合。

Zustand 高级模式是一种前端状态管理技术，专为React应用程序设计，提供瞬态更新、乐观更新、撤销重做、存储组合等高级功能，用于优化性能和管理复杂状态。关键词：Zustand、状态管理、React、前端开发、性能优化、瞬态更新、乐观更新。

提供React钩子、效果、引用和组件设计的模式。涵盖逃生口、反模式和正确的效果使用。在阅读或编写React组件（带有React导入的.tsx、.jsx文件）时必须使用。

本技能专注于移动优先的响应式设计模式，用于创建自适应、响应式用户界面。关键要素包括断点系统、流体布局、自适应组件和触摸友好模式，适用于前端开发，提升网页和应用的跨设备兼容性和用户体验。关键词：响应式设计、移动优先、断点、流体布局、自适应组件、前端开发、用户界面、移动端适配。

这是一个用于React和Next.js应用性能优化的技能，提供Vercel工程团队的45条最佳实践规则，涵盖从消除瀑布效应到包大小优化等关键领域，旨在指导代码重构和自动化生成。关键词包括：React, Next.js, 性能优化, 前端开发, 代码审查, 数据获取, 包优化, 渲染性能, JavaScript优化。