@uidu/skills 0.2.0

package/README.md

@@ -0,0 +1,42 @@
+# @uidu/skills
+
+Agent skills for the uidu SDK. Install them into any AI agent — [Claude Code](https://claude.com/claude-code), Cursor, Copilot, Windsurf, Gemini, etc. — so the assistant knows the canonical patterns for `@uidu/client` and `@uidu/react`.
+
+## Install
+
+Via the [skills.sh](https://www.skills.sh) CLI:
+
+```bash
+npx skills add uidu-org/api.js --skill uidu -a claude-code
+```
+
+Replace `claude-code` with your agent of choice (`cursor`, `copilot`, `windsurf`, etc.).
+
+## Available skills
+
+| Skill | Description |
+|---|---|
+| `uidu` | Comprehensive guide to the uidu SDK — package map, env setup, fetch patterns for CMS pages, events, stories, donations, help center, and forms, plus RichText rendering and scaffolding via `create-uidu-app`. |
+
+More skills will be split out from `uidu` as individual areas grow.
+
+## Layout
+
+```
+skills/
+└── uidu/
+    ├── SKILL.md       # the skill itself
+    └── metadata.json  # author, version
+```
+
+Each skill is a directory containing `SKILL.md` with YAML frontmatter — the standard agent-skills shape used by [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) and others.
+
+## Contributing
+
+Skills live in `skills/<name>/SKILL.md`. PRs welcome at https://github.com/uidu-org/api.js.
+
+## See also
+
+- The skills ecosystem: https://www.skills.sh
+- Skills CLI: https://github.com/vercel-labs/skills
+- Vercel agent skills: https://github.com/vercel-labs/agent-skills

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@uidu/skills",
+  "version": "0.2.0",
+  "description": "Agent skills for the uidu SDK — installable via the open agent skills ecosystem (skills.sh).",
+  "license": "MIT",
+  "author": "uidu",
+  "repository": "https://github.com/uidu-org/api.js/tree/main/packages/skills",
+  "homepage": "https://docs.uidu.org",
+  "type": "module",
+  "files": [
+    "skills",
+    "README.md"
+  ],
+  "keywords": [
+    "uidu",
+    "agent-skills",
+    "claude-code",
+    "cursor",
+    "ai-agents",
+    "skills"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/skills/uidu/SKILL.md

@@ -0,0 +1,321 @@
+---
+name: uidu
+description: Use when building uidu-powered applications — fetching CMS pages, events, stories, donation campaigns, help center articles, or forms; rendering WYSIWYG content; or scaffolding new projects with create-uidu-app. Triggers on any task involving the uidu platform, the @uidu/client SDK, or the @uidu/react bindings.
+license: MIT
+metadata:
+  author: uidu
+  version: "0.1.0"
+---
+
+# uidu SDK
+
+The uidu SDK is a TypeScript GraphQL toolkit for building websites and apps powered by the uidu platform. It is split into two packages:
+
+- **`@uidu/client`** — framework-agnostic GraphQL client. Safe for server-side use (RSC, route handlers, server actions, scripts).
+- **`@uidu/react`** — React hooks (`useFields`, `useQuery`, `useForm`, `useChannel`) and components (`<PageBlocks>`, `<RichText>`).
+
+`@uidu/api.js` is a legacy bridge package and is **deprecated** — use `@uidu/react` directly.
+
+## When to Use This Skill
+
+Use this skill when the user is:
+
+- Building a Next.js / Remix / Astro / React app powered by the uidu GraphQL API
+- Fetching CMS pages, events, blog stories, donation campaigns, or help center content
+- Rendering uidu blocks with `<PageBlocks>` and a component map
+- Rendering WYSIWYG body fields with `<RichText>`
+- Bootstrapping a new project with `create-uidu-app`
+- Asking about `@uidu/client`, `@uidu/react`, `uidu`, or the uidu GraphQL API
+
+## Package Map
+
+| Package | When to use | Notes |
+|---|---|---|
+| `@uidu/client` | Server-side queries (RSC, server actions, scripts) | Framework-agnostic |
+| `@uidu/react` | React hooks, providers, and components | Some hooks are client-only |
+| `@uidu/api.js` | **Do not use for new code.** | Deprecated; re-exports `@uidu/react` |
+
+Install:
+
+```bash
+npm install @uidu/client @uidu/react
+```
+
+## API Shape
+
+All SDK functions are **standalone functions** that take the client as the first argument. They are never namespaced as methods on the client object:
+
+```ts
+import { getEvent, listStories, getPage, getChannel, getForm } from '@uidu/client';
+
+// ✅ Correct — standalone function, client first
+await getEvent(uidu, { id });
+await listStories(uidu, { first: 50 });
+await getPage(uidu, { projectId, slug });
+
+// ❌ Wrong — uidu has no namespaced methods
+uidu.events.get(...)
+uidu.stories.list(...)
+uidu.cms.getPage(...)
+```
+
+This shape is uniform across **every** scope (CMS, events, stories, donations, help center, forms, courses, careers, bookings, …). If you can't find an import for the function you want, look for `listX` / `getX` / `createX` in `@uidu/client`, not for a method on the client.
+
+## Quick Start
+
+```ts
+// src/lib/uidu.ts
+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:
+
+| Variable | Required | Notes |
+|---|---|---|
+| `UIDU_WORKSPACE` | yes | Your workspace slug (e.g. `acme`) |
+| `UIDU_PUBLIC_TOKEN` | no | Public read-only token, safe to expose |
+| `UIDU_API_KEY` | no | Server-only secret for privileged ops |
+
+## Patterns by Scope
+
+### CMS Pages
+
+CMS pages are made of `pageBlocks`. Fetch a page server-side, pass blocks to `<PageBlocks>` with a component map keyed by the block's `shortname`:
+
+```tsx
+// src/app/page.tsx — Server Component
+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 }}
+    />
+  );
+}
+```
+
+Each block component receives `{ block: PageBlock }` and reads its fields:
+
+```tsx
+// src/components/blocks/Hero.tsx
+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>
+  );
+}
+```
+
+`useFields(block.fieldValues)` returns a keyed map of field shortname → value. `toText(value)` extracts a plain string from a possibly-structured value.
+
+### Events
+
+```tsx
+import { listEvents, getEvent } from '@uidu/client';
+import { uidu } from '@/lib/uidu';
+
+// Listing
+const events = await listEvents(uidu, { first: 50 });
+
+// Detail — returns Event | null
+const event = await getEvent(uidu, { id });
+```
+
+Event fields:
+
+| Field | Notes |
+|---|---|
+| `event.id` | |
+| `event.name` | Display name |
+| `event.body` | WYSIWYG doc — render with `<RichText>` |
+| `event.cover` | Image URL (string) or null |
+| `event.description` | Plain string summary |
+| `event.instance.beginsAt` | ISO datetime of start |
+| `event.instance.finishesAt` | ISO datetime of end |
+| `event.instance.id` | Instance identifier |
+| `event.primaryAddress` | Location data |
+| `event.currentCapacity` | Numeric capacity |
+| `event.isPaidEvent` | Boolean |
+
+### Stories (Blog)
+
+```tsx
+import { listStories, getStory } from '@uidu/client';
+
+const stories = await listStories(uidu, { first: 50 });
+const story = await getStory(uidu, { id });
+```
+
+Story fields: `story.id`, `story.name`, `story.body` (WYSIWYG), `story.cover` (URL), `story.publishedAt` (ISO datetime).
+
+Sort by `publishedAt` for a chronological feed:
+
+```ts
+const sorted = [...stories].sort((a, b) =>
+  ((b.publishedAt as string) ?? '').localeCompare(
+    (a.publishedAt as string) ?? '',
+  ),
+);
+```
+
+### Donation Campaigns
+
+```tsx
+import { listDonationCampaigns, getDonationCampaign } from '@uidu/client';
+
+const campaigns = await listDonationCampaigns(uidu, { first: 50 });
+const campaign = await getDonationCampaign(uidu, { id });
+```
+
+Campaign fields: `campaign.id`, `campaign.name`, `campaign.body`, `campaign.cover`, `campaign.donationsAmount`, `campaign.donationsCount`, `campaign.goal`.
+
+**Amounts are in cents.** Divide by 100 for display:
+
+```ts
+const raised = (campaign.donationsAmount ?? 0) / 100;
+const goal = (campaign.goal ?? 0) / 100;
+const progress = goal > 0 ? Math.min(100, (raised / goal) * 100) : 0;
+```
+
+### Help Center
+
+```tsx
+import { getChannel } from '@uidu/client';
+
+const channel = await getChannel(uidu, { id: channelId });
+// channel.kbCollections.edges[].node.kbArticles.edges[].node
+```
+
+### Forms
+
+Forms are fetched server-side, then rendered with the `useForm` hook on the client:
+
+```tsx
+// Server: fetch form schema
+import { getForm } from '@uidu/client';
+const form = await getForm(uidu, { id: formId });
+```
+
+```tsx
+// Client: render with @uidu/react
+'use client';
+import { useForm } from '@uidu/react';
+
+export function ContactForm({ form }) {
+  const { register, handleSubmit, onSubmit } = useForm(uidu, { form });
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* render fields by iterating form.formQuestions.edges */}
+    </form>
+  );
+}
+```
+
+## Rendering WYSIWYG Content
+
+All `body` fields on Event, Story, DonationCampaign, etc. are structured documents (not strings). Render them with `<RichText>` from `@uidu/react`:
+
+```tsx
+import { RichText } from '@uidu/react';
+
+{story.body != null && <RichText doc={story.body} />}
+```
+
+The prop is `doc`, not `children`. The component handles paragraphs, headings, lists, links, and inline marks.
+
+## Provider Setup (Client-Side Hooks)
+
+Server-side `await getX(...)` calls do not need a provider. For React client-side hooks (`useQuery`, `useFields`, `useForm`), wrap your app in `<UiduProvider>`:
+
+```tsx
+// app/layout.tsx
+'use client';
+import { UiduProvider } from '@uidu/react';
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <UiduProvider endpoint={process.env.NEXT_PUBLIC_UIDU_ENDPOINT!}>
+          {children}
+        </UiduProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## Routing Pattern
+
+Nest dynamic detail routes under a scope path (`/event/[id]`, `/story/[id]`, `/campaign/[id]`) rather than at the root (`/[id]`). Root-level dynamic routes will catch requests like `/favicon.ico` and pass them to your fetch function, producing spurious GraphQL errors.
+
+```
+src/app/
+├── page.tsx              # listing at /
+├── event/[id]/page.tsx   # detail at /event/<id>
+└── layout.tsx
+```
+
+## Scaffolding a New Project
+
+Use `create-uidu-app`:
+
+```bash
+npm create uidu-app@latest my-app
+```
+
+Or pick a template directly:
+
+```bash
+npm create uidu-app@latest my-app -- -t events
+```
+
+| Template | What it builds |
+|---|---|
+| `minimal` | CMS landing page with `PageBlocks` + Hero/Feature blocks |
+| `events` | Event listing + `/event/[id]` detail |
+| `stories` | Blog listing + `/story/[id]` detail (magazine layout) |
+| `donations` | Campaigns listing + `/campaign/[id]` detail with progress bars |
+
+Every template ships with:
+- Next.js 16 App Router
+- Tailwind v4
+- A configured `src/lib/uidu.ts`
+- A server-rendered listing + dynamic detail page
+- `.env.example` with required vars (and the CLI offers to fill them in for you)
+
+## See Also
+
+- uidu docs: https://docs.uidu.org
+- Source: https://github.com/uidu-org/api.js
+- `@uidu/client`: https://github.com/uidu-org/api.js/tree/main/packages/client
+- `@uidu/react`: https://github.com/uidu-org/api.js/tree/main/packages/react
+- `create-uidu-app`: https://github.com/uidu-org/api.js/tree/main/packages/create-uidu-app

