@ruyfranca/myskills 1.0.34 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/.agent/skills/analyze-project/SKILL.md +1 -2
  2. package/.agent/skills/antigravity-design-expert/SKILL.md +1 -2
  3. package/.agent/skills/api-integration-specialist/SKILL.md +5 -2
  4. package/.agent/skills/api-patterns/SKILL.md +5 -2
  5. package/.agent/skills/app-builder/SKILL.md +5 -2
  6. package/.agent/skills/artifacts-builder/SKILL.md +4 -1
  7. package/.agent/skills/bash-linux/SKILL.md +4 -1
  8. package/.agent/skills/behavioral-modes/SKILL.md +5 -2
  9. package/.agent/skills/brainstorming/SKILL.md +5 -2
  10. package/.agent/skills/business-analyst/SKILL.md +4 -1
  11. package/.agent/skills/canvas-design/SKILL.md +5 -2
  12. package/.agent/skills/clean-code/SKILL.md +5 -2
  13. package/.agent/skills/code-review-checklist/SKILL.md +5 -2
  14. package/.agent/skills/code-reviewer/SKILL.md +5 -2
  15. package/.agent/skills/content-research-writer/SKILL.md +5 -2
  16. package/.agent/skills/copywriting/SKILL.md +5 -2
  17. package/.agent/skills/cqrs-implementation/SKILL.md +2 -2
  18. package/.agent/skills/creative-design-figma/SKILL.md +5 -2
  19. package/.agent/skills/cto-advisor/SKILL.md +5 -2
  20. package/.agent/skills/database-design/SKILL.md +5 -2
  21. package/.agent/skills/ddd-strategic-design/SKILL.md +2 -2
  22. package/.agent/skills/ddd-tactical-patterns/SKILL.md +2 -2
  23. package/.agent/skills/deployment-procedures/SKILL.md +5 -2
  24. package/.agent/skills/doc-coauthoring/SKILL.md +2 -3
  25. package/.agent/skills/docker-expert/SKILL.md +5 -2
  26. package/.agent/skills/documentation-templates/SKILL.md +5 -2
  27. package/.agent/skills/elixir-pro/SKILL.md +2 -2
  28. package/.agent/skills/email-composer/SKILL.md +5 -2
  29. package/.agent/skills/event-sourcing-architect/SKILL.md +2 -2
  30. package/.agent/skills/figma-dev-mode/SKILL.md +5 -2
  31. package/.agent/skills/file-organizer/SKILL.md +5 -2
  32. package/.agent/skills/frontend-design/SKILL.md +5 -2
  33. package/.agent/skills/game-development/SKILL.md +5 -2
  34. package/.agent/skills/geo-fundamentals/SKILL.md +5 -2
  35. package/.agent/skills/golang-pro/SKILL.md +2 -2
  36. package/.agent/skills/i18n-localization/SKILL.md +5 -2
  37. package/.agent/skills/intelligent-routing/SKILL.md +5 -2
  38. package/.agent/skills/invoice-organizer/SKILL.md +5 -2
  39. package/.agent/skills/kotlin-coroutines-expert/SKILL.md +2 -2
  40. package/.agent/skills/lead-research-assistant/SKILL.md +5 -2
  41. package/.agent/skills/leiloeiro-risco/SKILL.md +2 -3
  42. package/.agent/skills/lint-and-validate/SKILL.md +5 -2
  43. package/.agent/skills/marketing-campaigns/SKILL.md +5 -2
  44. package/.agent/skills/mcp-builder/SKILL.md +5 -2
  45. package/.agent/skills/mobile-design/SKILL.md +5 -2
  46. package/.agent/skills/modern-javascript-patterns/SKILL.md +1 -1
  47. package/.agent/skills/monorepo-architect/SKILL.md +2 -2
  48. package/.agent/skills/nestjs/SKILL.md +5 -2
  49. package/.agent/skills/nextjs-best-practices/SKILL.md +5 -2
  50. package/.agent/skills/nextjs-react-expert/SKILL.md +1 -1
  51. package/.agent/skills/parallel-agents/SKILL.md +5 -2
  52. package/.agent/skills/pdf-processing-pro/SKILL.md +5 -2
  53. package/.agent/skills/performance-profiling/SKILL.md +5 -2
  54. package/.agent/skills/powershell-windows/SKILL.md +5 -2
  55. package/.agent/skills/pptx/SKILL.md +5 -2
  56. package/.agent/skills/product-manager/SKILL.md +5 -2
  57. package/.agent/skills/python-patterns/SKILL.md +5 -2
  58. package/.agent/skills/react-best-practices/SKILL.md +208 -0
  59. package/.agent/skills/react-best-practices/references/react-performance-guidelines.md +1865 -0
  60. package/.agent/skills/react-best-practices/references/rules/_sections.md +46 -0
  61. package/.agent/skills/react-best-practices/references/rules/_template.md +28 -0
  62. package/.agent/skills/react-best-practices/references/rules/advanced-event-handler-refs.md +38 -0
  63. package/.agent/skills/react-best-practices/references/rules/advanced-use-latest.md +49 -0
  64. package/.agent/skills/react-best-practices/references/rules/async-api-routes.md +38 -0
  65. package/.agent/skills/react-best-practices/references/rules/async-defer-await.md +80 -0
  66. package/.agent/skills/react-best-practices/references/rules/async-dependencies.md +36 -0
  67. package/.agent/skills/react-best-practices/references/rules/async-parallel.md +28 -0
  68. package/.agent/skills/react-best-practices/references/rules/async-suspense-boundaries.md +66 -0
  69. package/.agent/skills/react-best-practices/references/rules/bundle-barrel-imports.md +59 -0
  70. package/.agent/skills/react-best-practices/references/rules/bundle-conditional.md +31 -0
  71. package/.agent/skills/react-best-practices/references/rules/bundle-defer-third-party.md +49 -0
  72. package/.agent/skills/react-best-practices/references/rules/bundle-dynamic-imports.md +35 -0
  73. package/.agent/skills/react-best-practices/references/rules/bundle-preload.md +50 -0
  74. package/.agent/skills/react-best-practices/references/rules/client-event-listeners.md +74 -0
  75. package/.agent/skills/react-best-practices/references/rules/client-swr-dedup.md +56 -0
  76. package/.agent/skills/react-best-practices/references/rules/download_rules.sh +63 -0
  77. package/.agent/skills/react-best-practices/references/rules/js-batch-dom-css.md +82 -0
  78. package/.agent/skills/react-best-practices/references/rules/js-cache-function-results.md +80 -0
  79. package/.agent/skills/react-best-practices/references/rules/js-cache-property-access.md +28 -0
  80. package/.agent/skills/react-best-practices/references/rules/js-cache-storage.md +68 -0
  81. package/.agent/skills/react-best-practices/references/rules/js-combine-iterations.md +32 -0
  82. package/.agent/skills/react-best-practices/references/rules/js-early-exit.md +50 -0
  83. package/.agent/skills/react-best-practices/references/rules/js-hoist-regexp.md +43 -0
  84. package/.agent/skills/react-best-practices/references/rules/js-index-maps.md +37 -0
  85. package/.agent/skills/react-best-practices/references/rules/js-length-check-first.md +49 -0
  86. package/.agent/skills/react-best-practices/references/rules/js-min-max-loop.md +82 -0
  87. package/.agent/skills/react-best-practices/references/rules/js-set-map-lookups.md +24 -0
  88. package/.agent/skills/react-best-practices/references/rules/js-tosorted-immutable.md +57 -0
  89. package/.agent/skills/react-best-practices/references/rules/rendering-activity.md +26 -0
  90. package/.agent/skills/react-best-practices/references/rules/rendering-animate-svg-wrapper.md +47 -0
  91. package/.agent/skills/react-best-practices/references/rules/rendering-conditional-render.md +40 -0
  92. package/.agent/skills/react-best-practices/references/rules/rendering-content-visibility.md +38 -0
  93. package/.agent/skills/react-best-practices/references/rules/rendering-hoist-jsx.md +44 -0
  94. package/.agent/skills/react-best-practices/references/rules/rendering-hydration-no-flicker.md +82 -0
  95. package/.agent/skills/react-best-practices/references/rules/rendering-svg-precision.md +28 -0
  96. package/.agent/skills/react-best-practices/references/rules/rerender-defer-reads.md +39 -0
  97. package/.agent/skills/react-best-practices/references/rules/rerender-dependencies.md +45 -0
  98. package/.agent/skills/react-best-practices/references/rules/rerender-derived-state.md +29 -0
  99. package/.agent/skills/react-best-practices/references/rules/rerender-lazy-state-init.md +58 -0
  100. package/.agent/skills/react-best-practices/references/rules/rerender-memo.md +42 -0
  101. package/.agent/skills/react-best-practices/references/rules/rerender-transitions.md +40 -0
  102. package/.agent/skills/react-best-practices/references/rules/server-cache-lru.md +37 -0
  103. package/.agent/skills/react-best-practices/references/rules/server-cache-react.md +26 -0
  104. package/.agent/skills/react-best-practices/references/rules/server-parallel-fetching.md +79 -0
  105. package/.agent/skills/react-best-practices/references/rules/server-serialization.md +38 -0
  106. package/.agent/skills/react-patterns/SKILL.md +2 -2
  107. package/.agent/skills/react-state-management/SKILL.md +2 -2
  108. package/.agent/skills/red-team-tactics/SKILL.md +5 -2
  109. package/.agent/skills/ruby-pro/SKILL.md +2 -2
  110. package/.agent/skills/rust-pro/SKILL.md +5 -1
  111. package/.agent/skills/sdd-spec-writer/SKILL.md +5 -2
  112. package/.agent/skills/security/SKILL.md +4 -1
  113. package/.agent/skills/senior-devops/SKILL.md +4 -1
  114. package/.agent/skills/senior-frontend/SKILL.md +5 -2
  115. package/.agent/skills/senior-fullstack/SKILL.md +5 -2
  116. package/.agent/skills/senior-prompt-engineer/SKILL.md +5 -2
  117. package/.agent/skills/senior-qa/SKILL.md +5 -2
  118. package/.agent/skills/senior-security/SKILL.md +5 -2
  119. package/.agent/skills/seo-optimizer/SKILL.md +5 -2
  120. package/.agent/skills/server-management/SKILL.md +5 -2
  121. package/.agent/skills/skill-developer/SKILL.md +1 -2
  122. package/.agent/skills/software-architecture/SKILL.md +5 -2
  123. package/.agent/skills/supabase-postgres/SKILL.md +5 -2
  124. package/.agent/skills/systematic-debugging/SKILL.md +5 -2
  125. package/.agent/skills/tailwind-patterns/SKILL.md +5 -2
  126. package/.agent/skills/tdd-workflow/SKILL.md +5 -2
  127. package/.agent/skills/test-driven-development/SKILL.md +5 -2
  128. package/.agent/skills/testing-patterns/SKILL.md +5 -2
  129. package/.agent/skills/theme-factory/SKILL.md +5 -2
  130. package/.agent/skills/ui-design-system/SKILL.md +5 -2
  131. package/.agent/skills/ui-ux-pro-max/SKILL.md +5 -2
  132. package/.agent/skills/uncle-bob-craft/SKILL.md +2 -3
  133. package/.agent/skills/ux-researcher-designer/SKILL.md +5 -2
  134. package/.agent/skills/vulnerability-scanner/SKILL.md +5 -2
  135. package/.agent/skills/web-design-guidelines/SKILL.md +5 -2
  136. package/.agent/skills/web-performance/SKILL.md +5 -2
  137. package/.agent/skills/webapp-testing/SKILL.md +5 -2
  138. package/.agent/skills/writing-plans/SKILL.md +5 -2
  139. package/.agent/skills/xlsx/SKILL.md +5 -2
  140. package/.agent/skills/zod-validation-expert/SKILL.md +2 -2
  141. package/README.md +3 -2
  142. package/index.js +63 -55
  143. package/package.json +2 -4
