agent-native

Creating, editing, and managing extensions — sandboxed Alpine.js mini-apps that run inside iframes. Use when a user asks for a dashboard, widget, calculator, or any interactive mini-app that calls external APIs. Distinct from LLM "tools" (function calls) — see note below.

How extensions render as widgets inside other apps via named UI slots — the framework's VS-Code-style extension system. Use when a user asks to add a custom widget to an app surface (e.g. "add a sticky-note widget to my mail contact sidebar"), when wiring an ExtensionSlot in a template, or when marking an extension as installable into a slot.

How to delegate all AI work to the agent chat. Use when delegating AI work from UI or scripts to the agent, when a user asks for agent behavior or LLM-powered features, when tempted to add inline LLM calls, or when sending messages to the agent from application code.

Save a run-code fetch/join/aggregate script as a stored, refreshable data source any app's own charts/tables can render, instead of a hardcoded provider action or a per-view re-fetch. Use when an ad-hoc run-code or provider-api-request analysis should become a live, cached data source other users or panels can reuse.

How to configure, compose, or eject Agent Native features into app-owned code. Use when overriding shared components or integrations, customizing a template, adding UI to chat or headless apps, or inspecting package source.

How to create new skills for an agent-native app. Use when adding a new skill, documenting a pattern the agent should follow, or creating reusable guidance for the agent.

Inspect and manage the live agent context window with Context X-Ray. Use when context is getting large, the user asks what is in context, or stale tool results/files should be pinned, evicted, restored, or reported by an external host.

How the agent knows what the user is looking at. Use when exposing UI state to the agent, implementing view-screen or navigate actions, wiring navigation state, or debugging agent context issues.

Build many focused workspace apps that compose through agent discovery and A2A. Use when designing headless mini-apps or cross-app workflows.

How to add routes without remounting the app shell. Use when adding a new route, fixing agent sidebar reloads on navigation, or choosing between `root.tsx` layout and pathless `_app.tsx` layout patterns.

Client method surface rules. Use when wiring browser/client code to actions, application state, framework routes, app APIs, uploads, auth, or settings.

How to keep each app's user-facing changelog. Use when you ship a change a user would notice (a new feature, a visible improvement, a bug fix), when wiring the in-app "What's new" surface into a template, or when releasing pending changelog entries.

Capture and apply accumulated knowledge via structured memory. Use when the user gives feedback, shares preferences, corrects a mistake, or when you discover something worth remembering for future conversations.

Monitor a PR, fix feedback and CI failures until fully green for 30 min. Run with /babysit-pr <number>

Event-triggered and schedule-triggered automations with natural-language conditions. Use when creating automations, wiring events, or understanding how triggers fire.

How auth works in agent-native apps. Use when wiring login/signup, configuring auth modes, setting up organizations, protecting routes, or debugging session issues.

Durable, access-scoped, append-only record of who changed what app data, when, and whether it was the agent or a human. Use when adding an activity feed or change history, declaring what a mutating action targets, auditing sensitive reads, or answering "what did the agent change / who edited this".

The full-page Agent surface (/agent) with Context, Files, Connections, Jobs, and Access tabs. Use when mounting the Agent page in a template, adding an app-specific tab, surfacing context transparency, MCP servers, A2A agents, recurring jobs, or external-client connect flows in the UI.

Inventory and ownership rules for shared Agent Native workspace UI. Use before building app chrome, settings, navigation, sharing, collaboration, setup, history, comments, chat rails, agent UX, or repeated workspace behavior.

How to find version-matched Agent Native framework docs and source bundled in node_modules. Use before implementing or answering questions about @agent-native/core APIs, generated apps, workspaces, templates, or advanced features.

Triage feedback docs or pasted feedback into bugs to fix, UX suggestions to propose, unclear questions, and skipped noise; verify bugs, check Sentry when relevant, and keep UI changes minimal.

The four-area checklist every new feature must complete. Use when adding any feature, integration, or capability to ensure the agent and UI stay in parity.

How to create and run agent actions. Actions are the single source of truth for app operations — the agent calls them as tools and frontend code calls them through client hooks. Use when creating a new action, adding an API integration, or wiring up frontend data fetching.

How agents call other agents via the A2A (agent-to-agent) JSON-RPC protocol. Use when enabling inter-agent communication, exposing agent skills to other agents, or calling external agents from scripts.

Open or create a repo-native visual documentation workspace backed by local Plan MDX files. Use when the user asks to visualize a repository, create durable visual docs for APIs/components/models/flows, launch a visual repo viewer, review repo docs like a visual IDE, or collect Plan comments that should become coding-agent changes.