Agent Skills
› PatternsDev/skills
PatternsDev/skills
GitHub教授 Web 应用打包拆分技术，用于优化 JavaScript 体积和加载性能。适用于处理大型 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 应用打包拆分技术，用于优化 JavaScript 体积和加载性能。适用于处理大型 JS 包、降低 FCP/LCP 指标或按需加载特定路由/交互代码的场景。
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体积以提升页面加载性能。
优化JavaScript包大小
配置服务器端压缩
提升网页加载速度
npx skills add PatternsDev/skills --skill compression -g -y
指导使用 React.lazy 和 Suspense 实现动态导入，按需加载非首屏组件（如 EmojiPicker），以减小初始包体积、提升页面加载速度和用户体验。
需要减少应用初始加载时间
模块仅在用户交互时触发加载
优化首屏渲染性能
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
指导在用户交互（点击、悬停）时动态加载非关键资源，以优化页面性能指标如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 体积，平衡 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性能，涉及FCP、LCP等指标优化，包括CSS内联、脚本异步及图片懒加载策略。
优化页面加载性能
调整资源加载顺序
解决第三方脚本影响
npx skills add PatternsDev/skills --skill loading-sequence -g -y
教授中介者模式，用于解决多组件间通信的复杂性与紧耦合问题。通过中心点协调请求转发，实现解耦，适用于中间件链等场景。
需要简化多组件间直接通信的复杂度
实现中间件链或中央协调逻辑
npx skills add PatternsDev/skills --skill mediator-pattern -g -y
介绍 Mixin 模式，用于在不使用继承的情况下向多个对象或类添加可复用行为。涵盖适用场景、禁用场景及使用 Object.assign 的实现细节与注意事项。
需要跨类复用功能但避免继承链
向现有类动态添加方法或属性
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
教授资源预加载策略，用于在空闲时预测并提前加载后续页面或组件所需资源，以降低感知加载时间。指导通过HTML、Webpack魔法注释等方式实现，强调仅对高概率需求资源使用以避免带宽浪费。
需要优化前端页面跳转速度
配置Webpack模块预加载
减少用户等待资源的感知延迟
npx skills add PatternsDev/skills --skill prefetch -g -y
指导使用HTML Preload优化关键资源加载，提升LCP和TTI等核心性能指标。适用于字体、图片等关键资源发现较晚的场景，需权衡带宽与渲染优先级。
需要优化页面首屏加载速度
关键资源（如字体、Hero图片）在加载水线中靠后出现
希望提升Largest Contentful Paint (LCP) 指标
npx skills add PatternsDev/skills --skill preload -g -y
教授 JavaScript 原型模式，通过原型链高效共享属性和方法。指导使用 ES6 类和 Object.create() 实现继承与对象复用，避免实例间属性重复，优化内存使用。
需要创建多个相似对象以节省内存
理解或实现 JavaScript 原型链继承
在 ES6 类中共享方法定义
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 模式的使用，用于拦截和增强对象属性访问与赋值操作。适用于实现数据验证、日志记录、格式化处理及访问控制等场景。
需要对对象属性进行拦截或监控
需要为对象添加验证或日志功能
npx skills add PatternsDev/skills --skill proxy-pattern -g -y
指导构建渐进式Web应用，通过推送关键资源、渲染首屏、预缓存路由和按需懒加载来优化初始页面加载性能，提升低配设备和弱网环境下的用户体验。
构建渐进式Web应用
优化初始页面加载速度
改善弱网或低端设备上的应用性能
npx skills add PatternsDev/skills --skill prpl -g -y
教授单页应用的路由级代码分割技术，结合React Suspense或loadable-components实现按需加载，减少首屏体积并优化性能。
需要优化SPA首屏加载速度
实现基于路由的组件懒加载
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
提供缓解第三方脚本（如分析、广告、小部件）对页面加载速度和核心Web指标负面影响的策略。指导使用async/defer、资源提示、懒加载及框架优化等手段，在保留功能的同时提升性能。
第三方脚本导致页面加载变慢
需要优化Core Web Vitals
npx skills add PatternsDev/skills --skill third-party -g -y
指导在构建阶段通过消除未使用的导出代码来减小 JavaScript 包体积，提升加载性能。要求使用 ES2015 模块语法并标记无副作用包。
构建产物包含未使用的导入代码
需要优化前端应用加载性能
npx skills add PatternsDev/skills --skill tree-shaking -g -y
教授 View Transitions API 用法，用于在不编写手动动画代码的情况下实现页面或 UI 状态的平滑过渡，提升 Web 应用体验。
需要实现页面切换动画
希望优化 UI 状态变更的视觉效果
npx skills add PatternsDev/skills --skill view-transitions -g -y
教授列表虚拟化技术，用于高效渲染包含数百或数千条数据的大型列表或表格，解决滚动卡顿和初始渲染缓慢问题。
渲染大型列表或表格时出现性能瓶颈
需要优化长列表的滚动流畅度
npx skills add PatternsDev/skills --skill virtual-lists -g -y
提供Vite+React项目的构建优化方案，涵盖避免Barrel文件、手动Chunk拆分等模式，用于减小包体积、提升构建速度及改善Core Web Vitals指标。
配置Vite构建参数
代码分割策略制定
依赖管理优化
排查Vite构建缓慢问题
npx skills add PatternsDev/skills --skill vite-bundle-optimization -g -y
提供构建 AI 驱动 React 界面的设计模式，涵盖聊天机器人、流式 UI 及智能助手。指导使用 Vercel AI SDK 实现状态管理、响应流式传输、输入防抖及错误处理，集成 OpenAI/Anthropic 等模型，区分 Vite 与 Next.js 实现差异。
构建基于 LLM 的对话式界面
在 React 中集成 AI 服务并实现流式输出
需要处理 AI 交互中的提示词管理和错误处理
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协调子组件，无需显式传递Props，提供清洁的API。
构建需要内部状态共享的组合UI组件
实现类似Tabs或Dropdown的组件族
npx skills add PatternsDev/skills --skill compound-pattern -g -y
教授高阶组件(HOC)模式以实现逻辑复用，适用于跨组件共享认证、日志或数据获取等横切关注点。指导如何创建增强行为的HOC，并强调在React 18+中优先使用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）技术，实现静态页面无需全量重建即可周期性更新内容。适用于博客、电商等需要定期刷新数据的大型静态站点场景。
需要更新静态页面内容
避免全量重新构建网站
Next.js SSG性能优化
npx skills add PatternsDev/skills --skill incremental-static-rendering -g -y
教授 React 中容器与展示组件分离模式，用于隔离数据获取、业务逻辑与 UI 渲染，提升代码的可测试性与复用性。
需要分离 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 组合模式，通过组合替代布尔属性来构建灵活、可维护的 UI 组件库。适用于设计组件 API、重构复杂组件及提升代码扩展性。
设计组件 API
构建共享 UI 库
重构属性繁多的组件
npx skills add PatternsDev/skills --skill react-composition-2026 -g -y
提供React应用现代数据获取模式，涵盖TanStack Query等库的缓存、去重及乐观更新。指导并行请求优化以消除加载瀑布流，提升性能，适用于代码生成、审查与重构场景。
实现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 包体积。适用于无需状态和事件处理的组件，提升性能并优化用户体验。
需要减少客户端 JavaScript 体积
构建非交互式的服务端渲染组件
使用 Next.js App Router 进行数据获取
npx skills add PatternsDev/skills --skill react-server-components -g -y
教授 React 中 Render Props 模式，用于通过传递返回 JSX 的函数来共享渲染逻辑和状态，实现组件间灵活组合与复用。
需要共享组件间的状态逻辑
使用 HOC 导致命名冲突或嵌套过深
需要根据不同需求定制组件渲染
npx skills add PatternsDev/skills --skill render-props-pattern -g -y
提供React应用服务端渲染(SSR)指南，涵盖Next.js集成、流式渲染及SEO优化策略。
需要提升首屏加载速度
优化搜索引擎排名
npx skills add PatternsDev/skills --skill server-side-rendering -g -y
指导使用静态生成（SSG）在构建时预渲染HTML，适用于不随请求变化的静态内容，以提升TTFB、FCP等性能指标。
需要提升页面加载速度
内容为静态且可预渲染
npx skills add PatternsDev/skills --skill static-rendering -g -y
教授流式服务端渲染技术，通过分块发送HTML提升首屏加载速度。适用于需要优化TTFB和FCP的大型页面场景，指导使用React 18+的流式API及Suspense边界处理。
需要提升首屏渲染性能
实现流式SSR优化TTFB/FCP
处理大型页面的渐进式渲染
npx skills add PatternsDev/skills --skill streaming-ssr -g -y
教授Vue中异步组件加载技术以优化性能，适用于非首屏渲染的大型组件按需加载场景。指导使用defineAsyncComponent结合v-if实现代码分割与懒加载。
需要优化大型Web应用的首屏加载性能
实现模态框、对话框等条件渲染UI的按需加载
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编写可复用的状态逻辑函数（Composables），适用于提取跨组件共享的响应式状态、副作用或计算逻辑，替代Options API以提升代码组织性和复用性。
需要从多个组件中共享状态或逻辑
使用Composition API重构Vue组件
npx skills add PatternsDev/skills --skill composables -g -y
