@uidu/skills 0.2.0

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

@@ -0,0 +1,77 @@
+# Donation Campaign Amounts Showing 100x Too Large
+
+## Diagnosis
+
+The numbers are off by a factor of **100**. A €50,000 goal is displaying as €5,000,000. This is the classic symptom of rendering a **monetary amount stored in minor units (cents)** as if it were already a major unit (euros).
+
+Almost every payment/commerce system — Stripe, PayPal, Adyen, Shopify, and most GraphQL-backed CMS/donation platforms (uidu included) — stores money as integers in the **smallest currency subunit**:
+
+- €50.00 → stored as `5000` (cents)
+- €50,000.00 → stored as `5000000` (cents)
+
+When you write `€{campaign.goal}`, you're printing the raw integer cents value directly, which is why every amount looks 100× too big.
+
+## The Fix
+
+Divide by 100 and format with a proper locale-aware formatter. **Do not** just do `goal / 100` inline — you'll lose thousand separators, get floating-point rounding artifacts, and miss currency symbols.
+
+Use `Intl.NumberFormat`:
+
+```tsx
+function formatMoney(amountInCents: number, currency = 'EUR', locale = 'it-IT') {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(amountInCents / 100);
+}
+
+// In your component:
+<p>{formatMoney(campaign.goal)}</p>
+// Renders: "€ 50.000,00"
+```
+
+### Even better: extract a helper
+
+Put this in `lib/format.ts` and reuse it everywhere money appears (goal, raised amount, average donation, etc.):
+
+```ts
+// lib/format.ts
+export function formatMoney(
+  amountInCents: number | null | undefined,
+  options: { currency?: string; locale?: string } = {},
+) {
+  const { currency = 'EUR', locale = 'it-IT' } = options;
+  if (amountInCents == null) return '—';
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+  }).format(amountInCents / 100);
+}
+```
+
+### If the campaign has its own currency field
+
+Most uidu campaigns/donation entities carry a `currency` (ISO 4217 code) alongside the amount. Use it:
+
+```tsx
+<p>{formatMoney(campaign.goal, { currency: campaign.currency })}</p>
+```
+
+## Things to Check / Watch Out For
+
+1. **Confirm the unit in the GraphQL schema.** Look at the field's type and description in your uidu schema — it should be documented as cents/minor units. If it's `Int` and values look 100× too large, that's your confirmation.
+2. **Apply the fix everywhere.** `goal`, `raised`, `donationAmount`, `averageDonation`, progress bars (`raised / goal` ratios are *fine* unaffected because both sides cancel), tooltips, share text, OG image metadata.
+3. **Zero-decimal currencies.** JPY, KRW, etc. don't have minor units — they're stored as whole units. `Intl.NumberFormat` handles this correctly *if* you pass the right currency code, but your `/ 100` divide would be wrong. A safer helper:
+
+   ```ts
+   const ZERO_DECIMAL = new Set(['JPY', 'KRW', 'VND', 'CLP', 'ISK']);
+   const divisor = ZERO_DECIMAL.has(currency) ? 1 : 100;
+   return formatter.format(amountInCents / divisor);
+   ```
+
+4. **Server vs client formatting.** `Intl.NumberFormat` runs on both, but locale defaults differ. Pass an explicit `locale` to avoid hydration mismatches in Next.js.
+5. **Form inputs.** If users *enter* an amount (e.g., custom donation), convert the other way: `Math.round(parseFloat(input) * 100)` before sending to the API.
+
+## TL;DR
+
+`campaign.goal` is in **cents**, not euros. Divide by 100 and use `Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR' })` instead of string-concatenating a `€`.

package/skills/uidu-workspace/iteration-2/eval-3-client-setup/with_skill/outputs/uidu.ts

