Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授 Web 应用性能优化中的代码分割技术，用于处理大型 JS 包导致的加载缓慢问题，通过拆分代码降低 FCP/LCP 等核心指标。
Install All Skills
npx skills add PatternsDev/skills --all -g -y
Skills in Collection (58)
Showing top 50 of 58 by quality score. Use the install list command or open individual skills for the rest.
教授 Web 应用性能优化中的代码分割技术，用于处理大型 JS 包导致的加载缓慢问题，通过拆分代码降低 FCP/LCP 等核心指标。
应用 JavaScript 包体积过大影响加载速度
需要优化首次内容绘制(FCP)或最大内容绘制(LCP)
针对特定路由或交互延迟加载代码
npx skills add PatternsDev/skills --skill bundle-splitting -g -y
教授命令模式，用于解耦操作调用与执行。适用于需要撤销/重做、队列操作或解耦场景。指导创建Command类封装动作，通过Manager统一执行，避免直接方法调用带来的耦合和重构风险。
需要实现撤销/重做功能
需要队列化操作
希望解耦调用者与执行者
npx skills add PatternsDev/skills --skill command-pattern -g -y
指导JavaScript压缩技术（Gzip/Brotli），优化网络传输和页面加载速度，适用于生产构建配置。
优化网络传输时间
配置服务器端压缩
减少JavaScript负载大小
npx skills add PatternsDev/skills --skill compression -g -y
指导在 React 中使用动态 import() 和 React.lazy 按需加载模块，以减少初始包体积并提升页面加载速度。适用于非首屏渲染的组件或重型库，通过 Suspense 提供加载态 fallback。
需要减少初始 JS 包大小
懒加载非首屏组件如模态框
优化前端应用性能
npx skills add PatternsDev/skills --skill dynamic-import -g -y
介绍工厂模式，指导使用工厂函数动态创建对象，避免直接使用new关键字。适用于需要集中化创建逻辑或基于配置生成对象的场景，提供JS代码示例及优缺点分析。
需要动态创建多个共享属性的对象
对象创建逻辑需根据环境或配置进行定制
希望避免使用new关键字
npx skills add PatternsDev/skills --skill factory-pattern -g -y
介绍享元模式，用于在创建大量相似对象时优化内存。通过分离共享与独有状态并复用实例，避免重复创建，适用于对象数量大且存在共同属性的场景。
需要减少内存占用
创建大量相似对象
对象具有共享内在属性
npx skills add PatternsDev/skills --skill flyweight-pattern -g -y
指导在用户交互（如点击、悬停）时动态加载非关键资源，以优化页面性能指标。
需要延迟加载第三方组件或重型库
优化首屏输入延迟和可交互时间
npx skills add PatternsDev/skills --skill import-on-interaction -g -y
基于 Intersection Observer API 实现可见性触发的按需加载，优化首屏性能。适用于滚动后展示的组件或图片，避免初始加载过重资源，提升 LCP 并减少布局偏移。
需要懒加载非首屏组件
优化图片加载性能
使用 IntersectionObserver 实现动态导入
npx skills add PatternsDev/skills --skill import-on-visibility -g -y
指导在内容为主的静态网站中采用岛屿架构模式，通过局部水合减少客户端 JS 体积，提升 SEO 和首屏加载速度。
构建以静态内容为主且仅需少量交互的网站
需要优化前端性能并减少传输的 JavaScript 体积
npx skills add PatternsDev/skills --skill islands-architecture -g -y
提供跨框架 JavaScript 运行时性能微优化模式，用于优化热点路径、循环及 DOM 操作。指导在已测量的关键路径中使用 Set/Map 替代数组查找以获取 O(1) 性能，避免滥用导致可读性下降。
代码性能剖析发现热点函数或紧循环
处理大规模数据集（1000+项）
高频事件处理优化
审查关键路径代码性能
npx skills add PatternsDev/skills --skill js-performance-patterns -g -y
指导优化前端资源加载顺序以提升 Core Web Vitals（FCP、LCP、FID），涉及关键资源调度与第三方脚本管理。
需要优化页面加载性能
调整 FCP/LCP/FID 指标
协调 JS/CSS/图片等资源加载
npx skills add PatternsDev/skills --skill loading-sequence -g -y
教授中介者模式，用于解决多组件间通信的复杂性与紧耦合问题。通过中心化协调器替代直接交互，支持中间件链式处理，降低系统复杂度并提升可维护性。
需要实现多个组件间的集中通信
构建中间件处理链
解决多对多通信导致的混乱
npx skills add PatternsDev/skills --skill mediator-pattern -g -y
教授 Mixin 设计模式，用于在不使用继承的情况下为多个类或对象添加可复用行为。指导使用 Object.assign 扩展原型，并提示在 React/Vue 中优先使用 Hooks/Composables 以避免原型污染和命名冲突。
需要向多个不共享祖先的类添加通用功能
讨论组合行为而非继承链的设计方案
涉及 JavaScript 原型扩展或混入模式的实现
npx skills add PatternsDev/skills --skill mixin-pattern -g -y
教授 JavaScript 模块模式，指导如何将代码组织为可复用、可维护的单元，利用封装实现公私边界分离，避免全局污染并支持树摇优化。
需要重构代码以提高可维护性
需要将功能拆分为独立模块
希望隐藏模块内部实现细节
npx skills add PatternsDev/skills --skill module-pattern -g -y
教授观察者模式，用于实现解耦的发布订阅行为。当系统需要多个部分对状态变更或事件做出反应时，通过该技能建立松散耦合的事件驱动通信机制。
需要通知多个组件关于状态变化
实现事件驱动的异步通信
构建发布订阅架构
npx skills add PatternsDev/skills --skill observer-pattern -g -y
指导如何在浏览器中实施资源预取策略，通过HTML标签或Webpack配置在空闲时加载未来可能需要的资源，以降低后续页面导航的感知加载时间并提升用户体验。
需要优化前端页面加载速度
预测用户即将访问的路由或资源
配置Webpack进行代码分割和预加载
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用<link rel=preload>优化前端性能，优先加载关键资源以改善LCP和TTI等指标。适用于字体、图片等关键资源发现较晚的场景，同时强调避免滥用导致带宽浪费。
需要优化页面加载性能
关键资源在加载流程中较晚被发现
希望提升LCP或TTI指标
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 模式，解决深层组件树数据共享问题。通过 Context 避免繁琐的 prop drilling，实现跨层级组件高效访问统一数据。
需要跨多层组件传递相同数据
prop drilling 导致代码难以维护
多个嵌套组件需要访问全局状态
npx skills add PatternsDev/skills --skill provider-pattern -g -y
教授JavaScript中Proxy模式，用于拦截对象操作以实现验证、日志记录、格式化或访问控制。指导创建带有get/set陷阱的代理对象，并强调避免在性能关键路径使用。
需要拦截属性访问或修改
需要对对象操作添加验证逻辑
需要实现访问控制或日志记录
npx skills add PatternsDev/skills --skill proxy-pattern -g -y
指导构建高性能渐进式Web应用，通过HTTP/2推送关键资源、快速渲染首屏、预缓存路由及按需懒加载，优化弱网和低端设备体验。
构建需要高性能的渐进式Web应用
优化弱网环境下的页面加载速度
针对低端设备进行前端性能优化
npx skills add PatternsDev/skills --skill prpl -g -y
指导在单页应用中实现基于路由的代码分割，通过结合React Suspense或loadable-components与react-router等库，按需懒加载组件，减少初始加载时间并优化性能。
需要优化单页应用首屏加载速度
应用包含多个路由且各路由代码差异较大
npx skills add PatternsDev/skills --skill route-based -g -y
介绍单例模式，用于确保类仅有一个实例并提供全局访问点。指导如何安全实现单例，管理全局状态与共享资源，并提示在React等场景下优先使用状态管理工具以避免测试困难。
需要全局唯一实例时
管理全局配置或共享资源
npx skills add PatternsDev/skills --skill singleton-pattern -g -y
指导在代码中使用ES2015静态import语法导入模块。适用于页面加载时需立即执行、对初始渲染关键的依赖，利用静态分析优化打包，但需注意会增加初始包体积。
需要导入页面加载时必需的模块
使用默认ES2015 import语法
希望利用静态分析和Tree Shaking优化
npx skills add PatternsDev/skills --skill static-import -g -y
提供优化第三方脚本（如分析、广告、小部件）加载的策略，以减少对页面加载时间和核心网页指标的影响。
第三方脚本导致页面加载缓慢
需要优化 Core Web Vitals
npx skills add PatternsDev/skills --skill third-party -g -y
指导在 JavaScript 构建中通过消除未使用代码来减小包体积。适用于模块包含无用导出、需优化加载性能的场景，基于 ES Modules 语法实现死代码剔除。
Bundle includes unused exports
Want to reduce final bundle size
Improving load performance
npx skills add PatternsDev/skills --skill tree-shaking -g -y
提供 View Transitions API 的使用指南，帮助开发者通过 document.startViewTransition 实现页面或 UI 状态间的平滑动画过渡，提升 Web 应用体验。
需要为页面导航添加平滑过渡动画
需要为 DOM 元素状态变化（如展开/折叠）添加动画效果
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授虚拟列表技术，通过仅渲染可见区域优化包含数百或数千项的大型数据集渲染性能，解决滚动卡顿和初始加载慢的问题。
渲染大型列表或表格导致滚动卡顿
大量数据造成初始渲染缓慢
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供Vite构建优化模式，涵盖避免Barrel文件、手动分块及依赖预打包配置，旨在减小包体积、提升构建与开发启动速度，改善Core Web Vitals指标。
配置Vite构建参数
分析并优化代码分割策略
解决Vite构建缓慢或包体积过大问题
迁移至Vite时的性能调优
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供在React中构建AI驱动界面的设计模式，涵盖聊天机器人、智能助手及流式UI开发。指导使用Vercel AI SDK集成LLM，处理状态管理、响应流式传输、输入防抖及错误处理等关键场景。
构建AI聊天界面
集成LLM到React应用
实现流式AI响应UI
npx skills add PatternsDev/skills --skill ai-ui-patterns -g -y
指导在React中构建客户端渲染(CSR)应用，适用于SEO非优先、高交互性的单页应用。提供使用场景判断、性能优化建议及基础代码结构示例。
构建高交互性React单页应用
开发内部工具或仪表盘
需要实时数据更新且无需SEO
npx skills add PatternsDev/skills --skill client-side-rendering -g -y
介绍React组合组件模式，通过Context API实现相关子组件（如Tabs、Dropdowns）间的隐式状态共享与协调，提供干净API并避免显式属性传递。
构建需要内部状态协调的复合UI组件
设计具有父子关系的组件树且需隐藏状态管理
npx skills add PatternsDev/skills --skill compound-pattern -g -y
教授React高阶组件(HOC)模式，用于在多个组件间复用逻辑（如认证、日志）。指导创建HOC函数增强行为，强调避免属性冲突和嵌套过深，并推荐在新代码中优先使用Hooks。
需要在多个组件间复用相同的逻辑
实现跨切面关注点如认证或数据获取
npx skills add PatternsDev/skills --skill hoc-pattern -g -y
教授 React Hooks 用于复用组件间有状态逻辑，指导提取表单、订阅等共享行为至自定义 Hook。
需要复用组件间的有状态逻辑
将类组件重构为函数组件
npx skills add PatternsDev/skills --skill hooks-pattern -g -y
指导在 Next.js 中使用增量静态再生 (ISR) 技术，通过 revalidate 或 on-demand 机制实现静态页面后台更新，避免全站点重建。适用于博客、电商等需定期更新但非实时的大规模网站场景。
需要更新静态页面内容但不想重新构建整个站点
Next.js 项目中配置 ISR 或增量静态生成
处理大量静态内容且需周期性数据刷新
npx skills add PatternsDev/skills --skill incremental-static-rendering -g -y
教授React中容器/展示组件模式，用于分离UI渲染与数据获取逻辑。旨在提升代码的可测试性、复用性及关注点分离，同时建议现代开发中优先考虑自定义Hooks以实现类似目标。
需要分离React组件的数据逻辑和视图层
希望提高组件的可测试性和复用性
重构大型React组件以优化架构
npx skills add PatternsDev/skills --skill presentational-container-pattern -g -y
指导在SSR应用中通过延迟非关键区域的JS加载和选择性水合，优化首屏渲染与交互性能。
需要提升页面交互时间(TTI)
处理SSR应用中的非关键组件
npx skills add PatternsDev/skills --skill progressive-hydration -g -y
提供现代 React 2026/2025 技术栈选型指南，涵盖框架（Next.js/Remix）、构建工具（Vite）、路由及状态管理方案，辅助开发者在新项目启动或现有项目现代化改造时做出正确技术决策。
选择 React 技术栈
启动新的 React 项目
React 项目现代化改造
npx skills add PatternsDev/skills --skill react-2026 -g -y
教授现代React组合模式，用于设计组件API、构建共享UI库或重构复杂组件。通过组合替代布尔属性，提升组件的可维护性、可扩展性和测试性。
设计组件API
构建共享UI库
重构高复杂度组件
npx skills add PatternsDev/skills --skill react-composition-2026 -g -y
提供React应用中的数据获取最佳实践，涵盖TanStack Query、SWR等库的使用。指导实现缓存、去重、乐观更新及并行加载，解决请求瀑布和冗余请求问题。
在React组件中添加数据获取逻辑
替换useEffect中的fetch调用
优化前端性能以消除请求瀑布
实现数据缓存或乐观更新
npx skills add PatternsDev/skills --skill react-data-fetching -g -y
提供 React 渲染性能优化模式，指导消除不必要的重渲染、优化记忆化及状态设计，适用于提升 UI 响应速度和诊断性能问题。
组件非预期重渲染
UI 交互卡顿
Profiler 显示浪费渲染
审查或重构 React 组件
npx skills add PatternsDev/skills --skill react-render-optimization -g -y
指导在 React 18+ 中结合流式 SSR 使用选择性水合，通过 Suspense 和 hydrateRoot 优先交互关键组件，避免慢组件阻塞页面。
需要优化 SSR 页面交互时间
解决慢组件阻塞整体水合问题
实现流式服务器端渲染
npx skills add PatternsDev/skills --skill react-selective-hydration -g -y
指导在 React 中使用 Server Components，实现零客户端 JS 包的服务端渲染。适用于仅需服务端数据访问且无需客户端交互的场景，旨在减少客户端体积并提升性能。
需要优化前端打包体积
构建不需要交互的服务端组件
使用 Next.js App Router 进行数据获取
npx skills add PatternsDev/skills --skill react-server-components -g -y
教授 React Render Props 模式，用于通过传递返回 JSX 的函数在组件间共享渲染逻辑。适用于需复用状态逻辑且避免 HOC 嵌套冲突的场景，建议现代开发优先使用 Hooks。
需要共享组件间的状态逻辑
避免高阶组件导致的命名冲突或深层嵌套
npx skills add PatternsDev/skills --skill render-props-pattern -g -y
指导React应用服务端渲染(SSR)实施，提升首屏加载速度与SEO。适用于内容型页面及需动态生成HTML场景，涵盖Next.js集成、流式SSR及性能优化策略。
需要提升页面SEO排名
追求更快的首屏内容绘制时间(FCP)
构建内容密集型Web应用
npx skills add PatternsDev/skills --skill server-side-rendering -g -y
指导使用静态生成（SSG）在构建时预渲染HTML，适用于内容不随请求变化的页面，如博客或产品页。通过CDN分发提升TTFB和性能，避免高动态或需认证的内容场景。
需要构建时预渲染HTML
追求最佳首字节时间TTFB
部署静态内容到CDN
npx skills add PatternsDev/skills --skill static-rendering -g -y
教授使用 React 18+ 进行流式服务端渲染，通过分块发送 HTML 提升首屏加载速度。指导结合 Suspense 边界处理部分加载，优化 TTFB 和 FCP，适用于大型页面渲染场景。
需要优化 SSR 的首屏渲染性能
实现流式 HTML 交付以加快 TTFB
配置 React 流式渲染 API
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
指导在Vue中使用异步组件优化性能，针对大体积或非首屏渲染的组件按需加载，提升应用响应速度。
需要优化大型Web应用的首屏加载速度
处理非初始渲染所需的重型UI组件如模态框
npx skills add PatternsDev/skills --skill async-components -g -y
教授 Vue 单文件组件的基础知识，涵盖模板、逻辑和样式。用于指导构建、结构化和复用 Vue UI 元素，是开发 Vue 应用的核心基础技能。
构建 Vue 单文件组件
理解 Vue 组件结构
学习 Vue Props 和事件传递
npx skills add PatternsDev/skills --skill components -g -y
指导使用Vue Composition API编写可复用的组合式函数，用于提取共享响应式状态、副作用及计算逻辑，提升代码组织性与复用性。
需要跨组件共享响应式状态或逻辑
从Options API迁移至Composition API
封装数据获取、事件监听等通用功能
npx skills add PatternsDev/skills --skill composables -g -y
