@uidu/skills 0.3.0 → 0.5.0

package/README.md

@@ -14,9 +14,10 @@ Replace `claude-code` with your agent of choice (`cursor`, `copilot`, `windsurf`
 
 ## 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`. |
+| 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`.  |
+| `uidu-design` | How an app framed inside uidu (a custom app) should look: uidu's tokens and components, layout inside the iframe, states, icons. Ships inside the `custom-app` template, so the app builder's agent has it too. |
 
 More skills will be split out from `uidu` as individual areas grow.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uidu/skills",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Agent skills for the uidu SDK — installable via the open agent skills ecosystem (skills.sh).",
   "license": "MIT",
   "author": "uidu",

package/skills/uidu/SKILL.md

@@ -1,18 +1,19 @@
 ---
 name: uidu
-description: Use when building on the uidu platform — reading CMS pages, events, stories, donations, help center, forms; rendering WYSIWYG content; scaffolding projects; OR provisioning/authoring uidu content (create/update/delete) from the terminal via the @uidu/cli (`uidu`). Triggers on any task involving uidu, the @uidu/client SDK, @uidu/react bindings, or the uidu CLI.
+description: Use when building on the uidu platform — a public website or an app that runs inside uidu (a custom app in a Space or workspace); reading CMS pages, events, stories, donations, help center, forms; rendering WYSIWYG content; scaffolding projects; OR provisioning/authoring uidu content (create/update/delete) from the terminal via the @uidu/cli (`uidu`). Triggers on any task involving uidu, the @uidu/client SDK, @uidu/react bindings, or the uidu CLI.
 license: MIT
 metadata:
   author: uidu
-  version: "0.3.0"
+  version: "0.5.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:
+The uidu SDK is a TypeScript GraphQL toolkit for building websites and apps powered by the uidu platform. It is split into three 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/app-bridge`** — the browser half of a custom app: the handshake with the uidu page that frames it, and its short-lived session token. Only for apps that run inside uidu.
+- **`@uidu/react`** — React hooks (`useUiduClient`, `useQuery`, `useFields`, `toText`, `useUiduApp`) and components (`<UiduAppProvider>`, `<PageBlocks>`, `<BlockRenderer>`, `<RichText>`, `<DynamicForm>`). That list is the **complete** public surface — there is no `useForm`, `usePage` or `useChannel`; for anything else, call a `@uidu/client` function.
 
 `@uidu/api.js` is a legacy bridge package and is **deprecated** — use `@uidu/react` directly.
 
@@ -20,7 +21,7 @@ The uidu SDK is a TypeScript GraphQL toolkit for building websites and apps powe
 
 Use this skill when the user is:
 
-- Building a Next.js / Remix / Astro / React app powered by the uidu GraphQL API
+- Building a Next.js / Remix / Astro / React app powered by the uidu GraphQL API — a public site, or a **custom app** that uidu shows inside a Space or workspace to signed-in members (same stack, different auth: see the rule below)
 - 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>`
@@ -34,6 +35,7 @@ Use this skill when the user is:
 |---|---|---|
 | `@uidu/client` | Server-side queries (RSC, server actions, scripts) | Framework-agnostic |
 | `@uidu/react` | React hooks, providers, and components | Some hooks are client-only |
+| `@uidu/app-bridge` | An app that runs inside uidu (custom app) | Browser only; in React use `<UiduAppProvider>` |
 | `@uidu/api.js` | **Do not use for new code.** | Deprecated; re-exports `@uidu/react` |
 
 Install:
@@ -76,18 +78,97 @@ bookings, calls, campaigns, kb-collections, kb-articles, channel` (read) and
 reports `does not support <verb>` when it doesn't. Config resolves **flags → env
 (`UIDU_*`) → `~/.uidu/config.json`** (written by `uidu login`).
 
-## Reading vs writing — one rule
+## Who the app acts for — one rule
+
+What an app *looks like* (landing page, blog, dashboard, booking tool) changes nothing.
+What changes the code is **who the request acts for**:
 
 | Operation | Auth | Where it runs |
 |---|---|---|
-| **Reads** (`get*` / `list*`, `<entity> list/get`) | `publicToken` | anywhere — server, CLI, **and the browser** |
-| **Writes** (`create*` / `update*` / `delete*`, `<entity> create/update/delete`) | account **Bearer** (`apiKey`) | CLI and **server-side** only |
+| **Reads** for anyone (`get*` / `list*`, `<entity> list/get`) | `publicToken` | anywhere — server, CLI, **and the browser** |
+| **Writes** as the workspace (`create*` / `update*` / `delete*`, `<entity> create/update/delete`) | account **Bearer** (`apiKey`) | CLI and **server-side** only |
+| **Anything as the signed-in member**, inside uidu (a custom app) | session token from the host, over `@uidu/app-bridge` | **the browser only** |
 
 The write functions live in `@uidu/client`, so anything the CLI provisions you can also do
 from a Next.js server action / route handler / RSC. **Never put the account Bearer token in a
 browser client component.** Authoring mutations return a payload with an `errors` array —
 always check it (non-empty = validation failure).
 
+One app can mix the rows: public pages rendered on the server with `publicToken`, and a members'
+area that only works when uidu frames it.
+
+### Inside uidu: the third row
+
+uidu renders a custom app in a sandboxed iframe and hands it a short-lived session (5 minutes,
+refreshed by the bridge) over `postMessage`. That session is the member's: the app can do what
+that person can do, and no more. It changes five things:
+
+1. **The token only exists in the browser.** It arrives after the page loads, so a Server
+   Component or a server action never has it. Pages that show member data are `'use client'`
+   and read through the bridge-backed client. Fetching them in an RSC renders an empty page.
+2. **The token only works from the app's own origin.** uidu checks `Origin` against the origin
+   it signed the token for. Don't forward it to your own backend to call uidu from there — that
+   needs a server credential uidu doesn't issue yet.
+3. **Treat the token as opaque.** Never decode it. The expiry comes with it, the bridge refreshes
+   it, and `graphqlUrl` comes with it too: never build `https://<workspace>.uidu.org` from a slug.
+4. **Data goes in the app's own Models.** The session reaches the app's own Models, fields and
+   items through `node(id:)`, and the data-engine mutations. Everything else in the workspace comes
+   back as an error. Keep your data there rather than in a database of your own: it stays
+   searchable and permissioned in uidu.
+   `listModelItems` reads uidu's **search index**, which catches up a moment after a write:
+   after `createModelItem` / `deleteModelItem`, update your list from the mutation payload
+   instead of re-listing, or the new item is missing. And load models once per app instance
+   (memoize the promise): two concurrent `ensureModel` calls each create the model.
+5. **No cookies, no `localStorage` for shared state.** In a cross-origin iframe cookies are
+   third-party (Safari drops them). `localStorage` is this browser only. Use it only as the
+   fallback when the page is opened outside uidu (the bridge rejects `connect()` there).
+
+```tsx
+'use client'; // app/layout.tsx renders <AppProvider> around {children}
+import { useEffect, useState } from 'react';
+import { UiduAppProvider, useUiduApp } from '@uidu/react';
+import { DEFAULT_HOST_ORIGINS } from '@uidu/app-bridge';
+import {
+  createModelItem, ensureModel, listModelItems, toFieldValuesAttributes,
+  type ModelItem, type UiduClient,
+} from '@uidu/client';
+
+export function AppProvider({ children }: { children: React.ReactNode }) {
+  // https://*.uidu.org by default; add a local uidu or a custom domain
+  return <UiduAppProvider hostOrigins={[...DEFAULT_HOST_ORIGINS]}>{children}</UiduAppProvider>;
+}
+
+async function loadBookings(client: UiduClient, workspaceAppId: string) {
+  // interim: the app creates its own model on first load (install-time manifest comes later)
+  const model = await ensureModel(client, {
+    workspaceAppId,
+    name: 'Booking',
+    fields: [{ shortname: 'room', name: 'Room', kind: 'string' }],
+  });
+  await createModelItem(client, {
+    input: { attributes: { modelId: model.id, fieldValuesAttributes: toFieldValuesAttributes(model, { room: 'Blu' }) } },
+  });
+  return listModelItems(client, { modelId: model.id }); // item.fieldValuesByShortname.room
+}
+
+export function Bookings() {
+  const app = useUiduApp(); // 'connecting' | 'ready' | 'error'
+  const [items, setItems] = useState<ModelItem[]>([]);
+
+  useEffect(() => {
+    if (app.status === 'ready') loadBookings(app.client, app.context.workspaceApp.id).then(setItems);
+  }, [app]);
+
+  if (app.status === 'error') return <p>Open this app from uidu ({app.error.code})</p>; // NOT_EMBEDDED, TIMEOUT…
+  return <ul>{items.map((item) => <li key={item.id}>{item.fieldValuesByShortname?.room}</li>)}</ul>;
+}
+```
+
+`app.context` carries `user`, `space`, `workspaceApp`, `locale`, `theme` and `accent` (the page's colour, to set as `--primary`). Outside React: `connect()` from
+`@uidu/app-bridge`, then `createClient(fromBridge(bridge))` from `@uidu/client`. Start a new
+one with `npm create uidu-app@latest my-app -- -t custom-app`: it declares its Models in
+`public/uidu.app.json` and sets `frame-ancestors` so only uidu can frame it.
+
 ## Working transparently
 
 The user often can't tell what you're doing when you drive the CLI. Stay legible:
@@ -280,29 +361,103 @@ const channel = await getChannel(uidu, { id: channelId });
 
 ### Forms
 
-Forms are fetched server-side, then rendered with the `useForm` hook on the client:
+Fetch the schema server-side, render it with `<DynamicForm>`, and submit through a
+**server-side** action that calls `createFormResponse`. There is no `useForm` hook.
 
 ```tsx
-// Server: fetch form schema
+// Server: fetch the form schema
 import { getForm } from '@uidu/client';
 const form = await getForm(uidu, { id: formId });
 ```
 
 ```tsx
-// Client: render with @uidu/react
+// Client: render it
 'use client';
-import { useForm } from '@uidu/react';
+import { DynamicForm } from '@uidu/react';
+import { submitForm } from '@/lib/actions';
 
 export function ContactForm({ form }) {
-  const { register, handleSubmit, onSubmit } = useForm(uidu, { form });
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      {/* render fields by iterating form.formQuestions.edges */}
-    </form>
-  );
+  return <DynamicForm form={form} action={submitForm} />;
+}
+```
+
+`<DynamicForm>` renders the questions itself and hands your `action` a
+`DynamicFormValues`: `{ contact?: { firstName, lastName, email }, fieldValues:
+Array<{ fieldId, questionId, value }>, formData }`. Return `{ ok: true }` or
+`{ ok: false, errors }` and it renders the right state.
+
+#### `content` is always `{ value: … }` — never a bare value
+
+This is the one rule that breaks form writes. The API stores each answer in a JSON
+`content` column and reads it back as `content['value']`. A flat scalar is **not**
+rejected loudly: the response saves with empty typed columns, and reading that field
+later throws. `FieldValueAttributes` exposes no `value` key — `content` is the only way in.
+
+```ts
+// ✅ Correct — every answer wrapped
+fieldValuesAttributes: [{ fieldId: 'f1', content: { value: 'hello@example.com' } }]
+
+// ❌ Wrong — silently loses the answer
+fieldValuesAttributes: [{ fieldId: 'f1', content: 'hello@example.com' }]
+```
+
+It holds for **every** field kind, not just strings — `{ value: 42 }`, `{ value: true }`,
+`{ value: '2026-07-27' }`, `{ value: ['gid://…', 'gid://…'] }` for `multipleSelect`,
+`{ value: <doc> }` for `richText`/`json`. And it holds for `fieldValuesAttributes`
+**wherever** it appears — on a page block, a contact, a story, a booking — not just on
+form responses.
+
+Full submit action:
+
+```ts
+// src/lib/actions.ts
+'use server';
+import { createFormResponse } from '@uidu/client';
+import type { DynamicFormValues, DynamicFormResult } from '@uidu/react';
+import { uidu } from '@/lib/uidu';
+
+export async function submitForm(
+  values: DynamicFormValues,
+): Promise<DynamicFormResult> {
+  const result = await createFormResponse(uidu, {
+    input: {
+      event: 'complete!', // omit to save as a draft
+      attributes: {
+        formId: FORM_ID,
+        fieldValuesAttributes: values.fieldValues.map((fv) => ({
+          fieldId: fv.fieldId,
+          content: { value: fv.value }, // ← wrapped
+        })),
+        contactAttributes: values.contact && {
+          email: values.contact.email,
+          contactableAttributes: {
+            kind: 'person',
+            firstName: values.contact.firstName,
+            lastName: values.contact.lastName,
+          },
+        },
+      },
+    },
+  });
+
+  if (result?.errors?.length) return { ok: false, errors: result.errors };
+  return { ok: true, meta: { id: result?.formResponse?.id } };
 }
 ```
 
+Notes:
+
+- **Never put arbitrary keys in `attributes`.** Only what `FormResponseAttributes`
+  declares: `formId`, `fieldValuesAttributes`, `contactAttributes`, `contactId`,
+  `formPageId`, `completedAt`, `responsableId`, `id`. Unknown keys fail the mutation.
+- `event` lives on `input`, **not** inside `attributes`, and is a state-machine
+  transition (`'complete!'`, `'save_draft!'`) — not free text.
+- To record a timestamp, use `completedAt` on `attributes`, not a synthetic field value.
+- `createFormResponse` **returns** `{ errors, formResponse }` instead of throwing —
+  always check `errors` before treating a submit as successful.
+- Use `updateFormResponse` for multi-step or save-as-you-type flows; pass each
+  answer's existing `id` in `fieldValuesAttributes` to update it rather than add a new one.
+
 ## Rendering WYSIWYG Content
 
 All `body` fields on Event, Story, DonationCampaign, etc. are structured documents (not strings). Render them with `<RichText>` from `@uidu/react`:
@@ -317,7 +472,7 @@ The prop is `doc`, not `children`. The component handles paragraphs, headings, l
 
 ## 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>`:
+Server-side `await getX(...)` calls do not need a provider. For React client-side hooks (`useQuery`, `useUiduClient`), wrap your app in `<UiduProvider>`. (`useFields` and `toText` are pure functions — they work without a provider, on the server too.)
 
 ```tsx
 // app/layout.tsx
@@ -368,13 +523,12 @@ npm create uidu-app@latest my-app -- -t events
 | `events` | Event listing + `/event/[id]` detail |
 | `stories` | Blog listing + `/story/[id]` detail (magazine layout) |
 | `donations` | Campaigns listing + `/campaign/[id]` detail with progress bars |
+| `custom-app` | An app inside a uidu Space: `<UiduAppProvider>`, data in its own Models (`public/uidu.app.json`) |
 
-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)
+Every template ships with Next.js 16 App Router, Tailwind v4 and an `.env.example` (the CLI
+offers to fill it in for you). The site templates add a configured `src/lib/uidu.ts` and a
+server-rendered listing + dynamic detail page; `custom-app` has no token to configure and
+reads everything in client components.
 
 ## See Also
 

package/skills/uidu/metadata.json

@@ -1,6 +1,6 @@
 {
   "name": "uidu",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "author": "uidu",
   "license": "MIT",
   "homepage": "https://docs.uidu.org",

package/skills/uidu-design/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: uidu-design
+description: Use when building or restyling the UI of an app that runs inside uidu (a custom app framed in a Space or workspace, including one made in the uidu app builder) — layout, components, colours, typography, empty and loading states. Makes the app look like the uidu page around it instead of a patch sewn on.
+license: MIT
+metadata:
+  author: uidu
+  version: '0.1.0'
+---
+
+# Looking like uidu
+
+A custom app is an iframe in the middle of a uidu page. Above it sits uidu's header, with
+the app's name and its buttons; around it, uidu's sidebar. Whatever the app draws has those
+on every side, so the only good outcome is an app that reads as one more uidu page.
+
+That is mostly already done for you. The template ships **uidu's own tokens**
+(`src/app/globals.css`) and **uidu's own components** (`src/components/ui/`), generated from
+uidu's source. The rules below are about not undoing it.
+
+## 1. Use the kit, don't restyle it
+
+- Build from `src/components/ui/*`: `Button`, `Input`, `Field`, `Select`, `Checkbox`,
+  `Switch`, `Textarea`, `Table`, `Tabs`, `Dialog`, `Sheet`, `DropdownMenu`, `Popover`,
+  `Tooltip`, `Badge`, `Alert`, `Empty`, `Skeleton`, `Spinner`, `Item`, `Card`, `Calendar`,
+  `Toaster` (`toast()` from `sonner`)…
+- A `<button>`, `<input>`, `<table>` or `<select>` written by hand is almost always a
+  component you didn't import. A `<div className="rounded-lg border p-4">` is a `Card`, a
+  coloured pill is a `Badge`, a status line is an `Alert`.
+- Don't edit the files in `src/components/ui/`: they are regenerated from uidu. Compose them,
+  and pass `className` for layout (margins, width, flex), not for colour or size.
+- Need one that isn't there? `npx shadcn add @uidu/<name>` works where the network allows it
+  (not in the builder's sandbox). Otherwise build it from the ones you have.
+
+## 2. Colours are tokens, never a palette
+
+Only the semantic classes, which flip with uidu's light/dark theme:
+
+| For                                                | Use                                                           |
+| -------------------------------------------------- | ------------------------------------------------------------- |
+| page, text                                         | `bg-background`, `text-foreground`                            |
+| secondary text, captions, labels                   | `text-muted-foreground`                                       |
+| panels, popovers                                   | `bg-card`, `bg-popover` (usually via `Card`, `Popover`)       |
+| hover, selected row                                | `bg-accent`, `hover:bg-accent`                                |
+| subtle fill (a weekend, a disabled row)            | `bg-muted`                                                    |
+| the app's accent (main button, active item, links) | `bg-primary`, `text-primary`                                  |
+| error, destructive action                          | `text-destructive`, `bg-destructive/10`                       |
+| done / needs attention / neutral info              | `text-success`, `text-warning`, `text-info` (and `/10` fills) |
+| lines                                              | `border` (already the right colour), `divide-y`               |
+| charts                                             | `bg-chart-1` … `bg-chart-5`, `var(--chart-1)`                 |
+
+Never `text-gray-*`, `bg-white`, `text-black`, `bg-blue-500`, `text-red-600`, a hex value or
+an inline `style={{ color }}`: they don't follow the theme, and in dark mode they break.
+`--primary` is the page's accent: uidu sends it (`context.accent`, set by
+`app-provider.tsx`), so it changes with the workspace and the app. Don't set it yourself,
+and don't add a brand colour of your own — `bg-primary` already is one.
+
+## 3. Typography: uidu's density
+
+- Body text is `text-sm` (14px): paragraphs, table cells, list items, form fields.
+- `text-base` only for emphasis: the figure a card is about, a record's name.
+- `text-xs` is rare: counters, hints.
+- Headings inside the app are `text-sm font-semibold` (a section) or `text-base
+font-semibold` at most. No `text-2xl` hero titles: this is a tool, not a landing page.
+- A label never outweighs its value: label `text-sm text-muted-foreground`, value
+  `font-medium`.
+- The font is Inter, set in `layout.tsx`. Don't load another one.
+
+## 4. Layout: fill the frame, don't frame it again
+
+- **No title that repeats the app's name.** uidu's header already shows it. If the page needs
+  a bar, make it a toolbar: `flex h-14 shrink-0 items-center justify-between gap-2 border-b
+px-4` with context (a count, a filter, a period) on the left and actions on the right.
+- **No second navigation shell**: no sidebar, no top nav, no footer, no logo. For a few views
+  use `Tabs` in the toolbar; for a detail, a `Sheet` or a `Dialog`.
+- **Edge to edge.** The page fills the iframe (`flex min-h-screen flex-col`): no centred
+  `max-w-2xl` column with a card floating in it, no outer margin. Content is inset `px-4`
+  (16px), the same as uidu's header above, so their left edges line up.
+- Sections are separated by `border-b`, not by stacking cards with gaps. Use `Card` for a
+  real sub-surface (one card per related thing), never a card inside a card.
+- **No dead space.** When the data is short, the empty area is filled by an `Empty` state
+  (it grows with `flex-1`) or the page ends where the data ends. Never leave the bottom
+  third of the frame blank.
+- Spacing on Tailwind's scale (`gap-2`, `gap-3`, `p-4`, `px-4`); no `px-[13px]`.
+
+## 5. Data
+
+- Rows of things are a `Table` (`TableHeader`/`TableHead`/`TableBody`/`TableRow`/`TableCell`),
+  with `pl-4` on the first column and `pr-4` on the last, to align with the toolbar.
+- A table that scrolls keeps its header visible: bound the table's own container with
+  `containerClassName="h-full overflow-y-auto"` and make the `TableHead`s `sticky top-0
+bg-background`. Wrapping the table in your own scroller does not work.
+- Dates and numbers through `Intl` with `context.locale` (`toLocaleString(locale)`,
+  `Intl.NumberFormat(locale, …)`), never hand-formatted.
+- A thing that spans several days or columns is **one** element across them, not one per cell.
+
+## 6. States
+
+Every screen has four, and each has a shape:
+
+| State                | Shape                                                                                                       |
+| -------------------- | ----------------------------------------------------------------------------------------------------------- |
+| connecting / loading | `Skeleton`s shaped like the content (rows, a card) — not a centred spinner, not "Loading…" text alone       |
+| empty                | `Empty` with an icon (`EmptyMedia variant="icon"`), a title, one sentence and, if there is one, the action  |
+| error                | `Alert variant="destructive"` near what failed, with what to do; a failed write keeps what the person typed |
+| saving               | the button stays, disabled, with a `Spinner` inside; `toast()` for a result that lands elsewhere            |
+
+## 7. Icons
+
+- `lucide-react` only, imported by name: `import { Plus } from 'lucide-react'`.
+- Inside a component (`Button`, `DropdownMenuItem`, `Badge`, `Alert`, `EmptyMedia`…) write
+  `<Plus />` with **no** `size-*` class: the component sizes it. Elsewhere `size-4`.
+- Never change `strokeWidth`. Colour with `text-*` tokens.
+- An icon-only button is `variant="ghost" size="icon"` with an `aria-label`, and the icon
+  `aria-hidden="true"`.
+
+## 8. Accessible by default
+
+- Every field has a label (`Field` + `FieldLabel htmlFor`), every icon-only button an
+  `aria-label`.
+- Actions are buttons, navigation is links; nothing clickable is a `<div onClick>`.
+- Messages that appear after an action (`Alert`, a saved state) are announced: `role="alert"`
+  for errors, `aria-live="polite"` for the rest.
+- Motion stays small (the components' own); spatial animations get `motion-safe:`.
+
+## 9. Words
+
+- Short, plain, in the person's language (`context.locale`); sentence case ("New booking",
+  not "New Booking").
+- Say what happened and what to do next, not an error code.
+
+## Before you finish
+
+Run `npm run check`: it type-checks and flags raw palette colours, hex values, hand-written
+`<button>`/`<input>`/`<table>`, other icon sets and `strokeWidth`. Fix what it reports.
+Then look at the page in dark mode too: if something is invisible or glaring there, it is
+using a colour instead of a token.

package/skills/uidu-design/metadata.json

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