@@ -0,0 +1,13 @@
+import { createClient } from '@uidu/client';
+
+export const uidu = createClient({
+  workspace: process.env.UIDU_WORKSPACE ?? '',
+  publicToken: process.env.UIDU_PUBLIC_TOKEN, // safe to expose
+  apiKey: process.env.UIDU_API_KEY, // server-only secret
+});
+
+// Required environment variables (.env.local):
+//
+// UIDU_WORKSPACE=your-workspace-slug   # required — e.g. "acme"
+// UIDU_PUBLIC_TOKEN=...                # optional — public read-only token, safe to expose
+// UIDU_API_KEY=...                     # optional — server-only secret for privileged ops

package/skills/uidu-workspace/iteration-2/eval-3-client-setup/without_skill/outputs/uidu.ts

@@ -0,0 +1,47 @@
+import { createClient } from '@uidu/client';
+
+/**
+ * Configured uidu API client.
+ *
+ * Use this client in Server Components, Route Handlers, Server Actions,
+ * and other server-side contexts to query the uidu GraphQL API.
+ *
+ * Example usage in a Server Component:
+ *
+ *   import { uidu } from '@/lib/uidu';
+ *
+ *   export default async function Page() {
+ *     const page = await uidu.cms.getPage({ slug: 'home' });
+ *     return <pre>{JSON.stringify(page, null, 2)}</pre>;
+ *   }
+ */
+export const uidu = createClient({
+  endpoint: process.env.UIDU_API_ENDPOINT!,
+  projectId: process.env.UIDU_PROJECT_ID!,
+  // Optional: server-side token for authenticated/private content.
+  // Omit on the client; the SDK will fall back to public access.
+  token: process.env.UIDU_API_TOKEN,
+});
+
+export default uidu;
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ *  Environment variables — add these to `.env.local`
+ * ─────────────────────────────────────────────────────────────
+ *
+ *  # Required — uidu GraphQL endpoint
+ *  UIDU_API_ENDPOINT=https://uidu.org/graphql
+ *
+ *  # Required — your uidu workspace/project ID
+ *  UIDU_PROJECT_ID=your-project-id-here
+ *
+ *  # Optional — server-side API token for authenticated requests
+ *  # (only needed for private/draft content or authenticated mutations)
+ *  UIDU_API_TOKEN=your-api-token-here
+ *
+ *  # Optional — expose endpoint/projectId to the browser if you also
+ *  # need a client-side uidu client (prefix with NEXT_PUBLIC_)
+ *  # NEXT_PUBLIC_UIDU_API_ENDPOINT=https://uidu.org/graphql
+ *  # NEXT_PUBLIC_UIDU_PROJECT_ID=your-project-id-here
+ */

package/skills/uidu-workspace/iteration-2/eval-4-cms-pageblocks/with_skill/grading.json

@@ -0,0 +1,11 @@
+{
+  "expectations": [
+    { "text": "Parent imports `getPage` from `@uidu/client` and calls `getPage(uidu, { projectId, slug })`", "passed": true, "evidence": "page.tsx lines 1, 8-11" },
+    { "text": "Parent imports `PageBlocks` from `@uidu/react` (NOT `PageBlocksParser`)", "passed": true, "evidence": "page.tsx line 2" },
+    { "text": "Parent renders `<PageBlocks pageBlocks={page.pageBlocks} components={{ Hero, Feature }} />`", "passed": true, "evidence": "page.tsx lines 16-19" },
+    { "text": "Hero component takes `{ block }: { block: PageBlock }` (not `pageBlock`)", "passed": true, "evidence": "Hero.tsx line 6" },
+    { "text": "Hero uses `useFields(block.fieldValues)` from `@uidu/react`", "passed": true, "evidence": "Hero.tsx line 7" },
+    { "text": "Hero uses `toText(fields.title)` (not `as string` casts)", "passed": true, "evidence": "Hero.tsx lines 8-9" }
+  ],
+  "pass_rate": 1.0
+}

package/skills/uidu-workspace/iteration-2/eval-4-cms-pageblocks/with_skill/outputs/Hero.tsx

