Stats
Actions
Tags
From cognition-and-learnability-principles
Use this skill when designing inputs or displays for numeric strings — phone numbers, OTP / verification codes, credit card numbers, account IDs, license keys, currency, dates, social security numbers. Trigger when picking a format for displaying numbers, designing OTP entry UIs, or formatting identifiers in tables and receipts. Sub-aspect of `chunking`; read that first.
How this skill is triggered — by the user, by Claude, or both
Slash command
/cognition-and-learnability-principles:chunking-numeric-and-otpThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Numbers are the canonical chunking case. A 10-digit phone number, a 16-digit credit card, a 6-digit OTP — without chunking, these are working-memory overloads. With chunking, they're manageable.
Numbers are the canonical chunking case. A 10-digit phone number, a 16-digit credit card, a 6-digit OTP — without chunking, these are working-memory overloads. With chunking, they're manageable.
Conventions that have evolved across industries:
| Type | Standard chunking | Example |
|---|---|---|
| US phone | 3-3-4 | 555-867-5309 |
| International phone | varies; usually 2-3-3-2 or similar | +44 20 7946 0958 |
| Credit card | 4-4-4-4 (most) or 4-6-5 (Amex) | 4242 4242 4242 4242 |
| Social Security (US) | 3-2-4 | 123-45-6789 |
| OTP / verification | 3-3 (6-digit) or 4-4 (8-digit) | 123-456 |
| Bank account (US) | varies; often grouped with type | 110000000 → routing display |
| ISBN | 1-3-3-5-1 (ISBN-13) | 978-3-16-148410-0 |
| IP address | 4 octets separated by dots | 192.168.1.1 |
| Date (ISO) | 4-2-2 | 2026-05-02 |
| Currency | 3-digit groups | $1,234,567.89 |
When in doubt, follow the convention. Users have already learned it.
The most common modern chunking case in product UI. A 6-digit code from email or SMS, entered into a verification field.
Single field:
<input type="text" inputmode="numeric" maxlength="6" pattern="\d{6}" />
Chunked fields (one per digit):
<div class="otp-input" role="group" aria-label="Verification code">
<input type="text" inputmode="numeric" maxlength="1" autocomplete="one-time-code" />
<input type="text" inputmode="numeric" maxlength="1" />
<input type="text" inputmode="numeric" maxlength="1" />
<span class="separator" aria-hidden>—</span>
<input type="text" inputmode="numeric" maxlength="1" />
<input type="text" inputmode="numeric" maxlength="1" />
<input type="text" inputmode="numeric" maxlength="1" />
</div>
The chunked version:
The single-field version is simpler to implement and supports SMS-autofill on iOS via autocomplete="one-time-code". Modern apps often offer both: a single field on mobile (where autofill is critical) and chunked on desktop.
autocomplete="one-time-code" on at least one input enables iOS Messages autofill.inputmode="numeric".Phone numbers vary widely by country. Patterns:
<label>
Phone
<div class="phone-input">
<select name="country-code">
<option value="+1">🇺🇸 +1</option>
<option value="+44">🇬🇧 +44</option>
<!-- ... -->
</select>
<input type="tel" name="phone" placeholder="555-867-5309" />
</div>
</label>
In production, never display full card numbers — show the last 4 digits chunked with masking:
**** **** **** 4242
For entry, use 4-4-4-4 chunking with auto-advance, paste support, and card-type detection:
<input type="text" inputmode="numeric" autocomplete="cc-number"
placeholder="1234 5678 9012 3456" />
Built-in browsers and password managers handle most of this if you use the right autocomplete value.
For internal IDs (account IDs, transaction IDs, session IDs):
font-family: monospace; font-variant-numeric: tabular-nums;).<div class="id-display">
<span class="id-value">ws_8f3c-7a92-1b04</span>
<button onclick="copyToClipboard('ws_8f3c-7a92-1b04')" aria-label="Copy">📋</button>
</div>
The chunking aids reading aloud (support calls) and verification.
Currency should always use locale-appropriate digit grouping:
$1,234,567.89 (3-digit groups, period decimal).€1.234.567,89 (period grouping, comma decimal).₹12,34,567.89 (mixed grouping: 2-2-3).Use Intl.NumberFormat to get this right per locale:
new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
.format(1234567.89);
// "$1,234,567.89"
Numeric columns in tables should use font-variant-numeric: tabular-nums so digits align vertically.
1,234.56 to a German user (who reads it as 1,234.56 = roughly 1,234 plus 56/100 instead of 1234.56).inputmode: a numeric field that opens the alphabet keyboard on mobile. Easy fix; commonly missed.inputmode="numeric").chunking (parent).chunking-form-grouping — chunking at the form-section level.legibility (perception) — tabular numerals for column alignment.accessibility-perceivable (process) — number formatting affects screen-reader pronunciation.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub hdeibler/universal-design-principles --plugin cognition-and-learnability-principles