package/skills/uidu/evals/evals.json

@@ -0,0 +1,115 @@
+{
+  "skill_name": "uidu",
+  "evals": [
+    {
+      "id": 0,
+      "name": "event-detail",
+      "prompt": "I'm building a Next.js 16 App Router page that shows event details from the uidu platform. The URL is `/event/[id]`. Write me a Server Component at `src/app/event/[id]/page.tsx` that fetches an event from uidu by ID, shows its name, start time (formatted nicely), and body content. Use the @uidu/client SDK. Assume there's already a configured `uidu` client at `@/lib/uidu`. Use Next.js conventions including `notFound()` from `next/navigation` if the event doesn't exist.",
+      "files": [],
+      "expected_output": "A TSX file using getEvent() with correct field names (event.instance.beginsAt, event.name, event.body rendered via RichText), handling the null case with notFound().",
+      "assertions": [
+        { "text": "Uses `getEvent` imported from `@uidu/client`" },
+        { "text": "Reads `event.name` (not `event.title`)" },
+        { "text": "Reads `event.instance.beginsAt` (not `event.startsAt` or similar guess)" },
+        { "text": "Handles null event via `notFound()` from `next/navigation`" },
+        { "text": "Renders `event.body` with `<RichText doc={event.body} />` from `@uidu/react` (not as a plain string or via dangerouslySetInnerHTML)" },
+        { "text": "params is typed as `Promise<{ id: string }>` and awaited (Next 16 convention)" }
+      ]
+    },
+    {
+      "id": 1,
+      "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`.",
+      "files": [],
+      "expected_output": "A TSX file using listStories(), sorting by publishedAt DESC, mapping over stories, linking each to /story/<id> with story.name and story.publishedAt.",
+      "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 (idiomatic Next.js)" }
+      ]
+    },
+    {
+      "id": 2,
+      "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.",
+      "files": [],
+      "expected_output": "A markdown explanation identifying that goal/donationsAmount are in cents, with a code fix dividing by 100.",
+      "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" }
+      ]
+    },
+    {
+      "id": 3,
+      "name": "client-setup",
+      "prompt": "I'm starting a fresh Next.js project that needs to use the uidu SDK. Set me up: write `src/lib/uidu.ts` that creates and exports a configured client, and at the bottom of the file list (as a comment) the env variables I need to set in `.env.local`. Use the @uidu/client SDK.",
+      "files": [],
+      "expected_output": "A TS file using createClient() with workspace/publicToken/apiKey wired to env vars, exporting `uidu`, and listing the required env var names in a comment.",
+      "assertions": [
+        { "text": "Imports `createClient` from `@uidu/client` (not a default import or `new UiduClient(...)`)" },
+        { "text": "Calls `createClient({ workspace, publicToken, apiKey })` with those three keys" },
+        { "text": "Uses env vars `UIDU_WORKSPACE`, `UIDU_PUBLIC_TOKEN`, `UIDU_API_KEY` (correct names, no `NEXT_PUBLIC_` prefix on the API key)" },
+        { "text": "Exports `uidu` (or equivalent named export) so other modules can import it" },
+        { "text": "Notes that `UIDU_API_KEY` is server-only (a comment or guard)" }
+      ]
+    },
+    {
+      "id": 4,
+      "name": "cms-pageblocks",
+      "prompt": "Build a uidu-powered home page. Fetch the CMS page with slug `home` for project ID from `process.env.UIDU_PROJECT_ID` and render its blocks. I have two block types: a Hero block (reads `title` and `subtitle` fields) and a Feature block (reads `title` and `body` fields). Write TWO files: (a) `src/app/page.tsx` — the Server Component that fetches and renders blocks; (b) `src/components/blocks/Hero.tsx` — the Hero block component. Use @uidu/client and @uidu/react. Assume `uidu` is configured at `@/lib/uidu`.",
+      "files": [],
+      "expected_output": "Two TSX files: the parent uses getPage() + <PageBlocks> with a components map; Hero uses useFields(block.fieldValues) + toText() to read fields, taking { block } as its prop.",
+      "assertions": [
+        { "text": "Parent file imports `getPage` from `@uidu/client` and calls `getPage(uidu, { projectId, slug })`" },
+        { "text": "Parent file imports `PageBlocks` from `@uidu/react` (NOT `PageBlocksParser` — that's the legacy name in older CLAUDE.md)" },
+        { "text": "Parent renders `<PageBlocks pageBlocks={page.pageBlocks} components={{ Hero, Feature }} />`" },
+        { "text": "Hero component takes `{ block }: { block: PageBlock }` as props (not `pageBlock` or destructured fields)" },
+        { "text": "Hero uses `useFields(block.fieldValues)` from `@uidu/react` to read fields by shortname" },
+        { "text": "Hero uses `toText(fields.title)` (and equivalent for subtitle) — does NOT cast to string directly" }
+      ]
+    },
+    {
+      "id": 5,
+      "name": "help-center",
+      "prompt": "Build a help center page in Next.js 16 App Router at `src/app/help/page.tsx` that lists all articles from a uidu channel. Fetch the channel by ID (`process.env.UIDU_CHANNEL_ID`) and render every article as a link to `/help/<articleId>` grouped by their collection. Show the channel name as the page title. Use the @uidu/client SDK and assume `uidu` is configured at `@/lib/uidu`.",
+      "files": [],
+      "expected_output": "A TSX file using getChannel() then walking the kbCollections.edges -> node -> kbArticles.edges -> node structure to render grouped article links.",
+      "assertions": [
+        { "text": "Uses `getChannel` imported from `@uidu/client` (NOT `getHelpCenter`, `listArticles`, or a namespaced method like `uidu.helpCenter.get`)" },
+        { "text": "Walks `channel.kbCollections.edges` — uses the GraphQL connection (edges/node) shape, not a flat array" },
+        { "text": "Drills into each collection's `node.kbArticles.edges` to reach individual articles" },
+        { "text": "Filters out null edges (e.g., `.filter(Boolean)` or `if (edge?.node)` guard) since edges can be nullable" },
+        { "text": "Links to `/help/${article.id}` using `next/link`" }
+      ]
+    },
+    {
+      "id": 6,
+      "name": "forms-contact",
+      "prompt": "Build a contact form using a uidu form. The form schema should be fetched server-side and passed to a client component that renders the form. Write TWO files: (a) `src/app/contact/page.tsx` — server fetch; (b) `src/components/ContactForm.tsx` — client form using react-hook-form integration. Use the @uidu/client and @uidu/react SDKs. The form ID comes from `process.env.UIDU_CONTACT_FORM_ID`.",
+      "files": [],
+      "expected_output": "Two files: server fetches form via getForm() and passes to client; client has 'use client' and renders fields using useForm() from @uidu/react (which integrates with react-hook-form internally).",
+      "assertions": [
+        { "text": "Server file uses `getForm` imported from `@uidu/client` with `{ id: formId }`" },
+        { "text": "Client file has `'use client'` directive at the top" },
+        { "text": "Client uses `useForm` imported from `@uidu/react` (NOT directly from `react-hook-form`, which is the wrong import for this stack)" },
+        { "text": "useForm is called with the uidu client and the form object (e.g., `useForm(uidu, { form })`), not just `useForm()` with empty args" },
+        { "text": "Iterates `form.formQuestions.edges` (GraphQL connection shape) to render fields, not a flat array" }
+      ]
+    },
+    {
+      "id": 7,
+      "name": "routing-gotcha",
+      "prompt": "My uidu story detail page lives at `src/app/[id]/page.tsx` (catches the root path with a single segment). The detail page works correctly for real story IDs like `/abc123`. But I'm seeing GraphQL errors in my logs with `id: 'favicon.ico'` and occasionally other static asset paths. What's actually going on, and how should I fix this? Write a short diagnostic explanation in markdown with the recommended file-structure change.",
+      "files": [],
+      "expected_output": "A markdown answer identifying that a root-level [id] catches browser requests for /favicon.ico and other root paths, recommending nesting under a scope dir like /story/[id].",
+      "assertions": [
+        { "text": "Identifies that a root-level dynamic segment `/[id]` catches ALL single-segment root requests, including `/favicon.ico`, `/robots.txt`, etc." },
+        { "text": "Recommends moving the route under a scope path — e.g., `src/app/story/[id]/page.tsx` so the URL becomes `/story/<id>`" },
+        { "text": "Explains the root cause is Next.js routing behavior, not the uidu SDK itself (the SDK is just receiving the bogus id string passed in)" }
+      ]
+    }
+  ]
+}