@@ -1,13 +1,12 @@
1
1
  ---
2
2
  name: leiloeiro-risco
3
- description: Auditor de Risco Sênior em leilões de imóveis. Sistema de scoring com 36 pontos cobrindo riscos jurídicos, financeiros, operacionais e de mercado, com stress test em 4 cenários e ROI ponderado.
3
+ description: "Auditor de Risco Sênior em leilões de imóveis. Sistema de scoring com 36 pontos cobrindo riscos jurídicos, financeiros, operacionais e de mercado, com stress test em 4 cenários e ROI ponderado. / Testes e qualidade."
4
4
  tags: [risk-analysis, scoring, stress-test, brazilian, leilao, imovel]
5
- triggers: [risco leilao, analise risco imovel leilao, score risco leilao, imovel seguro leilao, stress test leilao, roi ponderado leilao, leiloeiro risco, auditor risco leilao]
5
+ triggers: [analise risco imovel leilao, auditor risco leilao, imovel seguro leilao, leiloeiro risco, risco leilao, roi ponderado leilao, score risco leilao, stress test leilao]
6
6
  risk: safe
7
7
  source: sickn33/antigravity-awesome-skills
8
8
  date_added: "2026-03-15"
9
9
  ---
10
-
11
10
  # SKILL DE RISCO — AUDITOR DE RISCO EM LEILÕES
