@agent-native/core 0.39.1 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/README.md +1 -1
  2. package/dist/action.js +12 -0
  3. package/dist/action.js.map +1 -1
  4. package/dist/cli/create.d.ts.map +1 -1
  5. package/dist/cli/create.js +5 -1
  6. package/dist/cli/create.js.map +1 -1
  7. package/dist/cli/index.js +1 -1
  8. package/dist/cli/index.js.map +1 -1
  9. package/dist/cli/skills.d.ts +6 -6
  10. package/dist/cli/skills.d.ts.map +1 -1
  11. package/dist/cli/skills.js +936 -1167
  12. package/dist/cli/skills.js.map +1 -1
  13. package/dist/client/MultiTabAssistantChat.d.ts.map +1 -1
  14. package/dist/client/MultiTabAssistantChat.js +2 -5
  15. package/dist/client/MultiTabAssistantChat.js.map +1 -1
  16. package/dist/client/NewWorkspaceAppFlow.js +1 -1
  17. package/dist/client/NewWorkspaceAppFlow.js.map +1 -1
  18. package/dist/client/blocks/AiEditableField.d.ts +8 -0
  19. package/dist/client/blocks/AiEditableField.d.ts.map +1 -0
  20. package/dist/client/blocks/AiEditableField.js +10 -0
  21. package/dist/client/blocks/AiEditableField.js.map +1 -0
  22. package/dist/client/blocks/BlockView.d.ts +3 -3
  23. package/dist/client/blocks/BlockView.d.ts.map +1 -1
  24. package/dist/client/blocks/BlockView.js +15 -3
  25. package/dist/client/blocks/BlockView.js.map +1 -1
  26. package/dist/client/blocks/SchemaBlockEditor.js +2 -2
  27. package/dist/client/blocks/SchemaBlockEditor.js.map +1 -1
  28. package/dist/client/blocks/index.d.ts +5 -2
  29. package/dist/client/blocks/index.d.ts.map +1 -1
  30. package/dist/client/blocks/index.js +6 -3
  31. package/dist/client/blocks/index.js.map +1 -1
  32. package/dist/client/blocks/library/ApiEndpointBlock.d.ts.map +1 -1
  33. package/dist/client/blocks/library/ApiEndpointBlock.js +20 -6
  34. package/dist/client/blocks/library/ApiEndpointBlock.js.map +1 -1
  35. package/dist/client/blocks/library/DiffBlock.d.ts +29 -0
  36. package/dist/client/blocks/library/DiffBlock.d.ts.map +1 -1
  37. package/dist/client/blocks/library/DiffBlock.js +190 -30
  38. package/dist/client/blocks/library/DiffBlock.js.map +1 -1
  39. package/dist/client/blocks/library/FileTreeBlock.d.ts.map +1 -1
  40. package/dist/client/blocks/library/FileTreeBlock.js +46 -7
  41. package/dist/client/blocks/library/FileTreeBlock.js.map +1 -1
  42. package/dist/client/blocks/library/HighlightedCode.d.ts +10 -0
  43. package/dist/client/blocks/library/HighlightedCode.d.ts.map +1 -0
  44. package/dist/client/blocks/library/HighlightedCode.js +92 -0
  45. package/dist/client/blocks/library/HighlightedCode.js.map +1 -0
  46. package/dist/client/blocks/library/JsonExplorerBlock.d.ts +9 -4
  47. package/dist/client/blocks/library/JsonExplorerBlock.d.ts.map +1 -1
  48. package/dist/client/blocks/library/JsonExplorerBlock.js +66 -30
  49. package/dist/client/blocks/library/JsonExplorerBlock.js.map +1 -1
  50. package/dist/client/blocks/library/MermaidBlock.d.ts.map +1 -1
  51. package/dist/client/blocks/library/MermaidBlock.js +73 -44
  52. package/dist/client/blocks/library/MermaidBlock.js.map +1 -1
  53. package/dist/client/blocks/library/OpenApiSpecBlock.d.ts.map +1 -1
  54. package/dist/client/blocks/library/OpenApiSpecBlock.js +3 -2
  55. package/dist/client/blocks/library/OpenApiSpecBlock.js.map +1 -1
  56. package/dist/client/blocks/library/checklist.d.ts.map +1 -1
  57. package/dist/client/blocks/library/checklist.js +1 -0
  58. package/dist/client/blocks/library/checklist.js.map +1 -1
  59. package/dist/client/blocks/library/code-tabs.d.ts.map +1 -1
  60. package/dist/client/blocks/library/code-tabs.js +183 -102
  61. package/dist/client/blocks/library/code-tabs.js.map +1 -1
  62. package/dist/client/blocks/library/columns.config.d.ts +60 -0
  63. package/dist/client/blocks/library/columns.config.d.ts.map +1 -0
  64. package/dist/client/blocks/library/columns.config.js +37 -0
  65. package/dist/client/blocks/library/columns.config.js.map +1 -0
  66. package/dist/client/blocks/library/columns.d.ts +25 -0
  67. package/dist/client/blocks/library/columns.d.ts.map +1 -0
  68. package/dist/client/blocks/library/columns.js +199 -0
  69. package/dist/client/blocks/library/columns.js.map +1 -0
  70. package/dist/client/blocks/library/dev-doc-ui.d.ts +2 -1
  71. package/dist/client/blocks/library/dev-doc-ui.d.ts.map +1 -1
  72. package/dist/client/blocks/library/dev-doc-ui.js +2 -1
  73. package/dist/client/blocks/library/dev-doc-ui.js.map +1 -1
  74. package/dist/client/blocks/library/html.d.ts +1 -1
  75. package/dist/client/blocks/library/html.d.ts.map +1 -1
  76. package/dist/client/blocks/library/html.js +34 -4
  77. package/dist/client/blocks/library/html.js.map +1 -1
  78. package/dist/client/blocks/library/json-explorer.config.d.ts +3 -1
  79. package/dist/client/blocks/library/json-explorer.config.d.ts.map +1 -1
  80. package/dist/client/blocks/library/json-explorer.config.js +30 -1
  81. package/dist/client/blocks/library/json-explorer.config.js.map +1 -1
  82. package/dist/client/blocks/library/server-specs.d.ts.map +1 -1
  83. package/dist/client/blocks/library/server-specs.js +13 -3
  84. package/dist/client/blocks/library/server-specs.js.map +1 -1
  85. package/dist/client/blocks/library/specs.d.ts +4 -4
  86. package/dist/client/blocks/library/specs.d.ts.map +1 -1
  87. package/dist/client/blocks/library/specs.js +21 -16
  88. package/dist/client/blocks/library/specs.js.map +1 -1
  89. package/dist/client/blocks/library/table.config.d.ts +3 -0
  90. package/dist/client/blocks/library/table.config.d.ts.map +1 -1
  91. package/dist/client/blocks/library/table.config.js +13 -1
  92. package/dist/client/blocks/library/table.config.js.map +1 -1
  93. package/dist/client/blocks/library/table.d.ts.map +1 -1
  94. package/dist/client/blocks/library/table.js +90 -9
  95. package/dist/client/blocks/library/table.js.map +1 -1
  96. package/dist/client/blocks/library/tabs.config.d.ts +16 -8
  97. package/dist/client/blocks/library/tabs.config.d.ts.map +1 -1
  98. package/dist/client/blocks/library/tabs.config.js +10 -4
  99. package/dist/client/blocks/library/tabs.config.js.map +1 -1
  100. package/dist/client/blocks/library/tabs.d.ts.map +1 -1
  101. package/dist/client/blocks/library/tabs.js +146 -21
  102. package/dist/client/blocks/library/tabs.js.map +1 -1
  103. package/dist/client/blocks/server.d.ts +2 -1
  104. package/dist/client/blocks/server.d.ts.map +1 -1
  105. package/dist/client/blocks/server.js +1 -0
  106. package/dist/client/blocks/server.js.map +1 -1
  107. package/dist/client/blocks/types.d.ts +99 -9
  108. package/dist/client/blocks/types.d.ts.map +1 -1
  109. package/dist/client/blocks/types.js.map +1 -1
  110. package/dist/client/index.d.ts +1 -1
  111. package/dist/client/index.d.ts.map +1 -1
  112. package/dist/client/index.js +2 -2
  113. package/dist/client/index.js.map +1 -1
  114. package/dist/client/rich-markdown-editor/BubbleToolbar.d.ts.map +1 -1
  115. package/dist/client/rich-markdown-editor/BubbleToolbar.js +13 -3
  116. package/dist/client/rich-markdown-editor/BubbleToolbar.js.map +1 -1
  117. package/dist/client/rich-markdown-editor/DragHandle.d.ts +49 -4
  118. package/dist/client/rich-markdown-editor/DragHandle.d.ts.map +1 -1
  119. package/dist/client/rich-markdown-editor/DragHandle.js +656 -88
  120. package/dist/client/rich-markdown-editor/DragHandle.js.map +1 -1
  121. package/dist/client/rich-markdown-editor/RegistryBlockNode.d.ts +10 -1
  122. package/dist/client/rich-markdown-editor/RegistryBlockNode.d.ts.map +1 -1
  123. package/dist/client/rich-markdown-editor/RegistryBlockNode.js +180 -15
  124. package/dist/client/rich-markdown-editor/RegistryBlockNode.js.map +1 -1
  125. package/dist/client/rich-markdown-editor/SharedRichEditor.d.ts +2 -1
  126. package/dist/client/rich-markdown-editor/SharedRichEditor.d.ts.map +1 -1
  127. package/dist/client/rich-markdown-editor/SharedRichEditor.js +3 -1
  128. package/dist/client/rich-markdown-editor/SharedRichEditor.js.map +1 -1
  129. package/dist/client/rich-markdown-editor/SlashCommandMenu.d.ts +5 -0
  130. package/dist/client/rich-markdown-editor/SlashCommandMenu.d.ts.map +1 -1
  131. package/dist/client/rich-markdown-editor/SlashCommandMenu.js +33 -5
  132. package/dist/client/rich-markdown-editor/SlashCommandMenu.js.map +1 -1
  133. package/dist/client/rich-markdown-editor/index.d.ts +3 -3
  134. package/dist/client/rich-markdown-editor/index.d.ts.map +1 -1
  135. package/dist/client/rich-markdown-editor/index.js +2 -2
  136. package/dist/client/rich-markdown-editor/index.js.map +1 -1
  137. package/dist/client/rich-markdown-editor/registrySlashCommands.d.ts +14 -0
  138. package/dist/client/rich-markdown-editor/registrySlashCommands.d.ts.map +1 -1
  139. package/dist/client/rich-markdown-editor/registrySlashCommands.js +38 -0
  140. package/dist/client/rich-markdown-editor/registrySlashCommands.js.map +1 -1
  141. package/dist/client/rich-markdown-editor/useCollabReconcile.d.ts +1 -0
  142. package/dist/client/rich-markdown-editor/useCollabReconcile.d.ts.map +1 -1
  143. package/dist/client/rich-markdown-editor/useCollabReconcile.js +4 -0
  144. package/dist/client/rich-markdown-editor/useCollabReconcile.js.map +1 -1
  145. package/dist/client/settings/SettingsPanel.d.ts.map +1 -1
  146. package/dist/client/settings/SettingsPanel.js +11 -19
  147. package/dist/client/settings/SettingsPanel.js.map +1 -1
  148. package/dist/client/use-chat-models.d.ts.map +1 -1
  149. package/dist/client/use-chat-models.js +2 -5
  150. package/dist/client/use-chat-models.js.map +1 -1
  151. package/dist/db/client.d.ts.map +1 -1
  152. package/dist/db/client.js +17 -1
  153. package/dist/db/client.js.map +1 -1
  154. package/dist/deploy/build.d.ts.map +1 -1
  155. package/dist/deploy/build.js +2 -1
  156. package/dist/deploy/build.js.map +1 -1
  157. package/dist/deploy/route-discovery.d.ts +29 -0
  158. package/dist/deploy/route-discovery.d.ts.map +1 -1
  159. package/dist/deploy/route-discovery.js +158 -11
  160. package/dist/deploy/route-discovery.js.map +1 -1
  161. package/dist/server/auth.d.ts +2 -0
  162. package/dist/server/auth.d.ts.map +1 -1
  163. package/dist/server/auth.js +9 -0
  164. package/dist/server/auth.js.map +1 -1
  165. package/dist/sharing/access.d.ts +4 -2
  166. package/dist/sharing/access.d.ts.map +1 -1
  167. package/dist/sharing/access.js +8 -3
  168. package/dist/sharing/access.js.map +1 -1
  169. package/dist/sharing/actions/set-resource-visibility.d.ts.map +1 -1
  170. package/dist/sharing/actions/set-resource-visibility.js +2 -3
  171. package/dist/sharing/actions/set-resource-visibility.js.map +1 -1
  172. package/dist/sharing/registry.d.ts +13 -0
  173. package/dist/sharing/registry.d.ts.map +1 -1
  174. package/dist/sharing/registry.js.map +1 -1
  175. package/dist/styles/rich-markdown-editor.css +15 -0
  176. package/dist/templates/default/.agents/skills/actions/SKILL.md +96 -11
  177. package/dist/templates/default/.agents/skills/adding-a-feature/SKILL.md +126 -26
  178. package/dist/templates/default/.agents/skills/capture-learnings/SKILL.md +56 -30
  179. package/dist/templates/default/.agents/skills/create-skill/SKILL.md +28 -0
  180. package/dist/templates/default/.agents/skills/delegate-to-agent/SKILL.md +75 -5
  181. package/dist/templates/default/.agents/skills/frontend-design/SKILL.md +17 -0
  182. package/dist/templates/default/.agents/skills/real-time-collab/SKILL.md +99 -124
  183. package/dist/templates/default/.agents/skills/real-time-sync/SKILL.md +43 -10
  184. package/dist/templates/default/.agents/skills/security/SKILL.md +162 -144
  185. package/dist/templates/default/.agents/skills/self-modifying-code/SKILL.md +5 -3
  186. package/dist/templates/default/.agents/skills/shadcn-ui/SKILL.md +15 -0
  187. package/dist/templates/default/.agents/skills/storing-data/SKILL.md +116 -83
  188. package/dist/templates/default/DEVELOPING.md +10 -13
  189. package/dist/templates/workspace-core/.agents/skills/client-methods/references/legacy-client-fetch-audit-2026-06-03.md +9 -0
  190. package/dist/templates/workspace-core/.agents/skills/writing-agent-instructions/SKILL.md +27 -0
  191. package/docs/content/template-plan.md +5 -3
  192. package/docs/content/visual-plans.md +5 -2
  193. package/package.json +16 -1
  194. package/src/templates/default/.agents/skills/actions/SKILL.md +96 -11
  195. package/src/templates/default/.agents/skills/adding-a-feature/SKILL.md +126 -26
  196. package/src/templates/default/.agents/skills/capture-learnings/SKILL.md +56 -30
  197. package/src/templates/default/.agents/skills/create-skill/SKILL.md +28 -0
  198. package/src/templates/default/.agents/skills/delegate-to-agent/SKILL.md +75 -5
  199. package/src/templates/default/.agents/skills/frontend-design/SKILL.md +17 -0
  200. package/src/templates/default/.agents/skills/real-time-collab/SKILL.md +99 -124
  201. package/src/templates/default/.agents/skills/real-time-sync/SKILL.md +43 -10
  202. package/src/templates/default/.agents/skills/security/SKILL.md +162 -144
  203. package/src/templates/default/.agents/skills/self-modifying-code/SKILL.md +5 -3
  204. package/src/templates/default/.agents/skills/shadcn-ui/SKILL.md +15 -0
  205. package/src/templates/default/.agents/skills/storing-data/SKILL.md +116 -83
  206. package/src/templates/default/DEVELOPING.md +10 -13
  207. package/src/templates/workspace-core/.agents/skills/client-methods/references/legacy-client-fetch-audit-2026-06-03.md +9 -0
  208. package/src/templates/workspace-core/.agents/skills/writing-agent-instructions/SKILL.md +27 -0