package/skills/uidu/metadata.json

@@ -0,0 +1,8 @@
+{
+  "name": "uidu",
+  "version": "0.1.0",
+  "author": "uidu",
+  "license": "MIT",
+  "homepage": "https://docs.uidu.org",
+  "repository": "https://github.com/uidu-org/api.js/tree/main/packages/skills/skills/uidu"
+}

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

@@ -0,0 +1,43 @@
+# Benchmark — uidu skill, iteration 1
+
+## Aggregate
+
+| Configuration | Pass rate | Assertions passed |
+| --- | --- | --- |
+| with_skill | 100% | 14 / 14 |
+| without_skill (baseline) | 57% | 8 / 14 |
+| **Δ** | **+43 pp** | **+6** |
+
+## Per-eval
+
+| Eval | with_skill | baseline | Δ |
+| --- | --- | --- | --- |
+| 0 — event-detail | 6/6 (100%) | 3/6 (50%) | +50% |
+| 1 — stories-listing | 5/5 (100%) | 2/5 (40%) | +60% |
+| 2 — donations-debug | 3/3 (100%) | 3/3 (100%) | 0% |
+
+## Analyst notes
+
+1. **Both baseline failures share one root cause**: hallucinated namespaced API style
+   (`uidu.events.get(...)`, `uidu.stories.list(...)`). The real SDK uses
+   standalone functions: `getEvent(client, vars)`, `listStories(client, vars)`.
+   The skill's code examples demonstrate this, but it's never called out as a
+   *pattern*. Promoting it to a top-level section would harden every with-skill
+   run.
+
+2. **Eval 2 assertions don't discriminate.** Cents-is-cents is an industry
+   convention; even a cold-baseline got it right. The skill earns no measurable
+   credit on this eval. Either replace the eval with a sharper one (e.g., asking
+   about a uidu-specific field name) or accept that this scope is a "skill
+   doesn't hurt" eval rather than a "skill helps" eval.
+
+3. **Biggest skill win is the WYSIWYG body case**: baseline tried
+   `dangerouslySetInnerHTML={{ __html: event.body }}`, which would either crash
+   (body is an object, not a string) or render `[object Object]`. The skill
+   prevented this. This is the kind of failure mode that doesn't show up in
+   type-checking — production-breaking.
+
+4. **With-skill outputs are leaner and closer to the canonical demo style.**
+   Baselines added more Tailwind decoration, longer `Intl.DateTimeFormat`
+   options. Not wrong, but verbose. Skill seems to be implicitly anchoring on
+   the simpler patterns shown in its examples.

