Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授 Web 性能优化中的代码分割技术，用于解决大型 JS 包导致的加载缓慢问题。通过拆分代码减少 FCP/LCP/TTI，提升首屏渲染速度和用户交互体验。
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/TTI，提升首屏渲染速度和用户交互体验。
应用 JavaScript 包体积过大影响加载速度
需要降低 FCP 或 LCP 指标
需要针对特定路由或交互延迟加载代码
npx skills add PatternsDev/skills --skill bundle-splitting -g -y
介绍命令模式，用于解耦操作调用者与执行者。适用于需要撤销/重做、队列操作或降低耦合的场景。通过封装命令对象替代直接方法调用，提升代码灵活性和可维护性。
需要实现撤销或重做功能
需要将操作排队延迟执行
希望解耦调用方与执行方
npx skills add PatternsDev/skills --skill command-pattern -g -y
教授JavaScript压缩技术（Gzip/Brotli），指导如何优化网络传输时间和配置服务器端压缩，以提升前端页面加载性能。
优化JavaScript包体积以加快页面加载
配置服务器或CDN端的静态/动态压缩
选择Brotli或Gzip算法进行资产压缩
npx skills add PatternsDev/skills --skill compression -g -y
教授在React中使用动态import()和React.lazy实现按需加载，以减少初始包体积并提升页面加载速度。适用于非首屏渲染的组件或重型库。
需要减少初始JS包大小
懒加载非首屏可见组件
优化前端首屏性能
npx skills add PatternsDev/skills --skill dynamic-import -g -y
介绍工厂模式，用于动态创建对象而避免使用 new 关键字，集中化创建逻辑。适用于需根据环境或配置生成共享属性对象，对比类构造函数以平衡灵活性与内存效率。
需要动态创建多个具有相同结构的对象
对象创建逻辑依赖于环境或特定配置
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。
优化首屏加载性能
延迟加载第三方嵌入组件
减少主线程阻塞
npx skills add PatternsDev/skills --skill import-on-interaction -g -y
指导使用 Intersection Observer API 或相关库实现基于可视区域的懒加载，优化首屏性能。适用于非首屏组件、图片及重型模块的动态导入，提供加载状态反馈，避免布局偏移和 LCP 延迟。
需要优化首屏加载速度
实现非首屏内容或图片的懒加载
动态导入重型组件
npx skills add PatternsDev/skills --skill import-on-visibility -g -y
指导在内容为主的静态网站中使用岛屿架构模式，通过部分水合技术隔离动态交互区域，减少客户端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
指导优化网页资源加载顺序以提升Core Web Vitals性能，通过协调JS、CSS、字体和图片的加载时序，改善FCP、LCP和FID指标。
需要优化页面加载性能
第三方脚本影响加载性能
调整关键资源加载顺序
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
教授观察者模式，用于实现解耦的发布订阅机制。适用于需通知多个组件响应状态变化或事件、构建事件驱动通信的场景。
需要解耦组件间的事件通知
实现发布订阅行为
npx skills add PatternsDev/skills --skill observer-pattern -g -y
指导在浏览器空闲时预加载用户即将需要的资源（如页面、脚本），以缩短后续导航的感知加载时间。适用于可预测资源需求的场景，避免浪费带宽或影响关键请求。
需要优化前端页面加载速度
预测用户下一步操作并提前加载资源
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用<link rel=preload>优化前端性能，提前加载字体、图片等关键资源以改善LCP和TTI指标。适用于关键资源发现较晚的场景，需注意避免过度预加载导致带宽浪费或阻塞首屏渲染。
需要优化页面加载性能
关键资源（如字体、Hero图片）在加载水线中较晚被发现
希望提升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和useContext实现跨组件树共享数据，优化代码结构。
需要避免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
教授PRPL模式以优化Web应用初始加载性能，适用于PWA开发或需提升低端设备及弱网环境下首屏渲染速度的场景。指导通过HTTP/2推送关键资源、快速渲染初始路由、预缓存常用路由及按需懒加载，降低服务器往返次数。
构建需要高性能的渐进式Web应用
优化网页在低端设备或慢速网络上的加载速度
改善首屏渲染时间
npx skills add PatternsDev/skills --skill prpl -g -y
针对单页应用，通过结合路由库与代码分割技术，按路由动态加载组件，减少初始加载时间。
需要优化单页应用首屏加载速度
不同路由对应不同的功能模块
npx skills add PatternsDev/skills --skill route-based -g -y
指导如何在应用中实现单例模式以管理全局状态和共享资源，强调确保唯一实例、防止意外修改及在特定场景下避免使用。
需要全局共享一个实例时
管理应用级配置或状态时
npx skills add PatternsDev/skills --skill singleton-pattern -g -y
指导使用ES2015静态导入语法加载模块依赖，适用于页面加载时需立即执行且利于静态分析与Tree Shaking的场景。
需要导入在页面加载时即需使用的代码模块
希望利用静态分析进行Tree Shaking优化
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 构建包大小。适用于使用 ES Modules 和 Webpack/Rollup 等打包工具时，减少未使用导出以提升加载性能的场景。
JavaScript 构建包包含未使用的模块导出
需要减小最终打包体积以提升应用加载速度
npx skills add PatternsDev/skills --skill tree-shaking -g -y
提供 View Transitions API 的使用指南，帮助开发者通过少量代码实现页面或 UI 状态切换时的平滑动画效果，提升 Web 应用的视觉体验。
需要为页面导航添加过渡动画
希望实现 DOM 变化的平滑视觉切换
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授列表虚拟化（窗口化）技术，用于在React中高效渲染数百或数千条数据的大列表。通过仅渲染可视区域内容，解决滚动卡顿和初始渲染慢的性能问题，提升用户体验。
渲染大型列表或表格时出现滚动卡顿
需要优化大量数据的初始渲染性能
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供Vite构建优化方案，涵盖代码分割、依赖管理及打包体积分析，旨在解决构建缓慢和包过大问题。
配置Vite构建
代码分割设置
管理依赖项
排查缓慢的Vite构建
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供构建AI驱动React界面的设计模式，涵盖聊天机器人、流式UI及智能助手开发。指导使用Vercel AI SDK集成LLM，实现状态管理、响应流式传输、输入防抖及错误处理等关键功能。
构建聊天机器人界面
实现LLM流式响应UI
开发AI智能助手前端
npx skills add PatternsDev/skills --skill ai-ui-patterns -g -y
教授React客户端渲染(CSR)模式，适用于对SEO无要求、需高交互性的单页应用。指导如何优化JS包大小、使用代码分割及懒加载以提升性能，并明确其不适用于SEO关键或内容型站点。
构建React单页应用
开发内部工具或仪表盘
需要高交互性UI且忽略SEO
npx skills add PatternsDev/skills --skill client-side-rendering -g -y
介绍React复合组件模式，用于构建共享隐式状态的相关组件（如Tabs、Dropdowns），通过Context API协调子组件，提供简洁API。
需要构建具有内部状态共享的复合UI组件
希望在不暴露显式Props的情况下协调多个相关组件
npx skills add PatternsDev/skills --skill compound-pattern -g -y
教授 React 高阶组件（HOC）模式，用于在多个组件间复用逻辑。指导如何创建 HOC 以处理认证、日志等横切关注点，并强调与 Hooks 的权衡及避免属性冲突。
需要在多个 React 组件中复用相同的逻辑
需要为组件添加横切关注点如认证或数据获取
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)技术，实现静态页面构建后的周期性更新，无需全量重建。适用于博客、电商等需定期更新数据的大型网站，解决SSG动态内容不足的问题。
需要更新静态页面内容而不重新构建整个站点
处理大型网站中频繁变动的数据展示
npx skills add PatternsDev/skills --skill incremental-static-rendering -g -y
教授React中展示/容器组件模式，用于分离UI渲染与数据逻辑，提升可测试性与复用性。适用于需要解耦业务逻辑和视图的场景，建议现代开发优先使用自定义Hooks。
重构React组件以分离关注点
提高组件的可测试性和复用性
优化大型组件的数据获取与UI展示结构
npx skills add PatternsDev/skills --skill presentational-container-pattern -g -y
指导在SSR应用中通过延迟非关键区域的JS加载和按需水合，提升首屏渲染速度并优化用户交互体验。
SSR应用性能优化
提升首次交互时间
npx skills add PatternsDev/skills --skill progressive-hydration -g -y
提供现代React 2026技术栈选型指南，涵盖框架、构建工具、路由及状态管理。适用于新项目启动或现有项目现代化改造时的架构决策参考。
开始新的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及Suspense的使用。指导实现缓存、去重、乐观更新及并行加载，解决请求瀑布流和冗余请求等性能问题。
在React项目中添加或优化组件的数据获取逻辑
将useEffect结合fetch替换为更规范的数据层方案
需要实现数据缓存、去重或乐观更新功能
调试因串行请求导致的加载性能瓶颈
npx skills add PatternsDev/skills --skill react-data-fetching -g -y
提供 React 渲染性能优化模式，用于减少不必要的重渲染、优化 memoization、改进状态设计及诊断性能问题。
组件过度重渲染
UI 交互卡顿
React Profiler 显示浪费渲染
构建高性能敏感功能
审查或重构 React 组件
npx skills add PatternsDev/skills --skill react-render-optimization -g -y
指导在 React 18+ 中结合流式 SSR 与选择性水合，利用 Suspense 和 hydrateRoot 优先交互关键组件，避免慢组件阻塞页面渲染，提升 TTI。
需要优化 SSR 页面交互速度
解决慢组件导致的水合阻塞问题
npx skills add PatternsDev/skills --skill react-selective-hydration -g -y
指导使用 React Server Components 实现零包体积服务端渲染，减少客户端 JS，适用于需服务端数据获取且无交互的场景。
需要优化前端打包体积
组件仅需服务端数据读取
npx skills add PatternsDev/skills --skill react-server-components -g -y
教授React中Render Props模式，用于通过传递返回JSX的函数在组件间共享渲染逻辑和状态。指导何时使用及优先采用Hooks替代。
需要共享带状态的组件逻辑
避免HOC命名冲突或深层嵌套
实现灵活的组件组合
npx skills add PatternsDev/skills --skill render-props-pattern -g -y
指导为 React 应用实现服务端渲染(SSR)，以优化首屏加载速度和 SEO。涵盖适用场景、Next.js 框架使用、React 18+ 流式渲染及与客户端水合结合的最佳实践。
需要提升页面首屏加载速度
需要改善搜索引擎优化效果
请求动态生成的 HTML 内容
npx skills add PatternsDev/skills --skill server-side-rendering -g -y
指导使用静态生成(SSG)技术，在构建时预渲染HTML以提升性能和缓存能力。适用于内容不随请求变化的页面，如博客、产品页等，通过CDN分发静态文件以优化TTFB和FCP指标。
需要提升页面加载速度和SEO性能
内容在构建时已知且无需实时个性化
希望利用CDN进行边缘缓存
npx skills add PatternsDev/skills --skill static-rendering -g -y
教授流式服务端渲染技术，通过分块传输HTML提升TTFB和FCP。适用于React应用，指导使用renderToPipeableStream与Suspense结合，优化大型页面加载性能，规避不支持流式的托管环境。
需要改善首屏加载速度
实现流式SSR
优化TTFB或FCP指标
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
教授Vue中异步组件加载技术，用于性能优化。适用于大型非首屏渲染组件按需加载场景，指导使用defineAsyncComponent及动态import实现代码分割与延迟加载。
需要优化Vue应用首屏加载速度
处理模态框等条件渲染的大型组件
npx skills add PatternsDev/skills --skill async-components -g -y
教授Vue单文件组件的基础知识，涵盖模板、逻辑和样式。指导如何构建、组织及复用UI元素，适用于开发任何Vue应用时的组件化结构搭建。
需要构建或重构Vue组件时
学习Vue单文件组件结构和数据传递机制时
npx skills add PatternsDev/skills --skill components -g -y
教授Vue组合式函数，用于通过Composition API封装和复用带状态的逻辑。适用于提取跨组件共享的响应式状态、副作用或计算逻辑，替代Options API以提升代码组织性和可维护性。
需要共享状态逻辑
提取可复用函数
npx skills add PatternsDev/skills --skill composables -g -y
