Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授前端构建优化技巧，指导使用 Webpack/Rollup 进行代码分割。适用于 JS 包过大导致加载慢、FCP/LCP 性能差或需按路由/交互懒加载的场景，旨在减少首屏渲染和交互等待时间。
安装全部 Skills
npx skills add PatternsDev/skills --all -g -y
集合内 Skills (58)
按质量分展示前 50 个（共 58 个），完整列表请用安装命令预览或逐个打开详情。
教授前端构建优化技巧，指导使用 Webpack/Rollup 进行代码分割。适用于 JS 包过大导致加载慢、FCP/LCP 性能差或需按路由/交互懒加载的场景，旨在减少首屏渲染和交互等待时间。
应用 JavaScript 包体积过大影响加载速度
需要降低 FCP 或 LCP 指标
针对特定路由或用户交互实现代码懒加载
npx skills add PatternsDev/skills --skill bundle-splitting -g -y
介绍命令模式，用于解耦操作调用与执行。适用于需要撤销/重做、队列操作或隔离调用者与执行者的场景。指导创建Command类封装动作，通过统一接口执行，避免直接方法调用的耦合。
需要实现撤销或重做功能
需要将操作放入队列延迟执行
希望解耦请求发起方与接收方
npx skills add PatternsDev/skills --skill command-pattern -g -y
提供JavaScript压缩技巧，指导使用Gzip和Brotli优化网络传输，降低页面加载时间。适用于生产环境构建配置及性能优化场景。
优化JavaScript网络传输速度
配置服务器端或CDN压缩
减少前端资源体积以提升加载性能
npx skills add PatternsDev/skills --skill compression -g -y
教授如何使用动态 import() 按需加载代码，结合 React.lazy 和 Suspense 实现组件懒加载，从而减少初始包体积并提升页面首屏加载速度。
需要优化前端初始加载性能
需要拆分大模块以减少 bundle size
实现非关键组件的延迟加载
npx skills add PatternsDev/skills --skill dynamic-import -g -y
介绍工厂模式，指导使用工厂函数动态创建对象，避免new关键字。适用于需集中创建逻辑或依赖配置的场景，提供JS示例及与类构造器的对比建议。
需要动态创建多个共享属性的对象
对象创建逻辑需根据环境或配置集中处理
npx skills add PatternsDev/skills --skill factory-pattern -g -y
讲解享元模式，用于在创建大量相似对象时优化内存。通过分离内外部状态和缓存共享实例来减少内存消耗，适用于对象数量大且存在共享属性的场景。
需要优化内存占用
创建大量相似对象
npx skills add PatternsDev/skills --skill flyweight-pattern -g -y
指导在用户交互（点击、悬停等）后按需懒加载非关键资源，以优化首屏性能。适用于第三方组件或重型模块，通过动态import()或React.lazy实现延迟加载，提升FID和TTI指标。
页面包含非立即需要的重型组件或第三方插件
需要优化首次输入延迟(FID)或可交互时间(TTI)
涉及点击、悬停等交互触发的资源加载
npx skills add PatternsDev/skills --skill import-on-interaction -g -y
基于 Intersection Observer API 实现可见性触发的懒加载，优化首屏性能。适用于非首屏组件或图片按需加载，减少初始请求并提升用户体验。
需要实现页面滚动后加载非首屏内容
对非关键的首屏以下图片或组件进行性能优化
npx skills add PatternsDev/skills --skill import-on-visibility -g -y
指导在内容为主的静态网站中应用岛屿架构模式，通过部分水合技术仅对少量交互区域加载 JavaScript，从而降低客户端 JS 体积，提升 SEO 和首屏加载速度。
构建以静态内容为主且仅需局部交互的网站
需要减少客户端 JavaScript 体积以提升性能
追求快速初始页面加载和良好 SEO
npx skills add PatternsDev/skills --skill islands-architecture -g -y
提供JavaScript运行时性能优化模式，适用于热点路径、循环、DOM操作及数据结构选择。指导在测量确认的瓶颈处使用Set/Map查找和批量DOM读写等微优化技巧。
性能分析发现热点函数或紧密循环
处理大规模数据集（1000+项）
优化高频事件回调如滚动或调整大小
审查关键路径代码的性能
npx skills add PatternsDev/skills --skill js-performance-patterns -g -y
指导通过优化关键资源（JS、CSS、图片等）的加载顺序来提升 Core Web Vitals 性能指标，如 FCP、LCP 和 FID。
优化页面加载性能
提升 Core Web Vitals 分数
协调第三方脚本加载
npx skills add PatternsDev/skills --skill loading-sequence -g -y
讲解中介者模式，用于解决多组件间直接耦合导致的复杂性。通过中央协调器简化通信，适用于中间件链实现等场景，帮助开发者降低系统依赖度并提升可维护性。
多个组件需要通信且直接耦合复杂
实现中间件链或请求转发逻辑
npx skills add PatternsDev/skills --skill mediator-pattern -g -y
介绍 Mixin 设计模式，用于在不使用继承的情况下向多个类或对象添加可复用的行为。指导通过 Object.assign 修改原型实现功能组合，并警示原型污染风险及 React Hooks 等替代方案。
需要向不共享祖先的类添加复用功能
避免创建深层继承链
代码重构中的行为提取
npx skills add PatternsDev/skills --skill mixin-pattern -g -y
指导在 JavaScript 中使用模块模式进行代码组织与封装，通过清晰的公开和私有边界提升可维护性。适用于需要拆分代码、避免全局污染及优化打包体积的场景。
JavaScript 代码结构优化
实现模块封装与复用
npx skills add PatternsDev/skills --skill module-pattern -g -y
教授观察者模式，用于实现事件驱动的发布订阅机制。当系统需要解耦多个组件以响应状态变化或事件时使用，提供ES6类实现及适用场景指导。
需要实现事件驱动通信
多个组件需响应同一状态变化
需要解耦发布者和订阅者
npx skills add PatternsDev/skills --skill observer-pattern -g -y
指导前端资源预加载策略，通过HTML、HTTP头或Webpack在空闲时提前获取后续页面所需资源，以降低感知加载时间并提升用户体验。
用户即将导航至特定路由
需要优化页面加载性能
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用HTML preload优化关键资源加载，提升LCP和TTI等核心指标。适用于字体、图片等资源发现较晚的场景，需避免滥用导致带宽浪费或延迟首屏渲染。
需要优先加载关键资源如字体、英雄图片或脚本
希望优化Core Web Vitals性能指标
npx skills add PatternsDev/skills --skill preload -g -y
介绍JavaScript原型模式，通过原型链高效共享方法和属性。指导使用ES6类和Object.create()创建对象实例，理解继承机制及内存优化。
需要创建大量同类对象并共享方法
学习或实现JavaScript原型继承
优化对象内存占用
npx skills add PatternsDev/skills --skill prototype-pattern -g -y
教授 React Provider 模式，用于解决深层组件树中数据共享和 Prop Drilling 问题。指导创建 Context、Provider 及自定义 Hook，优化跨层数据传递与渲染性能。
需要跨多层组件共享全局状态或配置
避免 Prop Drilling 导致的代码混乱
npx skills add PatternsDev/skills --skill provider-pattern -g -y
教授 JavaScript Proxy 模式，用于拦截对象属性访问与赋值。适用于需要验证、日志记录、格式化或访问控制的场景。通过 Handler 定义 get/set traps，利用 Reflect 简化操作，实现中间件式控制。
需要对对象属性进行拦截处理
需要添加数据验证逻辑
需要记录属性读写日志
npx skills add PatternsDev/skills --skill proxy-pattern -g -y
教授PRPL模式以优化Web应用初始加载性能，适用于PWA或低网速环境。指导通过HTTP/2推送关键资源、快速渲染首屏、预缓存常用路由及按需懒加载，提升用户体验。
构建渐进式Web应用(PWA)
优化Web应用首屏加载速度
针对低端设备或慢速网络进行性能调优
npx skills add PatternsDev/skills --skill prpl -g -y
指导在单页应用中通过路由实现代码分割，结合 React Suspense 或 loadable-components 按需加载组件，减少初始包体积并优化首屏加载性能。
需要优化前端应用的首屏加载时间
单页应用包含多个路由且各路由功能独立
npx skills add PatternsDev/skills --skill route-based -g -y
介绍单例模式，用于管理应用中唯一的共享实例。涵盖适用场景、避免滥用情况、JS/React实现指导及防修改措施，旨在协调全局状态与资源访问。
需要确保类仅有一个实例
管理全局配置或共享资源
npx skills add PatternsDev/skills --skill singleton-pattern -g -y
指导使用ES2015静态import语法导入加载时必需模块，适用于初始渲染关键代码，支持静态分析与Tree Shaking，需注意其会打包至初始bundle影响加载性能。
需要导入页面加载时立即使用的模块
编写前端组件的依赖引入逻辑
npx skills add PatternsDev/skills --skill static-import -g -y
提供缓解第三方脚本（如分析、广告、小部件）对页面加载速度和核心网页指标负面影响的策略。指导使用async/defer、预连接、懒加载及框架级优化等手段，在保留必要功能的同时提升前端性能。
第三方脚本导致页面加载变慢
需要优化Core Web Vitals指标
npx skills add PatternsDev/skills --skill third-party -g -y
指导在 JavaScript 构建中通过消除未使用的导出代码来减小包体积，提升加载性能。
需要减少 JavaScript 打包体积
优化前端应用加载性能
npx skills add PatternsDev/skills --skill tree-shaking -g -y
指导使用 View Transitions API 实现 DOM 变化的平滑动画，无需手动编写代码。适用于页面切换或 UI 状态更新时的视觉过渡效果优化。
需要为页面导航添加平滑过渡动画
希望在不写复杂动画代码的情况下实现 UI 状态切换效果
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授列表虚拟化（窗口化）技术，用于解决渲染大型数据集时的滚动卡顿和初始加载慢问题。指导在React中使用react-window等库仅渲染可视区域内容，提升性能。
渲染包含数百或数千项的大型列表或表格时出现滚动卡顿
需要优化长列表的初始渲染时间
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供Vite构建优化方案，涵盖代码分割、依赖管理及打包体积分析。用于解决构建缓慢、包过大问题，提升核心Web指标。
配置Vite构建参数
分析并减小打包体积
排查Vite构建速度慢
迁移至Vite
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供在React中构建AI驱动界面（如聊天机器人、流式UI）的设计模式与最佳实践，涵盖Vercel AI SDK集成、状态管理、流式响应及错误处理。
构建基于LLM的聊天或对话式界面
在React应用中集成AI服务并实现流式输出
npx skills add PatternsDev/skills --skill ai-ui-patterns -g -y
指导构建基于 React 的客户端渲染应用，适用于高交互、低 SEO 优先场景。提供结构示例、性能优化建议及适用性判断标准。
构建 React SPA
开发内部工具或仪表盘
需要高用户交互且忽略 SEO
npx skills add PatternsDev/skills --skill client-side-rendering -g -y
教授React复合组件模式，用于构建共享隐式状态的相关组件（如下拉菜单、选项卡），通过Context API协调子组件，无需显式传递props。
需要构建具有内部状态协调的子组件
希望提供干净的组件API并隐藏状态管理
npx skills add PatternsDev/skills --skill compound-pattern -g -y
教授高阶组件模式以实现逻辑复用，适用于跨切面关注点如认证、日志或数据获取。指导创建增强组件的函数，避免属性冲突，并建议在现代React中优先使用Hooks。
需要在多个组件间共享相同的未定制行为
需要为组件添加跨切面逻辑如认证或数据获取
npx skills add PatternsDev/skills --skill hoc-pattern -g -y
教授React Hooks用法，指导将表单处理、副作用等状态逻辑提取为可复用的自定义Hook。替代类组件，实现更简洁、可组合的函数式组件代码。
需要复用组件间共享的状态逻辑
将类组件重构为函数组件
创建自定义Hook封装业务逻辑
npx skills add PatternsDev/skills --skill hooks-pattern -g -y
指导在Next.js中使用ISR技术，实现静态页面构建后的增量更新。适用于博客、电商等需定期更新数据但无需全量重建的大规模网站场景。
需要更新静态页面内容
避免全站点重新构建
处理大型网站的数据周期性更新
npx skills add PatternsDev/skills --skill incremental-static-rendering -g -y
教授React中容器/展示组件模式，用于分离UI渲染与数据获取及业务逻辑。旨在提升代码的可测试性、复用性及关注点分离，指导何时使用或避免该模式，并推荐现代React中优先使用自定义Hooks。
需要分离UI与逻辑时
希望提高组件可测试性或复用性时
npx skills add PatternsDev/skills --skill presentational-container-pattern -g -y
教授渐进式水合技术，用于SSR应用。通过延迟非关键区域的JS加载和交互初始化，减少首屏JS体积，优化Time to Interactive指标，提升用户体验。
SSR应用性能优化
降低首屏JavaScript体积
改善页面交互响应时间
npx skills add PatternsDev/skills --skill progressive-hydration -g -y
提供2026现代React技术栈选型指南，涵盖框架、构建工具、路由及状态管理。适用于新项目启动或现有项目现代化改造时的技术决策参考。
开始新的React项目
使用现代框架或工具对现有React项目进行现代化改造
在多种React技术栈选项中进行评估和选择
npx skills add PatternsDev/skills --skill react-2026 -g -y
教授现代React组合模式，用于设计组件API、构建共享UI库或重构高耦合组件。核心原则是组合优于配置，通过替换布尔参数和上下文实现灵活可维护的组件架构。
设计组件API
构建共享UI库
重构prop繁重的组件
审查组件架构
npx skills add PatternsDev/skills --skill react-composition-2026 -g -y
教授 React 中现代数据获取模式，涵盖 TanStack Query、SWR 及 Suspense。用于实现缓存、去重、乐观更新及并行加载，解决请求瀑布流和冗余请求等性能问题。
在 React 组件中添加数据获取逻辑
优化前端应用的性能瓶颈如请求瀑布流
重构使用 useEffect 进行 fetch 的代码
npx skills add PatternsDev/skills --skill react-data-fetching -g -y
提供React渲染性能优化模式，用于减少不必要的重渲染、优化记忆化和状态设计。适用于组件性能诊断、重构及代码审查场景。
组件异常重渲染
UI交互卡顿
性能分析发现浪费渲染
构建高性能界面
React代码重构与审查
npx skills add PatternsDev/skills --skill react-render-optimization -g -y
指导在 React 18+ 中结合流式 SSR 使用选择性水合，通过 Suspense 和 hydrateRoot 优先交互关键组件，避免慢组件阻塞页面，提升 TTI。
需要优化 React SSR 页面交互延迟
解决数据获取组件阻塞其他组件水合的问题
npx skills add PatternsDev/skills --skill react-selective-hydration -g -y
指导在 React 中使用 Server Components，通过服务端渲染数据获取和非交互 UI 来消除客户端 JavaScript 包体积。适用于 Next.js 13+ App Router，旨在优化性能并实现零 JS 成本的服务端渲染。
需要减少客户端 JavaScript 包大小
组件仅需服务端数据访问且无客户端交互
npx skills add PatternsDev/skills --skill react-server-components -g -y
教授 React Render Props 模式，用于通过传递返回 JSX 的函数来共享组件间的渲染逻辑和状态。适用于需要灵活组合组件且避免 HOC 命名冲突的场景，同时指导在可能时优先使用自定义 Hooks。
需要在不同组件间共享状态ful逻辑
使用 HOC 导致命名冲突或嵌套过深
需要灵活组合组件渲染逻辑
npx skills add PatternsDev/skills --skill render-props-pattern -g -y
教授 React 应用的服务端渲染 (SSR) 技术，旨在提升首屏加载速度、优化 SEO 及实现动态 HTML 生成。涵盖适用场景、Next.js 集成、流式 SSR 及性能优化指南。
需要提升页面 SEO 排名
追求更快的首屏加载时间
配置 React 服务端渲染架构
实现动态每请求 HTML 生成
npx skills add PatternsDev/skills --skill server-side-rendering -g -y
指导使用静态生成（SSG）在构建时预渲染HTML，适用于内容不随请求变化的页面，以提升TTFB、FCP和TTI性能。
需要优化首屏加载速度
构建静态内容如博客或产品页
npx skills add PatternsDev/skills --skill static-rendering -g -y
指导使用React流式服务端渲染优化首屏加载，通过分块发送HTML提升TTFB和FCP性能。
需要优化SSR首屏加载速度
实现流式HTML传输以提升性能
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
指导在Vue中使用异步组件进行性能优化，适用于非首屏渲染的重型组件按需加载场景。
需要优化大型Web应用的首屏加载速度
处理模态框等条件渲染的非核心UI组件
npx skills add PatternsDev/skills --skill async-components -g -y
教授 Vue 组件基础，涵盖单文件结构、响应式 API 及父子通信，指导构建可复用 UI 模块。
构建 Vue 应用
设计组件结构
npx skills add PatternsDev/skills --skill components -g -y
指导使用Vue Composition API编写可复用的组合式函数，提取共享响应式状态、副作用及计算逻辑，替代Options API以提升代码组织性、复用性及TypeScript支持。
需要跨组件共享响应式状态或逻辑
将数据获取、事件监听等逻辑封装为可复用函数
重构Vue组件以使用Composition API
npx skills add PatternsDev/skills --skill composables -g -y