@@ -1,9 +1,10 @@
1
1
  ---
2
2
  name: adding-a-feature
3
3
  description: >-
4
- The four-area checklist every new feature in this app must complete. Use
5
- when adding any feature, integration, or capability to keep the agent and
6
- UI in parity.
4
+ The four-area checklist every new feature must complete. Use when adding any
5
+ feature, integration, or capability to ensure the agent and UI stay in parity.
6
+ metadata:
7
+ internal: true
7
8
  ---
8
9
 
9
10
  # Adding a Feature — The Four-Area Checklist
@@ -14,59 +15,158 @@ Every new feature MUST update all four areas. Skipping any one breaks the agent-
14
15
 
15
16
  ## Why
16
17
 
17
- Agent-native apps are defined by parity: everything the UI can do, the agent can do, and vice versa. A feature that only has UI is invisible to the agent. A feature that only has actions is invisible to the user. A feature without app-state sync means the agent is blind to what the user is doing. And **a feature without auto-refresh wiring means the agent's writes are silently invisible until the user manually reloads** — that breaks the framework's #1 promise.
18
+ Agent-native apps are defined by parity: everything the UI can do, the agent can do, and vice versa. A feature that only has UI is invisible to the agent. A feature that only has scripts is invisible to the user. A feature without app-state sync means the agent is blind to what the user is doing.
18
19
 
