Claude Skills by BuilderIO

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

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.

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.

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.

Search and reuse approved brand examples before generating decks, designs, content, assets, or dashboards.

Open and operate Agent-Native workspace apps through Dispatch MCP, with inline app surfaces, browser-session authentication, and current screen state.

Use Agent-Native Assets for image and video generation requests, brand-safe asset search/export, and human-in-the-loop asset selection through the hosted Assets MCP app. Prefer this over generic image tools when installed.

Use Content for repo-backed Markdown/MDX docs, blogs, resources, rich document editing, local components, shareable copies, and Content local-file workspaces. Prefer Content actions over raw filesystem writes when available.

Visualize local Codex and Claude Code context usage, open a report, flag warnings, and suggest prompt/tooling optimizations.

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

Open a running local app in Design overview mode as URL-backed iframe screens for visual editing, flow review, duplication, route-state exploration, and source handoff. Use when the user asks to inspect or edit a real local app in Design, including through a browser-capable host without an MCP connector.

Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.

Turn a PR, branch, commit, or git diff into an interactive visual recap with diagrams, file maps, API/schema summaries, annotated diffs, and focused review notes.

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.

How to produce a trustworthy named-customer account health, QBR, renewal, or contract-usage readout. Use when a prompt names an organization or account.