What problem does it solve? Hand-rolled formatting like $${value} or toLocaleString() breaks under the fr-CA locale and slips through code review unnoticed. This Skill enforces a single centralized formatting path so currency, numbers, percentages, dates, and durations always render correctly for the user's locale, currency, and timezone. ## Core Features & Use Cases - Nine locale-aware formatters via useIntlFormatter(): formatCurrencyFromCents, formatNumber, formatPercent, formatDate, formatDateRange, formatMonthName, formatMinutesAsDuration, formatSecondsAsDuration, and formatList, all memoized and safe in dependency arrays. - Permissive inputs with safe failure: formatters accept raw API values (number | string | null | undefined, Date | string | number) and return an empty string on unparseable input instead of throwing or rendering NaN. - JSX components and date pattern enums: <MoneySpan> and <DurationSpan> for rendered values, and a DateFormat enum so display dates never use custom format strings. - Use Case: Rendering an invoice due date and amount in a React component — call formatDate(invoice.dueAt, DateFormat.DateShort) and <MoneySpan amount={invoice.totalCents} /> instead of concatenating strings, so the same code renders correctly in both en-US (USD) and fr-CA (CAD). ## Quick Start Use the formatting skill to render this invoice amount and due date with useIntlFormatter and MoneySpan instead of manual string formatting.
