Builder.io
- 287 skills
- 0 followers
- 3.4k repo stars
- 18 verified
- last week last updated
- ▌ Extensions · builderio bundleCreating, editing, and managing extensions — sandboxed Alpine.js mini-apps that run inside iframes. Use only when the host app explicitly enables extensions and the user asks for a one-off custom block or mini-app. Distinct from LLM "tools" (function calls) — see note below.
- ▌ New Branch · builderioOnly 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.
- ▌ Onboarding · builderioHow 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.
- ▌ Review Prs · builderioReview recent BuilderIO/agent-native pull requests, approve eligible PRs from liamdebeasi, approve other safe internal fixes under the internal-author and owner exceptions, merge safe Dependabot updates, skip drafts, and recap every disposition. Use for scheduled or manual PR review sweeps.
- ▌ Design Exploration · builderioUse Design for UI/UX exploration, side-by-side design directions, interactive prototype previews, user selection, iteration, and design-to-code handoff through the hosted Design MCP app.
- ▌ Automations · builderioEvent-triggered and schedule-triggered automations with natural-language conditions. Use when creating automations, wiring events, or understanding how triggers fire.
- ▌ Performance · builderioKeep apps and templates loading fast. Read when adding a data model, a list/read action, a page or sidebar that loads data, or when something loads slowly, or when adding a dependency to the deployed server bundle. Covers column projection, indexing hot-path queries, avoiding N+1 and round-trip waterfalls, cheap polling, not recomputing on every read, and cold-start artifact size.
- ▌ Portability · builderioHow to keep template code PostgreSQL-specific and hosting-agnostic. Use when defining schemas, writing raw SQL, or creating server routes.
- ▌ A2a Protocol · builderioHow agent-native apps discover, authenticate with, and call each other over A2A. Use when connecting one app to another, debugging a remote agent that won't authenticate, exposing skills to peers, or calling agents from scripts.
- ▌ Create Skill · builderioHow 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.
- ▌ Mvp Followup · builderioUse when asking what to do next after a feature pass while avoiding bloat and checking for unfinished MVP work.
- ▌ Storing Data · builderioHow 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.
- ▌ Configuration · builderioWhere a configuration value belongs — app config schema, agent-native.config.ts, or an environment variable — and how the layers resolve. Use before adding an env var, a configure*/set* function, a plugin option, or a register* function, and when deciding whether something is config or a registry.
- ▌ Data Programs · builderioSave 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.
- ▌ Feature Flags · builderioDeclare, evaluate, manage, and remove framework feature flags. Use when shipping a capability gradually, targeting users or organizations, or replacing a compile-time rollout switch with a production-safe runtime flag.
- ▌ Generative UI · builderioGenerate transient or saved inline chat UI with Alpine/Tailwind controls, outputs, app state, and extensions. Use for knobs, pickers, calculators, dashboards, widgets, or reusable mini-apps.
- ▌ Observability · builderioAgent 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.
- ▌ Visual Answer · builderioAnswer code/product questions as visual Plan artifacts using repo, bridge, or GitHub context; use for API specs, UI look, schema models, and architecture.
- ▌ Authentication · builderioHow auth works in agent-native apps. Use when wiring login/signup, configuring auth modes, setting up organizations, protecting routes, or debugging session issues.
- ▌ Client Methods · builderio bundleClient method surface rules. Use when wiring browser/client code to actions, application state, framework routes, app APIs, uploads, auth, or settings.
- ▌ Harness Agents · builderioAdd or use full agent harness runtimes like Claude Code, Codex, Pi, Cursor, Mastra, or ACP agents inside Agent-Native.
- ▌ Real Time Sync · builderioHow 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.
- ▌ Recurring Jobs · builderioThe legacy manage-jobs compatibility surface, job files under jobs/, and cron scheduler internals. Use when maintaining manage-jobs integrations or debugging the scheduler.
- ▌ Server Plugins · builderioFramework 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.
- ▌ Delegating Work · builderioWhich tier — main thread vs. a cheaper subagent — owns a piece of work, decided at the moment you're about to start it. Use before writing an implementation yourself, driving a browser, babysitting a PR, running a test/fix loop, or doing a mechanical multi-file sweep on the main thread.
- ▌ External Agents · builderio bundleConnect 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.
- ▌ Frontend Design · builderio bundleSets the visual direction for UI work, avoiding generic AI aesthetics. Use for any user-facing UI change: new surfaces, screenshot-driven feedback, copy/density cleanup, settings, control placement, or a "make this look good" pass. Do not load it only for purely mechanical wiring or formatting.
- ▌ Turn Into Skill · builderio bundleCapture a proven thread or workflow as a reusable Agent-Native skill and save it as a personal or organization resource. Use when a user invokes `/turn-into-skill` or asks to save a workflow for reuse.
- ▌ Adding A Feature · builderioThe 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.
- ▌ Address Feedback · builderioTriage feedback from docs, issues, Slack threads, or pasted notes into verified bugs, UX proposals, unclear questions, and skipped noise. Use when a user asks you to address product feedback or investigate a reported workflow.
- ▌ Browser Sessions · builderioArchitecture for attaching Chrome page context and control to Agent-Native conversations. Use when building browser capture, extension chat, browser control, or cross-app webpage workflows.
- ▌ Extension Points · builderioHow extensions render as widgets inside other apps via named UI slots — the framework's optional extension system. Use when an extension-enabled app needs to wire an ExtensionSlot or make an existing one-off custom block installable into a slot.
- ▌ Real Time Collab · builderioMulti-user collaborative editing with Yjs CRDT, SSE fast-path transport, and granular server-side merge. Use when adding real-time collaborative editing to a template, debugging sync issues, or understanding how the agent and humans edit documents simultaneously.
- ▌ Ship And Monitor · builderio bundleRun the normal guarded ship flow, then monitor beta deployments, the docs production lane, release tails, and any explicitly requested manual production promotion. Use when standard `/ship` needs post-merge verification.
- ▌ Capture Learnings · builderioCapture 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.
- ▌ Concurrent Agents · builderioHow to work safely when many Claude Code and Codex agents share this one checkout at once. Use before editing any file, before concluding someone reverted your work, before any branch operation, and before committing, pushing, or merging — this is almost always relevant here.
- ▌ Context Awareness · builderioHow 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.
- ▌ Delegate To Agent · builderioHow 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.
- ▌ Native Navigation · builderioUse when adding or reviewing UI navigation so internal routes preserve normal SPA behavior plus Cmd/Ctrl-click and middle-click new-tab semantics.
- ▌ Verifying Changes · builderioConcrete, per-area proof that a change actually works before reporting it fixed, done, or "should work now" — which dev server, test command, or invocation proves a template UI change, an action, a migration, a guard, or a core/package change. Use before every wrap-up, and before stopping mid-task to ask permission instead of continuing.
- ▌ Crm · builderioHow to run typed CRM work — attributes and options, lists and pipelines, saved and board views, provider proposals, duplicates and merge, gated enrichment, and evidence-grounded call signals. Use for any CRM read, write, setup, or provider question.
- ▌ Reliable Mutations · builderioHow the agent must perform writes so they actually persist under the hosted foreground run budget and long-running background handoffs. Use whenever you create, update, delete, or batch-write app data — especially "do this for many items" loops, or any task where the user expects N things to end up saved.
- ▌ Reporting Progress · builderioWhat to say while long work is still running, and what a legal mid-task stop looks like. Use during any run over a few minutes — migrations, sweeps, babysit loops, automations, deploys — and at the moment you are tempted to stop and ask, report a blocker, or answer "how's it going?".
- ▌ Client Side Routing · builderioHow 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.
- ▌ Fix At The Boundary · builderioHow to find every sibling instance of a reported bug before fixing it. Use whenever a bug report names one file but the defect is a call pattern, hook, duplicated literal, or copy-pasted helper that plausibly exists in other files, apps, or templates.
- ▌ Self Modifying Code · builderioTiers, checkpoints, and off-limits paths for an agent editing the app's own source. Use when designing UI for agent editability, deciding whether a file is safe for the agent to change, or when tempted to patch config, `.env`, or an `@agent-native/*` package. Do not load it for ordinary source edits.
- ▌ Voice Transcription · builderioFramework-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.
- ▌ Agent Native Toolkit · builderioInventory 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.
- ▌ Chat First Workbench · builderioImplement or extend the opt-in Codex/T3-like chat-first shell. Use when changing chat rails, contextual app panes, app opening, or local/mobile shell preferences across Electron, Dispatch, or mobile.
- ▌ Composable Mini Apps · builderioBuild many focused workspace apps that compose through agent discovery and A2A. Use when designing headless mini-apps or cross-app workflows.
- ▌ Integration Webhooks · builderioCross-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.
- ▌ Internationalization · builderioHow to add or edit localized UI copy in agent-native apps. Use when adding, removing, or changing user-visible interface text, prompts, toasts, labels, empty states, or date/number/list formatting. Apps opt in to additional locales from `agent-native.config.ts`.
- ▌ Upgrade Agent Native · builderioBring an older Agent-Native app or workspace current. Use when updating @agent-native/core, fixing a broken upgrade, or when tempted to patch or override core/dispatch packages to make an old branch run.
- ▌ Adding Workspace Apps · builderioHow to add an app to an Agent-Native workspace: classifying an "agent" request, scaffolding `apps/<app-name>`, app discovery and descriptions, mounting and base paths, action-first data, and finishing a chat-template app. Use when asked to create, build, scaffold, or generate a new agent or app in a workspace.
- ▌ Workspace Conventions · builderioShared conventions for a multi-app Agent-Native workspace: finding version-matched framework docs and source, shared vs app-owned code, file and blob storage, env and secrets, agent scratch files, and Dispatch Resources. Use when working across workspace apps, storing files or credentials, or looking up framework APIs.
- ▌ Brain · builderio bundleWork with the Brain institutional-memory template, including importing captures, validating quote evidence, writing knowledge, and reviewing proposals.
- ▌ Multi Frontier Desktop · builderioRun or extend the Desktop Code Agents Multi-Frontier workflow. Use when coordinating Codex and Claude Code subscriptions, collaboration phases, checkpoints, recovery, usage meters, or helper admission.
- ▌ Review Latest Feedback · builderioSweep the newest Slack, GitHub issue, and Sentry feedback: first answer the reporters who answered you, then fix clear verified repo bugs at the owning boundary, build the UX and feature requests the invoking user endorsed with an :upvote:, reply only where the reply carries information, and recap every disposition. Use for scheduled or manual feedback sweeps.
- ▌ Writing Reference Docs · builderioHow to write a function/hook/action reference section: plain-language signature, real arguments, escalating examples grounded in a real app, trimmed prose with no em dashes or semicolons. Use when writing or editing a packages/core/docs/content reference page.
- ▌
- ▌
- ▌ Dictate · builderioThe Dictate tab in Clips — press-and-hold desktop dictation, mobile voice dictation, history, AI cleanup, and native capture hand-offs. Use when listing past dictations, polishing dictation text, or wiring native capture.
- ▌ Customizing Agent Native · builderioHow 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.
- ▌ Gong · builderioSearch Gong call metadata and transcript excerpts for sales-call analysis, customer conversations, objections, risks, and next steps.
- ▌ Dbt · builderiodbt (data build tool) project structure, SQL patterns, and best practices for the analytics warehouse. Use this skill when working with dbt models, testing SQL queries, or creating new analytical tables.
- ▌ Meetings · builderioLive calendar-backed meetings in Clips — upcoming Google Calendar events, desktop join/record reminders, live transcripts with mic + system-audio capture, AI summary / bullets / per-attendee action items, and the bidirectional recording↔meeting link. Use when listing meetings, opening a meeting detail, finalizing notes, connecting a calendar, or working with attendee-tagged transcript segments.
- ▌ Bookings · builderioBooking lifecycle — pending, confirmed, rescheduled, cancelled — plus attendees, references, no-shows, and reminders.
- ▌ Jira · builderioSearch and analyze Jira tickets, sprints, and project analytics. Use this skill when the user asks about tickets, bugs, sprint tracking, or engineering work.
- ▌ Progress · builderioReport 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.
- ▌ Recording · builderioHow screen and camera recording works in Clips — MediaRecorder lifecycle, chunked upload, permission handling, pause/resume, camera bubble overlay, and error recovery. Use when adding or modifying the recorder UI, the upload endpoint, or permission prompts.
- ▌ Writing Agent Instructions · builderioHow to write great agent instructions for an agent-native app or template: AGENTS.md, skills, and tool/action descriptions. Use when authoring or reviewing AGENTS.md, writing a SKILL.md, wording action descriptions, or deciding what belongs in instructions vs skills vs memory.
- ▌
- ▌ Workflows · builderioTrigger-based automations — reminders, follow-ups, webhooks — across the booking lifecycle.
- ▌ Learn · builderioExtract key learnings from the current chat thread and save them to docs/learnings.md. Use this skill when the user types "/learn" or asks to save learnings from the conversation.
- ▌ Pylon · builderioLook up customer support tickets and account history via Pylon. Use this skill when the user asks about support tickets, customer issues, or support history.
- ▌ Slack · builderioSearch Slack messages and read channel history across your workspaces. Use this skill when the user asks about Slack conversations, channel messages, or internal communications.
- ▌ Draft Queue · builderioUse when queuing, reviewing, editing, opening, or sending email drafts requested by organization teammates, including Slack @agent-native intake.
- ▌ Plan Events · builderioThe four plan lifecycle events on the framework event bus and how to subscribe with `manage-automations` instead of bespoke integration code. Use when a user wants to be notified or trigger work on plan creation, comments, publishes, or status changes.
- ▌ Hubspot · builderioQuery HubSpot CRM for deals, companies, contacts, tickets, owners, and account/deal context. Use when the user asks for HubSpot data or connection status.
- ▌ Apollo · builderioEnrich contacts and companies via Apollo.io for prospecting and sales intelligence. Use this skill when the user asks about contact details, company research, or finding decision-makers.
- ▌ Charts · builderioGenerate inline chart images (PNG) for embedding in chat responses. Use this skill when you need to create bar, line, or area charts for data visualization in chat.
- ▌ Gcloud · builderioMonitor Google Cloud Run services and Cloud Functions health, metrics, and logs. Use this skill when the user asks about service health, request counts, latencies, or cloud infrastructure.
- ▌ Github · builderioSearch and read GitHub PRs, issues, and code across a configured GitHub org or repo. Use this skill when the user asks about pull requests, code reviews, or GitHub issues.
- ▌ Notion · builderioAccess the Notion content calendar and page data for editorial planning. Use this skill when the user asks about the content calendar, blog planning, or editorial schedule.
- ▌ Sentry · builderioTrack errors and issues across your projects via Sentry. Use this skill when the user asks about errors, exceptions, error trends, or application health.
- ▌
- ▌ A2a Assets · builderioUse Assets from other apps or MCP hosts to generate, refine, export, and insert brand images or videos.
- ▌ Bug Reports · builderioThe embedded Clips bug-report flow — the `/bug-report` iframe launcher, `/record?intent=bug-report` capture, `save-bug-report-context`, and its intake limits. Use when embedding bug capture in another product, wiring the launcher, or asked to collect customer bug recordings.
- ▌ Email Drafts · builderioCreate, edit, and send email drafts through compose-{id} application state, manage-draft, and send-email. Use when composing, replying, forwarding, attaching files, applying signatures/writing style, or checking open/click tracking on sent mail.
- ▌ Event Types · builderioHow event types work — fields, scheduling types, tabs in the editor, and the full set of configurable options.
- ▌ Slot Engine · builderioThe pure `computeAvailableSlots` function — inputs, outputs, invariants, and debugging guide.
- ▌ Bigquery · builderioQuery the configured BigQuery warehouse for analytics data. Use when the user asks for warehouse SQL, BigQuery tables, Amplitude-in-BigQuery events, or a metric/table that the data dictionary says lives in BigQuery.
- ▌ Grafana · builderioQuery Grafana dashboards and Prometheus metrics for service health, LLM latency, and infrastructure monitoring. Use this skill when the user asks about service health, monitoring, alerts, or performance metrics.
- ▌ Brain Export · builderioHow `export-to-brain` sends ready Clips transcripts to Brain — single exports, bounded historical imports, cursor pagination, required secrets, and the retry sweep. Use when exporting transcripts to Brain, backfilling past recordings, or debugging a missing or stuck Brain export.
- ▌ Mail Backends · builderioHow Mail actions pick between the real Gmail API and synthetic local-emails fallback data per user. Use when mail data looks fake or empty, when a user has no connected Google account, or before claiming a message really was sent or fetched from Gmail.
- ▌ Create Deck · builderioCreate a new deck with slides from scratch. Use before creating a deck or standalone visual; resolve source fidelity, creative context, and the active design system before using the fallback HTML patterns in this skill.
- ▌ Address Feedback With Replies · builderioComplete the Slack feedback cycle: read every thread and linked evidence, fix verified repo-owned issues, and reply in-thread with honest status, clarification questions, and release follow-up. Use when the user asks to address feedback and respond in the requested voice through the invoking user's connected Slack identity.
- ▌ Availability · builderioHow schedules, weekly rules, date overrides, travel schedules, and out-of-office entries combine to determine when someone is bookable.
- ▌ Integrations · builderioCalendar + video provider integrations — Google Calendar, Office 365, Zoom, built-in video, Google Meet — and how to write new ones.
- ▌ Screen Memory · builderioScreen Memory — the disabled-by-default, local-only desktop buffer of recent screen/app/window context, plus its status and query actions. Use when the user asks what was on screen recently, or when reading, exporting, enabling, or describing Screen Memory.