@agent-native/core 0.117.2 → 0.118.1

package/corpus/templates/brain/app/routes/sources.tsx

@@ -3,20 +3,13 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@agent-native/toolkit/ui/dialog";
 import {
   IconAlertTriangle,
   IconArchive,
   IconBrandGithub,
   IconBrandSlack,
   IconChecks,
+  IconChevronDown,
   IconCircleCheck,
   IconCircleDashed,
   IconClock,
@@ -48,7 +41,14 @@ import {
 } from "@/components/brain/Surface";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -75,6 +75,11 @@ import {
 } from "@/components/ui/sheet";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   type BrainConnectionProvider,
   type BrainHealthResponse,
@@ -104,6 +109,7 @@ import {
   createOneTimeIngestHandoff,
   type OneTimeIngestHandoff,
 } from "@/lib/ingest-handoff";
+import { cn } from "@/lib/utils";
 
 type Provider = "manual" | "generic" | "clips" | "slack" | "granola" | "github";
 type CaptureStatusFilter = BrainCaptureReviewStatus | "all";
@@ -1536,6 +1542,7 @@ function SourceListItem({
   onTune: () => void;
 }) {
   const t = useT();
+  const [expanded, setExpanded] = useState(false);
   const Icon = sourceProviderIcon(source.provider);
   const retry = sourceRetryAfter(source);
   const hasSyncNotice = Boolean(
@@ -1546,113 +1553,171 @@ function SourceListItem({
     : null;
   const coverage =
     typeof source.coverage === "number" ? formatPercent(source.coverage) : null;
+  const captureCount = (source.recordCount ?? 0).toLocaleString();
+  const lastSync = shortDate(sourceLastSync(source)) ?? t("sources.never");
 
   return (
-    <Card className="overflow-hidden shadow-none">
-      <CardContent className="p-4">
-        <div className="brain-source-card-grid grid gap-4">
-          <div className="flex min-w-0 items-start gap-3">
-            <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/35">
-              <Icon className="size-4 text-muted-foreground" />
+    <div className="group bg-card transition-colors hover:bg-muted/20">
+      <div className="flex min-w-0 items-center gap-3 px-4 py-3 sm:px-5">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted/35">
+          <Icon className="size-4 text-muted-foreground" />
+        </span>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
+            <h2 className="truncate text-sm font-medium text-foreground sm:text-[0.9375rem]">
+              {sourceName(source)}
+            </h2>
+            <StatusBadge status={sourceHealth(source)} />
+          </div>
+          <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted-foreground">
+            <span className="capitalize">{sourceType(source)}</span>
+            <span aria-hidden="true">·</span>
+            <span>
+              {captureCount} {t("sources.captures").toLocaleLowerCase()}
             </span>
-            <div className="min-w-0">
-              <div className="flex min-w-0 flex-wrap items-center gap-2">
-                <h2 className="truncate text-base font-medium text-foreground">
-                  {sourceName(source)}
-                </h2>
-                <StatusBadge status={sourceHealth(source)} />
-              </div>
-              <div className="mt-1 flex flex-wrap items-center gap-2">
-                <Badge variant="outline" className="max-w-full capitalize">
-                  {sourceType(source)}
-                </Badge>
-                {nextSync ? (
-                  <span className="text-xs text-muted-foreground">
-                    {t("sources.nextSync", { date: nextSync })}
+            <span aria-hidden="true">·</span>
+            <span className="truncate">
+              {t("sources.lastSyncWithDate", { date: lastSync })}
+            </span>
+            {hasSyncNotice ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className="ms-1 inline-flex size-4 items-center justify-center text-destructive"
+                    aria-label={t("sources.actionFailedTitle")}
+                  >
+                    <IconAlertTriangle className="size-3.5" />
                   </span>
-                ) : null}
-              </div>
-              <p className="mt-2 line-clamp-2 text-sm leading-6 text-muted-foreground">
-                {sourceDescription(source)}
-              </p>
-            </div>
-          </div>
-
-          <div
-            className={
-              coverage
-                ? "grid grid-cols-2 gap-4 sm:grid-cols-3 xl:min-w-80"
-                : "grid grid-cols-2 gap-4 xl:min-w-64"
-            }
-          >
-            <SourceFact
-              label={t("sources.captures")}
-              value={(source.recordCount ?? 0).toLocaleString()}
-            />
-            <SourceFact
-              label={t("sources.lastSync")}
-              value={shortDate(sourceLastSync(source)) ?? t("sources.never")}
-            />
-            {coverage ? (
-              <SourceFact label={t("sources.coverage")} value={coverage} />
+                </TooltipTrigger>
+                <TooltipContent>
+                  {t("sources.actionFailedTitle")}
+                </TooltipContent>
+              </Tooltip>
             ) : null}
           </div>
+        </div>
 
-          <div className="flex items-center justify-end gap-2">
-            <Button size="sm" variant="outline" onClick={onReview}>
-              <IconFileSearch className="size-4" />
-              {t("sources.captures")}
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  size="icon"
-                  variant="ghost"
-                  className="size-9"
-                  aria-label={t("sources.moreActionsFor", {
-                    source: sourceName(source),
-                  })}
-                >
-                  <IconDotsVertical className="size-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-40">
-                <DropdownMenuItem disabled={syncPending} onSelect={onSync}>
+        <div className="flex shrink-0 items-center gap-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                onClick={onReview}
+                aria-label={`${t("sources.captures")}: ${sourceName(source)}`}
+              >
+                <IconFileSearch className="size-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("sources.captures")}</TooltipContent>
+          </Tooltip>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                aria-label={t("sources.moreActionsFor", {
+                  source: sourceName(source),
+                })}
+              >
+                <IconDotsVertical className="size-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem disabled={syncPending} onSelect={onSync}>
+                <IconRefresh className="size-4" />
+                {t("sources.syncNow")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={onTune}>
+                <IconSettings2 className="size-4" />
+                {t("sources.tuneSource")}
+              </DropdownMenuItem>
+              {onRotateIngestToken ? (
+                <DropdownMenuItem onSelect={onRotateIngestToken}>
                   <IconRefresh className="size-4" />
-                  {t("sources.syncNow")}
-                </DropdownMenuItem>
-                <DropdownMenuItem onSelect={onTune}>
-                  <IconSettings2 className="size-4" />
-                  {t("sources.tuneSource")}
+                  {t("sources.rotateIngestToken")}
                 </DropdownMenuItem>
-                {onRotateIngestToken ? (
-                  <DropdownMenuItem onSelect={onRotateIngestToken}>
-                    <IconRefresh className="size-4" />
-                    {t("sources.rotateIngestToken")}
-                  </DropdownMenuItem>
-                ) : null}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
+              ) : null}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="size-8"
+                onClick={() => setExpanded((value) => !value)}
+                aria-expanded={expanded}
+                aria-label={
+                  expanded ? t("sources.hideDetails") : t("sources.details")
+                }
+              >
+                <IconChevronDown
+                  className={cn(
+                    "size-4 transition-transform duration-200 ease-out",
+                    expanded && "rotate-180",
+                  )}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {expanded ? t("sources.hideDetails") : t("sources.details")}
+            </TooltipContent>
+          </Tooltip>
         </div>
+      </div>
 
-        {coverage ? (
-          <Progress
-            value={(source.coverage ?? 0) * 100}
-            className="mt-4 h-1.5 bg-muted"
-          />
-        ) : null}
+      {expanded ? (
+        <div className="border-t border-border/70 px-4 pb-4 pt-3 sm:px-5">
+          <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
+            <div className="min-w-0">
+              <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+                {sourceDescription(source)}
+              </p>
+              {hasSyncNotice ? (
+                <div className="mt-3 flex gap-2 rounded-md border border-destructive/20 bg-destructive/5 px-3 py-2 text-sm">
+                  <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+                  <p className="min-w-0 text-muted-foreground">
+                    {syncDetail(source, t)}
+                  </p>
+                </div>
+              ) : null}
+            </div>
 
-        {hasSyncNotice ? (
-          <div className="mt-3 flex gap-2 rounded-md border border-border bg-muted/25 px-3 py-2 text-sm">
-            <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-            <p className="min-w-0 truncate text-muted-foreground">
-              {syncDetail(source, t)}
-            </p>
+            <div
+              className={cn(
+                "grid grid-cols-2 gap-x-6 gap-y-3 lg:min-w-64",
+                coverage && "lg:grid-cols-3 lg:min-w-80",
+              )}
+            >
+              <SourceFact label={t("sources.captures")} value={captureCount} />
+              <SourceFact label={t("sources.lastSync")} value={lastSync} />
+              {coverage ? (
+                <SourceFact label={t("sources.coverage")} value={coverage} />
+              ) : null}
+            </div>
           </div>
-        ) : null}
-      </CardContent>
-    </Card>
+
+          {coverage ? (
+            <Progress
+              value={(source.coverage ?? 0) * 100}
+              className="mt-4 h-1.5 bg-muted"
+            />
+          ) : null}
+
+          {nextSync ? (
+            <p className="mt-3 text-xs text-muted-foreground">
+              {t("sources.nextSync", { date: nextSync })}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
   );
 }
 
@@ -1975,25 +2040,27 @@ export default function SourcesRoute() {
             <LoadingRows rows={3} />
           </div>
         ) : visibleSources.length ? (
-          visibleSources.map((source) => (
-            <SourceListItem
-              key={source.id}
-              source={source}
-              syncPending={
-                syncSource.isPending || rotateSourceIngestToken.isPending
-              }
-              onReview={() => openCaptureReview(source)}
-              onRotateIngestToken={
-                (source.provider === "clips" ||
-                  source.provider === "generic") &&
-                ingestSourceKey(source)
-                  ? () => void rotateIngestToken(source)
-                  : undefined
-              }
-              onSync={() => syncSource.mutate({ sourceId: source.id })}
-              onTune={() => openEdit(source)}
-            />
-          ))
+          <div className="overflow-hidden rounded-lg border border-border bg-card divide-y divide-border">
+            {visibleSources.map((source) => (
+              <SourceListItem
+                key={source.id}
+                source={source}
+                syncPending={
+                  syncSource.isPending || rotateSourceIngestToken.isPending
+                }
+                onReview={() => openCaptureReview(source)}
+                onRotateIngestToken={
+                  (source.provider === "clips" ||
+                    source.provider === "generic") &&
+                  ingestSourceKey(source)
+                    ? () => void rotateIngestToken(source)
+                    : undefined
+                }
+                onSync={() => syncSource.mutate({ sourceId: source.id })}
+                onTune={() => openEdit(source)}
+              />
+            ))}
+          </div>
         ) : (
           <div>
             <EmptyActionState

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

@@ -47,6 +47,34 @@ Before creating an app-local version of repeated workspace or agent UI:
 Use public package exports at runtime. Published source and ejection manifests
 are discovery and ownership-transfer mechanisms, not private runtime APIs.
 
+## Design-System Boundary
+
+Every app keeps an explicit design-system seam in `app/design-system.ts` using
+`defineDesignSystem` from `@agent-native/toolkit/design-system`, and supplies it
+to `ToolkitProvider`. The semantic contract contains:
+
+- nine leaf components: `ActionButton`, `IconButton`, `TextField`, `TextArea`,
+  `Spinner`, `Skeleton`, `Status`, `Surface`, and `Avatar`
+- eight behavior components: `Tooltip`, `Menu`, `Popover`, `Dialog`, `Picker`,
+  `Checkbox`, `Switch`, and `Tabs`
+
+These are semantic contracts, not styling contracts. An adapter may use
+Tailwind/shadcn, MUI-style theme providers, React Aria, CSS modules, CSS-in-JS,
+or another React design system. Do not assume CVA, utility classes, or even a
+`className`; behavior adapters may supply their overlay and focus
+implementation wholesale while honoring portal, focus-restoration, keyboard,
+dismissal, ARIA, and z-index interoperability.
+
+Pages, routes, and domain components import ordinary controls through the app's
+local adapter layer, usually `@/components/ui/*`. They must not import
+`@agent-native/toolkit/ui/*` directly. Toolkit feature exports are still the
+right home for shared workspace behavior; their presentation flows through the
+registered semantic components, feature controller, and product-level slots.
+
+Customer adapter packages are normal npm packages imported explicitly by the
+app. Never auto-detect them or load React components from JSON. Run the adapter
+against `@agent-native/toolkit/conformance` in customer CI before adopting it.
+
 ## Settings Direction
 
 Durable settings belong in the Settings app or a registered settings route. The
@@ -113,8 +141,9 @@ in the moment of agent use.
 When adding or refactoring one of these areas:
 
 1. Search existing framework and template code for duplicated UI or actions.
-2. Decide the shared contract: data shape, action API, React component/hook, and
-   app adapter points.
+2. Decide the shared contract: data shape, action API, feature-level headless
+   controller, default view, semantic components, and product-level render
+   slots.
 3. Keep shared data provider-agnostic and scoped by auth/sharing rules.
 4. Expose the same capability to the UI and agent through actions or documented
    client helpers.
@@ -125,6 +154,12 @@ When adding or refactoring one of these areas:
    ship readable source plus a complete ejection unit so apps can take ownership
    of the smallest feature when needed. See `customizing-agent-native` for the
    configure → compose → eject → propose seam ladder.
+8. Keep one controller as the source of truth for the default and custom render
+   paths. A custom design must not fork actions, analytics, async state, or
+   accessibility behavior.
+9. Verify the default adapter and at least one non-Tailwind adapter with the
+   conformance kit, including focus and portal stacking across mixed overlay
+   implementations.
 
 ## Related Skills
 

package/corpus/templates/calendar/.agents/skills/customizing-agent-native/SKILL.md

@@ -13,22 +13,93 @@ metadata:
 
 ## Rule
 
-Start with the public component and its props, slots, callbacks, and stable
-class names. If those seams are not enough, use the eject CLI to transfer the
-smallest supported feature into the app and make that copy app-owned. Never
-edit `node_modules`, deep-import a private source file at runtime, or patch an
-`@agent-native/*` package.
+Start with the app's registered design system and local UI adapters, then use
+the public feature's props, semantic components, controller, product slots,
+and callbacks. If those seams are not enough, use the eject CLI to transfer
+the smallest supported feature into the app and make that copy app-owned.
+Never edit `node_modules`, deep-import a private source file at runtime, or
+patch an `@agent-native/*` package.
 
 Use this order:
 
-1. Configure the public component.
-2. Compose public primitives behind a local app component.
-3. Eject the smallest feature into app-owned source.
-4. Propose a new Toolkit seam when the same override is useful in two apps.
+1. Set brand tokens with the build-time theme configuration when tokens are
+   enough.
+2. Register company components in `app/design-system.ts` with
+   `defineDesignSystem`, then pass that definition to `ToolkitProvider`.
+3. Configure a public feature through its semantic components, headless
+   controller, and product-level render slots.
+4. Compose app primitives behind the app's local UI adapter layer.
+5. Eject the smallest feature into app-owned source.
+6. Propose a new Toolkit seam when the same override is useful in two apps.
 
 Ejection is for intentional product customization, not for hiding an upgrade
 failure or replacing Core runtime behavior.
 
+## Use A Company Design System
+
+Keep the explicit, typed registration seam in `app/design-system.ts`:
+
+```tsx
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+import {
+  AcmeActionButtonAdapter,
+  AcmeDialogAdapter,
+} from "./design-system/acme-adapter";
+
+export const designSystem = defineDesignSystem({
+  name: "Acme",
+  components: {
+    ActionButton: AcmeActionButtonAdapter,
+    Dialog: AcmeDialogAdapter,
+  },
+});
+```
+
+Adapters translate the semantic Toolkit contract into company component props.
+They are ordinary React components and may use MUI-style providers, React Aria,
+CSS modules, CSS-in-JS, or another styling runtime. `className` and `style` are
+optional interoperability hooks, not Tailwind or CVA requirements.
+
+The contract has nine leaf components (`ActionButton`, `IconButton`,
+`TextField`, `TextArea`, `Spinner`, `Skeleton`, `Status`, `Surface`, `Avatar`)
+and eight behavior components (`Tooltip`, `Menu`, `Popover`, `Dialog`,
+`Picker`, `Checkbox`, `Switch`, `Tabs`). `Picker` covers select and combobox
+behavior, not date picking. Behavior adapters own their portal, focus,
+keyboard, dismissal, and stacking implementation while honoring the semantic
+props and `portalContainer` interop contract.
+
+App product code imports standard controls from its local adapter path, usually
+`@/components/ui/*`. Do not import `@agent-native/toolkit/ui/*` directly from
+pages, routes, or domain components. That bypasses the app seam and makes a
+future design-system replacement incomplete. Toolkit feature packages remain
+valid imports; configure their presentation through the registered semantic
+components, controller, and product slots.
+
+Run the published conformance kit against a complete adapter in its own CI:
+
+```tsx
+import { assertDesignSystemConformance } from "@agent-native/toolkit/conformance";
+import { DESIGN_SYSTEM_CONTRACT_VERSION } from "@agent-native/toolkit/design-system";
+
+await assertDesignSystemConformance({
+  adapterName: "Acme",
+  components,
+  contractVersion: DESIGN_SYSTEM_CONTRACT_VERSION,
+});
+```
+
+New components and optional props are minor contract changes. Required props,
+removed APIs, or behavioral changes require a new contract major.
+
+## Customize A Shared Feature
+
+Prefer feature-level headless controllers over rebuilding individual widgets.
+One controller must power both the Toolkit default view and every custom render
+path so behavior, actions, analytics, accessibility state, and error handling
+cannot drift. Use a product-level render slot to replace the view while keeping
+that controller. Eject only when the controller and slots cannot express the
+required product behavior.
+
 ## Eject A Feature
 
 Discover and inspect the ejection units published by installed first-party
@@ -104,11 +175,14 @@ UI ownership may change; product contracts should not:
   Core. Do not copy those runtimes into the app.
 - Keep local adapters narrow so package upgrades still improve every surface
   the app has not intentionally taken ownership of.
+- Keep page, route, and domain code on local UI adapter imports. Never reach
+  around the registered design system with direct Toolkit UI primitive imports.
 
 ## App Shapes
 
-- **Template app:** begin with its existing local adapters and domain UI. Use
-  Toolkit for repeated workspace UI; eject only the unit being customized.
+- **Template app:** begin with `app/design-system.ts`, its local UI adapters,
+  and domain UI. Use Toolkit features for repeated workspace behavior; eject
+  only the unit being customized.
 - **Chat app:** keep `AgentChatSurface`, thread state, and chat transport in
   Core. Compose or eject Toolkit presentation such as chat-history UI around it.
 - **Headless app:** stay action-first while no UI is needed. When adding a UI,
@@ -135,6 +209,7 @@ UI ownership may change; product contracts should not:
 - Don't copy Core auth, DB, action, agent-loop, or transport internals.
 - Don't manually copy a first-party unit with a missing recipe; fix its manifest.
 - Don't eject a full package when a prop, slot, wrapper, or smaller unit works.
+- Don't fork feature state into a custom view; consume the feature's controller.
 
 ## Related Skills
 

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

@@ -57,10 +57,26 @@ Default to Apple/Linear-level restraint: make the primary workflow obvious, then
 
 ## Agent-Native UI Rules
 
-- Agent-native apps use React, Vite, Tailwind CSS, shadcn/ui, and `@tabler/icons-react`.
-- **Use shadcn/ui primitives for standard UI**: `DropdownMenu`, `Popover`, `Dialog`, `AlertDialog`, `Sheet`, `Tabs`, `Tooltip`, `Select`, `Command`, `Sidebar`, `Table`, `Card`, `Badge`, `Skeleton`, and related primitives.
+- Agent-native apps use React and Vite. The default adapter uses Tailwind CSS,
+  shadcn/ui, and `@tabler/icons-react`, but an app may register a different
+  company design system in `app/design-system.ts`.
+- **Use the app's design-system seam for standard UI.** Inspect
+  `app/design-system.ts`, `ToolkitProvider`, and the local UI adapter directory
+  before choosing a primitive. Use shadcn primitives when they are the active
+  adapter; use the registered company components when they are not.
 - **When touching shadcn/ui components, also read `shadcn-ui` if it exists.** That skill covers `components.json`, CLI docs, component composition, theming, and registry workflows.
 - Check `app/components/ui/` before importing a shadcn component. If a primitive is missing, add it from the app root with `pnpm dlx shadcn@latest add <component>`, then review the generated file.
+- Pages, routes, and domain components must import controls through the app's
+  local adapter path, usually `@/components/ui/*`. Never import
+  `@agent-native/toolkit/ui/*` directly in app product code.
+- Toolkit/Core feature presentation flows through the semantic components from
+  `@agent-native/toolkit/design-system`. Their props express intent, emphasis,
+  size, controlled values, and behavior; they do not require Tailwind, CVA, or
+  `className`.
+- For deeper feature customization, consume the feature-level headless
+  controller through its product render slot. The same controller must power
+  the default and custom views. Eject the smallest supported unit only after
+  tokens, semantic components, controllers, and slots are insufficient.
 - Do not build custom dropdowns, menus, popovers, modals, or confirmations with manual absolute positioning and click-outside effects.
 - Never use browser dialogs (`window.alert`, `window.confirm`, `window.prompt`). Use `AlertDialog`, `Dialog`, or app-specific confirmation UI.
 - Use Tabler icons for all first-party UI icons. Do not add Lucide, Heroicons, inline SVG icon sets, or emoji icons.
@@ -103,10 +119,14 @@ For substantial frontend work:
 2. Start the dev server when the app needs one.
 3. Verify with browser screenshots at desktop and mobile widths.
 4. Check interactive states: hover, focus, loading, empty, error, and destructive confirmations.
+5. When registering or changing a company adapter, run
+   `@agent-native/toolkit/conformance`, including mixed-overlay focus,
+   `portalContainer`, and z-index stacking checks.
 
 ## Related Skills
 
 - **shadcn-ui** — shadcn CLI, component docs, composition rules, theming, and registries
+- **customizing-agent-native** — Design-system registration, feature controllers, product slots, conformance, and ejection
 - **self-modifying-code** — The agent can edit source code to apply design changes
 - **storing-data** — All data lives in SQL; use actions for data access
 - **actions** — `useActionQuery`/`useActionMutation` hooks for frontend data fetching