Format Numbers

What it does

This skill, format-numbers, provides a utility for formatting numeric values displayed to users within .tsx files. It leverages the @tryghost/shade library to ensure consistent and correct number presentation. Instead of using raw JavaScript methods like toLocaleString() or manual regex replacements, this skill offers a standardized approach for displaying counts, metrics, revenue amounts, and other numerical data in user interfaces.

When to use it

Use this skill when:

• Displaying member counts, visitor counts, or subscriber numbers.
• Presenting email engagement metrics like opens, clicks, and bounces.
• Showing revenue amounts (in conjunction with centsToDollars()).
• Rendering post analytics data such as views or link clicks.
• Any time a numerical quantity is shown in a user interface within .tsx files.

Key capabilities

• Provides the formatNumber() utility function for number formatting.
• Ensures consistent number presentation across applications using @tryghost/shade.
• Offers related utilities like formatPercentage(), abbreviateNumber(), and centsToDollars() (all from @tryghost/shade).

Example prompts

Since this is a utility function used within code, there are no direct user prompts. Instead, the skill is invoked directly in .tsx files using code such as:

• <span >{ formatNumber( totalMembers ) }</span>
• <span >{ ${ currencySymbol } ${ formatNumber ( centsToDollars ( mrr ) ) } }</span>

Tips & gotchas

• Prerequisite: This skill requires the @tryghost/shade library to be installed and imported.
• Avoid Alternatives: Do not use methods like .toLocaleString(), Intl.NumberFormat, raw numbers, or manual regex formatting for number presentation within .tsx files; rely on formatNumber() instead.