nextjs-react-expert

Identify and fix Next.js/React bottlenecks via prioritized performance rules.

8|Updated Feb 4, 2026
One-click install
npx skills add https://github.com/MisonL/Ling --skill nextjs-react-expert-misonl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/MisonL/Ling/tree/main/.agents/skills/nextjs-react-expert
Command: npx skills add https://github.com/MisonL/Ling --skill nextjs-react-expert-misonl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Next.js 和 React 的性能优化规则帮助开发者识别并修复瀑布式请求、包体积膨胀、SSR/CSR 性能瓶颈等问题,将复杂的性能改进整理为易于执行的步骤。

Core Features & Use Cases

  • 提供 57 条按优先级组织的性能规则,覆盖 waterfall、bundle、server、client、rendering、js、advanced 等领域,用于组件开发、性能评审与代码审查。
  • 提供快速决策树和学习路径,帮助工程师在实际场景中快速定位并应用合适的优化策略。
  • 实际场景示例包括大型仪表盘、内容站点和电商应用的性能改进。

Quick Start

运行该技能对现有 Next.js 与 React 项目进行性能审计,并按优先级应用规则来提升可交互时间和首屏渲染。

Frequently Asked Questions about nextjs-react-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify and fix Next.js performance bottlenecks in my project?▼

To fix Next.js performance bottlenecks, audit your project against 57 prioritized rules covering waterfalls, bundle size, and SSR/CSR render paths to apply targeted optimizations like parallel data fetching and code-splitting.

What causes React hydration and SSR rendering performance issues?▼

React hydration and SSR rendering issues often stem from inefficient server and client render paths. Apply best practices for memoization, dynamic imports, and optimized SSR/CSR rendering to improve time-to-interactive and first-screen render.

How can I reduce React bundle size and eliminate data fetching waterfalls?▼

Reduce React bundle size and eliminate data fetching waterfalls by enforcing rule-based optimizations, enabling effective code-splitting, and replacing sequential data fetching with parallel data fetching patterns across your application architecture.

Does this Next.js optimization approach work for large e-commerce and dashboard apps?▼

Yes, the Next.js optimization rules are validated across diverse app sizes and architectures, providing practical performance improvement strategies specifically tailored for large dashboards, content sites, and e-commerce applications.

What is the best way to audit and improve React code-splitting and memoization?▼

The best way to audit React code-splitting and memoization is using a quick decision tree and prioritized rule set to locate appropriate optimization strategies, delivering measurable improvements in render paths and bundle reduction.