12
11
 
13
12
  ## Overview
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: lint-and-validate
3
- description: Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis.
3
+ description: "Automatic quality control, linting, and static analysis procedures. Use after every code modification to ensure syntax correctness and project standards. Triggers onKeywords: lint, format, check, validate, types, static analysis."
4
4
  allowed-tools: Read, Glob, Grep, Bash
5
+ triggers: []
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # Lint and Validate Skill
8
11
 
9
12
  > **MANDATORY:** Run appropriate validation tools after EVERY code change. Do not finish a task until the code is error-free.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: Executing Marketing Campaigns
3
- description: Planning, creation, and optimization of marketing campaigns, content strategy, and analytics.
3
+ description: "Planning, creation, and optimization of marketing campaigns, content strategy, and analytics."
4
+ triggers: [campanhas, copywriting, marketing, planejamento, roadmap, roteiro, vendas]
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # Executing Marketing Campaigns Skill
7
10
 
8
11
  You are a senior marketing strategist. Your goal is to plan and execute high-impact campaigns that drive measurable business results across multiple channels.
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: mcp-builder
3
- description: MCP (Model Context Protocol) server building principles. Tool design, resource patterns, best practices.
3
+ description: "MCP (Model Context Protocol) server building principles. Tool design, resource patterns, best practices. / Desenvolvimento backend e APIs. Boas práticas e padrões."
4
4
  allowed-tools: Read, Write, Edit, Glob, Grep
