Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授 Web 性能优化中的代码分割技术，指导使用 Webpack/Rollup 将大型 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 性能优化中的代码分割技术，指导使用 Webpack/Rollup 将大型 JS 包拆分为多个小包，以减少 FCP/LCP/TTI，提升首屏加载速度和用户体验。
应用 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），指导在服务器或 CDN 层启用压缩以优化网络传输和页面加载速度，提升前端性能。
需要减少 JavaScript 包大小以加快页面加载
配置生产环境的服务器端压缩
npx skills add PatternsDev/skills --skill compression -g -y
教授在 React 中使用 dynamic import() 和 React.lazy 实现按需加载模块，以减少初始包体积并提升页面加载速度。适用于非首屏关键组件或重型库的懒加载场景。
需要减少初始 JS 包体积
非首屏渲染的关键组件懒加载
模态框或重型库按需引入
npx skills add PatternsDev/skills --skill dynamic-import -g -y
介绍工厂模式，通过工厂函数动态创建对象，避免使用new关键字。适用于需集中化创建逻辑或依赖环境配置的场景，提供ES6箭头函数示例及与类构造器的对比。
需要动态创建多个具有相同属性的对象
对象创建逻辑需要根据环境或配置进行条件判断
希望将对象创建逻辑集中管理而非分散在各处
npx skills add PatternsDev/skills --skill factory-pattern -g -y
教授享元模式，用于在创建大量相似对象时优化内存消耗。指导分离内外状态，使用Map缓存复用共享实例，适用于对象数量巨大且存在大量共享属性的场景。
需要优化大量相似对象的内存占用
应用中存在大量具有相同内在属性的对象
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和首屏加载速度。
构建以静态内容为主的网站（如博客、新闻站）
需要降低客户端JavaScript传输量以提升性能
希望平衡SEO与部分页面交互需求
npx skills add PatternsDev/skills --skill islands-architecture -g -y
提供JavaScript运行时性能优化微模式，指导在热点路径、循环及DOM操作中通过数据结构选择和批量处理提升性能。
优化高频执行代码或热点路径
处理大规模数据集的性能问题
审查代码中的性能瓶颈
npx skills add PatternsDev/skills --skill js-performance-patterns -g -y
指导通过优化关键资源加载顺序提升Core Web Vitals性能，涵盖FCP、LCP等指标优化策略。
优化页面加载性能
改善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 模块模式，指导如何组织代码以实现复用、封装及公私边界清晰。适用于构建可维护结构、避免全局污染及优化打包体积的场景。
需要组织代码为可复用单元
希望保持变量私有以避免命名冲突
需要启用 tree-shaking 减少包体积
npx skills add PatternsDev/skills --skill module-pattern -g -y
教授观察者模式，用于实现解耦的发布订阅机制。适用于多组件响应状态变化或事件驱动场景，提供ES6类实现及性能注意事项。
需要通知多个部分关于状态变更
实现事件驱动的异步通信
构建松耦合的发布订阅系统
npx skills add PatternsDev/skills --skill observer-pattern -g -y
教授浏览器资源预取策略，通过在空闲时加载后续可能需要的资源来减少感知加载时间。适用于可预测用户导航或资源需求的场景，需避免浪费带宽。
需要优化页面间导航速度
预测用户即将访问的页面或组件
配置Webpack或HTML进行资源预加载
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用 HTML Preload 标签提前加载关键资源（如字体、图片、脚本），以优化 Core 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、使用Provider和useContext hook，以及封装自定义Hook以优化状态管理。
需要跨多层组件共享数据
prop drilling导致代码难以维护
npx skills add PatternsDev/skills --skill provider-pattern -g -y
教授 JavaScript 中 Proxy 模式的使用，通过拦截对象属性访问和赋值来实现验证、日志记录、格式化及访问控制。
需要拦截对象属性读写
需要对属性访问添加验证或日志
npx skills add PatternsDev/skills --skill proxy-pattern -g -y
指导构建高性能渐进式Web应用，通过HTTP/2推送关键资源、快速渲染首屏、预缓存常用路由及按需懒加载，优化弱网和低端设备体验。
构建需要高初始加载性能的应用
优化弱网环境下的网页加载速度
实现渐进式Web应用(PWA)的渲染路径优化
npx skills add PatternsDev/skills --skill prpl -g -y
教授单页应用的路由级代码分割技术，通过结合React Suspense或路由库实现组件按需加载，减少初始包体积并优化首屏性能。
需要优化SPA首屏加载速度
按路由拆分代码以降低内存占用
npx skills add PatternsDev/skills --skill route-based -g -y
指导如何在代码中实现单例模式，确保类仅有一个实例并全局共享。涵盖使用场景、禁止场景及具体实施指令，旨在管理全局状态和共享资源。
需要确保类只有一个实例
管理全局配置或共享资源
npx skills add PatternsDev/skills --skill singleton-pattern -g -y
教授 ES2015 静态导入语法，指导在页面加载时需立即使用的模块引入。适用于需静态分析和树摇优化的场景，注意其会增加初始包体积。
需要静态分析代码依赖
模块需在页面加载时立即执行
优化前端打包体积与性能
npx skills add PatternsDev/skills --skill static-import -g -y
提供缓解第三方脚本（如分析、广告）对页面加载速度和核心网页指标负面影响的策略，包括异步加载、预连接及懒加载等优化手段。
第三方脚本导致页面加载变慢
需要优化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，用于在不编写手动动画代码的情况下实现页面或 UI 状态切换的平滑过渡。适用于创建精致的 Web 应用导航体验，通过 document.startViewTransition 和 CSS view-transition-name 控制 DOM 变化动画。
需要为页面或组件切换添加平滑动画效果
希望使用原生 View Transitions API 替代手动 CSS/JS 动画
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授列表虚拟化技术，用于高效渲染包含数百或数千项的大型数据集，解决滚动卡顿和初始渲染慢的问题。适用于 React 等前端框架中的长列表优化。
渲染大型列表或表格导致性能问题
需要优化长列表的滚动流畅度
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供Vite+React项目的构建优化方案，涵盖避免Barrel文件、手动代码分割及依赖管理，旨在减小包体积、提升构建速度与性能。
配置Vite构建参数
分析并优化打包体积
解决构建缓慢问题
迁移至Vite架构
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供在React中构建AI驱动界面（如聊天机器人、智能助手）的设计模式，涵盖流式响应、提示管理和错误处理等最佳实践。
构建AI聊天界面
集成LLM到React应用
实现流式AI响应
npx skills add PatternsDev/skills --skill ai-ui-patterns -g -y
指导在React应用中采用客户端渲染(CSR)策略，适用于高交互性且无需SEO的内部工具或单页应用。提供性能优化、代码分割及服务工作者等最佳实践。
构建React单页应用
开发内部仪表盘
需要高用户交互性的前端项目
npx skills add PatternsDev/skills --skill client-side-rendering -g -y
教授复合组件模式，用于构建共享隐式状态的相关组件（如选项卡、下拉菜单），通过 React Context API 协调子组件交互，避免显式属性传递。
需要构建具有内部状态共享的复合 UI 组件
希望在不暴露内部状态的情况下提供简洁的组件 API
npx skills add PatternsDev/skills --skill compound-pattern -g -y
指导使用高阶组件(HOC)模式实现跨组件逻辑复用，如认证、日志和数据获取。说明适用场景及与Hooks的对比，提供创建HOC的指令和避免属性冲突的最佳实践。
需要在多个React组件中复用相同逻辑
实现跨切面关注点如认证或数据获取
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渲染逻辑时
希望提高组件的可测试性和复用性时
npx skills add PatternsDev/skills --skill presentational-container-pattern -g -y
指导在SSR应用中通过渐进式水合优化性能，针对非关键区域延迟JS加载与交互初始化，提升首次交互时间。
需要优化SSR应用的首次交互时间(FCP/TTI)
处理非关键区域的JavaScript延迟加载
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，提升组件的可维护性与扩展性。
设计组件API
构建共享UI库
重构prop繁多的组件
npx skills add PatternsDev/skills --skill react-composition-2026 -g -y
提供React现代数据获取模式，涵盖TanStack Query、SWR及Suspense。用于实现缓存、去重、乐观更新和并行加载，解决请求瀑布流与冗余请求等性能问题。
React组件数据获取
优化请求瀑布流
实现数据缓存与去重
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边界优先交互组件，避免慢组件阻塞页面，提升首屏交互速度。
需要优化React SSR页面性能
流式渲染配置
选择性水合实现
npx skills add PatternsDev/skills --skill react-selective-hydration -g -y
指导在React中正确使用Server Components，通过服务端渲染减少客户端JS体积，适用于无需交互的数据获取场景，避免用于需状态或浏览器API的组件。
需要优化前端性能并减小打包体积
实现基于Next.js App Router的服务端数据获取与渲染
npx skills add PatternsDev/skills --skill react-server-components -g -y
教授React中Render Props模式，用于通过传递返回JSX的函数实现组件间灵活复用渲染逻辑和共享状态。
需要共享组件间的渲染逻辑
高阶组件导致命名冲突或深层嵌套
npx skills add PatternsDev/skills --skill render-props-pattern -g -y
指导 React 应用使用服务端渲染（SSR）以提升首屏加载速度和 SEO，涵盖适用场景、Next.js 框架实践及流式 SSR 优化策略。
需要提升 SEO 排名
追求更快的首屏加载速度
实现动态 HTML 生成
npx skills add PatternsDev/skills --skill server-side-rendering -g -y
指导使用静态生成（SSG）技术，在构建时预渲染HTML以提升性能与缓存效率。适用于内容不随请求变化的页面，如博客、产品页等，避免高TTFB和JS加载延迟。
需要提升页面首屏加载速度
内容为静态或变化频率低
希望利用CDN进行边缘缓存
npx skills add PatternsDev/skills --skill static-rendering -g -y
教授如何使用流式服务端渲染优化首屏加载，通过分块发送HTML提升TTFB和FCP。适用于大型页面性能优化场景。
需要改善首屏渲染速度
处理大型页面的SSR性能问题
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
指导在Vue中使用异步组件优化性能，适用于大体积且非首屏渲染的组件。通过按需加载减少初始包大小，提升页面响应速度与用户体验。
需要优化大型Web应用的首屏加载性能
处理模态框、对话框等非即时显示的重型UI组件
npx skills add PatternsDev/skills --skill async-components -g -y
教授Vue单文件组件的基础知识，涵盖模板、逻辑与样式结构。指导如何构建、组合和复用UI元素，包括Props传参和事件emit等核心概念，适用于开发任何Vue应用时的组件化设计。
构建Vue应用时
需要创建或结构化Vue组件时
理解组件嵌套与复用机制时
npx skills add PatternsDev/skills --skill components -g -y
教授 Vue Composition API 中 Composables 的使用，用于提取和复用跨组件的响应式状态、副作用及计算逻辑，替代 Options API 以提升代码组织性和可维护性。
需要提取共享的响应式状态
多个组件共用侧边效应或计算逻辑
使用 Composition API 重构 Vue 组件
npx skills add PatternsDev/skills --skill composables -g -y
