Claude Skills by BuilderIO

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.

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.

The /agents admin home for Analytics: fleet feature-flag control plane, dashboard usage audit, and connected-app database admin. Use when an admin asks about feature flags/rollouts, dashboard usage stats, or connecting another agent-native app's database.

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.

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 use Resources-backed workspace files for large-scale multi-source analyses: scratch/ temporary staging, chunked batch processing with per-item memos, run-code aggregation, saveToFile for big API pulls, and synthesizing across files that exceed one context window.

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.

Reuse approved dashboards and creative context while respecting named contexts, immutable packs, provenance, and opt-out state. Use when building or refining a dashboard, or when the user references saved or approved context.

Use when an analytics question spans multiple data sources (e.g. warehouse events + CRM + support + first-party) and you must stitch identities, remove duplicates, and produce one consolidated answer with per-source provenance.

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.

Deployment and runtime internals for dashboard email reports and analytics alert rules: server-side SVG/PNG report rendering, serverless timing budgets, cron wiring, and notification delivery env vars. Use when configuring, deploying, or debugging report/alert delivery infrastructure — not when just creating a report subscription or alert rule via the action surface.

Save a run-code fetch/join/aggregate script as a stored, refreshable data source that dashboard panels bind to and render. Use when an ad-hoc provider-api-request or run-code analysis should become a live dashboard panel other users see, or when a cohort/join needs an arbitrary property filter, an IN-search, or a cross-provider stitch a canned action can't express.

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.

Sets 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.

Search Gong call metadata and transcript excerpts for sales-call analysis, customer conversations, objections, risks, and next steps.

Query HubSpot CRM for deals, companies, contacts, tickets, owners, and account/deal context. Use when the user asks for HubSpot data or connection status.

Implementation map for the Monitoring tab (uptime checks, public status pages, error triage): component/server file locations, schema, jobs, and scheduler wiring. Use when building or debugging Monitoring UI, uptime checks, status pages, or error capture/grouping — not when just calling the monitoring actions from chat.

How to keep template code PostgreSQL-specific and hosting-agnostic. Use when defining schemas, writing raw SQL, or creating server routes.

Make arbitrary authenticated HTTP calls to configured Analytics providers when first-class actions are too narrow; inspect provider docs/specs first.

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.

Declaratively register API keys and service credentials a template needs so they appear in the agent sidebar settings UI and the onboarding checklist. Use before adding any third-party credential or setup UI so API keys, OAuth connections, and scoped configuration use the correct shared primitive.

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.

Tiers, 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.

Inspect, troubleshoot, and extend Analytics session replay recordings.

Project-aware shadcn/ui components, registry MCP, theming, and design-system lint feedback. Use when adding or changing React/Tailwind UI, a primitive, theme, registry, or component contract in an Agent-Native app.

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.

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.

Turn visible project context, a proven thread, skill, or workflow into a runnable Agent-Native app with simple buttons, visible agent steps, preview, and deployment handoff. Use when a user invokes `/turn-into-app` or asks to make a workflow into an app, including from Claude or ChatGPT on the web, including when the source is a spreadsheet link or upload.

Capture 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.

Shared 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.

Query BigQuery for analytics events, signups, pageviews, subscriptions, and user data. Use this skill when the user asks about metrics, funnels, user activity, or customer usage data.

Make arbitrary authenticated HTTP calls to configured Analytics provider APIs when first-class actions are too narrow.

Use Assets from other apps or MCP hosts to generate, refine, export, and insert brand images or videos.

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.

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 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 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.

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.

Use Assets for brand-safe image or video generation, human picker UI, search/list/export actions, and cross-app asset selection. Use when a visual needs to be generated, refined, found, or handed off to another app.

Assets routes, tabs, chat surfaces, and `navigate` targets. Use when sending a user to a screen, interpreting navigation state, deciding which surface owns a workflow, or wiring chat into the Create tab or agent sidebar.

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.

Reuse creative context across generation while respecting explicit context choices, pinned packs, provenance, and opt-out state. Use when generating or refining any creative output, or when the user references saved or approved context.

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 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.

Sets 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.

Generate and refine brand-consistent images from libraries, references, and prior candidates. Use before calling image-generation or refinement actions.

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.

Schema, CRUD, sharing, URL style imports, and cascade-delete patterns for asset libraries, collections, and assets. Use when managing a library or importing visual brand evidence from a URL.

How the generate-then-composite pipeline puts a pixel-perfect canonical logo onto a generated image without letting the LLM regenerate the logo.

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).