Builder.io
- 287 skills
- 0 followers
- 3.4k repo stars
- 18 verified
- last week last updated
- ▌ Video Editing · builderioNon-destructive video editing in Clips — the editsJson model, trim / split / cut / speed / blur, transcript-based editing, and ffmpeg.wasm export. Use when building the editor UI, adding a new edit operation, or wiring the export pipeline.
- ▌ Video Sharing · builderioHow Clips shares recordings — composes with the framework sharing skill and adds password, expiry, embed URLs, view-counting, and per-viewer "Viewed by" records. Use when wiring the share dialog, building embed links, adding a password, showing who viewed a clip and when, or debugging who can see a recording.
- ▌ Shader Fills · builderioCode-backed GLSL shader fills and shader effects: authoring WGSL-free, WebGL1 GLSL fragment shaders that persist as readable source in the screen HTML with uniform knobs in the inspector. Use when the user asks for a shader fill or shader effect, sends "Create a custom shader fill." from the fill picker, wants an animated/procedural background (waves, noise, mesh gradients, caustics, grain, halftone), or wants to edit an existing shader's GLSL or uniforms.
- ▌ Form Building · builderioHow to create and structure forms. Use when creating a new form, adding fields, modifying form structure, or understanding field types and their JSON schema.
- ▌ Slide Images · builderioSource and generate images for slides with Assets-owned style grounding and provenance. Use when a slide needs a new visual, logo, or approved media.
- ▌ Custom Fields · builderioCustom field definitions, types, config, per-task values, and which fields show on task cards. Use when the user asks to add, edit, reorder, show, hide, or delete a custom field, set a field value on a task, or works on /fields.
- ▌ Routing Forms · builderioChiliPiper-style pre-booking forms that route prospects to the right event type based on their answers.
- ▌ Monitoring · builderioImplementation 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.
- ▌ Prometheus · builderioQuery Prometheus-compatible metrics endpoints (self-hosted, Grafana Cloud Prom, AMP, etc.) via the prometheus action and as a dashboard panel source.
- ▌ Agent Engines · builderioHow 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.
- ▌ Inline Embeds · builderioHow 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.
- ▌ Notifications · builderioIn-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).
- ▌ AI Video Tools · builderioAll AI features in Clips — titles, summaries, chapters, tags, filler-word removal — delegate to the agent chat via sendToAgentChat except the narrow media pipeline path: transcription. Use when adding any AI-powered feature.
- ▌ Form Responses · builderioHow to view, export, and analyze form responses. Use when the user asks about submitted data, wants to export responses, or needs response analytics.
- ▌ Slide Editing · builderioEdit individual slides, including content formatting, HTML styling, and bounded source and visual-fidelity checks. Use when changing an existing slide rather than creating a new deck.
- ▌ Change Summary · builderioEnd agent responses that include code changes with a Change summary table (Code / Tests / Config / Docs) and per-file line counts from git diff, and the commit message conventions for this app. Use after any code change and before creating a commit.
- ▌ Commonroom · builderioLook up community member engagement and signals via Common Room. Use this skill when the user asks about community activity, member engagement, or community signals.
- ▌ Dataforseo · builderioQuery keyword rankings, search volume, and SEO metrics via DataForSEO. Use this skill when the user asks about SEO performance, keyword rankings, or organic search data.
- ▌ Logo Composite · builderioHow the generate-then-composite pipeline puts a pixel-perfect canonical logo onto a generated image without letting the LLM regenerate the logo.
- ▌ Design Systems · builderioManage and apply Design app brand systems. Use when creating, importing, linking, inspecting, or following design-system tokens, assets, fonts, logos, and custom instructions.
- ▌ Export Handoff · builderioExport Design work and produce developer handoff materials. Use when the user wants HTML, PNG, SVG, ZIP/code exports, implementation notes, or a coding handoff for a selected design.
- ▌ Full App Build · builderioBuild and iterate on a full real app from Design, backed by a running Builder Fusion cloud container instead of an inline HTML prototype. Use when the user wants a real/full app end-to-end through publishing, and only when FULL_APP_BUILDING_ENABLED is true.
- ▌ Form Publishing · builderioForm lifecycle management: draft, published, closed. Use when publishing forms, understanding public URLs, configuring captcha, or managing form branding.
- ▌ Contacts And Crm · builderioResolve a name or partial address to a real email and enrich a thread with CRM/contact context (HubSpot, Apollo) before drafting or triaging. Use when the user names a person instead of an email, or asks "who is this" / "what deals/tickets does this contact have".
- ▌ Plan Source Sync · builderioThe MDX source surface for plans: export, import, patch by semantic ID, DB-free local plan folders, `comments.json` sidecars, promotion into a repo, and the Desktop folder bridge. Use when a plan must round-trip to or from repo files.
- ▌ Team Scheduling · builderioTeam event types, round-robin assignment, collective bookings, host weights, and no-show calibration.
- ▌ Provider API · builderioMake arbitrary authenticated HTTP calls to configured Analytics providers when first-class actions are too narrow; inspect provider docs/specs first.
- ▌ Factory Graphs · builderioDesign, inspect, and safely edit Factory graph versions. Use when a user asks to change a node or route, explain an item path, or comment on the visual map. Do not use this when the user only wants a new named Factory or a new automation.
- ▌
- ▌ Inbox Automations · builderioNatural-language inbox automation rules (manage-email-rules, trigger-automations) and provider-native Gmail filters (manage-gmail-filters), including how the two differ. Use when the user asks to auto-label, auto-archive, auto-star, or otherwise handle incoming mail automatically, or to create/replace/delete a Gmail filter.
- ▌ Deck Management · builderioHow decks are stored in SQL, how to create/read/update/delete decks. Read before working with deck data.
- ▌ Action Reference · builderioFull reference for the 25 tasks actions: HTTP method, arguments, defaults, and confirmation rules. Use when you need an action's method or exact behavior beyond the compact index in AGENTS.md, or before adding an action.
- ▌ Dashboard Ops · builderioDeployment 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.
- ▌ Data Querying · builderio bundleGeneral guidance on querying data sources, using existing scripts vs ad-hoc queries, filtering patterns, and generating charts for the analytics app.
- ▌ Asset Generation · builderioUse 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.
- ▌ Creative Context · builderioReuse 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.
- ▌ Image Generation · builderioGenerate and refine brand-consistent images from libraries, references, and prior candidates. Use before calling image-generation or refinement actions.
- ▌ Crm Call Evidence · builderioThe 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.
- ▌ Design Templates · builderioFind, save, copy, and adapt Design templates. Use when the user references a template, a prior design, or wants a reusable starting point.
- ▌ Provider API Scans · builderioCall raw Gmail, Google Calendar, or HubSpot endpoints through provider-api-catalog / provider-api-docs / provider-api-request, and stage large result sets with stageAs plus query-staged-dataset. Use when a canned Mail action lacks the exact endpoint, filter, pagination, or API version, or when scanning/aggregating many messages.
- ▌ Plan Hosted Writes · builderioPreconditions and protocol for writing hosted plans: real user session, `expectedUpdatedAt` revision guard on destructive writes, post-write verification, and when feedback may be resolved or consumed. Use when performing any hosted plan write.
- ▌ Plan Review Recaps · builderioThe `columns` before/after comparison primitive and the PR Visual Recap GitHub Action (agent/model env vars, required tokens, sticky comment, informational scope). Use when building a recap, configuring recap CI, or explaining a Visual Recap check or comment.
- ▌ Store Conventions · builderioNaming and transaction rules for server store functions in `server/**/store.ts`. Use when adding, renaming, or calling a store function, writing a bulk or singular CRUD helper, or wiring a query into a transaction.
- ▌ Scheduling Basics · builderioCore concepts of the scheduling package — event types, schedules, bookings, hosts, teams, and how they compose.
- ▌ Account Health · builderioHow to produce a trustworthy named-customer account health, QBR, renewal, or contract-usage readout. Use when a prompt names an organization or account.
- ▌ Adhoc Analysis · builderioHow to conduct ad-hoc analyses: gather data from multiple sources, synthesize findings, and save durable results as dashboard artifacts that anyone can re-run.
- ▌ Admin Surfaces · builderioThe /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.
- ▌
- ▌ Assets Navigation · builderioAssets 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.
- ▌ Document Editing · builderio bundleHow to create, read, update, and delete documents. Covers the document scripts, markdown content model, parent-child hierarchy, and position ordering.
- ▌ Design Generation · builderio bundleGenerate or refine complete interactive HTML prototypes in Design. Use when creating screens, variants, Alpine/Tailwind prototypes, tweaks, or visual refinements from a prompt or selected design.
- ▌ Plan Authoring Flow · builderioWhich Plan command and creation action fits a request — document-first, UI-first, prototype-first, design-first, recap, or visual intake — plus how to raise an existing plan to design fidelity. Use when creating, routing, or re-rendering a plan.
- ▌ Library Management · builderioSchema, 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.
- ▌ Event Management · builderioHow to create, search, list, update, and delete calendar events via Google Calendar: the event scripts, `list-events` result formats and source coverage, working locations, guests and RSVP, date format patterns, and recurrence. Use when reading, scheduling, editing, or deleting events.
- ▌ Plan Browser Editing · builderioWhich browser surfaces are directly editable and which patch op each one autosaves through — inline prose, local plan folders, review annotation mode, canvas/design elements, and branding. Use when changing plan prose, styles, or wireframe/prototype HTML.
- ▌ Plan Version History · builderioDB-backed plan snapshots: when they are taken, how to list and inspect them, and what `restore-plan-version` preserves. Use when the user asks about plan history, undo, rollback, or restoring an earlier version of a plan.
- ▌ Task Inbox Workflow · builderioHow the agent captures, reads, edits, reorders, and deletes tasks and inbox items using view-screen context. Use when the user mentions "this task", "these tasks", "this inbox item", or "the list", or asks to capture, show, review, reorder, complete, or delete tasks or inbox items.
- ▌ Notion Integration · builderioHow Notion sync works. Covers connecting, linking pages, pulling from Notion, pushing to Notion, and checking sync status.
- ▌ Ask Across Everything · builderioUse when a Brain question asks across company memory plus live/app-owned data such as metrics, email threads, workspace grants, or secrets.
- ▌ External Integrations · builderioHow 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.
- ▌ Inbox Reads And Triage · builderioListing and searching mail with coverage-aware inventory envelopes, refreshing the UI after mutations, and bulk unread cleanup. Use when reading, searching, counting, archiving, starring, moving, or marking mail read, or when reporting how much of an inbox was covered.
- ▌ Analysis Workspace · builderioHow 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.
- ▌ Availability Booking · builderioHow the booking system works: checking availability, managing booking links, configuring availability settings, and the public booking URL pattern.
- ▌ Design Review Feedback · builderioWork through persisted, element-anchored review comments on shared Design prototypes and close the loop with verified edits.
- ▌ Responsive Breakpoints · builderioFramer-style responsive breakpoint editing in Design: one DOM tree per screen with cascading width-scoped overrides. Use when adding/removing breakpoints, editing a design at a specific device width, resolving which value renders at a width, or persisting responsive style changes.
- ▌ Plan Local Codebase Chat · builderioHow Ask Plan links a browser-selected local codebase and how to answer questions from its indexed snapshots instead of guessing from file names. Use when the user asks about their linked local codebase or `localCodebase` is in application state.
- ▌ Dashboard Management · builderioHow analytics dashboards are stored, created, and modified. Covers SQL dashboard tables, legacy settings migration, folders, valid panel sources, layout shape, and safe update patterns. Use when creating, organizing, sharing, or modifying Analytics dashboards.
- ▌ Ingestion And Connectors · builderioCreate, sync, and diagnose Brain sources across all providers (manual, generic, clips, slack, granola, github) — health states, sync scheduling, and credential resolution. Use when adding a source, running or debugging a sync, or the user asks why a source is stale, erroring, or not importing.
- ▌ Cross Source Analysis · builderioUse 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.
- ▌ Plan Comments And Feedback · builderioPlan review threads end to end: what `get-plan-feedback` returns, how to read anchors, resolver intent, replies, notification email, deletion, and abuse reports. Use when reading, answering, resolving, or removing plan feedback.
- ▌ Analytics Data For Decks · builderioRoute customer, account, CRM, HubSpot, pipeline, renewal, usage, product activity, Gong, and other analytics-backed deck requests through the Analytics agent. Use when generating or updating Slides content that needs external or first-party data.
- ▌ Image Generation Via A2a · builderioWhen a slides deck needs images, delegate to the Assets app over A2A so generations are grounded in the user's brand library — never call an image-generation API directly from slides.
- ▌ Design Editor Architecture · builderioWhere design editor behavior lives and how to navigate DesignEditor.tsx. Use before changing any editor behavior — undo/redo, paste, delete, duplicate, style commit, layer move/rename, export, structure change — or before opening `app/pages/DesignEditor.tsx`.
- ▌ Content Product Development · builderio bundleProduct 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.
- ▌ App Branding · builderioHow to rename or rebrand the app so every surface — title, package metadata, PWA manifest, and icons — stays consistent. Use when a prompt establishes or implies a new app name, title, or visual identity, OR when you generate an app title, theme, or icon yourself while scaffolding an app from an initial prompt.
- ▌ App Permissions · builderioHow to enable browser feature permissions (camera, microphone, geolocation, screen capture, clipboard, wake-lock) that the framework's default Permissions-Policy header blocks. Use when the app must access a device or browser capability that is silently failing.
- ▌ Plow Ahead · builderio bundleProceed through ordinary ambiguity by making reasonable assumptions, keeping momentum, validating as you go, and ending with a clear recap of decisions, changes, verification, and residual risk.
- ▌ Quick Recap · builderio bundleMakes completion state obvious at the end of every response using a red/yellow/green status block.
- ▌ Visual Plan · builderio bundleTransform text plans into interactive visual documents with diagrams, code snippets, and review surfaces for coding agents.
- ▌ Plan Arbiter · builderio bundleCompare, cross-review, and merge competing plans from multiple agents into one executable direction with a clear handoff.
- ▌ Visual Recap · builderio bundleTurn 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.
- ▌ Agent Watchdog · builderio bundleWatch, audit, and fix another agent's work by reconstructing the original request, inspecting evidence, and reporting gaps.
- ▌ Efficient Fable · builderio bundleOrchestrate token-heavy research, coding, and testing by delegating bounded tasks to cheaper subagents while reserving Claude Fable for architecture, synthesis, and final review.
- ▌ Efficient Frontier · builderio bundleOrchestrate expensive frontier models as reviewers and cheaper subagents for bounded, token-heavy work to optimize cost and quality.
- ▌ Read The Damn Docs · builderio bundleForces web searches and reading of official docs before implementing, integrating, or debugging third-party APIs, libraries, and services to ensure accuracy and avoid guesswork.
- ▌ Stay Within Limits · builderio bundleKeep long-running agent work within 5-hour and weekly usage limits by checking usage between waves, pausing near the cap, and resuming only when the window is clear.
- ▌ Adding A Skill · builderio bundleGuides contributors through adding, updating, publishing, documenting, validating, and wiring public skills in the BuilderIO/skills repository, covering plain skills, instruction-style skills, app-backed/MCP skills, and Plan skill sync.