---
name: tryghost-format-numbers
description: "Format numbers using the formatNumber function from Shade whenever someone edits a TSX file."
license: "MIT"
metadata:
  decimalai-skill-id: "aadc5bb7-27f5-4e61-827b-de2b2a148d10"
  decimalai-version-id: "a038d5ff-e9e9-4fea-956c-35f53e1d30db"
  decimalai-version: "1"
  decimalai-body-sha256: "9b3b7f899b6de830f311a8c6ba2a6a2b01f906469e6c4ffbc199d167b53f87f5"
  decimalai-name: "tryghost/Format numbers"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "frontend"
  decimalai-source: "https://app.decimal.ai/s/tryghost-format-numbers@1/SKILL.md"
---
# Format Numbers

When editing `.tsx` files, ensure all user-facing numbers are formatted using the `formatNumber` utility from `@tryghost/shade/utils`.

## Import

```typescript
import { formatNumber } from '@tryghost/shade/utils';
```

## When to use formatNumber

Use `formatNumber()` when rendering any numeric value that is displayed to the user, including:

- Member counts, visitor counts, subscriber counts
- Email engagement metrics (opens, clicks, bounces)
- Revenue amounts (combine with `centsToDollars()` for monetary values)
- Post analytics (views, link clicks)
- Any count or quantity shown in UI

## Correct usage

```tsx
<span>{formatNumber(totalMembers)}</span>
<span>{formatNumber(link.count || 0)}</span>
<span>{`${currencySymbol}${formatNumber(centsToDollars(mrr))}`}</span>
<span>{post.members > 0 ? `+${formatNumber(post.members)}` : '0'}</span>
```

## Antipatterns to avoid

Do NOT use any of these patterns for formatting numbers in TSX files:

```tsx
// BAD: raw .toLocaleString()
<span>{count.toLocaleString()}</span>

// BAD: manual Intl.NumberFormat
<span>{new Intl.NumberFormat('en-US').format(count)}</span>

// BAD: raw number without formatting
<span>{memberCount}</span>

// BAD: manual regex formatting
<span>{count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</span>
```

## Related utilities

- `formatPercentage()` - for percentages (e.g., open rates, click rates)
- `abbreviateNumber()` - for compact notation (e.g., 1.2M, 50k)
- `centsToDollars()` - convert cents to dollars before passing to `formatNumber`

All are imported from `@tryghost/shade/utils`.