Claude Skills by BuilderIO

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.

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

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.

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

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.

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.

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

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

The narrow `prepare-crm-call-evidence` contract and the approved CRM A2A recipe boundary. Use when a CRM, sales, or A2A workflow asks for call evidence, a clip link for a deal, or a `clip.created` automation trigger.

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.

How Clips connects to Slack and Atlassian/Jira, and the provider-API boundary for credentialed integrations. Use when installing or debugging the Slack app, connecting Atlassian/Jira, or adding raw provider API access to a Clips integration.

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.

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

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.

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.

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.

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

Product contracts and proof boundaries for Agent-Native Content. Use when planning, implementing, reviewing, testing, or documenting Content behavior or shared framework behavior that changes Content.

Use Content for repo-backed Markdown/MDX docs, blogs, resources, rich document editing, Notion-style collections and boards, structured intake forms, local components, shareable copies, and connected local folders. Prefer Content actions over raw filesystem writes when available.

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.

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