19
20
  ## The Checklist
20
21
 
21
- ### 1. UI Component
22
+ When you add a new feature, work through these four areas in order:
22
23
 
23
- Build the user-facing interface — a page, component, dialog, or route. Use `useActionQuery` and `useActionMutation` from `@agent-native/core/client` for data fetching and mutations. You rarely need custom `/api/` routes.
24
+ ### 1. UI Component
24
25
 
25
- **Auto-refresh on agent writes is non-negotiable** when the agent mutates the data this UI shows, the UI must reflect the change without a manual refresh. Two paths, pick the right one:
26
+ Build the user-facing interface a page, component, dialog, or route. Use `useActionQuery` and `useActionMutation` from `@agent-native/core/client` to call actions for data fetching and mutations. Do not create a custom REST endpoint just so React can call action-backed data; the action endpoint already exists.
26
27
 
27
- - **`useActionQuery` (preferred)** — automatically covered. The framework's `useDbSync` invalidates `["action"]` on every change event, so every `useActionQuery` hook refetches when the agent runs an action. No extra wiring required.
28
+ **Auto-refresh on agent writes is non-negotiable** — when the agent mutates data, the UI must reflect the change without a manual refresh. There are two paths, and you must pick the right one:
28
29
 
29
- - **Raw `useQuery` with a custom key** needs explicit wiring. Fold `useChangeVersions([<source>, "action"])` from `@agent-native/core/client` into the `queryKey` and set `placeholderData: (prev) => prev`. The `"action"` source is the reliable signal — the agent runner emits it after every successful tool call. The resource-specific source (e.g. `"settings"`, `"app-state"`) is bonus. Without this wiring, agent writes will be invisible until manual refresh.
30
+ - **`useActionQuery` / `useActionMutation`** covered automatically. The framework's `useDbSync` invalidates `["action"]` on every change event, so every `useActionQuery` hook refetches on agent activity. No extra wiring required. **Prefer this path.**
31
+ - **Raw `useQuery` with custom keys** — needs explicit wiring. Fold `useChangeVersions([<source>, "action"])` from `@agent-native/core/client` into the `queryKey` and set `placeholderData: (prev) => prev`. The `action` source is the reliable signal (the agent runner emits it after every successful tool call); the resource-specific source (`"dashboards"`, `"analyses"`, `"settings"`, etc.) is bonus when emitted. Without this wiring, agent writes will be invisible until manual refresh — that breaks the framework's #1 promise.
30
32
 
