@uidu/skills 0.2.0

package/skills/uidu-workspace/iteration-1/eval-0-event-detail/without_skill/outputs/page.tsx

@@ -0,0 +1,46 @@
+import { notFound } from 'next/navigation';
+import { uidu } from '@/lib/uidu';
+
+interface EventPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function EventPage({ params }: EventPageProps) {
+  const { id } = await params;
+
+  const event = await uidu.events.get({ id });
+
+  if (!event) {
+    notFound();
+  }
+
+  const startTime = new Date(event.startTime);
+  const formattedStartTime = new Intl.DateTimeFormat('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  }).format(startTime);
+
+  return (
+    <article className="mx-auto max-w-3xl px-4 py-12">
+      <header className="mb-8 border-b pb-6">
+        <h1 className="text-4xl font-bold tracking-tight">{event.name}</h1>
+        <time
+          dateTime={event.startTime}
+          className="mt-3 block text-lg text-muted-foreground"
+        >
+          {formattedStartTime}
+        </time>
+      </header>
+
+      <div
+        className="prose prose-neutral max-w-none dark:prose-invert"
+        dangerouslySetInnerHTML={{ __html: event.body }}
+      />
+    </article>
+  );
+}

package/skills/uidu-workspace/iteration-1/eval-1-stories-listing/eval_metadata.json

@@ -0,0 +1,12 @@
+{
+  "eval_id": 1,
+  "eval_name": "stories-listing",
+  "prompt": "I have a uidu blog with stories. Write a Next.js 16 App Router Server Component at `src/app/page.tsx` that lists all stories sorted by publication date, newest first. Each story should link to `/story/<id>`. Display the story name and publish date. Use the @uidu/client SDK and assume `uidu` is configured at `@/lib/uidu`.",
+  "assertions": [
+    { "text": "Uses `listStories` imported from `@uidu/client`" },
+    { "text": "Reads `story.name` (not `story.title`)" },
+    { "text": "Sorts by `story.publishedAt` in descending order (newest first)" },
+    { "text": "Links to `/story/${story.id}` (nested under /story/, not at root)" },
+    { "text": "Uses `next/link` for navigation" }
+  ]
+}

package/skills/uidu-workspace/iteration-1/eval-1-stories-listing/with_skill/grading.json

@@ -0,0 +1,10 @@
+{
+  "expectations": [
+    { "text": "Uses `listStories` imported from `@uidu/client`", "passed": true, "evidence": "Line 2" },
+    { "text": "Reads `story.name`", "passed": true, "evidence": "Line 21" },
+    { "text": "Sorts by `publishedAt` descending", "passed": true, "evidence": "Lines 8-12: localeCompare with b before a" },
+    { "text": "Links to `/story/${story.id}`", "passed": true, "evidence": "Line 20" },
+    { "text": "Uses `next/link`", "passed": true, "evidence": "Line 1" }
+  ],
+  "pass_rate": 1.0
+}

package/skills/uidu-workspace/iteration-1/eval-1-stories-listing/with_skill/outputs/page.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import { listStories } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+
+export default async function StoriesPage() {
+  const stories = await listStories(uidu, { first: 50 });
+
+  const sorted = [...stories].sort((a, b) =>
+    ((b.publishedAt as string) ?? '').localeCompare(
+      (a.publishedAt as string) ?? '',
+    ),
+  );
+
+  return (
+    <main>
+      <h1>Stories</h1>
+      <ul>
+        {sorted.map((story) => (
+          <li key={story.id}>
+            <Link href={`/story/${story.id}`}>
+              <h2>{story.name}</h2>
+              {story.publishedAt && (
+                <time dateTime={story.publishedAt as string}>
+                  {new Date(story.publishedAt as string).toLocaleDateString()}
+                </time>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-1/eval-1-stories-listing/without_skill/grading.json

@@ -0,0 +1,10 @@
+{
+  "expectations": [
+    { "text": "Uses `listStories` imported from `@uidu/client`", "passed": false, "evidence": "Hallucinated `uidu.stories.list({ orderBy: ... })` (line 5) — no such API" },
+    { "text": "Reads `story.name`", "passed": true, "evidence": "Line 19" },
+    { "text": "Sorts by `publishedAt` descending", "passed": false, "evidence": "Relied on a non-existent `orderBy` option in a hallucinated API call; no client-side sort exists, so sort order at runtime is whatever the SDK returns" },
+    { "text": "Links to `/story/${story.id}`", "passed": true, "evidence": "Line 16" },
+    { "text": "Uses `next/link`", "passed": true, "evidence": "Line 1" }
+  ],
+  "pass_rate": 0.6
+}

package/skills/uidu-workspace/iteration-1/eval-1-stories-listing/without_skill/outputs/page.tsx

@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { uidu } from '@/lib/uidu';
+
+export default async function StoriesPage() {
+  const stories = await uidu.stories.list({
+    orderBy: { publishedAt: 'desc' },
+  });
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-12">
+      <h1 className="mb-8 text-3xl font-bold">Stories</h1>
+      <ul className="space-y-4">
+        {stories.map((story) => (
+          <li key={story.id}>
+            <Link
+              href={`/story/${story.id}`}
+              className="block rounded-lg border p-4 hover:bg-muted"
+            >
+              <h2 className="text-xl font-semibold">{story.name}</h2>
+              {story.publishedAt && (
+                <time
+                  dateTime={story.publishedAt}
+                  className="text-sm text-muted-foreground"
+                >
+                  {new Date(story.publishedAt).toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </time>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-1/eval-2-donations-debug/eval_metadata.json

@@ -0,0 +1,10 @@
+{
+  "eval_id": 2,
+  "eval_name": "donations-debug",
+  "prompt": "In my uidu-powered Next.js app, I'm displaying donation campaigns. I'm currently showing `€{campaign.goal}` directly in JSX but the value looks wrong — campaigns are showing huge numbers like €5000000 for what should be a €50,000 goal. What's wrong and how do I fix it? Please write a short diagnostic explanation in markdown.",
+  "assertions": [
+    { "text": "Identifies that `campaign.goal` (and `donationsAmount`) are returned in cents, not euros/dollars" },
+    { "text": "Suggests dividing by 100 to display the value in major currency units" },
+    { "text": "Shows a corrected code snippet using `campaign.goal / 100` or equivalent" }
+  ]
+}

package/skills/uidu-workspace/iteration-1/eval-2-donations-debug/with_skill/grading.json

@@ -0,0 +1,8 @@
+{
+  "expectations": [
+    { "text": "Identifies cents convention", "passed": true, "evidence": "First line under 'What's wrong': 'returned in cents (integer minor units)'" },
+    { "text": "Suggests dividing by 100", "passed": true, "evidence": "Code block on line 16-18 divides by 100" },
+    { "text": "Shows corrected code with `campaign.goal / 100`", "passed": true, "evidence": "Lines 16-18, repeated in helper at 47-57" }
+  ],
+  "pass_rate": 1.0
+}

package/skills/uidu-workspace/iteration-1/eval-2-donations-debug/with_skill/outputs/answer.md

@@ -0,0 +1,63 @@
+# Diagnosis: donation amounts are in cents, not euros
+
+## What's wrong
+
+Donation campaign monetary fields in the uidu API — `goal`, `donationsAmount` — are stored and returned **in cents** (integer minor units), not in the major currency unit.
+
+So a campaign whose real goal is €50,000 comes back as `goal: 5000000` (5,000,000 cents). When you render `€{campaign.goal}` directly, you're displaying the raw cent value, which is exactly 100× too large — €50,000 shows up as €5,000,000.
+
+The same applies to `donationsAmount` (the running total raised) and any progress-bar math derived from these two fields.
+
+## How to fix it
+
+Divide by 100 before display, and guard against `null`/`undefined`:
+
+```tsx
+const raised = (campaign.donationsAmount ?? 0) / 100;
+const goal = (campaign.goal ?? 0) / 100;
+const progress = goal > 0 ? Math.min(100, (raised / goal) * 100) : 0;
+```
+
+Then render the divided values:
+
+```tsx
+<p>€{goal.toLocaleString('it-IT')}</p>
+<p>€{raised.toLocaleString('it-IT')} raised</p>
+<div className="progress" style={{ width: `${progress}%` }} />
+```
+
+## Recommended: use `Intl.NumberFormat` for proper formatting
+
+Rather than prefixing a hardcoded `€`, format with the locale's currency rules — this gives correct thousands separators, decimal places, and symbol placement:
+
+```tsx
+const fmt = new Intl.NumberFormat('it-IT', {
+  style: 'currency',
+  currency: 'EUR',
+  maximumFractionDigits: 0, // drop ",00" on whole-euro goals
+});
+
+<p>{fmt.format(goal)}</p>          // "50.000 €"
+<p>{fmt.format(raised)} raised</p>
+```
+
+If you're showing many campaigns, extract a small helper:
+
+```ts
+// src/lib/money.ts
+export const centsToEuros = (cents: number | null | undefined) =>
+  (cents ?? 0) / 100;
+
+export const formatEuros = (cents: number | null | undefined) =>
+  new Intl.NumberFormat('it-IT', {
+    style: 'currency',
+    currency: 'EUR',
+    maximumFractionDigits: 0,
+  }).format(centsToEuros(cents));
+```
+
+Then `{formatEuros(campaign.goal)}` everywhere in your JSX.
+
+## Why cents?
+
+Storing money as integer cents avoids floating-point rounding errors (the classic `0.1 + 0.2 !== 0.3` problem). It's standard practice in payment APIs (Stripe, Braintree, etc.), and the uidu API follows the same convention — so the same fix applies to any other monetary field you encounter (e.g. paid-event ticket prices).

package/skills/uidu-workspace/iteration-1/eval-2-donations-debug/without_skill/grading.json

@@ -0,0 +1,9 @@
+{
+  "expectations": [
+    { "text": "Identifies cents convention", "passed": true, "evidence": "Line 5: 'stored and returned in minor currency units (cents)'" },
+    { "text": "Suggests dividing by 100", "passed": true, "evidence": "Line 18: cents / 100 inside formatter" },
+    { "text": "Shows corrected code with `campaign.goal / 100`", "passed": true, "evidence": "Lines 14-21" }
+  ],
+  "pass_rate": 1.0,
+  "notes": "Baseline got this right from training data (cents is industry convention). This assertion is non-discriminating — skill earns no measurable credit here."
+}

package/skills/uidu-workspace/iteration-1/eval-2-donations-debug/without_skill/outputs/answer.md

@@ -0,0 +1,47 @@
+# Donation campaign goal displays as 100x the expected value
+
+## Diagnosis
+
+Your campaign goal is being stored and returned in **minor currency units (cents)**, not in major units (euros). This is the standard convention for monetary values in financial APIs — including most CMS/commerce backends — because integer arithmetic on cents avoids floating-point rounding bugs (`0.1 + 0.2 !== 0.3`).
+
+So `campaign.goal` of `5000000` is **5,000,000 cents = €50,000.00**, exactly the value you expect. Rendering it directly with a `€` prefix prints the raw cent count, which is why the number looks 100x too large.
+
+## The fix
+
+Divide by 100 and format with `Intl.NumberFormat` so you get proper locale-aware currency output (correct decimal separator, thousands grouping, currency symbol placement):
+
+```tsx
+const formatCurrency = (cents: number, currency = 'EUR', locale = 'it-IT') =>
+  new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(cents / 100);
+
+// Usage
+<p>Goal: {formatCurrency(campaign.goal)}</p>
+// → "Goal: € 50.000,00"
+```
+
+### Why `Intl.NumberFormat` instead of `€${value / 100}`?
+
+- Handles locale-specific separators automatically (`50,000.00` in `en-US`, `50.000,00` in `it-IT`, `50 000,00` in `fr-FR`).
+- Places the currency symbol on the correct side of the number.
+- Pads decimals consistently (`€50,000.00`, not `€50000`).
+- Works identically on server and client (no hydration mismatch) because it's a standard Web API available in Node and browsers.
+
+### Things to double-check
+
+1. **Confirm the unit in the schema.** Look at the GraphQL field for `goal` — if it's typed as `Int` and named something like `goalAmount` or `goalCents`, it's almost certainly cents. If there's a sibling field like `goalFormatted` or `goalDisplay`, prefer that (the backend handles formatting for you).
+2. **Currency may not always be EUR.** If campaigns carry a `currency` field (e.g., `campaign.currency === 'USD'`), pass it into the formatter rather than hardcoding `'EUR'`.
+3. **Same applies to `raised` / `pledged` / `donated` fields.** If you're computing a progress percentage like `raised / goal`, both values are in cents so the ratio is still correct — but any value you *display* needs the same `/ 100` + `Intl.NumberFormat` treatment.
+4. **Avoid floating-point math on totals.** If you need to sum donations client-side, keep the values in cents (integers) and only divide by 100 at render time.
+
+## Quick sanity check
+
+Log the raw value once to confirm:
+
+```ts
+console.log('raw goal:', campaign.goal, '→', campaign.goal / 100);
+```
+
+If `5000000 → 50000` matches what the campaign was set up for in the uidu dashboard, the cents-unit theory is confirmed and the formatter above is all you need.

package/skills/uidu-workspace/iteration-2/benchmark.md

@@ -0,0 +1,73 @@
+# Benchmark — uidu skill, iteration 2
+
+## Aggregate (all 8 evals)
+
+| Configuration | Pass rate | Assertions passed |
+| --- | --- | --- |
+| with_skill | 89% | 34 / 38 |
+| without_skill (baseline) | 47% | 18 / 38 |
+| **Δ** | **+42 pp** | **+16** |
+
+## Per-eval
+
+| Eval | with_skill | baseline | Δ | Discriminating? |
+| --- | --- | --- | --- | --- |
+| 0 — event-detail | 6/6 (100%) | 3/6 (50%) | +50 pp | yes |
+| 1 — stories-listing | 5/5 (100%) | 3/5 (60%) | +40 pp | yes |
+| 2 — donations-debug | 3/3 (100%) | 3/3 (100%) | 0 | **no** — cents is industry convention |
+| 3 — client-setup | 5/5 (100%) | 2/5 (40%) | +60 pp | yes (new) |
+| 4 — cms-pageblocks | 6/6 (100%) | 0/6 (0%) | +100 pp | yes (new) — **biggest skill win** |
+| 5 — help-center | 5/5 (100%) | 1/5 (20%) | +80 pp | yes (new) |
+| 6 — forms-contact | 2/5 (40%) | 3/5 (60%) | **−20 pp** | yes (new) — **skill regressed** |
+| 7 — routing-gotcha | 3/3 (100%) | 3/3 (100%) | 0 | **no** — Next.js knowledge baseline has |
+
+## Comparison to iteration 1
+
+| Metric | Iter-1 (3 evals) | Iter-2 (8 evals) |
+| --- | --- | --- |
+| with_skill pass rate | 100% | 89% |
+| Δ vs baseline | +43 pp | +42 pp |
+
+Δ held steady despite eval set tripling and including the Forms regression.
+
+## Analyst notes
+
+1. **eval-4 (CMS PageBlocks) is the biggest win in the entire benchmark (+100 pp).**
+   Baseline scored 0/6 — every detail wrong (PageBlocksParser legacy name,
+   `pageBlock` prop, `useFields(pageBlock)`, `as string` casts). With-skill
+   scored 6/6 — the skill teaches this pattern definitively. This is the
+   strongest single argument for shipping the skill.
+
+2. **eval-6 (Forms) is the only regression: with-skill scored *below* baseline.**
+   The agent followed the skill on the server side (correct `getForm(uidu, …)`)
+   but rebuilt the client form from first principles: imported `useForm` from
+   `react-hook-form` directly, used `createFormResponse(uidu, …)` for
+   submission, and iterated `form.inputs.edges` instead of the
+   `form.formQuestions.edges` the skill calls out. Two interpretations:
+   - **The skill is wrong** about `formQuestions` (real field might be `inputs`).
+     Cross-check against `demo/src/components/blocks/ContactFormClient.tsx`
+     before changing the skill.
+   - **The Forms section isn't authoritative enough.** It shows what to use
+     but doesn't explicitly say "DON'T import useForm from react-hook-form
+     directly." A negative framing line might be enough to override the
+     model's default intuition.
+
+3. **eval-5 (help center) +80 pp** — Baseline did
+   `uidu.helpCenter.getChannel(...)` (namespaced + wrong arg style) and
+   `channel.articles` (flat array). The connection-style edges/node nesting
+   isn't guessable; the skill closes this gap completely.
+
+4. **eval-3 (client setup) +60 pp** — Baseline invented an entire alternative
+   API surface: `endpoint`/`projectId`/`token` keys against
+   `UIDU_API_ENDPOINT`/`UIDU_PROJECT_ID`/`UIDU_API_TOKEN` env vars. The actual
+   shape (`workspace`/`publicToken`/`apiKey` against `UIDU_WORKSPACE`/
+   `UIDU_PUBLIC_TOKEN`/`UIDU_API_KEY`) is not derivable without docs.
+
+5. **API Shape edit (iter-1 → iter-2) appears to have stuck.**
+   Zero iter-2 with-skill outputs hallucinated namespaced methods. Iter-2
+   baselines still did (`uidu.events.get`, `uidu.stories.list`,
+   `uidu.helpCenter.getChannel`). Strong signal the edit worked.
+
+6. **Two non-discriminating evals: eval-2 and eval-7.**
+   Both groups score 100% on cents and root-route-favicon. General knowledge
+   the baseline has. Swap for sharper uidu-specific gotchas in iter-3.

package/skills/uidu-workspace/iteration-2/eval-0-event-detail/with_skill/outputs/page.tsx

@@ -0,0 +1,37 @@
+import { getEvent } from '@uidu/client';
+import { RichText } from '@uidu/react';
+import { notFound } from 'next/navigation';
+import { uidu } from '@/lib/uidu';
+
+export default async function EventDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const event = await getEvent(uidu, { id });
+
+  if (!event) {
+    notFound();
+  }
+
+  const beginsAt = event.instance?.beginsAt;
+  const formattedStart = beginsAt
+    ? new Date(beginsAt as string).toLocaleString(undefined, {
+        dateStyle: 'full',
+        timeStyle: 'short',
+      })
+    : null;
+
+  return (
+    <article>
+      <header>
+        <h1>{event.name}</h1>
+        {formattedStart && (
+          <time dateTime={beginsAt as string}>{formattedStart}</time>
+        )}
+      </header>
+      {event.body != null && <RichText doc={event.body} />}
+    </article>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-0-event-detail/without_skill/outputs/page.tsx

@@ -0,0 +1,60 @@
+import { notFound } from 'next/navigation';
+import { uidu } from '@/lib/uidu';
+
+interface EventPageProps {
+  params: Promise<{ id: string }>;
+}
+
+function formatStartTime(startTime: string | Date): string {
+  const date = typeof startTime === 'string' ? new Date(startTime) : startTime;
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return new Intl.DateTimeFormat('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  }).format(date);
+}
+
+export default async function EventPage({ params }: EventPageProps) {
+  const { id } = await params;
+
+  const event = await uidu.events.get({ id });
+
+  if (!event) {
+    notFound();
+  }
+
+  const formattedStart = event.startTime ? formatStartTime(event.startTime) : null;
+
+  return (
+    <main className="mx-auto max-w-3xl px-6 py-12">
+      <article>
+        <header className="mb-8">
+          <h1 className="text-4xl font-bold tracking-tight">{event.name}</h1>
+          {formattedStart && (
+            <p className="mt-2 text-base text-muted-foreground">
+              <time dateTime={new Date(event.startTime).toISOString()}>
+                {formattedStart}
+              </time>
+            </p>
+          )}
+        </header>
+
+        {event.body && (
+          <div
+            className="prose prose-neutral max-w-none"
+            dangerouslySetInnerHTML={{ __html: event.body }}
+          />
+        )}
+      </article>
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-1-stories-listing/with_skill/outputs/page.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+import { listStories } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+
+export default async function StoriesPage() {
+  const stories = await listStories(uidu, { first: 50 });
+
+  const sorted = [...stories].sort((a, b) =>
+    ((b.publishedAt as string) ?? '').localeCompare(
+      (a.publishedAt as string) ?? '',
+    ),
+  );
+
+  return (
+    <main>
+      <h1>Stories</h1>
+      <ul>
+        {sorted.map((story) => (
+          <li key={story.id}>
+            <Link href={`/story/${story.id}`}>
+              <h2>{story.name}</h2>
+              {story.publishedAt && (
+                <time dateTime={story.publishedAt as string}>
+                  {new Date(story.publishedAt as string).toLocaleDateString()}
+                </time>
+              )}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-1-stories-listing/without_skill/outputs/page.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { uidu } from '@/lib/uidu';
+
+export default async function StoriesPage() {
+  const stories = await uidu.stories.list({
+    orderBy: { publishedAt: 'desc' },
+  });
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-12">
+      <h1 className="mb-8 text-3xl font-bold">Stories</h1>
+      <ul className="space-y-4">
+        {stories.map((story) => (
+          <li key={story.id} className="border-b pb-4">
+            <Link
+              href={`/story/${story.id}`}
+              className="block hover:underline"
+            >
+              <h2 className="text-xl font-semibold">{story.name}</h2>
+              <time
+                dateTime={story.publishedAt}
+                className="text-sm text-muted-foreground"
+              >
+                {new Date(story.publishedAt).toLocaleDateString(undefined, {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}
+              </time>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-2-donations-debug/with_skill/outputs/answer.md

@@ -0,0 +1,51 @@
+# Why your donation amounts are 100x too large
+
+## Diagnosis
+
+Donation campaign amounts in uidu are stored and returned **in cents**, not in the major currency unit. A campaign with a €50,000 goal is returned by the API as `campaign.goal === 5000000`. When you render `€{campaign.goal}` directly, you display the raw cents value, which is why you see `€5000000`.
+
+This convention applies to every monetary field on a donation campaign:
+
+| Field | Returned as | €50,000 looks like |
+|---|---|---|
+| `campaign.goal` | integer cents | `5000000` |
+| `campaign.donationsAmount` | integer cents | `5000000` |
+
+`campaign.donationsCount` is a plain integer (number of donations) and does **not** need conversion.
+
+## The fix
+
+Divide by 100 before rendering. The canonical pattern from the SDK guidance:
+
+```tsx
+const raised = (campaign.donationsAmount ?? 0) / 100;
+const goal = (campaign.goal ?? 0) / 100;
+const progress = goal > 0 ? Math.min(100, (raised / goal) * 100) : 0;
+```
+
+For a properly formatted display, use `Intl.NumberFormat` instead of a hardcoded `€` so locale and grouping separators are correct:
+
+```tsx
+const fmt = new Intl.NumberFormat('it-IT', {
+  style: 'currency',
+  currency: 'EUR',
+  maximumFractionDigits: 0,
+});
+
+<p>{fmt.format(goal)} goal</p>
+<p>{fmt.format(raised)} raised ({progress.toFixed(0)}%)</p>
+```
+
+Replace your current JSX:
+
+```tsx
+// Before — shows €5000000
+€{campaign.goal}
+
+// After — shows €50,000
+{fmt.format((campaign.goal ?? 0) / 100)}
+```
+
+## Why cents?
+
+Storing money as integer cents avoids floating-point rounding errors (e.g. `0.1 + 0.2 !== 0.3` in JavaScript). It is the standard convention for payment-adjacent APIs (Stripe, PayPal, etc.), and uidu follows it for consistency. Apply the `/100` conversion at the **display boundary only** — keep the integer values in your data layer and any arithmetic (progress calculations, comparisons, sorting).