Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授 Web 性能优化的代码分割技术，用于解决大型 JavaScript 包导致的加载缓慢问题。通过拆分代码减少 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 性能优化的代码分割技术，用于解决大型 JavaScript 包导致的加载缓慢问题。通过拆分代码减少 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压缩，以优化网络传输、减小包体积并提升页面加载速度。涵盖服务器配置、构建插件及与代码分割等策略的权衡。
优化前端性能
配置CDN或服务器压缩
减小JS文件体积
npx skills add PatternsDev/skills --skill compression -g -y
指导在React中使用动态导入和React.lazy优化代码分割，按需加载非首屏模块以减小初始包体积并提升页面加载速度。
需要减少初始打包体积
实现组件按需加载
优化首屏渲染性能
npx skills add PatternsDev/skills --skill dynamic-import -g -y
介绍工厂模式，用于通过函数动态创建对象，避免使用new关键字。适用于需集中化创建逻辑、多对象共享属性或依赖配置的场景，提供ES6箭头函数示例及优缺点分析。
需要动态创建多个相似对象
对象创建逻辑需根据环境或配置变化
希望避免使用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 或相关库实现基于可见性的懒加载，针对视口下方组件延迟导入以优化初始加载性能，并提供加载回退方案。
需要实现图片懒加载
需要延迟加载非首屏重型组件
npx skills add PatternsDev/skills --skill import-on-visibility -g -y
指导在内容为主、仅需局部交互的静态网站中采用岛屿架构，通过分离动静区域并独立水合组件，减少客户端JS体积，提升SEO与首屏加载性能。
构建以静态内容为主的网站如博客或新闻站
需要优化SEO和首屏加载速度
希望减少客户端JavaScript传输量
npx skills add PatternsDev/skills --skill islands-architecture -g -y
提供框架无关的 JavaScript 运行时性能优化模式，适用于热点路径、循环、DOM 操作及数据结构选择，旨在提升高频事件处理和大数据集处理的执行效率。
分析并优化代码中的热点函数或紧循环
处理包含大量数据项的数据集
优化高频 DOM 操作以消除布局抖动
审查关键路径上的性能瓶颈
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 设计模式，用于在不使用继承的情况下为多个类或对象添加可复用的行为。通过修改原型实现功能组合，适用于需要共享行为但无共同祖先的场景。
需要向多个类添加相同功能
避免深层继承链
代码复用需求
npx skills add PatternsDev/skills --skill mixin-pattern -g -y
指导在 JavaScript 中如何使用 ES2015 模块模式进行代码组织与封装，通过 import/export 实现模块化、私有作用域及按需加载，提升代码可维护性并减少命名冲突。
需要拆分和重组 JavaScript 代码结构
希望实现模块内的数据封装和私有变量保护
优化前端构建以支持 tree-shaking
npx skills add PatternsDev/skills --skill module-pattern -g -y
教授观察者模式，用于实现解耦的发布/订阅行为。当系统多个部分需对状态变化或事件做出反应时，提供事件驱动通信方案，包含使用场景、代码示例及注意事项。
需要解耦的事件驱动通信
多组件响应状态变化
实现发布订阅机制
npx skills add PatternsDev/skills --skill observer-pattern -g -y
指导如何在浏览器中通过HTML、HTTP头或Webpack实现资源预取，以预测用户行为并在空闲时加载后续页面或组件资源，从而降低感知加载时间并提升用户体验。
需要优化前端页面加载速度
配置Webpack进行模块预取
减少用户导航时的等待延迟
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用 link rel=preload 提前加载关键资源（如字体、图片），优化核心 Web Vitals 指标。适用于资源发现晚的场景，需权衡避免浪费带宽或延迟首屏渲染。
需要提升 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 模式，用于解决多层组件间数据共享的 prop drilling 问题。指导通过 Context 和自定义 Hook 高效传递主题、认证等全局状态，优化组件树结构。
需要跨多层组件共享全局状态
prop drilling 导致代码难以维护
实现主题或认证上下文
npx skills add PatternsDev/skills --skill provider-pattern -g -y
教授 JavaScript Proxy 模式，用于拦截对象属性访问和赋值。适用于需要添加验证、日志、格式化或访问控制的场景，通过 handler 实现 get/set 陷阱以增强对目标对象的控制。
需要对对象属性访问进行拦截
需要在属性读写时添加验证逻辑
需要记录对象属性变更的日志
需要实现访问控制或权限检查
npx skills add PatternsDev/skills --skill proxy-pattern -g -y
指导构建高性能渐进式Web应用，通过HTTP/2推送关键资源、快速渲染首屏、预缓存路由及按需懒加载，优化低端设备和弱网环境下的初始加载性能。
构建需要高性能的渐进式Web应用
优化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语法导入模块，适用于加载时必需且利于静态分析和树摇的场景。强调其作为默认机制，需权衡初始包体积与加载性能，必要时切换为动态导入。
需要立即加载的关键模块导入
优化前端应用初始渲染性能
npx skills add PatternsDev/skills --skill static-import -g -y
指导如何优化第三方脚本（如分析、广告）对页面加载速度和 Core Web Vitals 的影响，提供 async/defer、预连接、懒加载等性能优化策略。
第三方脚本导致页面加载变慢
需要优化 Core Web Vitals 指标
集成分析、广告或嵌入组件
npx skills add PatternsDev/skills --skill third-party -g -y
教授 JavaScript 包中死代码消除的 Tree Shaking 技术，通过优化 ES Modules 导入和配置减少构建产物体积，提升应用加载性能。
JavaScript 构建包包含未使用的导出
需要减小最终构建包大小
npx skills add PatternsDev/skills --skill tree-shaking -g -y
教授 View Transitions API，用于在页面或 UI 状态切换时实现平滑的 DOM 动画过渡，无需手动编写复杂动画代码。
需要实现页面或组件间的平滑视觉过渡
希望提升 Web 应用的导航体验
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授列表虚拟化（窗口化）技术，用于优化包含数百或数千项的大型数据集渲染，解决滚动卡顿和初始加载慢的问题。
渲染大型列表或表格导致性能问题
需要减少初始渲染时间
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供 Vite + React 项目的构建优化模式，解决打包体积过大和构建缓慢问题。涵盖避免 Barrel 文件导入、手动代码分割及依赖管理，利用 esbuild 和 Rollup 架构提升性能。
配置 Vite 构建
代码分割设置
依赖管理
排查 Vite 构建缓慢
分析打包体积
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供构建AI驱动React界面的设计模式，涵盖聊天机器人、智能助手及流式UI开发。指导使用Vercel AI SDK实现对话状态管理、响应流式传输、输入防抖及错误处理，适用于集成OpenAI等LLM服务的场景。
构建基于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协调子组件状态，提供清晰API。
需要构建具有内部状态协调的UI组件组合
希望在不暴露内部状态的情况下实现组件间通信
npx skills add PatternsDev/skills --skill compound-pattern -g -y
教授 React 高阶组件(HOC)模式，用于在多个组件间复用认证、日志或数据获取等横切关注点逻辑。指导如何创建增强行为的函数，并对比 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)，用于在不重建整个站点的情况下更新静态页面内容。适用于博客、电商等需要定期更新数据的大型网站，解决SSS的局限性。
需要更新静态页面但不想全量重建
大型网站内容定期变更
Next.js项目中配置ISR
npx skills add PatternsDev/skills --skill incremental-static-rendering -g -y
教授 React 中容器/展示组件模式，用于分离视图渲染与数据获取及业务逻辑，提升代码可测试性与复用性。适用于需要清晰关注点分离的场景。
需要分离 UI 渲染与数据逻辑
提高组件的可测试性和复用性
npx skills add PatternsDev/skills --skill presentational-container-pattern -g -y
指导在SSR应用中通过渐进式水合优化性能，延迟非关键部分的JS加载与渲染，提升首次交互时间。
SSR应用性能优化
提升Time To Interactive
前端渲染策略调整
npx skills add PatternsDev/skills --skill progressive-hydration -g -y
提供现代React 2026技术栈选型指南，涵盖框架、构建工具、路由及状态管理，适用于新项目启动或现有项目现代化改造。
开始新的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 优先交互关键组件，避免慢组件阻塞页面。
需要优化 SSR 页面首屏交互时间
解决数据请求组件阻塞整体水合的问题
npx skills add PatternsDev/skills --skill react-selective-hydration -g -y
指导在React中正确使用Server Components，通过服务端渲染数据获取和非交互UI来减少客户端JS体积，提升性能。明确适用场景及与Client Components的边界。
需要优化前端包大小
构建非交互式的数据展示组件
使用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 等框架，结合流式渲染与客户端水合，适用于内容密集型页面。
需要提升网页 SEO 排名
要求更快的首屏加载时间
实现基于请求的动态 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 18+ 的流式服务端渲染技术，通过分块发送 HTML 提升首屏加载速度。指导结合 Suspense 边界和特定 API 实现渐进式内容交付，优化 TTFB 和 FCP。
需要改善 SSR 首屏性能
配置 React 流式渲染
处理大型页面加载延迟
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
指导在 Vue 中使用异步组件优化性能，适用于非首屏渲染的大型组件按需加载场景。
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 迁移至 Composition API
封装数据获取或事件监听
npx skills add PatternsDev/skills --skill composables -g -y
