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

improvement-engine

Implement UI and code-quality fixes for numeric formatting and error boundaries in Next.js TypeScript.

4|1|Updated Feb 12, 2026
Search Tags:#typescript#react#formatting#code-quality#error-handling#ui-improvement#ux-polish
One-click install
npx skills add https://github.com/0xjc65eth/CYPHER-V3 --skill improvement-engine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improvement-engine
Source: https://github.com/0xjc65eth/CYPHER-V3/tree/main/skills/improvement-engine
Command: npx skills add https://github.com/0xjc65eth/CYPHER-V3 --skill improvement-engine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CYPHER V3 currently exposes inconsistent number formatting, visible undefined/NaN values, and brittle modules that can crash the whole app. These issues reduce trader trust and make the product feel unprofessional; the Improvement Engine prescribes targeted fixes to make the platform reliable and polished.

Core Features & Use Cases

  • Centralized Formatting: Introduces a single formatting library for USD, BTC, sats, percentages, compacts, and safe wrappers to avoid .toFixed/.toLocaleString misuse.
  • Robust Error Handling & UX Polish: Adds module-level error boundaries, contextual empty states, Bloomberg-style skeletons, and universal fallbacks to prevent crashes and confusing UI artifacts.
  • Realtime & Operational Indicators: Implements a persistent price ticker, data freshness indicators, and live-connection status, plus keyboard shortcuts and design-system color consistency for a pro trader experience.
  • Use Case: Apply the engine to the Next.js TypeScript front-end to replace ad-hoc formatting, wrap modules in boundaries, and deploy a polished header ticker so a trader never sees NaN or undefined values in production.

Quick Start

Use the improvement-engine to scan the front-end codebase, add a centralized format library, wrap major modules with error boundaries, and replace raw numeric rendering with safe, formatted components.

Frequently Asked Questions about improvement-engine

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

FAQPage Schema
How do I fix undefined and NaN values showing up in my Next.js TypeScript dashboard?▼

You can prevent app crashes from visible NaN values by adding module-level error boundaries and universal fallbacks. This approach isolates rendering failures within brittle modules so a single component error does not crash the entire Next.js TypeScript front-end.

How do I standardize inconsistent numeric formatting for cryptocurrency values like BTC and sats?▼

Standardize inconsistent numeric formatting by introducing a centralized formatting library for USD, BTC, sats, and percentages. This provides universal safe wrappers to enforce consistent value rendering across all modules like Portfolio and Trading.

Does this UI improvement approach work with existing Next.js modules like Ordinals, Runes, and BRC-20?▼

Yes, this UI improvement approach works directly with Next.js TypeScript modules including Ordinals, Runes, BRC-20, and AI Chat. It scans the codebase to wrap these specific modules in error boundaries while preserving type checking and commit hygiene.

What is the best way to add realtime price tickers and connection status indicators to a crypto trading UI?▼

The best way to add realtime tickers and connection indicators is to implement a persistent header price ticker, data freshness indicators, and live-connection status displays. This delivers a pro trader experience with operational visibility.

How do I add contextual empty states and skeleton loaders to prevent confusing UI artifacts?▼

Add contextual empty states and skeleton loaders by replacing brittle rendering logic with universal fallbacks and Bloomberg-style skeletons. This prevents confusing UI artifacts when data is loading or unavailable across the application.

Related Skills

Explore More Software Engineering Skills→
lawless-mlawless-m
2

JSharpener

Detect unused code and circular dependencies in JavaScript/TypeScript projects.

Community
Advanced
gwenwindflowergwenwindflower
9

web-ux-command-palette

Build keyboard-first command palettes with cmdk and shadcn/ui.

Community
Intermediate
dthompsonfldthompsonfl

react-components

Build secure, reusable React UI components for Next.js 16 apps.

Community
Advanced
datorresbdatorresb

refactoring

Provides step-by-step tactical guidance for refactoring Java/C++/C#/Python/Ruby/Go/JavaScript code with safe, behavior-preserving workflows.

Community
Intermediate