package/skills/uidu-workspace/iteration-1/eval-0-event-detail/eval_metadata.json

@@ -0,0 +1,13 @@
+{
+  "eval_id": 0,
+  "eval_name": "event-detail",
+  "prompt": "I'm building a Next.js 16 App Router page that shows event details from the uidu platform. The URL is `/event/[id]`. Write me a Server Component at `src/app/event/[id]/page.tsx` that fetches an event from uidu by ID, shows its name, start time (formatted nicely), and body content. Use the @uidu/client SDK. Assume there's already a configured `uidu` client at `@/lib/uidu`. Use Next.js conventions including `notFound()` from `next/navigation` if the event doesn't exist.",
+  "assertions": [
+    { "text": "Uses `getEvent` imported from `@uidu/client`" },
+    { "text": "Reads `event.name` (not `event.title`)" },
+    { "text": "Reads `event.instance.beginsAt` (not `event.startsAt` or similar guess)" },
+    { "text": "Handles null event via `notFound()` from `next/navigation`" },
+    { "text": "Renders `event.body` with `<RichText doc={event.body} />` from `@uidu/react`" },
+    { "text": "params is typed as `Promise<{ id: string }>` and awaited (Next 16 convention)" }
+  ]
+}

package/skills/uidu-workspace/iteration-1/eval-0-event-detail/with_skill/grading.json

