number-formatting

Name: number-formatting
Author: sendaifun

162stars45forks

How to install number-formatting?

sendaifun/solana-new/number-formatting

$npx -y skills add sendaifun/solana-new --skill number-formatting

Installs into the current project.

Summary

Apply consistent number formatting across crypto/Solana UIs. Use when the user says "format numbers", "number display", "token amounts", "price formatting", "zero subscript", "abbreviate numbers", "format currency", "format percent", "how should I display this number", "number fo

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"number-formatting","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"number-formatting","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	> Wrong skill? See [SKILL_ROUTER.md](../../SKILL_ROUTER.md) for all available skills.
48
49	# Number Formatting
50
51	A strict, enforceable standard for displaying numbers in crypto and Solana UIs. This skill exists because number formatting in crypto is uniquely hard — tokens span 18 orders of magnitude ($84,000 BTC to $0.00005835 BONK), users make financial decisions based on displayed values, and inconsistent formatting destroys trust.
52
53	This is display-only. Internal math always uses raw precision.
54
55	## When to fire this skill
56
57	Apply these rules any time you are:
58
59	- Writing a React component that displays prices, balances, percentages, PnL, ratios, or token amounts
60	- Reviewing UI code that renders numeric values
61	- Building a table, card, watchlist, portfolio view, or any data-dense surface
62	- A user asks "how should I format this number", "why does this look weird", or "the numbers are jittering"
63	- Implementing copy/export functionality for displayed numbers
64
65	If you are generating frontend code that displays numbers and this skill has not been triggered, trigger it yourself. Do not wait for the user to ask. Every number in a crypto UI is a trust signal.
66
67	## Non-Negotiables
68
69	1. Never show scientific notation. `1.52e12` must display as `$1.52T`. No exceptions.
70	2. Never truncate with ellipsis. Numbers are not text. If a number doesn't fit, reduce decimals -> abbreviate -> tiny marker -> scale font. Never `123,456...`.
71	3. Never show `-0.00` or `-$0.00`. Signed zero is forbidden. Catch it explicitly.
72	4. Never show `NaN`, `undefined`, `Infinity`, or crash on null. All render as `--`.
73	5. Never hardcode decimal places. Token amounts use dynamic decimals based on token price. `formatTokenAmount(amount, 2)` is almost always wrong.
74	6. Always use `font-mono tabular-nums`. Numbers that don't use tabular numerals jitter on live updates and misalign in tables. This is non-negotiable.
75	7. Copy gives raw precision. When a user copies `$1.2K`, their clipboard gets `1234.5`. When they copy `0.0₄58`, they get `0.00005835`.
76	8. Zero-subscript gets an `aria-label`. Screen readers can't parse `0.0₄58` — provide the expanded decimal.
77
78	## Workflow
79
80	### Mode 1: Building new components
81
82	1. Read [references/formatting-spec.md](references/formatting-spec.md) — the complete spec with all type rules, pipeline, and examples.
83	2. Read [references/implementation-guide.md](references/implementation-guide.md) — TypeScript types, helper functions, and the `<FormattedNumber>` React component pattern.
84	3. Ident

People who liked this also viewed

6 picks

Type

number-formatting

162stars45forks

View on GitHub

How to install number-formatting?

sendaifun/solana-new/number-formatting