31
33
  ```tsx
32
34
  import { useChangeVersions } from "@agent-native/core/client";
33
35
  import { useQuery } from "@tanstack/react-query";
34
36
 
35
- function useItem(id: string) {
36
- const v = useChangeVersions(["items", "action"]);
37
- return useQuery({
38
- queryKey: ["item", id, v],
39
- queryFn: () => fetchItem(id),
40
- placeholderData: (prev) => prev, // no flicker on refetch
41
- });
42
- }
37
+ const v = useChangeVersions(["dashboards", "action"]);
38
+ useQuery({
39
+ queryKey: ["dashboard", id, v],
40
+ queryFn: () => fetchDashboard(id),
41
+ placeholderData: (prev) => prev, // no flicker on refetch
42
+ });
43
43
  ```
44
44
 
45
45
  See the `real-time-sync` skill for the full pattern and source catalog.
46
46
 
47
47
  ### 2. Action
48
48
 
49
- Create an action in `actions/` using `defineAction`. This serves double duty: the agent calls it as a tool, and the framework auto-exposes it as an HTTP endpoint at `/_agent-native/actions/:name` for the UI to call. Set `http: { method: "GET" }` for read actions, leave default for writes, or set `http: false` for agent-only actions like `navigate` and `view-screen`.
49
+ Create an action in `actions/` using `defineAction`. This serves double duty: the agent calls it as a tool, and the UI calls it through `useActionQuery` / `useActionMutation` while the framework owns the HTTP transport. Set `http: { method: "GET" }` for read actions, leave default for writes, or set `http: false` for agent-only actions like `navigate` and `view-screen`.
50
+
51
+ Before adding a new route or endpoint, inspect the existing actions. Reuse an
52
+ action if it already covers the business operation, extend it if the shared
53
+ contract is incomplete, or create a new `defineAction` if the agent and UI both
54
+ need the capability. Do not add pass-through `/api/*` routes that re-export
55
+ actions. If client code needs a new framework/app route, expose a named helper
56
+ or hook first and use that helper from components and docs.
57
+
58
+ For provider-backed analysis/query/reporting integrations, do not turn every
59
+ provider endpoint or filter into a rigid action. Prefer the shared
60
+ `provider-api-catalog` / `provider-api-docs` / `provider-api-request` pattern
61
+ from `@agent-native/core/provider-api`, then add narrow convenience actions only
62
+ for workflows that truly deserve a first-class shortcut.
63
+
64
+ If the feature needs credentials, design the credential path in the same change.
65
+ Never hardcode API keys, tokens, webhook URLs, signing secrets, private
66
+ Builder/internal data, or customer data in the action, UI, seed data, fixtures,
67
+ docs, prompts, or generated extension/app content. Register required secrets,
68
+ use OAuth helpers, or read scoped values from the vault/credential store.
69
+
70
+ **If the action produces or lists a navigable resource**, add a `link` builder that returns `{ url: buildDeepLink({ app, view, params }), label }`. External coding agents and MCP hosts (Claude / ChatGPT / Claude Code / Cowork / Codex, over MCP/A2A) then surface an "Open in … →" deep link that drops the user back into the running UI focused on the record — for free. If a compatible MCP host should render an inline review/edit surface, also add `mcpApp` with `embedApp()` so the action embeds the real React app route instead of a one-off HTML UI. The `link` builder and `mcpApp` metadata must be pure and synchronous (no I/O). Any external-agent read/ingest action must be `http: { method: "GET" }` + `readOnly: true` + `publicAgent: { expose: true, readOnly: true, requiresAuth: true }`. See the `external-agents` skill.
50
71
 
51
72
  ### 3. Skills / Instructions
52
73
 
