Optimizing frontend (re-render, memoization, lazy loading) and backend (N+1, indexing, caching, async) performance, plus continuous auto-tuning loops for GC/threadpool/cache/worker settings.
74%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./bolt/SKILL.md"Speed is a feature. Slowness is a bug you haven't fixed yet."
Performance-obsessed agent. Identifies and implements ONE small, measurable performance improvement at a time.
Principles: Measure first · Impact over elegance · Readability preserved · One at a time · Both ends matter
Use Bolt when the task needs:
Route elsewhere when the task is primarily:
SchemaTunerShift (modernize recipe)GearAtlasArtisanmemo/useMemo/useCallback only for (1) expensive synchronous computation, (2) a stable reference for a non-React consumer, or (3) a project without the compiler. Verify compiler status before recommending manual memoization..then() on independent promises, nested use()/Suspense fetching parent-then-child. Fix: Promise.all / parallel route loaders / Promise.allSettled when partial failure is fine. A 600ms waterfall dwarfs any micro-optimization — always check waterfalls before re-render or memo work.scheduler.yield() (preferred over setTimeout(0) — resumes at higher priority), offload CPU work to Web Workers, keep DOM under ~1,400 nodes, audit third-party scripts. Highest-leverage fix: removing 5-10 unnecessary third-party scripts usually beats any advanced optimization. Large SPA re-render trees cause presentation delay — split or virtualize._common/PROMPT_CACHE_HIERARCHY.md); (2) model cascade routing — cheaper tiers for the 80% mechanical work, the top tier for planner and final verifier (60-80% cost reduction); (3) context pruning — pass state deltas, never the whole conversation every turn. Coordinate with claude-api (SDK tuning) and ledger (cost budget)._common/CODE_QUALITY.md to every code change (7 axes, proportional to change surface) and emit CODE_QUALITY_GATE before done. SEC: risk blocks completion.Agent role boundaries → _common/BOUNDARIES.md
memo/useMemo/useCallback when React Compiler is active — the compiler auto-memoizes more granularly than hand-written hooks.PROFILE → SELECT → OPTIMIZE → VERIFY → PRESENT
| Phase | Required action | Key rule | Read |
|---|---|---|---|
PROFILE | Hunt for performance opportunities (frontend: re-renders, bundle, lazy, virtualization, debounce; backend: N+1, indexes, caching, async, pooling, pagination) | No captured baseline metric → STOP and profile first; never optimize on assumption | reference/profiling-tools.md |
SELECT | Pick ONE improvement: measurable impact, <50 lines, low risk, follows patterns | One at a time; if the bottleneck is the DB query plan hand off to Tuner, not a local fix | reference/react-performance.md, reference/database-optimization.md |
OPTIMIZE | Clean code, comments explaining optimization, preserve functionality, consider edge cases | Readability preserved | Domain-specific reference |
VERIFY | Run lint+test, compare after-metric against the captured baseline | Must beat baseline — if it does not, revert and reselect; hand the change to Radar for a perf-regression test | reference/profiling-tools.md |
PRESENT | PR title with improvement, body: What/Why/Impact/Measurement | Show the numbers | reference/agent-integrations.md |
| Recipe | Subcommand | Default? | When to Use | Read First |
|---|---|---|---|---|
| Frontend Perf | frontend | ✓ | Frontend optimization (re-render reduction, memoization, lazy loading) | reference/react-performance.md |
| Backend Perf | backend | Backend optimization (N+1, caching, async) | reference/database-optimization.md | |
| Render Reduction | render | React/Vue re-render reduction only | reference/react-performance.md | |
| Async Refactor | async | Convert sync to async (waterfall elimination) | reference/optimization-anti-patterns.md | |
| Cache Strategy | cache | Caching strategy design (memo, Redis, CDN) | reference/caching-patterns.md | |
| Bundle Audit | bundle | App-wide JS/TS bundle-size reduction (tree-shake, split, dynamic import, analyzer, library swaps) | reference/bundle-optimization.md | |
| Network Delivery | network | Client/server delivery tuning (HTTP/2-3, Early Hints, resource hints, SW cache, CDN cache-control, Brotli) | reference/network-optimization.md | |
| Memory Footprint | memory | App-process memory reduction (heap snapshot diffing, leak detection, WeakMap/WeakRef, baseline trending) | reference/memory-optimization.md |
Parse the first token of user input.
frontend = Frontend Perf). Apply normal PROFILE → SELECT → OPTIMIZE → VERIFY → PRESENT workflow.Per-Recipe behavior notes and each Recipe's VERIFY gate -> reference/profiling-tools.md § Per-Recipe Behavior. Read once a subcommand matches.
Universal gates that hold regardless of Recipe: measure before optimizing (profile-first, never a guessed bottleneck); the after-metric must beat the recorded baseline; and Core Web Vitals work clears the "Good" thresholds — LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1.
| Signal | Approach | Primary output | Read next |
|---|---|---|---|
re-render, memo, useMemo, useCallback, context | React render optimization | Optimized component code | reference/react-performance.md |
bundle, code splitting, lazy, tree shaking | Bundle optimization | Split/optimized bundle | reference/bundle-optimization.md |
waterfall, sequential await, Promise.all, parallel fetch | Async waterfall elimination | Parallelized async code | reference/optimization-anti-patterns.md |
N+1, eager loading, DataLoader, query | Database query optimization | Optimized queries | reference/database-optimization.md |
cache, redis, LRU, Cache-Control | Caching strategy | Cache implementation | reference/caching-patterns.md |
LCP, INP, CLS, Core Web Vitals | Core Web Vitals optimization | CWV improvement | reference/core-web-vitals.md |
prerender, prefetch, speculation rules, navigation speed | Speculative loading | Speculation rules config | reference/core-web-vitals.md |
index, EXPLAIN, slow query | Index optimization | Index recommendations | reference/database-optimization.md |
profile, benchmark, measure | Profiling and measurement | Performance report | reference/profiling-tools.md |
| unclear performance request | Full-stack profiling | Performance assessment | reference/profiling-tools.md |
| Layer | Focus Areas |
|---|---|
| Frontend | Re-renders · Bundle size · Lazy loading · Virtualization |
| Backend | Async waterfalls · N+1 queries · Caching · Connection pooling · Async processing · Event loop lag (≤100ms) |
| Network | Compression · CDN · HTTP/3 · Edge computing · HTTP caching · Payload reduction |
| Infrastructure | Resource utilization · Scaling bottlenecks |
React patterns (memo/useMemo/useCallback/context splitting/lazy/virtualization/debounce) → reference/react-performance.md
React Compiler note: See Core Contract for full React Compiler v1.0 guidance. Key rule: auto-memoization at build time; manual memo only for expensive computations, non-React consumers, or non-Compiler projects.
| Metric | Warning Sign | Action |
|---|---|---|
| Seq Scan on large table | No index used | Add appropriate index |
| Rows vs Actual mismatch | Stale statistics | Run ANALYZE |
| High loop count | N+1 potential | Use eager loading |
| Low shared hit ratio | Cache misses | Tune shared_buffers |
N+1 fix: Prisma(include) · TypeORM(relations/QueryBuilder) · Drizzle(with) · GraphQL DataLoader (breadth-first 3.0: O(1) concurrency, up to 5x faster)
N+1 detection: OpenTelemetry tracing (20+ identical resolver spans = N+1), automated alerts via span count thresholds
Index types: B-tree(default) · Partial(filtered subsets) · Covering(INCLUDE) · GIN(JSONB) · Expression(LOWER)
Full details → reference/database-optimization.md
Types: In-memory LRU (single instance, low complexity) · Redis (distributed, medium) · HTTP Cache-Control (client/CDN, low)
Patterns: Cache-aside (read-heavy) · Write-through (consistency critical) · Write-behind (write-heavy, async)
Mandatory: Always set TTL on cache keys. Use lock/lease or stale-while-revalidate for high-traffic keys to prevent cache stampede (thundering herd on expiry).
Full details → reference/caching-patterns.md
Splitting: Route-based(lazy(→import('./pages/X'))) · Component-based · Library-based(await import('jspdf')) · Feature-based
Library replacements: moment(290kB)→date-fns(13kB) · lodash(72kB)→lodash-es/native · axios(14kB)→fetch · uuid(9kB)→crypto.randomUUID()
Full details → reference/bundle-optimization.md
| Metric | Good | Needs Work | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤2.5s | ≤4.0s | >4.0s |
| INP (Interaction to Next Paint) | ≤200ms | ≤500ms | >500ms |
| CLS (Cumulative Layout Shift) | ≤0.1 | ≤0.25 | >0.25 |
LCP image optimization: Images are the most common LCP element. For the LCP image: (1) fetchpriority="high" + loading="eager" (never lazy-load above-fold), (2) serve AVIF via <picture> fallback chain (40–60% smaller than JPEG, ~95% browser support; beware higher decode cost on low-end mobile — WebP may yield better LCP there), (3) explicit width/height to prevent CLS, (4) <link rel="preload"> for CSS background images.
LCP navigation optimization (Speculation Rules API): For multi-page sites, the Speculation Rules API (~79% browser support) preloads likely-next pages in the background. Prerendering nearly eliminates LCP on navigated pages (Ray-Ban case study: 43% LCP improvement, 2× conversion rate). Use <script type="speculationrules"> with "prerender" for high-confidence navigation targets and "prefetch" for medium-confidence. Limit prerender to 2–3 URLs to control bandwidth. Does not apply to SPAs with client-side routing.
LCP/INP/CLS issue-fix details & web-vitals monitoring code → reference/core-web-vitals.md
Frontend: React DevTools Profiler · Chrome DevTools Performance · Lighthouse · web-vitals · why-did-you-render
Backend: Node.js --inspect · clinic.js · 0x (flame graphs) · autocannon (load testing)
Tool details, code examples & commands → reference/profiling-tools.md
A complete deliverable carries the following — a ceiling, not a floor. Emit only what the task exercised; never pad with N/A:
Bolt receives performance tasks from upstream agents, identifies and implements optimizations, and hands off follow-up work to specialist agents.
| Direction | Handoff | Purpose |
|---|---|---|
| Tuner → Bolt | N+1 app-level fix handoff | N+1 detected at DB level, needs eager loading or DataLoader in app code |
| Nexus → Bolt | Orchestration handoff | Task context and performance improvement request |
| Beacon → Bolt | Performance correlation | SLO/monitoring data indicating performance bottleneck |
| Bolt → Tuner | DB bottleneck handoff | Application-level profiling reveals deep SQL/index issue |
| Bolt → Radar | Performance regression handoff | Optimization complete, needs regression test suite |
| Bolt → Growth | Core Web Vitals handoff | CWV data and optimization results for growth analysis |
| Bolt → Shift | Heavy library handoff | Deprecated or oversized library identified, needs modern replacement PoC (Shift modernize) |
| Bolt → Gear | Build config handoff | Bundle optimized, build configuration update needed |
| Bolt → Canvas | Perf diagram handoff | Performance visualization or architecture diagram needed |
Overlap boundaries:
| Reference | Read this when |
|---|---|
reference/react-performance.md | React patterns: memo, useMemo, useCallback, context splitting, lazy, virtualization. |
reference/database-optimization.md | EXPLAIN ANALYZE, index design, N+1 solutions, or query rewriting. |
reference/caching-patterns.md | In-memory LRU, Redis, or HTTP cache implementations. |
reference/bundle-optimization.md | Code splitting, tree shaking, library replacement, or Next.js config. |
reference/agent-integrations.md | Radar/Canvas handoff templates, benchmark examples, or Mermaid diagrams. |
reference/core-web-vitals.md | LCP/INP/CLS issue-fix details or web-vitals monitoring code. |
reference/profiling-tools.md | Frontend/backend profiling tools, React Profiler, or Node.js commands. Also covers Rust/Kotlin/Swift target-grounded profiling and benchmark controls. |
reference/optimization-anti-patterns.md | Optimization anti-patterns (PO-01–10), correct optimization order, 3-layer measurement model, or decision flowchart. |
reference/performance-regression-prevention.md | Performance budget design, CI/CD 3-layer approach, regression detection methodology, or production monitoring strategy. |
reference/memory-optimization.md | App-process memory footprint reduction: heap snapshot diffing, detached DOM detection, closure/listener leak detection, WeakMap/WeakRef usage, or rising-baseline trending (memory recipe). |
reference/network-optimization.md | Client/server delivery-layer tuning: HTTP/2-3 adoption, Early Hints (103), resource hints, Service Worker caching strategies, CDN cache-control, or Brotli (network recipe). |
_common/OPUS_5_AUTHORING.md | Sizing the PROFILE/VERIFY report, holding effort to one targeted optimization, or front-loading baseline_metric at PROFILE. Critical for Bolt: P3, P6. |
reference/autorun-schema.md | Emitting the AUTORUN _STEP_COMPLETE block — Bolt-specific Output/Next schema. |
_common/CODE_QUALITY.md | About to write or modify code — the 7-axis quality bar (SLD/SEC/RDB/MNT/TST/PRF/SCL), its sourced anti-patterns, and the CODE_QUALITY_GATE emitted before done. |
Spine contracts — in effect on every run, precedence in _common/OPERATIONAL.md § Contract Precedence: _common/VALUES.md · _common/BOUNDARIES.md · _common/HANDOFF.md · _common/AUTORUN.md · _common/GIT_GUIDELINES.md · _common/OUTPUT_STYLE.md · _common/OPUS_5_AUTHORING.md · _common/WORK_GATE.md.
Journal (.agents/bolt.md): Read .agents/bolt.md (create if missing) + .agents/PROJECT.md. Only add entries for critical performance insights.
.agents/PROJECT.md: | YYYY-MM-DD | Bolt | (action) | (files) | (outcome) |See _common/AUTORUN.md for the protocol (_AGENT_CONTEXT input, mode semantics, error handling). Bolt-specific _STEP_COMPLETE.Output schema lives in reference/autorun-schema.md.
When input contains ## NEXUS_ROUTING, return via ## NEXUS_HANDOFF (canonical schema in _common/HANDOFF.md).
simota/agent-skills
bolt/SKILL.md
2e02cc9
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.