$npx -y skills add sendaifun/solana-new --skill number-formatting

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Preamble (run first)
2
3	```bash
4	_TEL_TIER=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"telemetryTier": "[^"]"' \| head -1 \| sed 's/."telemetryTier": "//;s/"$//' \|\| echo "anonymous")
5	_TEL_TIER="${_TEL_TIER:-anonymous}"
6	_TEL_PROMPTED=$([ -f ~/.superstack/.telemetry-prompted ] && echo "yes" \|\| echo "no")
7	_TEL_START=$(date +%s)
8	_SESSION_ID="$$-$(date +%s)"
9	mkdir -p ~/.superstack
10	echo "TELEMETRY: $_TEL_TIER"
11	echo "TEL_PROMPTED: $_TEL_PROMPTED"
12	if [ "$_TEL_TIER" != "off" ]; then
13	_TEL_EVENT='{"skill":"number-formatting","phase":"build","event":"started","ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'"}'
14	echo "$_TEL_EVENT" >> ~/.superstack/telemetry.jsonl 2>/dev/null \|\| true
15	_CONVEX_URL=$(cat ~/.superstack/config.json 2>/dev/null \| grep -o '"convexUrl":"[^"]*"' \| head -1 \| cut -d'"' -f4 \|\| echo "")
16	[ -n "$_CONVEX_URL" ] && curl -s -X POST "$_CONVEX_URL/api/mutation" -H "Content-Type: application/json" -d '{"path":"telemetry:track","args":{"skill":"number-formatting","phase":"build","status":"success","version":"0.2.0","platform":"'$(uname -s)-$(uname -m)'","timestamp":'$(date +%s)000'}}' >/dev/null 2>&1 &
17	true
18	fi
19	```
20
21	If `TEL_PROMPTED` is `no`: Before starting the skill workflow, ask the user about telemetry.
22	Use AskUserQuestion:
23
24	> Help superstack get better! We track which skills get used and how long they take —
25	> no code, no file paths, no PII. Change anytime in `~/.superstack/config.json`.
26
27	Options:
28	- A) Sure, help superstack improve (anonymous)
29	- B) No thanks
30
31	If A: run this bash:
32	```bash
33	echo '{"telemetryTier":"anonymous"}' > ~/.superstack/config.json
34	_TEL_TIER="anonymous"
35	touch ~/.superstack/.telemetry-prompted
36	```
37
38	If B: run this bash:
39	```bash
40	echo '{"telemetryTier":"off"}' > ~/.superstack/config.json
41	_TEL_TIER="off"
42	touch ~/.superstack/.telemetry-prompted
43	```
44
45	This only happens once. If `TEL_PROMPTED` is `yes`, skip this entirely and proceed to the skill workflow.
46
47	> Wrong skill? See [SKILL_ROUTER.md](../../SKILL_ROUTER.md) for all available skills.
48
49	# Number Formatting
50
51	A strict, enforceable standard for displaying numbers in crypto and Solana UIs. This skill exists because number formatting in crypto is uniquely hard — tokens span 18 orders of magnitude ($84,000 BTC to $0.00005835 BONK), users make financial decisions based on displayed values, and inconsistent formatting destroys trust.
52
53	This is display-only. Internal math always uses raw precision.
54
55	## When to fire this skill
56
57	Apply these rules any time you are:
58
59	- Writing a React component that displays prices, balances, percentages, PnL, ratios, or token amounts
60	- Reviewing UI code that renders numeric values
61	- Building a table, card, watchlist, portfolio view, or any data-dense surface
62	- A user asks "how should I format this number", "why does this look weird", or "the numbers are jittering"
63	- Implementing copy/export functionality for displayed numbers
64
65	If you are generating frontend code that displays numbers and this skill has not been triggered, trigger it yourself. Do not wait for the user to ask. Every number in a crypto UI is a trust signal.
66
67	## Non-Negotiables
68
69	1. Never show scientific notation. `1.52e12` must display as `$1.52T`. No exceptions.
70	2. Never truncate with ellipsis. Numbers are not text. If a number doesn't fit, reduce decimals -> abbreviate -> tiny marker -> scale font. Never `123,456...`.
71	3. Never show `-0.00` or `-$0.00`. Signed zero is forbidden. Catch it explicitly.
72	4. Never show `NaN`, `undefined`, `Infinity`, or crash on null. All render as `--`.
73	5. Never hardcode decimal places. Token amounts use dynamic decimals based on token price. `formatTokenAmount(amount, 2)` is almost always wrong.
74	6. Always use `font-mono tabular-nums`. Numbers that don't use tabular numerals jitter on live updates and misalign in tables. This is non-negotiable.
75	7. Copy gives raw precision. When a user copies `$1.2K`, their clipboard gets `1234.5`. When they copy `0.0₄58`, they get `0.00005835`.
76	8. Zero-subscript gets an `aria-label`. Screen readers can't parse `0.0₄58` — provide the expanded decimal.
77
78	## Workflow
79
80	### Mode 1: Building new components
81
82	1. Read [references/formatting-spec.md](references/formatting-spec.md) — the complete spec with all type rules, pipeline, and examples.
83	2. Read [references/implementation-guide.md](references/implementation-guide.md) — TypeScript types, helper functions, and the `<FormattedNumber>` React component pattern.
84	3. Ident

People who liked this also viewed

6 picks

Type