5
+ triggers: [design, experiência do usuário, ui, ux]
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # MCP Builder
8
11
 
9
12
  > Principles for building MCP servers.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: Mobile Design
3
- description: Mobile-first design thinking and expert implementation for iOS and Android apps (React Native, Flutter, Native).
3
+ description: "Mobile-first design thinking and expert implementation for iOS and Android apps (React Native, Flutter, Native)."
4
+ triggers: [android, aplicativo, app, design, experiência do usuário, ios, mobile, ui, ux]
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # Mobile Design Skill
7
10
 
8
11
  You are a senior mobile specialist. Your goal is to build high-performance, touch-first applications that respect platform conventions (iOS/Android) and prioritize accessibility and battery efficiency.
@@ -4,8 +4,8 @@ description: "Master ES6+ features including async/await, destructuring, spread
4
4
  risk: unknown
5
5
  source: community
6
6
  date_added: "2026-02-27"
7
+ triggers: []
7
8
  ---
8
-
9
9
  # Modern JavaScript Patterns
10
10
 
11
11
  Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.
@@ -1,11 +1,11 @@
1
1
  ---
2
2
  name: monorepo-architect
3
- description: "Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development."
3
+ description: ""Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development.""
4
4
  risk: unknown
5
5
  source: community
6
6
  date_added: "2026-02-27"
7
+ triggers: []
7
8
  ---
8
-
9
9
  # Monorepo Architect
10
10
 
11
11
  Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development. Use PROACTIVELY for monorepo setup, build optimization, or scaling development workflows across teams.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: NestJS Expert
3
- description: Enterprise-grade Node.js architecture, dependency injection, module management, and testing.
3
+ description: "Enterprise-grade Node.js architecture, dependency injection, module management, and testing. / Testes e qualidade."
4
+ triggers: [api, backend, cobertura, garantia de qualidade, nestjs, node.js, qa, servidor, testes]
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # NestJS Expert Skill
7
10
 
8
11
  You are an expert in NestJS and enterprise Node.js architecture. Your goal is to build scalable, maintainable, and well-tested backend applications following the framework's best practices.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: Next.js Best Practices
3
- description: Modern App Router development principles, Server Components, and data fetching.
3
+ description: ""Modern App Router development principles, Server Components, and data fetching." / Desenvolvimento backend e APIs."
4
+ triggers: []
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # Next.js Best Practices Skill
7
10
 
8
11
  You are a senior Next.js architect. Your goal is to build fast, scalable web applications using the App Router and React Server Components (RSC).
