@agent-native/core 0.137.8 → 0.139.0

package/corpus/templates/calendar/server/lib/booking-emails.ts

@@ -11,6 +11,12 @@ import {
   DEFAULT_BOOKING_TIMEZONE,
   safeBookingTimeZone,
 } from "./booking-timezone.js";
+import {
+  CALENDAR_BOOKING_CANCELLED_EMAIL_ID,
+  CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID,
+  CALENDAR_BOOKING_CONFIRMED_EMAIL_ID,
+  CALENDAR_BOOKING_RECEIVED_EMAIL_ID,
+} from "./emails.js";
 
 function stripCrlf(value: string | undefined): string {
   return (value ?? "").replace(/[\r\n]+/g, " ").trim();
@@ -57,6 +63,128 @@ async function sendBestEffort(
   }
 }
 
+export function renderBookingConfirmedEmail({
+  title,
+  when,
+  host,
+  manageUrl,
+  meetingLink,
+}: {
+  title: string;
+  when: string;
+  host: string;
+  manageUrl: string;
+  meetingLink?: string | null;
+}) {
+  const paragraphs = [
+    `You're booked for ${emailStrong(title)} with ${emailStrong(host)}.`,
+    `Time: ${emailStrong(when)}.`,
+  ];
+  if (meetingLink) {
+    paragraphs.push(`Meeting link: ${emailLink("Join meeting", meetingLink)}.`);
+  }
+
+  return {
+    subject: `Confirmed: ${title}`,
+    ...renderEmail({
+      preheader: `You're booked for ${title} on ${when}.`,
+      heading: "Your meeting is booked",
+      paragraphs,
+      cta: { label: "Manage booking", url: manageUrl },
+      footer:
+        "Use the manage link if you need to cancel or reschedule this meeting.",
+    }),
+  };
+}
+
+export function renderBookingReceivedEmail({
+  title,
+  when,
+  attendeeName,
+  attendee,
+  manageUrl,
+  meetingLink,
+}: {
+  title: string;
+  when: string;
+  attendeeName: string;
+  attendee: string;
+  manageUrl: string;
+  meetingLink?: string | null;
+}) {
+  return {
+    subject: `New booking: ${title}`,
+    ...renderEmail({
+      preheader: `${attendeeName} booked ${title} on ${when}.`,
+      heading: "New booking",
+      paragraphs: [
+        `${emailStrong(attendeeName)} booked ${emailStrong(title)}.`,
+        `Time: ${emailStrong(when)}.`,
+        `Guest: ${emailStrong(attendee)}.`,
+        ...(meetingLink
+          ? [`Meeting link: ${emailLink("Join meeting", meetingLink)}.`]
+          : []),
+      ],
+      cta: { label: "View booking", url: manageUrl },
+      footer: "This booking was created from your calendar booking link.",
+    }),
+  };
+}
+
+export function renderBookingCancelledEmail({
+  title,
+  when,
+  host,
+  bookAgainUrl,
+}: {
+  title: string;
+  when: string;
+  host: string;
+  bookAgainUrl?: string;
+}) {
+  return {
+    subject: `Cancelled: ${title}`,
+    ...renderEmail({
+      preheader: `${title} on ${when} was cancelled.`,
+      heading: "Your meeting was cancelled",
+      paragraphs: [
+        `${emailStrong(title)} with ${emailStrong(host || "the host")} has been cancelled.`,
+        `Original time: ${emailStrong(when)}.`,
+      ],
+      cta: bookAgainUrl
+        ? { label: "Book another time", url: bookAgainUrl }
+        : undefined,
+      footer: "If this was unexpected, contact the meeting host.",
+    }),
+  };
+}
+
+export function renderBookingCancelledHostEmail({
+  title,
+  when,
+  attendeeName,
+  attendee,
+}: {
+  title: string;
+  when: string;
+  attendeeName: string;
+  attendee: string;
+}) {
+  return {
+    subject: `Cancelled booking: ${title}`,
+    ...renderEmail({
+      preheader: `${attendeeName}'s booking for ${title} was cancelled.`,
+      heading: "Booking cancelled",
+      paragraphs: [
+        `${emailStrong(attendeeName)}'s booking for ${emailStrong(title)} was cancelled.`,
+        `Original time: ${emailStrong(when)}.`,
+        `Guest: ${emailStrong(attendee)}.`,
+      ],
+      footer: "No further action is needed.",
+    }),
+  };
+}
+
 export async function sendBookingConfirmationEmails({
   booking,
   hostEmail,
@@ -74,54 +202,31 @@ export async function sendBookingConfirmationEmails({
   const attendee = stripCrlf(booking.email);
   const attendeeName = stripCrlf(booking.name) || "there";
 
-  const attendeeParagraphs = [
-    `You're booked for ${emailStrong(title)} with ${emailStrong(host)}.`,
-    `Time: ${emailStrong(when)}.`,
-  ];
-  if (booking.meetingLink) {
-    attendeeParagraphs.push(
-      `Meeting link: ${emailLink("Join meeting", booking.meetingLink)}.`,
-    );
-  }
-
-  const attendeeEmail = renderEmail({
-    preheader: `You're booked for ${title} on ${when}.`,
-    heading: "Your meeting is booked",
-    paragraphs: attendeeParagraphs,
-    cta: { label: "Manage booking", url: manageUrl },
-    footer:
-      "Use the manage link if you need to cancel or reschedule this meeting.",
-  });
-
   await sendBestEffort("attendee confirmation", {
     to: attendee,
-    subject: `Confirmed: ${title}`,
-    html: attendeeEmail.html,
-    text: attendeeEmail.text,
+    ...renderBookingConfirmedEmail({
+      title,
+      when,
+      host,
+      manageUrl,
+      meetingLink: booking.meetingLink,
+    }),
     replyTo: host,
-  });
-
-  const hostEmailMessage = renderEmail({
-    preheader: `${attendeeName} booked ${title} on ${when}.`,
-    heading: "New booking",
-    paragraphs: [
-      `${emailStrong(attendeeName)} booked ${emailStrong(title)}.`,
-      `Time: ${emailStrong(when)}.`,
-      `Guest: ${emailStrong(attendee)}.`,
-      ...(booking.meetingLink
-        ? [`Meeting link: ${emailLink("Join meeting", booking.meetingLink)}.`]
-        : []),
-    ],
-    cta: { label: "View booking", url: manageUrl },
-    footer: "This booking was created from your calendar booking link.",
+    templateId: CALENDAR_BOOKING_CONFIRMED_EMAIL_ID,
   });
 
   await sendBestEffort("host notification", {
     to: host,
-    subject: `New booking: ${title}`,
-    html: hostEmailMessage.html,
-    text: hostEmailMessage.text,
+    ...renderBookingReceivedEmail({
+      title,
+      when,
+      attendeeName,
+      attendee,
+      manageUrl,
+      meetingLink: booking.meetingLink,
+    }),
     replyTo: attendee,
+    templateId: CALENDAR_BOOKING_RECEIVED_EMAIL_ID,
   });
 }
 
@@ -142,45 +247,24 @@ export async function sendBookingCancellationEmails({
   const attendee = stripCrlf(booking.email);
   const attendeeName = stripCrlf(booking.name) || "The guest";
 
-  const attendeeEmail = renderEmail({
-    preheader: `${title} on ${when} was cancelled.`,
-    heading: "Your meeting was cancelled",
-    paragraphs: [
-      `${emailStrong(title)} with ${emailStrong(host || "the host")} has been cancelled.`,
-      `Original time: ${emailStrong(when)}.`,
-    ],
-    cta: bookAgainUrl
-      ? { label: "Book another time", url: bookAgainUrl }
-      : undefined,
-    footer: "If this was unexpected, contact the meeting host.",
-  });
-
   await sendBestEffort("attendee cancellation", {
     to: attendee,
-    subject: `Cancelled: ${title}`,
-    html: attendeeEmail.html,
-    text: attendeeEmail.text,
+    ...renderBookingCancelledEmail({ title, when, host, bookAgainUrl }),
     replyTo: host || undefined,
+    templateId: CALENDAR_BOOKING_CANCELLED_EMAIL_ID,
   });
 
   if (!host) return;
 
-  const hostEmailMessage = renderEmail({
-    preheader: `${attendeeName}'s booking for ${title} was cancelled.`,
-    heading: "Booking cancelled",
-    paragraphs: [
-      `${emailStrong(attendeeName)}'s booking for ${emailStrong(title)} was cancelled.`,
-      `Original time: ${emailStrong(when)}.`,
-      `Guest: ${emailStrong(attendee)}.`,
-    ],
-    footer: "No further action is needed.",
-  });
-
   await sendBestEffort("host cancellation notification", {
     to: host,
-    subject: `Cancelled booking: ${title}`,
-    html: hostEmailMessage.html,
-    text: hostEmailMessage.text,
+    ...renderBookingCancelledHostEmail({
+      title,
+      when,
+      attendeeName,
+      attendee,
+    }),
     replyTo: attendee,
+    templateId: CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID,
   });
 }

package/corpus/templates/calendar/server/lib/emails.ts

@@ -0,0 +1,167 @@
+/**
+ * Catalog entries for the transactional emails Calendar sends.
+ *
+ * Registered from `server/plugins/transactional-emails.ts` so Dispatch can list
+ * and preview them without the app having sent anything yet.
+ */
+
+import { defineTransactionalEmail } from "@agent-native/core/email-catalog";
+
+import {
+  renderBookingCancelledEmail,
+  renderBookingCancelledHostEmail,
+  renderBookingConfirmedEmail,
+  renderBookingReceivedEmail,
+} from "./booking-emails.js";
+import { renderEventGuestNote } from "./event-guest-notifications.js";
+
+/** Obviously-fake sample data — these render in a preview pane, never send. */
+const SAMPLE_TITLE = "Intro call";
+const SAMPLE_WHEN = "Tuesday, March 4, 2025, 10:00 AM - 10:30 AM PST";
+const SAMPLE_HOST = "dana.hill@example.com";
+const SAMPLE_GUEST = "sam.rivera@example.com";
+const SAMPLE_GUEST_NAME = "Sam Rivera";
+const SAMPLE_MANAGE_URL = "https://example.com/book/dana/manage/sample-token";
+const SAMPLE_BOOK_AGAIN_URL = "https://example.com/book/dana/intro-call";
+const SAMPLE_MEETING_LINK = "https://meet.example.com/sample-intro-call";
+
+export const CALENDAR_BOOKING_CONFIRMED_EMAIL_ID = "calendar.booking-confirmed";
+export const CALENDAR_BOOKING_RECEIVED_EMAIL_ID = "calendar.booking-received";
+export const CALENDAR_BOOKING_CANCELLED_EMAIL_ID = "calendar.booking-cancelled";
+export const CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID =
+  "calendar.booking-cancelled-host";
+export const CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID = "calendar.event-update-note";
+export const CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID =
+  "calendar.event-cancellation-note";
+
+let registered = false;
+
+export function registerCalendarEmails(): void {
+  if (registered) return;
+  registered = true;
+
+  defineTransactionalEmail({
+    id: CALENDAR_BOOKING_CONFIRMED_EMAIL_ID,
+    name: "Booking confirmed (guest)",
+    trigger:
+      "A guest completes a booking on a public `/book/{username}/{slug}` page and the booking row is created.",
+    recipientLabel: "Booking guest",
+    recipient:
+      "The email address the guest typed into the booking form (`booking.email`).",
+    senderLabel: "Default, reply-to host",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the booking link owner's address.",
+    preview: () =>
+      renderBookingConfirmedEmail({
+        title: SAMPLE_TITLE,
+        when: SAMPLE_WHEN,
+        host: SAMPLE_HOST,
+        manageUrl: SAMPLE_MANAGE_URL,
+        meetingLink: SAMPLE_MEETING_LINK,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CALENDAR_BOOKING_RECEIVED_EMAIL_ID,
+    name: "New booking (host)",
+    trigger:
+      "Sent alongside the guest confirmation, immediately after a public booking is created.",
+    recipientLabel: "Booking link owner",
+    recipient:
+      "The owner of the booking link, looked up from the link's slug at send time.",
+    senderLabel: "Default, reply-to guest",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the guest so the host can reply directly.",
+    preview: () =>
+      renderBookingReceivedEmail({
+        title: SAMPLE_TITLE,
+        when: SAMPLE_WHEN,
+        attendeeName: SAMPLE_GUEST_NAME,
+        attendee: SAMPLE_GUEST,
+        manageUrl: SAMPLE_MANAGE_URL,
+        meetingLink: SAMPLE_MEETING_LINK,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CALENDAR_BOOKING_CANCELLED_EMAIL_ID,
+    name: "Booking cancelled (guest)",
+    trigger:
+      "A booking that was not already cancelled is cancelled, either by the guest through the manage/cancel token link or by someone with access to the booking link.",
+    recipientLabel: "Booking guest",
+    recipient: "The guest address stored on the booking row.",
+    senderLabel: "Default, reply-to host",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the host when a host address could be resolved from the link slug.",
+    preview: () =>
+      renderBookingCancelledEmail({
+        title: SAMPLE_TITLE,
+        when: SAMPLE_WHEN,
+        host: SAMPLE_HOST,
+        bookAgainUrl: SAMPLE_BOOK_AGAIN_URL,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CALENDAR_BOOKING_CANCELLED_HOST_EMAIL_ID,
+    name: "Booking cancelled (host)",
+    trigger:
+      "Sent after the guest cancellation notice, and only when a host address could be resolved from the booking link slug.",
+    recipientLabel: "Booking link owner",
+    recipient: "The booking link owner's address.",
+    senderLabel: "Default, reply-to guest",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the guest who was booked.",
+    preview: () =>
+      renderBookingCancelledHostEmail({
+        title: SAMPLE_TITLE,
+        when: SAMPLE_WHEN,
+        attendeeName: SAMPLE_GUEST_NAME,
+        attendee: SAMPLE_GUEST,
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID,
+    name: "Event update note",
+    trigger:
+      "`update-event` runs with a non-empty guest notification message. Google Calendar still sends its own update invite; this carries only the organizer's note.",
+    recipientLabel: "Event attendees",
+    recipient:
+      "Every attendee on the event with a syntactically valid address, excluding the organizer's own `self` attendee row. One email per address.",
+    senderLabel: "Default, reply-to organizer",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the organizer running the update.",
+    preview: () =>
+      renderEventGuestNote({
+        title: "Design review",
+        organizer: "Dana Hill",
+        message: "Moving this an hour later so the whole team can join.",
+        when: SAMPLE_WHEN,
+        kind: "update",
+        htmlLink: "https://calendar.example.com/event/sample",
+      }),
+  });
+
+  defineTransactionalEmail({
+    id: CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID,
+    name: "Event cancellation note",
+    trigger:
+      "`delete-event` runs with guest notification requested and a non-empty message. Google Calendar sends the cancellation itself; this carries only the organizer's note.",
+    recipientLabel: "Event attendees",
+    recipient:
+      "Every attendee on the deleted event with a syntactically valid address, excluding the organizer's own `self` attendee row. One email per address.",
+    senderLabel: "Default, reply-to organizer",
+    sender:
+      "The configured EMAIL_FROM, with reply-to set to the organizer running the deletion.",
+    preview: () =>
+      renderEventGuestNote({
+        title: "Design review",
+        organizer: "Dana Hill",
+        message: "Cancelling this week — we will pick it up after the launch.",
+        when: SAMPLE_WHEN,
+        kind: "cancellation",
+        appliesTo: "all events in the series",
+      }),
+  });
+}

package/corpus/templates/calendar/server/lib/event-guest-notifications.ts

@@ -6,6 +6,10 @@ import {
 } from "@agent-native/core/server";
 
 import type { CalendarEvent, DeleteEventScope } from "../../shared/api.js";
+import {
+  CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID,
+  CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID,
+} from "./emails.js";
 
 export interface GuestNotificationResult {
   requested: boolean;
@@ -96,6 +100,53 @@ function scopeLabel(scope: DeleteEventScope | undefined): string | undefined {
   return "this and following events";
 }
 
+export function renderEventGuestNote({
+  title,
+  organizer,
+  message,
+  when,
+  kind,
+  appliesTo,
+  htmlLink,
+}: {
+  title: string;
+  organizer: string;
+  message: string;
+  when: string;
+  kind: GuestNotificationKind;
+  appliesTo?: string;
+  htmlLink?: string | null;
+}) {
+  const heading =
+    kind === "cancellation" ? "Event cancellation note" : "Event update note";
+  const subjectPrefix =
+    kind === "cancellation" ? "Cancellation note" : "Update note";
+  const eventAction = kind === "cancellation" ? "cancelling" : "updating";
+  const paragraphs = [
+    `${emailStrong(organizer)} added this note while ${eventAction} ${emailStrong(title)}.`,
+    messageParagraph(message),
+    `When: ${emailStrong(when)}.`,
+  ];
+  if (appliesTo) {
+    paragraphs.push(`Applies to: ${emailStrong(appliesTo)}.`);
+  }
+
+  return {
+    subject: `${subjectPrefix}: ${title}`,
+    ...renderEmail({
+      preheader: `${subjectPrefix}: ${title}`,
+      heading,
+      paragraphs,
+      cta:
+        kind === "update" && htmlLink
+          ? { label: "Open in Google Calendar", url: htmlLink }
+          : undefined,
+      footer:
+        "Google Calendar sends the calendar update separately. This message carries the organizer note.",
+    }),
+  };
+}
+
 export async function sendEventGuestNotificationNote({
   event,
   organizerEmail,
@@ -138,33 +189,14 @@ export async function sendEventGuestNotificationNote({
     };
   }
 
-  const title = stripCrlf(event.title) || "Calendar event";
-  const organizer = stripCrlf(event.organizer?.displayName) || organizerEmail;
-  const heading =
-    kind === "cancellation" ? "Event cancellation note" : "Event update note";
-  const subjectPrefix =
-    kind === "cancellation" ? "Cancellation note" : "Update note";
-  const eventAction = kind === "cancellation" ? "cancelling" : "updating";
-  const paragraphs = [
-    `${emailStrong(organizer)} added this note while ${eventAction} ${emailStrong(title)}.`,
-    messageParagraph(normalizedMessage),
-    `When: ${emailStrong(formatWhen(event))}.`,
-  ];
-  const appliesTo = scopeLabel(scope);
-  if (appliesTo) {
-    paragraphs.push(`Applies to: ${emailStrong(appliesTo)}.`);
-  }
-
-  const rendered = renderEmail({
-    preheader: `${subjectPrefix}: ${title}`,
-    heading,
-    paragraphs,
-    cta:
-      kind === "update" && event.htmlLink
-        ? { label: "Open in Google Calendar", url: event.htmlLink }
-        : undefined,
-    footer:
-      "Google Calendar sends the calendar update separately. This message carries the organizer note.",
+  const rendered = renderEventGuestNote({
+    title: stripCrlf(event.title) || "Calendar event",
+    organizer: stripCrlf(event.organizer?.displayName) || organizerEmail,
+    message: normalizedMessage,
+    when: formatWhen(event),
+    kind,
+    appliesTo: scopeLabel(scope),
+    htmlLink: event.htmlLink,
   });
 
   let sentCount = 0;
@@ -174,10 +206,14 @@ export async function sendEventGuestNotificationNote({
       try {
         await sendEmail({
           to,
-          subject: `${subjectPrefix}: ${title}`,
+          subject: rendered.subject,
           html: rendered.html,
           text: rendered.text,
           replyTo: organizerEmail,
+          templateId:
+            kind === "cancellation"
+              ? CALENDAR_EVENT_CANCELLATION_NOTE_EMAIL_ID
+              : CALENDAR_EVENT_UPDATE_NOTE_EMAIL_ID,
         });
         sentCount += 1;
       } catch (error) {

package/corpus/templates/calendar/server/plugins/transactional-emails.ts

@@ -0,0 +1,5 @@
+import { registerCalendarEmails } from "../lib/emails.js";
+
+export default function registerTransactionalEmails(): void {
+  registerCalendarEmails();
+}

package/corpus/templates/chat/.agents/skills/agent-native-docs/SKILL.md

@@ -31,6 +31,26 @@ the framework monorepo checkout.
 
 From a generated app directory:
 
+```bash
+pnpm action framework-search --pattern "defineAction"
+pnpm action framework-search --pattern "templates/*/actions/*.ts" --mode glob --scope source
+pnpm action framework-search --pattern "Agent(?:Panel|Sidebar)" --mode regex --scope source
+```
+
+Use `framework-search` first when a question may cross the docs and source
+boundary. It searches the version-matched framework docs, runtime-visible
+skills, readable Core or Toolkit package source, and first-party template
+corpus in one bounded read-only call. Use `scope: docs` or `scope: source` to
+narrow it, then use the existing focused readers for the page or file you need.
+
+The same tool is available in the headless `pnpm agent` loop and every built-in
+app agent. Its default substring mode is safest for ordinary questions; use
+`glob` for wildcard paths, `sql-like` for `%` and `_` wildcards, and `regex`
+for precise structural matches. Results are bounded, so refine the pattern or
+path instead of treating a truncated result as exhaustive.
+
+From a generated app directory, the lower-level readers remain available:
+
 ```bash
 pnpm action docs-search --query "<feature>"
 pnpm action docs-search --slug <slug>
@@ -41,9 +61,9 @@ pnpm action source-search --path templates/chat/actions/hello.ts
 pnpm action source-search --list
 ```
 
-The headless `pnpm agent` loop and built-in app agent also expose a read-only
-`docs-search` tool with the same `query`, `slug`, and `list` options, plus a
-read-only `source-search` tool with `query`, `path`, and `list`.
+The headless `pnpm agent` loop and built-in app agent also expose read-only
+`framework-search`, `docs-search`, and `source-search` tools. Use the unified
+tool for discovery, then the focused tools for full page or file reads.
 
 If the action runner is unavailable, search the package directly:
 

package/corpus/templates/chat/.agents/skills/agent-native-toolkit/SKILL.md

@@ -65,6 +65,22 @@ Contextual agent UI is not a reason to expose every option at once. Start with
 the domain task's primary action, reveal review or configuration only when the
 current state needs it, and let the sidebar carry conversational depth.
 
+## Visual Direction And Workspace Variety
+
+Shared workspace behavior should be consistent without forcing every app into
+the same visual skin. Keep shell and component tokens semantic, then let each
+app declare a named direction in `DESIGN.md` before styling. A new app should
+choose its palette family and composition from the product context, compare
+nearby apps, and avoid inheriting their accent by default. Use the
+`frontend-design` visual-direction reference for mode, palette, type, density,
+shape, anti-references, and the `distill` / `typeset` / `colorize` / `layout` /
+`polish` / `audit` review vocabulary.
+
+Do not make warm beige plus terracotta the workspace fallback. Preserve a
+workspace-level brand when one exists; otherwise keep shared chrome neutral and
+allow app-owned accents to distinguish products while retaining accessible
+semantic states and the shared AgentSidebar contract.
+
 ## Discover Before Building
 
 Before creating an app-local version of repeated workspace or agent UI:

package/corpus/templates/chat/.agents/skills/frontend-design/SKILL.md

@@ -34,6 +34,22 @@ Before coding, decide:
 
 Then implement working code that is cohesive, accessible, responsive, and polished in small details: typography, spacing, copy, motion, empty states, loading states, focus states, and error states.
 
+## Visual Direction Contract
+
+Before styling a new app or workspace surface, define its product mode,
+audience, visual world, palette family, type treatment, composition, shape
+language, and anti-references in `DESIGN.md`. Read
+`references/visual-direction.md` for the direction families and review
+vocabulary. This is the Impeccable-inspired design contract for Agent-Native
+apps: understand the product, name the mode, deal a few coherent directions,
+commit to one, and audit the result instead of averaging back to a starter.
+
+Preserve an existing brand system and component library. When no brand exists,
+choose a deliberate direction based on the domain and compare sibling apps
+before selecting its accent family. Shared behavior and semantic token names
+should stay consistent; palette, density, composition, type contrast, and
+shape language should not be identical by default.
+
 ## Minimalism And Progressive Disclosure
 
 Default to Apple/Linear-level restraint: make the primary workflow obvious, then remove everything that does not help that workflow right now. A polished UI often has fewer visible controls, fewer borders, fewer labels, and fewer explanatory surfaces than the first reasonable implementation.
@@ -81,13 +97,13 @@ passed this requirement yet.
   operational apps, make a clear sans-serif hierarchy the default; reserve a
   serif or editorial face for a deliberate content preview or brand moment,
   not the whole application shell.
-- **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes and default purple/blue gradients unless the brand demands them.
+- **Color and theme**: Use semantic tokens and CSS variables. Avoid one-note palettes, default warm beige/terracotta, and default purple/blue gradients unless the brand demands them. New apps should choose a product-fitting accent family rather than inherit the previous app's color.
 - **Motion**: Prefer purposeful transitions and small state changes. Use CSS transitions/keyframes unless the app already uses a motion library. Never `transition-all` — list the properties that actually change (e.g. `transition-[opacity,transform]`). Use the shared easing tokens defined in `packages/core/src/styles/agent-native.css` instead of hand-typing curves: `var(--ease-drawer)` (260ms, drawers/app chrome), `var(--ease-collapse)` (200ms, expand/collapse), `var(--ease-out-strong)` (snappy entrances) — in Tailwind, `ease-[var(--ease-collapse)]`. Enter/exit with ease-out, never `ease-in`. Overlays that zoom in must set the Radix origin var (e.g. `origin-[--radix-popover-content-transform-origin]`). Animate `transform`/`opacity`, not width/height/padding/box-shadow. Gate looping or large-movement animations with `motion-reduce:`. Command palettes and keyboard-triggered actions get no animation.
 - **Composition**: Match the workflow. Operational apps should be dense and scannable; marketing or portfolio pages can be more immersive.
 - **Visual assets**: Websites, games, and object-focused pages need real or generated media when images help users understand the subject.
 - **Responsive fit**: Text must not overflow buttons, cards, tabs, sidebars, or fixed-format tools. Use stable dimensions for boards, grids, toolbars, and counters.
 
-**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option (ban Inter and you reach for Roboto; ban purple gradients and you reach for Space Grotesk + a teal accent on every screen). Commit to one named direction, pair any reference with the reason it fits ("Linear: the quiet confidence of its spacing" — a bare "Linear" collapses back to the average), and match implementation effort to the vision: maximalist wants elaborate motion and effects, minimal wants restraint and precise spacing. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
+**Beat convergence, not just defaults.** You sample toward the "on-distribution" center, so naming what to avoid is not enough: every "don't" needs a "do", or you converge on the next safe option. Commit to one named direction, pair any reference with the reason it fits, and match implementation effort to the vision. If the brief is open, consider two or three coherent visual worlds, then commit to one instead of averaging them. When building on an existing app, inspect its tokens/type/components first and treat any drift back to a default as a missing token to pin, not something to re-prompt.
 
 ## Agent-Native UI Rules
 
@@ -164,6 +180,9 @@ as an operator would use it repeatedly:
 - For review flows, stack the source/original first and the generated or safe
   result second by default. Use side-by-side comparison only when the content
   is short enough to scan without excessive horizontal reading.
+- Compare the result with sibling apps. Shared toolkit behavior should feel
+  consistent, but a repeated palette, hero composition, type pairing, and
+  radius language without a product reason is visual drift, not consistency.
 - Check the result at the target desktop width and a narrow width. If the first
   viewport feels like documentation instead of a tool, subtract again.
 
@@ -216,6 +235,8 @@ For substantial frontend work:
 5. When registering or changing a company adapter, run
    `@agent-native/toolkit/conformance`, including mixed-overlay focus,
    `portalContainer`, and z-index stacking checks.
+6. For a new app or a visual redesign, review `DESIGN.md` against the rendered
+   surface and run the anti-slop audit in `references/visual-direction.md`.
 
 ## Related Skills