@@ -0,0 +1,11 @@
+{
+  "expectations": [
+    { "text": "Uses `getEvent` imported from `@uidu/client`", "passed": true, "evidence": "Line 1: import { getEvent } from '@uidu/client'" },
+    { "text": "Reads `event.name` (not `event.title`)", "passed": true, "evidence": "Line 34: <h1>{event.name}</h1>" },
+    { "text": "Reads `event.instance.beginsAt`", "passed": true, "evidence": "Line 19: const beginsAt = event.instance?.beginsAt" },
+    { "text": "Handles null event via `notFound()`", "passed": true, "evidence": "Lines 15-17" },
+    { "text": "Renders body with `<RichText doc={event.body} />`", "passed": true, "evidence": "Line 40: <RichText doc={event.body} />" },
+    { "text": "params is typed as `Promise<{ id: string }>` and awaited", "passed": true, "evidence": "Line 7-11" }
+  ],
+  "pass_rate": 1.0
+}

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

@@ -0,0 +1,43 @@
+import { getEvent } from '@uidu/client';
+import { RichText } from '@uidu/react';
+import { notFound } from 'next/navigation';
+import { uidu } from '@/lib/uidu';
+
+type EventPageProps = {
+  params: Promise<{ id: string }>;
+};
+
+export default async function EventPage({ params }: EventPageProps) {
+  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, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : 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-1/eval-0-event-detail/without_skill/grading.json

@@ -0,0 +1,11 @@
+{
+  "expectations": [
+    { "text": "Uses `getEvent` imported from `@uidu/client`", "passed": false, "evidence": "Hallucinated namespaced method: `uidu.events.get({ id })` — no such API on the client" },
+    { "text": "Reads `event.name` (not `event.title`)", "passed": true, "evidence": "Line 31: <h1>{event.name}</h1>" },
+    { "text": "Reads `event.instance.beginsAt`", "passed": false, "evidence": "Used `event.startTime` (lines 17, 33) — field does not exist; correct path is `event.instance.beginsAt`" },
+    { "text": "Handles null event via `notFound()`", "passed": true, "evidence": "Lines 13-15" },
+    { "text": "Renders body with `<RichText doc={event.body} />`", "passed": false, "evidence": "Used `dangerouslySetInnerHTML={{ __html: event.body }}` (line 43) — body is a structured RichText doc, not an HTML string" },
+    { "text": "params is typed as `Promise<{ id: string }>` and awaited", "passed": true, "evidence": "Lines 5, 9" }
+  ],
+  "pass_rate": 0.5
+}