@@ -4,8 +4,8 @@ description: "React and Next.js performance optimization from Vercel Engineering
4
4
  risk: unknown
5
5
  source: community
6
6
  date_added: "2026-02-27"
7
+ triggers: [ciclo de vida, componentes react, desempenho, design de interface, hooks, interface de usuário, otimização, performance, react, ui, ux]
7
8
  ---
8
-
9
9
  # React Best Practices (Vercel)
10
10
 
11
11
  Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains rules across 8 categories, prioritized by impact.
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: parallel-agents
3
- description: Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives.
3
+ description: "Multi-agent orchestration patterns. Use when multiple independent tasks can run with different domain expertise or when comprehensive analysis requires multiple perspectives. / Boas práticas e padrões."
4
4
  allowed-tools: Read, Glob, Grep
5
+ triggers: []
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # Native Parallel Agents
8
11
 
9
12
  > Orchestration through Antigravity's built-in Agent Tool
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: PDF Processing Pro
3
- description: Enterprise-grade PDF manipulation including forms, tables, OCR, and document validation.
3
+ description: "Enterprise-grade PDF manipulation including forms, tables, OCR, and document validation."
4
+ triggers: []
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # PDF Processing Pro Skill
7
10
 
8
11
  This skill provides an enterprise-ready toolkit for complex PDF workflows. You are an expert in document processing, specializing in extracting data from unstructured PDFs, managing interactive forms, and performing high-volume batch operations.
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: performance-profiling
3
- description: Performance profiling principles. Measurement, analysis, and optimization techniques.
3
+ description: "Performance profiling principles. Measurement, analysis, and optimization techniques."
4
4
  allowed-tools: Read, Glob, Grep, Bash
5
+ triggers: []
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # Performance Profiling
8
11
 
9
12
  > Measure, analyze, optimize - in that order.
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: powershell-windows
3
- description: PowerShell Windows patterns. Critical pitfalls, operator syntax, error handling.
3
+ description: "PowerShell Windows patterns. Critical pitfalls, operator syntax, error handling. / Boas práticas e padrões."
4
4
  allowed-tools: Read, Write, Edit, Glob, Grep, Bash
5
+ triggers: []
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # PowerShell Windows Patterns
8
11
 
9
12
  > Critical patterns and pitfalls for Windows PowerShell.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: PPTX Automation
3
- description: Professional presentation creation, editing, and analysis with support for layouts, themes, and automated workflows.
3
+ description: "Professional presentation creation, editing, and analysis with support for layouts, themes, and automated workflows."
4
+ triggers: []
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # PPTX Automation Skill
7
10
 
8
11
  You are a presentation specialist. You create, edit, and analyze PowerPoint presentations (.pptx) with a focus on visual hierarchy, consistency, and professional design.
@@ -1,8 +1,11 @@
1
1
  ---
2
2
  name: Product Manager
3
- description: Senior product manager expertise for strategy, prioritization, and roadmaps.
3
+ description: "Senior product manager expertise for strategy, prioritization, and roadmaps."
4
+ triggers: []
5
+ risk: safe
6
+ source: v4-migration
7
+ date_added: "2026-04-22"
4
8
  ---
5
-
6
9
  # Product Manager Skill
7
10
 
8
11
  You are a senior product manager with expertise in building successful products that delight users and achieve business objectives. Your focus spans product strategy, user research, feature prioritization, and go-to-market execution with emphasis on data-driven decisions and continuous iteration.
@@ -1,9 +1,12 @@
1
1
  ---
2
2
  name: python-patterns
3
- description: Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying.
3
+ description: "Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying. / Boas práticas e padrões."
4
4
  allowed-tools: Read, Write, Edit, Glob, Grep
5
+ triggers: []
6
+ risk: safe
7
+ source: v4-migration
8
+ date_added: "2026-04-22"
5
9
  ---
6
-
7
10
  # Python Patterns
8
11
 
9
12
  > Python development principles and decision-making for 2025.
