skills.rest
0xjc65eth
0xjc65ethCOMMUNITY
Explore all skills by this author →
GitHub

performance-engineer

Optimize Next.js TypeScript trading terminal performance with bundle, React, WebSocket, and cache strategies.

4|1|Updated Feb 12, 2026
Search Tags:#performance#caching#react#nextjs#websocket#lazy-loading#bundle-size
One-click install
npx skills add https://github.com/0xjc65eth/CYPHER-V3 --skill performance-engineer-0xjc65eth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-engineer
Source: https://github.com/0xjc65eth/CYPHER-V3/tree/main/skills/performance-engineer
Command: npx skills add https://github.com/0xjc65eth/CYPHER-V3 --skill performance-engineer-0xjc65eth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides practical, actionable guidance to optimize the performance of the CYPHER V3 trading terminal by reducing client bundle size, minimizing React rendering overhead, improving WebSocket throughput, and implementing an effective multi-layer cache strategy to meet strict UX and latency targets.

Core Features & Use Cases

  • Bundle analysis & reduction: identify heavy imports, measure First Load JS, and recommend code-splitting and dynamic imports for libraries like TensorFlow, CCXT, and Chart.js.
  • React rendering optimizations: memoization, stable callbacks, virtualized lists for long Ordinals/Runes collections, and tuned React Query defaults to reduce unnecessary re-renders and network churn.
  • Realtime & batching: WebSocket batching strategy to aggregate updates, lower message processing overhead, and reduce UI thrash.
  • Cache hierarchy & diagnostics: L1 in-memory, L2 Redis/Upstash, L3 persistent DB patterns with TTL strategies and diagnostic commands (bundle analyzer, Lighthouse CI, depcheck).
  • Use Case: Reduce First Load JS below 300KB and improve LCP and API latencies on a Next.js TypeScript Bitcoin trading dashboard with heavy visualizations and AI modules.

Quick Start

Analyze the repository's client bundle and recommend specific lazy-load, tree-shake, and caching changes to get First Load JS under 300KB.

Frequently Asked Questions about performance-engineer

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

FAQPage Schema
How do I reduce Next.js bundle size below 300KB for a trading dashboard?▼

To reduce Next.js bundle size below 300KB, analyze heavy imports like TensorFlow and Chart.js, then apply code-splitting, dynamic imports, and tree-shaking to minimize First Load JS and improve LCP.

What is the best way to minimize React re-renders in a real-time market data terminal?▼

Minimize React re-renders in real-time market data terminals by applying component memoization, using stable callbacks, implementing virtualized lists for long collections, and tuning React Query defaults to reduce network churn.

How does WebSocket batching improve UI performance in Next.js applications?▼

WebSocket batching improves UI performance by aggregating real-time updates into batches, which lowers message processing overhead and reduces UI thrash in heavy visualization components like trading dashboards.

When do I need a multi-layer cache hierarchy for API latency optimization?▼

You need a multi-layer cache hierarchy when optimizing API latency in trading terminals, utilizing L1 in-memory, L2 Redis/Upstash, and L3 persistent DB patterns with specific TTL strategies to decrease data retrieval times.

Can I lazy-load heavy AI and visualization modules in a Next.js TypeScript project?▼

You can lazy-load heavy AI and visualization modules in a Next.js TypeScript project by using dynamic imports, which defers loading non-critical libraries until needed to satisfy strict First Load JS size targets.

What diagnostics tools help analyze client bundle size and dependency issues?▼

Diagnostics tools like bundle analyzers, Lighthouse CI, and depcheck help analyze client bundle size, measure performance metrics, and identify unused dependencies to provide actionable refactor recommendations.

Related Skills

Explore More Software Engineering Skills→
travisjneumantravisjneuman
88

performance-engineering

Implement Core Web Vitals monitoring, bundle analysis, and load testing for web applications.

Community
Advanced
Logisoft-webLogisoft-web

react-best-practices

Optimizes React and Next.js apps via code splitting, lazy loading, and render improvements.

Community
Intermediate
NickCrewNickCrew
29

react-performance-optimization

Optimize React rendering with memoization, code splitting, and virtualization.

Community
Intermediate
AngelP17AngelP17
1

vercel-react-best-practices

Apply React and Next.js performance best practices during code review.

Community
Intermediate