53
- Update `AGENTS.md` (the per-app guide) and/or create a skill in `.agents/skills/` if the feature introduces patterns the agent needs to know. At minimum, add the new actions to the action table in the template's `AGENTS.md`.
74
+ Update `AGENTS.md` and/or create a skill in `.agents/skills/` if the feature introduces patterns the agent needs to know. At minimum, add the new actions to the action table in the template's `AGENTS.md`.
75
+
76
+ Reusable actions are part of the app contract, not just implementation detail. When an action is useful outside one screen, update agent instructions in the same change so app agents know when to call it, which arguments matter, and what output to preserve. If the capability is workflow-heavy, cross-app, provider-backed, or has a non-obvious sequence of actions, add or update a skill instead of burying the behavior in one long `AGENTS.md` paragraph.
77
+
78
+ Instruction examples may name secret keys like `SLACK_WEBHOOK`, but must use
79
+ placeholders such as `${keys.SLACK_WEBHOOK}` or `<SLACK_WEBHOOK>`. Do not paste
80
+ real keys, internal data, or customer data into instructions as examples.
81
+
82
+ For app-backed skills, declare skill visibility in the app-skill manifest:
83
+
84
+ - `internal` — only the app's own agents should use it.
85
+ - `exported` — marketplace installs receive it, but the app does not need it loaded internally.
86
+ - `both` — shared between the app's internal agents and exported marketplace bundles.
54
87
 
55
88
  ### 4. Application State Sync
56
89
 
57
90
  Expose navigation and selection state so the agent knows what the user is looking at. Write to the `navigation` app-state key on route changes. Update the `view-screen` action to fetch relevant data for the new feature. Add a `navigate` command if the agent needs to open the new view.
58
91
 
92
+ ## Examples
93
+
94
+ ### Adding "compose email" to a mail app
95
+
96
+ | Area | What to build |
97
+ | --------------- | ---------------------------------------------------------------------------------------- |
98
+ | UI | Compose panel with tabs, to/cc/bcc fields, body editor. Use `useActionQuery`/`useActionMutation` for data. |
99
+ | Action | `manage-draft` action (create/update/delete drafts), `send-email` action |
100
+ | Skills/AGENTS | Document compose state shape, draft lifecycle, action args in AGENTS.md |
101
+ | App-state sync | `compose-{id}` keys for each draft tab, `navigation` includes compose state |
102
+
103
+ ### Adding "create form" to a forms app
104
+
105
+ | Area | What to build |
106
+ | --------------- | ---------------------------------------------------------------------------------------- |
107
+ | UI | Form builder page with drag-and-drop fields, preview, settings. Use `useActionQuery` for lists. |
108
+ | Action | `create-form` action, `update-form` action, `list-forms` action (GET) |
109
+ | Skills/AGENTS | Document form schema shape, field types, validation rules in AGENTS.md |
110
+ | App-state sync | `navigation` includes `{ view: "form-builder", formId: "..." }`, `view-screen` fetches form data |
111
+
112
+ ### Adding "chart type" to an analytics app
113
+
114
+ | Area | What to build |
115
+ | --------------- | ---------------------------------------------------------------------------------------- |
116
+ | UI | New chart component, chart type selector in dashboard |
117
+ | Action | `create-chart` or `update-dashboard` action that sets chart type and config |
118
+ | Skills/AGENTS | Document supported chart types, config options, data requirements |
119
+ | App-state sync | `navigation` includes selected chart/dashboard, `view-screen` returns chart config |
120
+
121
+ ## Adding a new route
122
+
123
+ Templates are single-page apps with client-side routing. The app shell (AgentSidebar + top-level nav) MUST persist across navigation — it is mounted once, either in `root.tsx` around `<Outlet />` or via a pathless `_app.tsx` layout route that all authed routes nest under.
124
+
125
+ **Never wrap each new route in its own `<AppLayout>` / `<Layout>`.** That causes React to unmount the entire app shell on every navigation, reloading the agent sidebar and destroying in-progress work.
126
+
127
+ - If the template has `<AppLayout>` in `root.tsx` — just render page content in your new route file, nothing else.
128
+ - If the template has `app/routes/_app.tsx` (pathless layout) — name your new route `_app.<segment>.tsx` to inherit the shell, or bare `<segment>.tsx` for public routes that should NOT have the shell.
129
+ - If a page needs per-route data (e.g. highlighting the active item in the sidebar), read it in the layout from `useParams()` / `useLocation()`. Don't pass it as a prop through every route file.
130
+
131
+ See the "Client-Side Routing" section in the root `CLAUDE.md` for full details.
132
+
59
133
  ## Anti-Patterns
60
134
 
61
- - **UI without actions** — The user can create things but the agent cannot. Breaks parity.
62
- - **Actions without UI** — The agent can do something the user cannot. Less common but still breaks parity.
63
- - **Mutations without auto-refresh wiring** — The agent says "done!" but the screen doesn't change until the user hits reload. This is the most common silent regression. If you used `useActionQuery` you're covered; if you used raw `useQuery`, fold `useChangeVersions` into the key. Always test by asking the agent to mutate the data and watching the UI without refreshing.
135
+ - **Per-route `<AppLayout>` wrappers** — Every route file wraps its content in `<AppLayout>` or `<Layout>`. React sees a different component at the outlet on each nav and unmounts the whole shell, causing the agent sidebar to reload on every click. Mount the shell once above `<Outlet />` (root.tsx or `_app.tsx` pathless layout).
136
+ - **UI without actions** — The user can create forms but the agent cannot. The agent says "I don't have access to that" when it should be able to do it.
137
+ - **Actions without AGENTS.md** — The actions exist but the agent doesn't know about them because they're not documented. The agent reinvents solutions instead of using the actions.
138
+ - **Duplicate API routes** — Creating `/api/` routes for operations that actions already handle, including pass-through routes that just call or repackage an action. Use `useActionQuery`/`useActionMutation` instead.
139
+ - **Raw client route calls** — Teaching or adding `fetch("/_agent-native/...")`,
140
+ `fetch(agentNativePath(...))`, or template `/api/*` calls in components for
141
+ normal app work. Add a named client helper/hook and call that instead.
142
+ - **Features without app-state** — The agent cannot see that the user is looking at a specific form, email, or chart. It asks "which one?" instead of acting on the current selection.
143
+ - **Actions without UI** — The agent can do something the user cannot. This is less common but still breaks parity.
64
144
 
65
145
  ## Verification
66
146
 
67
- For every new feature, manually verify:
147
+ After completing all four areas, verify:
68
148
 
69
149
  1. Can the user perform the operation from the UI?