@@ -0,0 +1,208 @@
1
+ ---
2
+ name: react-best-practices
3
+ description: "Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering. Triggers on react refactoring, performance optimization, and bundle size reduction."
4
+ tags: [React, Next.js, Performance, Optimization, Best Practices, Bundle Size, Rendering, Server Components]
5
+ triggers: [RSC optimization, bundle size, corrigir waterfall, fix waterfall, optimize react, otimizar react, otimização de renderização, performance react, performance review, react performance, refactor react, refatorar react, render optimization, revisão de performance, tamanho do bundle]
6
+ risk: safe
7
+ source: vercel-engineering
8
+ date_added: "2026-04-22"
9
+ ---
10
+ # React Best Practices - Performance Optimization
11
+
12
+ Comprehensive performance optimization guide for React and Next.js applications with 40+ rules organized by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
13
+
14
+ ## When to use this skill
15
+
16
+ **Use React Best Practices when:**
17
+ - Optimizing React or Next.js application performance
18
+ - Reviewing code for performance improvements
19
+ - Refactoring existing components for better performance
20
+ - Implementing new features with performance in mind
21
+ - Debugging slow rendering or loading issues
22
+ - Reducing bundle size
23
+ - Eliminating request waterfalls
24
+
25
+ **Key areas covered:**
26
+ - **Eliminating Waterfalls** (CRITICAL): Prevent sequential async operations
27
+ - **Bundle Size Optimization** (CRITICAL): Reduce initial JavaScript payload
28
+ - **Server-Side Performance** (HIGH): Optimize RSC and data fetching
29
+ - **Client-Side Data Fetching** (MEDIUM-HIGH): Implement efficient caching
30
+ - **Re-render Optimization** (MEDIUM): Minimize unnecessary re-renders
31
+ - **Rendering Performance** (MEDIUM): Optimize browser rendering
32
+ - **JavaScript Performance** (LOW-MEDIUM): Micro-optimizations for hot paths
33
+ - **Advanced Patterns** (LOW): Specialized techniques for edge cases
34
+
35
+ ## Quick reference
36
+
37
+ ### Critical priorities
38
+
39
+ 1. **Defer await until needed** - Move awaits into branches where they're used
40
+ 2. **Use Promise.all()** - Parallelize independent async operations
41
+ 3. **Avoid barrel imports** - Import directly from source files
42
+ 4. **Dynamic imports** - Lazy-load heavy components
43
+ 5. **Strategic Suspense** - Stream content while showing layout
44
+
45
+ ### Common patterns
46
+
47
+ **Parallel data fetching:**
48
+ ```typescript
49
+ const [user, posts, comments] = await Promise.all([
50
+ fetchUser(),
51
+ fetchPosts(),
52
+ fetchComments()
53
+ ])
54
+ ```
55
+
56
+ **Direct imports:**
57
+ ```tsx
58
+ // ❌ Loads entire library
59
+ import { Check } from 'lucide-react'
60
+
61
+ // ✅ Loads only what you need
62
+ import Check from 'lucide-react/dist/esm/icons/check'
63
+ ```
64
+
65
+ **Dynamic components:**
66
+ ```tsx
67
+ import dynamic from 'next/dynamic'
68
+
69
+ const MonacoEditor = dynamic(
70
+ () => import('./monaco-editor'),
71
+ { ssr: false }
72
+ )
73
+ ```
74
+
75
+ ## Using the guidelines
76
+
77
+ The complete performance guidelines are available in the references folder:
78
+
79
+ - **react-performance-guidelines.md**: Complete guide with all 40+ rules, code examples, and impact analysis
80
+
81
+ Each rule includes:
82
+ - Incorrect/correct code comparisons
83
+ - Specific impact metrics
84
+ - When to apply the optimization
85
+ - Real-world examples
86
+
87
+ ## Categories overview
88
+
89
+ ### 1. Eliminating Waterfalls (CRITICAL)
90
+ Waterfalls are the #1 performance killer. Each sequential await adds full network latency.
91
+ - Defer await until needed
92
+ - Dependency-based parallelization
93
+ - Prevent waterfall chains in API routes
94
+ - Promise.all() for independent operations
95
+ - Strategic Suspense boundaries
96
+
97
+ ### 2. Bundle Size Optimization (CRITICAL)
98
+ Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
99
+ - Avoid barrel file imports
100
+ - Conditional module loading
101
+ - Defer non-critical third-party libraries
102
+ - Dynamic imports for heavy components
103
+ - Preload based on user intent
104
+
105
+ ### 3. Server-Side Performance (HIGH)
106
+ Optimize server-side rendering and data fetching.
107
+ - Cross-request LRU caching
108
+ - Minimize serialization at RSC boundaries
109
+ - Parallel data fetching with component composition
110
+ - Per-request deduplication with React.cache()
111
+
112
+ ### 4. Client-Side Data Fetching (MEDIUM-HIGH)
113
+ Automatic deduplication and efficient data fetching patterns.
114
+ - Deduplicate global event listeners
115
+ - Use SWR for automatic deduplication
116
+
117
+ ### 5. Re-render Optimization (MEDIUM)
118
+ Reduce unnecessary re-renders to minimize wasted computation.
119
+ - Defer state reads to usage point
120
+ - Extract to memoized components
121
+ - Narrow effect dependencies
122
+ - Subscribe to derived state
123
+ - Use lazy state initialization
124
+ - Use transitions for non-urgent updates
125
+
126
+ ### 6. Rendering Performance (MEDIUM)
127
+ Optimize the browser rendering process.
128
+ - Animate SVG wrapper instead of SVG element
129
+ - CSS content-visibility for long lists
130
+ - Hoist static JSX elements
131
+ - Optimize SVG precision
132
+ - Prevent hydration mismatch without flickering
133
+ - Use Activity component for show/hide
134
+ - Use explicit conditional rendering
135
+
136
+ ### 7. JavaScript Performance (LOW-MEDIUM)
137
+ Micro-optimizations for hot paths.
138
+ - Batch DOM CSS changes
139
+ - Build index maps for repeated lookups
140
+ - Cache property access in loops
141
+ - Cache repeated function calls
142
+ - Cache storage API calls
143
+ - Combine multiple array iterations
144
+ - Early length check for array comparisons
145
+ - Early return from functions
146
+ - Hoist RegExp creation
147
+ - Use loop for min/max instead of sort
148
+ - Use Set/Map for O(1) lookups
149
+ - Use toSorted() instead of sort()
150
+
151
+ ### 8. Advanced Patterns (LOW)
152
+ Specialized techniques for edge cases.
153
+ - Store event handlers in refs
154
+ - useLatest for stable callback refs
155
+
156
+ ## Implementation approach
157
+
158
+ When optimizing a React application:
159
+
160
+ 1. **Profile first**: Use React DevTools Profiler and browser performance tools to identify bottlenecks
161
+ 2. **Focus on critical paths**: Start with eliminating waterfalls and reducing bundle size
162
+ 3. **Measure impact**: Verify improvements with metrics (LCP, TTI, FID)
163
+ 4. **Apply incrementally**: Don't over-optimize prematurely
164
+ 5. **Test thoroughly**: Ensure optimizations don't break functionality
165
+
166
+ ## Key metrics to track
167
+
168
+ - **Time to Interactive (TTI)**: When page becomes fully interactive
169
+ - **Largest Contentful Paint (LCP)**: When main content is visible
170
+ - **First Input Delay (FID)**: Responsiveness to user interactions
171
+ - **Cumulative Layout Shift (CLS)**: Visual stability
172
+ - **Bundle size**: Initial JavaScript payload
173
+ - **Server response time**: TTFB for server-rendered content
174
+
175
+ ## Common pitfalls to avoid
176
+
177
+ ❌ **Don't:**
178
+ - Use barrel imports from large libraries
179
+ - Block parallel operations with sequential awaits
180
+ - Re-render entire trees when only part needs updating
181
+ - Load analytics/tracking in the critical path
182
+ - Mutate arrays with .sort() instead of .toSorted()
183
+ - Create RegExp or heavy objects inside render
184
+
185
+ ✅ **Do:**
186
+ - Import directly from source files
187
+ - Use Promise.all() for independent operations
188
+ - Memoize expensive components
189
+ - Lazy-load non-critical code
190
+ - Use immutable array methods
191
+ - Hoist static objects outside components
192
+
193
+ ## Resources
194
+
195
+ - [React Documentation](https://react.dev)
196
+ - [Next.js Documentation](https://nextjs.org)
197
+ - [SWR Documentation](https://swr.vercel.app)
198
+ - [Vercel Bundle Optimization](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
199
+ - [Vercel Dashboard Performance](https://vercel.com/blog/how-we-made-the-vercel-dashboard-twice-as-fast)
200
+ - [better-all Library](https://github.com/shuding/better-all)
201
+ - [node-lru-cache](https://github.com/isaacs/node-lru-cache)
202
+
203
+ ## Version history
204
+
205
+ **v0.1.0** (January 2026)
206
+ - Initial release from Vercel Engineering
207
+ - 40+ performance rules across 8 categories
208
+ - Comprehensive code examples and impact analysis