Claude Skills by BuilderIO

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.

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

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.

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.

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

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

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

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.

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.

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

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.

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.

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.

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.

Connect external agents and MCP hosts (Claude, Claude Desktop, Claude Code, ChatGPT custom MCP apps, Codex, Cursor, Claude Cowork, VS Code GitHub Copilot, Goose, Postman, MCPJam) to an agent-native app over MCP, and round-trip artifacts back into the UI with MCP Apps and deep links. Use when adding an action's `link` builder or `mcpApp`, wiring the `/_agent-native/open` route, exposing an "ingest" action to MCP/A2A, or scaffolding apps from an external agent.

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, artifacts, posters, or applications (websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished UI that avoids generic AI aesthetics.

Cross-platform pattern for handling messaging integration webhooks (Slack, Telegram, WhatsApp, email, etc.) on serverless hosts. Use when adding a new integration adapter, debugging dropped messages, or wiring long-running agent work into a webhook handler.

Use when asking what to do next after a feature pass while avoiding bloat and checking for unfinished MVP work.

Only when explicitly asked for /new-branch or a fresh git branch: stash local changes, update main, and create it. Do not auto-run for normal coding, PR, Builder.io, or Fusion branch workflows.

Agent observability, evals, feedback, and experiments. Use when adding observability dashboards, configuring trace capture, setting up evals, creating A/B experiments, or collecting user feedback on agent responses.

How to register user-facing setup steps (API keys, OAuth, connecting third-party services) for the sidebar setup checklist. Use when adding a feature that needs initial user configuration.

How to keep template code database-agnostic and hosting-agnostic. Use when defining schemas, writing raw SQL, creating server routes, or anything that could leak a SQLite-only, Postgres-only, or Node-only assumption.

Autonomous QA testing across template apps using Playwright. Use when testing apps end-to-end, finding and fixing bugs, or running a QA sweep. Invoke as /qa with optional --apps and --focus args.

Multi-user collaborative editing with Yjs CRDT and live cursors. Use when adding real-time collaborative editing to a template, debugging sync issues, or understanding how the agent and humans edit documents simultaneously.

How to keep the UI in sync with agent changes via SSE plus polling fallback. Use when wiring query invalidation for new data models, debugging UI not updating, or understanding jitter prevention.

Scheduled tasks the agent runs on a cron schedule. Use when a user asks for something recurring ("every morning", "daily", "weekly"), when creating or updating jobs, or when debugging the job scheduler.

Declaratively register API keys and service credentials a template needs so they appear in the agent sidebar settings UI and the onboarding checklist. Use for any third-party API key (OpenAI, Stripe, Twilio, etc.) and for surfacing OAuth connections in the unified settings UI.

Secure coding practices for agent-native apps: input validation, SQL injection, XSS, secrets, data scoping, and auth. Use when writing any action, route, or component that touches user data or external input.

How the agent can modify the app's own source code. Use when the agent needs to edit components, routes, styles, or scripts, when designing UI for agent editability, or when deciding what the agent should and shouldn't modify.

Framework server plugins and the `/_agent-native/` route namespace. Use when adding a custom server plugin, deciding whether to create an `/api/` route vs an action, or debugging auto-mounted framework routes.

Use when adding, updating, debugging, styling, or composing shadcn/ui components, forms, dialogs, menus, charts, sidebars, themes, registries, or any project with a components.json file.

Framework-level sharing and privacy for user-authored resources (dashboards, documents, forms, decks, etc.). Use when making a resource table ownable, wiring list/read/update access checks, or dropping the standard share dialog into a template.

Build the Agent Native desktop app locally, kill the running copy, install the fresh DMG to /Applications, and launch it. Use when the user says "rebuild/reinstall the desktop app", "ship desktop", "install the desktop app", or similar.

Commit all local changes, run prep, push, check CI, and address PR feedback

How to store application data in agent-native apps. All data lives in SQL. Use when adding data models, deciding where to store data, or reading/writing application data.

Server-side analytics tracking with pluggable providers. Use when adding analytics events, registering custom tracking providers, or configuring built-in providers (PostHog, Mixpanel, Amplitude, Webhook).

Framework-wide voice dictation in the agent sidebar composer. Use when changing composer microphone UX, the transcribe-voice route, or the Voice Transcription settings section. Covers transcription-source routing, cleanup routing, Google realtime gating, and the voice transcription application-state keys.

How to inspect and configure the AI engine (model provider) powering the agent. Use when the user asks to switch models, check which engine is active, test a new provider, or register a custom engine.

How to render interactive previews of app screens inline in agent chat via sandboxed iframes. Covers the `embed` fence syntax, the `postNavigate` pop-out helper, and when to prefer an embed over prose / a static image.

In-app notifications primitive with pluggable server-side channels. Use when the agent needs to surface progress, alerts, or completions to the user — both in-app (bell + toast) and out-of-band (webhook, Slack, custom).

Report live progress from long-running agent tasks. Use when a task takes more than a few seconds, so the user can watch status in the runs tray instead of staring at a spinner.

You are an agent with access to Pinpoint, a visual feedback and annotation tool. Users annotate UI elements on web pages and send structured feedback to you.

How schedules, weekly rules, date overrides, travel schedules, and out-of-office entries combine to determine when someone is bookable.

Public booking flow — the state machine, animations, and URL/app-state sync.

Booking lifecycle — pending, confirmed, rescheduled, cancelled — plus attendees, references, no-shows, and reminders.

Inline, popup, and floating-button embeds — snippet generation and theming.

How event types work — fields, scheduling types, tabs in the editor, and the full set of configurable options.

Calendar + video provider integrations — Google Calendar, Office 365, Zoom, built-in video, Google Meet — and how to write new ones.

ChiliPiper-style pre-booking forms that route prospects to the right event type based on their answers.

Core concepts of the scheduling package — event types, schedules, bookings, hosts, teams, and how they compose.