70
- 2. Can the agent perform the operation via an action (`pnpm action <name>`)?
71
- 3. When the agent runs the action, **does the UI update within a second or two without a manual refresh**? If not, your query is missing `useActionQuery` or `useChangeVersions` wiring — go back to step 1.
72
- 4. Does `view-screen` return the new feature's state when the user is on that page?
150
+ 2. Can the agent perform the same operation via actions?
151
+ 3. Does `pnpm action view-screen` show the relevant state when the user is using the feature?
152
+ 4. Can the agent navigate to the feature view via the `navigate` action?
153
+ 5. Is the feature documented in AGENTS.md with action names and args?
154
+ 6. Are credentials and sensitive data supplied only through approved runtime
155
+ channels, with no hardcoded real keys, tokens, webhook URLs, Builder/internal
156
+ data, or customer data?
157
+
158
+ ## One more area — sharing
159
+
160
+ If the feature stores **user-authored resources** (documents, dashboards, forms, decks, etc.), make them ownable so they get private-by-default semantics and a share dialog for free. See the `sharing` skill.
161
+
162
+ TL;DR: spread `ownableColumns()` into the resource table, pair it with `createSharesTable(...)`, call `registerShareableResource(...)`, wrap list/read queries with `accessFilter`, guard writes with `assertAccess`, and drop `<ShareButton>` in the resource header. The `share-resource`, `unshare-resource`, `list-resource-shares`, and `set-resource-visibility` actions are auto-mounted framework-wide.
163
+
164
+ ## Related Skills
165
+
166
+ - **sharing** — How to make a new resource ownable (private by default, share with users/orgs/public)
167
+ - **context-awareness** — How to expose UI state to the agent (area 4 in detail)
168
+ - **actions** — How to create actions with `defineAction` and the `http` option (area 2 in detail)
169
+ - **external-agents** — Add a `link` builder so external agents (MCP/A2A) get an "Open in … →" deep link
170
+ - **create-skill** — How to create skills for new patterns (area 3 in detail)
171
+ - **storing-data** — Where to store the feature's data
172
+ - **real-time-sync** — How the UI stays in sync when the agent writes data
@@ -1,50 +1,76 @@
1
1
  ---
2
2
  name: capture-learnings
3
3
  description: >-
4
- Capture and apply accumulated knowledge in learnings.md. Use when the user
5
- corrects a mistake, when debugging reveals unexpected behavior, or when an
6
- architectural decision should be recorded for future reference.
4
+ Capture and apply accumulated knowledge via structured memory. Use when the
5
+ user gives feedback, shares preferences, corrects a mistake, or when you
6
+ discover something worth remembering for future conversations.
7
7
  user-invocable: false
8
+ metadata:
9
+ internal: true
8
10
  ---
9
11
 
10
12
  # Capture Learnings
11
13
 
12
- This is background knowledge, not a slash command. Read `learnings.md` before starting significant work. Update it when you discover something worth remembering.
14
+ This is background knowledge, not a slash command. **Your memory index is loaded at the start of every conversation.** Use `save-memory` proactively when you learn something worth remembering.
13
15
 
14
- ## When to Capture
16
+ ## How to Read & Write Memories
15
17
 
16
- Use judgment, not rules. Capture when:
18
+ Memories are stored as **resources** in the SQL database (personal scope), not as files on disk.
17
19
 
