npx skills add https://github.com/pproenca/dot-skills --skill nextjs由 Next.js 社区维护的 Next.js 16 App Router 应用程序全面性能优化指南。包含 8 个类别共 40 条规则,按影响优先级排序,以指导自动化重构和代码生成。
在以下情况下参考这些指南:
use cache 指令配置缓存策略时| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 构建与打包优化 | 关键 | build- |
| 2 | 缓存策略 | 关键 | cache- |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 3 |
| 服务器组件与数据获取 |
| 高 |
server- |
| 4 | 路由与导航 | 高 | route- |
| 5 | 服务器操作与变更 | 中高 | action- |
| 6 | 流式传输与加载状态 | 中 | stream- |
| 7 | 元数据与 SEO | 中 | meta- |
| 8 | 客户端组件 | 低中 | client- |
build-optimize-package-imports - 为图标库配置 optimizePackageImportsbuild-dynamic-imports - 对重型组件使用动态导入build-barrel-files - 在 App Router 中避免使用 Barrel 文件导入build-turbopack-config - 启用 Turbopack 文件系统缓存build-external-packages - 为 Node 依赖配置服务器外部包cache-use-cache-directive - 使用 use cache 指令进行显式缓存cache-revalidate-tag - 将 revalidateTag 与 cacheLife 配置文件结合使用cache-fetch-options - 正确配置 Fetch 缓存选项cache-revalidate-path - 使用 revalidatePath 进行路由级缓存失效cache-react-cache - 使用 React cache() 进行请求去重cache-segment-config - 通过导出配置路由段缓存server-parallel-fetching - 在服务器组件中并行获取数据server-component-streaming - 流式传输服务器组件以实现渐进式加载server-data-colocation - 将数据获取与组件放在一起server-preload-pattern - 对关键数据使用预加载模式server-avoid-client-fetching - 避免为初始数据在客户端进行数据获取server-error-handling - 优雅地处理服务器组件错误route-parallel-routes - 对独立内容使用并行路由route-intercepting-routes - 对模态框模式使用拦截路由route-prefetching - 适当配置链接预取route-proxy-ts - 使用 proxy.ts 处理网络边界逻辑route-not-found - 对缺失资源使用 notFound()action-server-action-forms - 对表单提交使用服务器操作action-pending-states - 使用 useFormStatus 显示待处理状态action-error-handling - 优雅地处理服务器操作错误action-optimistic-updates - 使用乐观更新实现即时反馈action-revalidation - 在变更后重新验证缓存stream-suspense-boundaries - 策略性地放置 Suspense 边界stream-loading-tsx - 使用 loading.tsx 处理路由级加载状态stream-error-tsx - 使用 error.tsx 处理路由级错误边界stream-skeleton-matching - 使骨架屏尺寸与实际内容匹配stream-nested-suspense - 嵌套 Suspense 以实现渐进式披露meta-generate-metadata - 使用 generateMetadata 生成动态元数据meta-sitemap - 动态生成站点地图meta-robots - 配置 Robots 以控制爬取meta-opengraph-images - 生成动态 OpenGraph 图片client-use-client-boundary - 最小化 use client 边界范围client-children-pattern - 将服务器组件作为子组件传递给客户端组件client-hydration-mismatch - 避免水合不匹配client-third-party-scripts - 高效加载第三方脚本阅读单独的参考文件以获取详细说明和代码示例:
react-19 技能tanstack-query 技能react-hook-form 技能获取包含所有规则详情的完整指南:AGENTS.md
每周安装数
119
仓库
GitHub 星标数
86
首次出现
2026 年 1 月 22 日
安全审计
安装于
codex101
opencode97
gemini-cli96
claude-code92
github-copilot90
cursor87
Comprehensive performance optimization guide for Next.js 16 App Router applications, maintained by the Next.js Community. Contains 40 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Build & Bundle Optimization | CRITICAL | build- |
| 2 | Caching Strategy | CRITICAL | cache- |
| 3 | Server Components & Data Fetching | HIGH | server- |
| 4 | Routing & Navigation | HIGH | route- |
| 5 | Server Actions & Mutations | MEDIUM-HIGH | action- |
| 6 | Streaming & Loading States | MEDIUM | stream- |
| 7 | Metadata & SEO | MEDIUM | meta- |
| 8 | Client Components | LOW-MEDIUM | client- |
build-optimize-package-imports - Configure optimizePackageImports for Icon Librariesbuild-dynamic-imports - Use Dynamic Imports for Heavy Componentsbuild-barrel-files - Avoid Barrel File Imports in App Routerbuild-turbopack-config - Enable Turbopack File System Cachingbuild-external-packages - Configure Server External Packages for Node Dependenciescache-use-cache-directive - Use the 'use cache' Directive for Explicit Cachingcache-revalidate-tag - Use revalidateTag with cacheLife Profilescache-fetch-options - Configure Fetch Cache Options Correctlycache-revalidate-path - Use revalidatePath for Route-Level Cache Invalidationcache-react-cache - Use React cache() for Request Deduplicationcache-segment-config - Configure Route Segment Caching with Exportsserver-parallel-fetching - Fetch Data in Parallel in Server Componentsserver-component-streaming - Stream Server Components for Progressive Loadingserver-data-colocation - Colocate Data Fetching with Componentsserver-preload-pattern - Use Preload Pattern for Critical Dataserver-avoid-client-fetching - Avoid Client-Side Data Fetching for Initial Dataserver-error-handling - Handle Server Component Errors Gracefullyroute-parallel-routes - Use Parallel Routes for Independent Contentroute-intercepting-routes - Use Intercepting Routes for Modal Patternsroute-prefetching - Configure Link Prefetching Appropriatelyroute-proxy-ts - Use proxy.ts for Network Boundary Logicroute-not-found - Use notFound() for Missing Resourcesaction-server-action-forms - Use Server Actions for Form Submissionsaction-pending-states - Show Pending States with useFormStatusaction-error-handling - Handle Server Action Errors Gracefullyaction-optimistic-updates - Use Optimistic Updates for Instant Feedbackaction-revalidation - Revalidate Cache After Mutationsstream-suspense-boundaries - Place Suspense Boundaries Strategicallystream-loading-tsx - Use loading.tsx for Route-Level Loading Statesstream-error-tsx - Use error.tsx for Route-Level Error Boundariesstream-skeleton-matching - Match Skeleton Dimensions to Actual Contentstream-nested-suspense - Nest Suspense for Progressive Disclosuremeta-generate-metadata - Use generateMetadata for Dynamic Metadatameta-sitemap - Generate Sitemaps Dynamicallymeta-robots - Configure Robots for Crawl Controlmeta-opengraph-images - Generate Dynamic OpenGraph Imagesclient-use-client-boundary - Minimize 'use client' Boundary Scopeclient-children-pattern - Pass Server Components as Children to Client Componentsclient-hydration-mismatch - Avoid Hydration Mismatchesclient-third-party-scripts - Load Third-Party Scripts EfficientlyRead individual reference files for detailed explanations and code examples:
react-19 skilltanstack-query skillreact-hook-form skillFor the complete guide with all rules expanded: AGENTS.md
Weekly Installs
119
Repository
GitHub Stars
86
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
codex101
opencode97
gemini-cli96
claude-code92
github-copilot90
cursor87
React视图过渡API使用指南:实现原生浏览器动画与状态管理
5,700 周安装
二进制初步分析指南:使用ReVa工具快速识别恶意软件与逆向工程
69 周安装
PrivateInvestigator 道德人员查找工具 | 公开数据调查、反向搜索与背景研究
69 周安装
TorchTitan:PyTorch原生分布式大语言模型预训练平台,支持4D并行与H100 GPU加速
69 周安装
screenshot 截图技能:跨平台桌面截图工具,支持macOS/Linux权限管理与多模式捕获
69 周安装
tmux进程管理最佳实践:交互式Shell初始化、会话命名与生命周期管理
69 周安装
Git Rebase Sync:安全同步分支的Git变基工具,解决冲突与备份
69 周安装