@@ -0,0 +1,17 @@
+import type { Page } from '@uidu/client';
+import { toText, useFields } from '@uidu/react';
+
+type PageBlock = NonNullable<Page['pageBlocks']>[number];
+
+export function Hero({ block }: { block: PageBlock }) {
+  const fields = useFields(block.fieldValues);
+  const title = toText(fields.title);
+  const subtitle = toText(fields.subtitle);
+
+  return (
+    <section>
+      <h1>{title}</h1>
+      {subtitle && <p>{subtitle}</p>}
+    </section>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-4-cms-pageblocks/with_skill/outputs/page.tsx

@@ -0,0 +1,21 @@
+import { getPage } from '@uidu/client';
+import { PageBlocks } from '@uidu/react';
+import { Hero } from '@/components/blocks/Hero';
+import { Feature } from '@/components/blocks/Feature';
+import { uidu } from '@/lib/uidu';
+
+export default async function HomePage() {
+  const page = await getPage(uidu, {
+    projectId: process.env.UIDU_PROJECT_ID!,
+    slug: 'home',
+  });
+
+  if (!page) return <div>Not found</div>;
+
+  return (
+    <PageBlocks
+      pageBlocks={page.pageBlocks}
+      components={{ Hero, Feature }}
+    />
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-4-cms-pageblocks/without_skill/outputs/Hero.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useFields } from '@uidu/react/apps/cms';
+import type { PageBlock } from '@uidu/client/cms';
+
+interface HeroProps {
+  pageBlock: PageBlock;
+}
+
+export function Hero({ pageBlock }: HeroProps) {
+  const fields = useFields(pageBlock);
+
+  const title = fields.title as string | undefined;
+  const subtitle = fields.subtitle as string | undefined;
+
+  return (
+    <section className="relative w-full py-24 px-6 md:py-32">
+      <div className="mx-auto max-w-5xl text-center">
+        {title && (
+          <h1 className="text-4xl font-bold tracking-tight md:text-6xl">
+            {title}
+          </h1>
+        )}
+        {subtitle && (
+          <p className="mt-6 text-lg text-muted-foreground md:text-xl">
+            {subtitle}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-4-cms-pageblocks/without_skill/outputs/page.tsx

@@ -0,0 +1,35 @@
+import { getPage } from '@uidu/client/cms';
+import { PageBlocksParser } from '@uidu/react/components';
+import { uidu } from '@/lib/uidu';
+import { Hero } from '@/components/blocks/Hero';
+import { Feature } from '@/components/blocks/Feature';
+
+export default async function HomePage() {
+  const projectId = process.env.UIDU_PROJECT_ID;
+
+  if (!projectId) {
+    throw new Error('UIDU_PROJECT_ID environment variable is not set');
+  }
+
+  const page = await getPage({
+    endpoint: uidu.endpoint,
+    slug: 'home',
+    projectId,
+  });
+
+  if (!page) {
+    return <div>Page not found</div>;
+  }
+
+  return (
+    <main>
+      <PageBlocksParser
+        blocks={page.pageBlocks}
+        components={{
+          hero: Hero,
+          feature: Feature,
+        }}
+      />
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-5-help-center/with_skill/outputs/page.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { getChannel } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+
+export default async function HelpCenterPage() {
+  const channel = await getChannel(uidu, {
+    id: process.env.UIDU_CHANNEL_ID!,
+  });
+
+  if (!channel) {
+    return <div>Help center not found</div>;
+  }
+
+  const collections =
+    channel.kbCollections?.edges
+      ?.map((edge) => edge?.node)
+      .filter((node): node is NonNullable<typeof node> => node != null) ?? [];
+
+  return (
+    <main>
+      <h1>{channel.name}</h1>
+
+      {collections.length === 0 ? (
+        <p>No articles yet.</p>
+      ) : (
+        collections.map((collection) => {
+          const articles =
+            collection.kbArticles?.edges
+              ?.map((edge) => edge?.node)
+              .filter(
+                (node): node is NonNullable<typeof node> => node != null,
+              ) ?? [];
+
+          return (
+            <section key={collection.id}>
+              <h2>{collection.name}</h2>
+              {articles.length === 0 ? (
+                <p>No articles in this collection.</p>
+              ) : (
+                <ul>
+                  {articles.map((article) => (
+                    <li key={article.id}>
+                      <Link href={`/help/${article.id}`}>{article.name}</Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          );
+        })
+      )}
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-5-help-center/without_skill/outputs/page.tsx

@@ -0,0 +1,80 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { uidu } from '@/lib/uidu';
+
+export default async function HelpCenterPage() {
+  const channelId = process.env.UIDU_CHANNEL_ID;
+
+  if (!channelId) {
+    notFound();
+  }
+
+  const channel = await uidu.helpCenter.getChannel({ id: channelId });
+
+  if (!channel) {
+    notFound();
+  }
+
+  // Group articles by collection
+  const articles = channel.articles ?? [];
+  const grouped = new Map<
+    string,
+    {
+      collectionId: string;
+      collectionName: string;
+      items: Array<{ id: string; title: string }>;
+    }
+  >();
+
+  for (const article of articles) {
+    const collectionId = article.collection?.id ?? 'uncategorized';
+    const collectionName = article.collection?.name ?? 'Uncategorized';
+
+    if (!grouped.has(collectionId)) {
+      grouped.set(collectionId, {
+        collectionId,
+        collectionName,
+        items: [],
+      });
+    }
+
+    grouped.get(collectionId)!.items.push({
+      id: article.id,
+      title: article.title,
+    });
+  }
+
+  const collections = Array.from(grouped.values());
+
+  return (
+    <main className="container mx-auto px-4 py-12">
+      <h1 className="text-4xl font-bold mb-8">{channel.name}</h1>
+
+      {collections.length === 0 ? (
+        <p className="text-muted-foreground">No articles available.</p>
+      ) : (
+        <div className="space-y-10">
+          {collections.map((collection) => (
+            <section key={collection.collectionId}>
+              <h2 className="text-2xl font-semibold mb-4">
+                {collection.collectionName}
+              </h2>
+              <ul className="space-y-2">
+                {collection.items.map((article) => (
+                  <li key={article.id}>
+                    <Link
+                      href={`/help/${article.id}`}
+                      className="text-primary hover:underline"
+                    >
+                      {article.title}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}

package/skills/uidu-workspace/iteration-2/eval-6-forms-contact/with_skill/grading.json

@@ -0,0 +1,11 @@
+{
+  "expectations": [
+    { "text": "Server file uses `getForm` from `@uidu/client` with `{ id: formId }`", "passed": true, "evidence": "page.tsx lines 2, 21" },
+    { "text": "Client file has `'use client'` directive", "passed": true, "evidence": "ContactForm.tsx line 2" },
+    { "text": "Client uses `useForm` imported from `@uidu/react` (NOT from `react-hook-form`)", "passed": false, "evidence": "ContactForm.tsx line 5: `import { useForm, type SubmitHandler } from 'react-hook-form'` — the agent ignored the skill's recommendation and went with raw react-hook-form" },
+    { "text": "useForm called with the uidu client and form object", "passed": false, "evidence": "useForm is from react-hook-form so this assertion doesn't apply meaningfully; submission goes through `createFormResponse(uidu, ...)` (which IS from @uidu/client) rather than uidu's useForm wrapper" },
+    { "text": "Iterates `form.formQuestions.edges` (the shape the skill describes)", "passed": false, "evidence": "ContactForm.tsx line 69: iterates `form.inputs.edges` instead. Agent deviated from the skill — either the skill is wrong about the field name or the agent over-rode its guidance" }
+  ],
+  "pass_rate": 0.4,
+  "notes": "WORSE than baseline (3/5 → 2/5). The skill's Forms section isn't authoritative enough to override the model's default react-hook-form intuition. The agent kept the server-side getForm call but rebuilt the client side from first principles. Investigate: (a) is the skill wrong about `formQuestions` vs `inputs`? (b) does the Forms section need more explicit 'use useForm from @uidu/react, NOT react-hook-form directly' framing? Cross-check against the demo's ContactFormClient.tsx before iterating."
+}