18
- - **Surprising behavior** Something didn't work as expected and you figured out why
19
- - **Repeated friction** You hit the same issue twice; write it down so there's no third time
20
- - **Architectural decisions** — Why something is done a certain way (the "why" isn't in the code)
21
- - **API/library quirks** Undocumented behavior, version-specific gotchas
22
- - **Performance insights** — What's slow and what fixed it
20
+ - **Save a memory:** `save-memory --name <name> --type <type> --description "..." --content "..."`
21
+ - **Read a memory:** `resource-read --path memory/<name>.md`
22
+ - **Delete a memory:** `delete-memory --name <name>`
23
+ - **List all memories:** `resource-list --prefix memory/`
23
24
 
24
- Don't capture:
25
+ ## Memory Types
25
26
 
26
- - Things that are obvious from reading the code
27
- - Standard language/framework behavior
28
- - Temporary debugging notes
27
+ | Type | Use for |
28
+ |------|---------|
29
+ | `user` | Preferences, role, personal context, contacts |
30
+ | `feedback` | Corrections, confirmed approaches, things to avoid or repeat |
31
+ | `project` | Ongoing work context, decisions, deadlines, status |
32
+ | `reference` | Pointers to external systems, URLs, API details |
29
33
 
30
- ## Format
34
+ ## When to Capture
31
35
 
32
- Add entries to `learnings.md` at the project root. Match the existing format — typically a heading per topic with a brief explanation:
36
+ ### User Preferences & Memory (`user`)
37
+ - **Tone and style** — "I prefer casual tone", "don't use emojis", "keep replies short"
38
+ - **Personal context** — contacts, relationships, habits ("my wife's email is...", "I'm in PST timezone")
39
+ - **Workflow preferences** — "always CC my assistant", "I like to review before sending"
40
+ - **Role and expertise** — "I'm a data scientist", "new to React"
41
+
42
+ ### Feedback & Corrections (`feedback`)
43
+ - **Corrections** — user says "no, do it this way" → capture the right way
44
+ - **Confirmed approaches** — user validates a non-obvious choice ("yes, that's perfect")
45
+ - **Repeated friction** — you hit the same issue twice; save it
46
+
47
+ ### Project Context (`project`)
48
+ - **Ongoing work** — who is doing what, why, by when
49
+ - **Decisions** — why something is done a certain way
50
+ - **Status** — current state of initiatives
51
+
52
+ ### References (`reference`)
53
+ - **External systems** — "bugs are tracked in Linear project INGEST"
54
+ - **URLs** — dashboards, documentation, tools
55
+ - **API quirks** — undocumented behavior, version-specific gotchas
56
+
57
+ ### Don't Capture
58
+ - Things obvious from reading the code
59
+ - Standard language/framework behavior
60
+ - Temporary debugging notes
61
+ - Anything already in AGENTS.md or skills
62
+ - Ephemeral task details (use tasks/plans instead)
33
63
 
34
- ```markdown
35
- ## [Topic]
64
+ ## Key Rules
36
65
 
37
- [What you learned and why it matters. Keep it to 2-3 sentences.]
38
- ```
66
+ 1. **Save proactively don't ask permission.** When you learn something, save it immediately.
67
+ 2. **One memory per topic** — e.g. `coding-style`, `project-alpha`, not one giant dump
68
+ 3. **Read before updating** — if a memory exists, read it first and merge, don't overwrite
69
+ 4. **Keep descriptions concise** — the index is loaded every conversation
70
+ 5. **Memories are SQL-backed** — safe for personal info, persist across sessions, not in git
39
71
 
40
72
  ## Graduation
41
73
 
42
- When a learning is referenced repeatedly, it's outgrowing `learnings.md`. Propose adding it to the relevant skill or creating a new skill via `create-skill`.
43
-
44
- - Updating `learnings.md` is a Tier 1 modification (data auto-apply)
45
- - Updating a SKILL.md based on learnings is Tier 2 (source — verify after)
46
-
47
- ## Related Skills
48
-
49
- - **self-modifying-code** — Learnings.md updates are Tier 1; skill updates are Tier 2
50
- - **create-skill** — When a learning graduates, create a skill from it
74
+ When a memory is referenced repeatedly, it may belong in AGENTS.md or a skill:
75
+ - Saving a memory is lightweight (auto-apply, personal scope)
76
+ - Updating AGENTS.md or a skill is heavier (affects all users/agents)
@@ -4,6 +4,8 @@ description: >-
4
4
  How to create new skills for an agent-native app. Use when adding a new
5
5
  skill, documenting a pattern the agent should follow, or creating reusable
6
6
  guidance for the agent.
7
+ metadata:
8
+ internal: true
7
9
  ---
8
10
 
9
11
  # Create a Skill
@@ -148,6 +150,32 @@ description: >-
148
150
  - Workflow/generator skills: verb-noun (`create-skill`, `capture-learnings`).
149
151
  - The directory name must match the `name` in frontmatter.
150
152
 
153
+ ## Skill Scope (runtime vs dev)
154
+
155
+ An optional `scope` frontmatter field controls which agent loads the skill:
156
+
157
+ - `both` (default when omitted) — loaded by the in-app runtime agent. Use for
158
+ any skill the runtime agent should follow.
159
+ - `runtime` — loaded only by the in-app runtime agent.
160
+ - `dev` — meant for the human's coding agent (e.g. Claude Code) only. **Excluded
161
+ from the runtime agent everywhere**: not in the system-prompt skills block and
162
+ not in `docs-search` results.
163
+
164
+ ```markdown
165
+ ---
166
+ name: release-checklist
167
+ description: >-
168
+ Steps for cutting a release. Use when preparing or publishing a new version.
169
+ scope: dev
170
+ ---
171
+ ```
172
+
173
+ Leave `scope` off for normal skills — the default (`both`) keeps them loading at
174
+ runtime, so this is fully backward compatible. To make a dev-only skill visible
175
+ to your coding agent but hidden from the runtime agent, mark it `scope: dev` and
176
+ optionally mirror it under `.claude/skills/<name>/SKILL.md` (Claude Code reads
177
+ `.claude/skills/` independently of the runtime's `.agents/skills/`).
178
+
151
179
  ## Tips
152
180
 
153
181
  - **Keep descriptions under 40 words** — they load into context on every
@@ -2,8 +2,11 @@
2
2
  name: delegate-to-agent
3
3
  description: >-
4
4
  How to delegate all AI work to the agent chat. Use when delegating AI work
5
- from UI or scripts to the agent, when tempted to add inline LLM calls, or
6
- when sending messages to the agent from application code.
5
+ from UI or scripts to the agent, when a user asks for agent behavior or
6
+ LLM-powered features, when tempted to add inline LLM calls, or when sending
7
+ messages to the agent from application code.
8
+ metadata:
9
+ internal: true
7
10
  ---
8
11
 
9
12
  # Delegate All AI to the Agent
@@ -14,7 +17,7 @@ The UI and server never call an LLM directly. All AI work is delegated to the ag
14
17
 
15
18
  ## Why
16
19
 
17
- The agent is the single AI interface. It has context about the full project, can read/write the database, and can run scripts. Inline LLM calls bypass this — they create a shadow AI that doesn't know what the agent knows and can't coordinate with it.
20
+ The agent is the single AI interface. It has context about the full project, can read/write any file, and can run scripts. Inline LLM calls bypass this — they create a shadow AI that doesn't know what the agent knows and can't coordinate with it.
18
21
 
19
22
  ## How
20
23
 
@@ -123,6 +126,55 @@ Buttons that produce new content ("New Design", "Create Dashboard", "Make Deck",
123
126
 
124
127
  If you find yourself writing `submit: true` with a hardcoded creative verb (`"design a..."`, `"write a..."`, `"build a..."`), stop and add a Popover.
125
128
 
129
+ ## Delegating to a Sub-Agent (Agent Teams)
130
+
131
+ `sendToAgentChat()` delegates from app code _to_ the agent. The other axis of
132
+ delegation is the agent handing work _to a sub-agent_ through the Agent Teams
133
+ run-manager. The main chat stays the orchestrator: it spawns sub-agents, then
134
+ reads and integrates their results.
135
+
136
+ ### When to spawn a sub-agent vs do it yourself
137
+
138
+ - **Do it yourself** when the work is small, on the critical path, or tightly
139
+ coupled to what you're already doing. Sub-agent overhead and coordination risk
140
+ outweigh the benefit.
141
+ - **Spawn a sub-agent** for a self-contained unit of work that can run
142
+ independently — a disjoint investigation, an isolated implementation slice, a
143
+ long-running search — especially when it frees the main thread to keep
144
+ orchestrating.
145
+
146
+ ### Briefing contract
147
+
148
+ Every sub-agent brief must specify four things, or the sub-agent will guess:
149
+
150
+ - **Objective** — the one concrete outcome it owns, in a sentence.
151
+ - **Context** — the facts it needs (paths, prior findings, constraints) so it
152
+ doesn't re-derive them.
153
+ - **Output** — the exact shape you want back (a summary, a file edited, a list
154
+ of paths, a yes/no with rationale).
155
+ - **Boundaries** — what it must NOT touch (files, branches, side effects) and
156
+ when to stop and report rather than push forward.
157
+
158
+ ### Fan-out discipline
159
+
160
+ - **Default to a single sub-agent.** Most delegation is one focused task.
161
+ - **Spawn multiple only for genuinely independent units** that don't share state
162
+ or files. Never parallelize coupled work — if B needs A's output, run them in
163
+ sequence.
164
+ - **Cap parallel fan-out at ~3.** More sub-agents means more synthesis cost and
165
+ more chance of conflicting edits to the same area.
166
+
167
+ ### Synthesis discipline
168
+
169
+ - **Read every result** before concluding — don't act on the first one back.
170
+ - **Reconcile conflicts** between sub-agent findings explicitly; decide which is
171
+ right rather than averaging or ignoring.
172
+ - **Integrate into one answer.** The main thread produces the single coherent
173
+ result; it never just forwards raw sub-agent transcripts to the user.
174
+
175
+ Background sub-agents must use the core run-manager / Agent Teams infrastructure
176
+ rather than ad-hoc LLM calls.
177
+
126
178
  ## Don't
127
179
 
128
180
  - Don't `import Anthropic from "@anthropic-ai/sdk"` in client or server code
@@ -136,9 +188,27 @@ If you find yourself writing `submit: true` with a hardcoded creative verb (`"de
136
188
 
137
189
  Scripts may call external APIs (image generation, search, etc.) — but the AI reasoning and orchestration still goes through the agent. A script is a tool the agent uses, not a replacement for the agent.
138
190
 
191
+ ## When to Use A2A Instead
192
+
193
+ `sendToAgentChat()` delegates work to the **local** agent — the one running alongside your app. When the work should go to a **different** agent entirely (e.g., asking an analytics agent for data, or a calendar agent for availability), use the A2A (agent-to-agent) protocol instead.
194
+
195
+ ```ts
196
+ import { callAgent } from "@agent-native/core/a2a";
197
+
198
+ // Call a different agent — not the local agent chat
199
+ const stats = await callAgent(
200
+ "https://analytics.example.com",
201
+ "What were last week's signups?",
202
+ { apiKey: process.env.ANALYTICS_A2A_KEY },
203
+ );
204
+ ```
205
+
206
+ See the **a2a-protocol** skill for the full pattern.
207
+
139
208
  ## Related Skills
140
209
 
141
- - **scripts** — The agent invokes scripts via `pnpm action <name>` to perform complex operations
210
+ - **a2a-protocol** — When the work goes to a different agent, not the local one
211
+ - **actions** — The agent invokes actions via `pnpm action <name>` to perform complex operations
142
212
  - **self-modifying-code** — The agent operates through the chat bridge to make code changes
143
213
  - **storing-data** — The agent writes results to the database after processing requests
144
- - **real-time-sync** — The UI updates automatically when the agent writes to the database
214
+ - **real-time-sync** — The UI updates automatically when the agent writes data
@@ -8,6 +8,8 @@ description: >-
8
8
  creative, polished UI that avoids generic AI aesthetics.
9
9
  license: Complete terms in LICENSE.txt
10
10
  source: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
11
+ metadata:
12
+ internal: true
11
13
  ---
12
14
 
13
15
  # Frontend Design
@@ -28,6 +30,19 @@ Before coding, decide:
28
30
 
29
31
  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.
30
32
 
33
+ ## Minimalism And Progressive Disclosure
34
+
35
+ 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.
36
+
37
+ - **Start by subtracting**: Before adding a visible control, banner, toolbar row, card, or explanatory block, ask what can be removed, merged, renamed, or moved into an existing affordance.
38
+ - **One primary action**: Each surface should have one dominant next action. Secondary actions belong in menus, popovers, command palettes, disclosure rows, or contextual hover/focus states unless they are used constantly.
39
+ - **Progressively disclose rare work**: Advanced options, diagnostics, metadata, settings, import/export, destructive actions, and inspection tools should stay tucked away until requested. Prefer small icon triggers with tooltips, popovers, drawers, or detail panels over permanent chrome.
40
+ - **Keep chrome quiet**: Avoid new always-visible bars, badges, callouts, helper text, and counters unless they prevent mistakes or are central to repeated use. Status can often be a dot, ring, muted count, or tooltip.
41
+ - **Favor content over containers**: Do not wrap every section in a card. Use whitespace, alignment, typography, dividers, and full-width bands before adding boxes.
42
+ - **Design for repeated use**: Production app UI should feel calm after the hundredth use. If a control shouts, animates, explains itself, or occupies a full row for an occasional action, hide or compress it.
43
+ - **Make absence intentional**: Empty states should be sparse and action-oriented. Do not fill blank space with marketing copy, decorative art, or lists of features just because the screen feels empty.
44
+ - **Use familiar primitives**: Icon buttons need clear tooltips. Menus, popovers, tabs, switches, and segmented controls should carry complexity instead of exposing every option at once.
45
+
31
46
  ## Aesthetic Guidelines
32
47
 
33
48
  - **Typography**: Use the product's existing type system first. For net-new public pages, choose characterful but readable type and keep sizing appropriate to the surface.
@@ -72,6 +87,8 @@ Avoid:
72
87
  - Custom reimplementations of shadcn primitives.
73
88
  - Raw color overrides on shared components when semantic tokens or variants would work.
74
89
  - New always-visible controls for rare actions. Prefer menus, popovers, sheets, tabs, collapsibles, or advanced sections.
90
+ - Full-width banners, persistent helper rows, decorative cards, or explanatory chrome for status that could be a compact affordance.
91
+ - Treating progressive disclosure as optional. If a control is not part of the main daily workflow, hide it until context, hover, focus, or explicit user intent makes it relevant.
75
92
  - UI cards nested inside other cards.
76
93
  - Text or icons that resize or shift fixed-format UI on hover/loading.
77
94