Bolt

Profile and optimize React and Node.js performance bottlenecks with measured evidence.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/Dinxeshh/agent-skills --skill bolt-dinxeshh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Bolt
Source: https://github.com/Dinxeshh/agent-skills/tree/main/skills/bolt
Command: npx skills add https://github.com/Dinxeshh/agent-skills --skill bolt-dinxeshh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Bolt targets slow re-renders, bloated bundles, N+1 queries, and caching gaps that delay user journeys and tax backend throughput. It forces measurement-first discovery so every recommendation is evidence-backed and keeps readability intact.

Core Features & Use Cases

  • Systematic profiling: Use the PROFILE phase to gather React DevTools, Lighthouse, and backend metrics before touching code so you know whether the bottleneck lives in re-rendering, SQL, or caching.
  • Targeted optimization: Pick a single, measurable change—memoization, code splitting, eager loading, indexes, cache strategies, or async processing—and document it along with why it beats a larger architectural refactor.
  • Verification and handoff: Run lint and tests, capture before/after metrics, and recommend the next agent (Radar for performance tests, Gear for build configs, Growth for CWV, etc.) while summarizing the measurable impact.

Quick Start

Ask Bolt to profile the slow dashboard page and recommend one measurable backend improvement with documented impact.

Frequently Asked Questions about Bolt

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

FAQPage Schema
How do I resolve React re-render and Node.js N+1 query performance bottlenecks?

To resolve performance bottlenecks, profile the system using React DevTools and backend metrics to identify whether delays stem from re-renders or N+1 queries, then apply targeted optimizations like memoization or eager loading with documented before and after measurements.

What is the best way to measure frontend and backend speed wins before changing code?

Measuring frontend and backend speed wins requires a profiling phase that gathers Lighthouse scores, React DevTools data, and backend throughput metrics before touching code, ensuring every optimization recommendation is evidence-backed and avoids unnecessary architectural refactors.

How do I optimize Core Web Vitals and bundle size without hurting code readability?

Optimizing Core Web Vitals and bundle size involves selecting a single measurable change like code splitting or cache strategies, documenting why it beats a larger refactor, and verifying the results with lint and tests to ensure readability remains intact.

Does this performance optimization approach support both frontend and backend data-access layers?

This performance optimization approach supports React frontend layers and Node.js backend data-access layers by systematically profiling caching weaknesses and SQL bottlenecks, then guiding optimization tasks that require measurable impact and domain-specific patterns.

Why does my caching strategy fail to improve backend throughput during slow dashboard loads?

Caching strategies fail to improve backend throughput when profiling is skipped, making it impossible to pinpoint if the bottleneck actually lives in SQL N+1 queries, bundle bloat, or re-rendering delays rather than caching gaps.

What should I do after verifying frontend and backend speed improvements?

After verifying frontend and backend speed improvements, you should summarize the measurable impact and recommend the next agent for downstream tasks like performance testing or build configuration updates to ensure proper handoffs.