BuilderIO/skills

Skills for agents

Small, composable skills for your favorite agent.

Quick install recommended skills

npx @agent-native/skills@latest add

See the full CLI docs below.

Skills At A Glance

• /an - Open and operate Agent-Native apps beside the conversation.
• /webmcp - Open web apps in the built-in browser and use MCP tools first.
• /visual-plan - Turn text plans into rich visual plans.
• /visual-recap - Turn diffs into interactive visual recaps.
• /visual-edit - Open a running local app for visual editing.
• /rewind - Recover recent local screen context through Clips Desktop.
• /agent-watchdog - Audit another agent's work.
• /plan-arbiter - Compare competing plans and choose a direction.
• /plow-ahead - Keep working through ordinary ambiguity.
• /efficient-fable - Orchestrate Fable with cheaper helper agents.
• /efficient-frontier - Preserve high-cost models for judgment.
• /stay-within-limits - Track usage limits before long-running work.
• /quick-recap - End work with a clear status signal.
• /read-the-damn-docs - Check authoritative docs before guessing.
• /turn-into-app - Turn the current thread or a skill into a runnable Agent-Native app.

Skill Details

/an

Open a granted Agent-Native app in the host's inline MCP App or built-in browser surface, then keep the agent connected to the app's live UI and screen state. For example, run /an slides to open Slides, sign in in that browser surface, and then ask the agent to create or update the deck. Focused requests such as make this bigger use the Slides selection state and a bounded readback-verified edit.

The plugin registers Dispatch MCP automatically for Claude and Codex at https://dispatch.agent-native.com/mcp. In ChatGPT, add that same URL as an OAuth custom connector. The host may need a reload or connector rescan after installation.

/webmcp

Open a requested URL in the host's built-in browser and use the page's MCP or WebMCP tools before browser UI automation for app communication or edits. For example, run /webmcp slides.agent-native.com make me a new deck about onboarding to open Slides and complete the request in that tab. The skill waits for the user to sign in when needed, then calls the page's window.__agentNativeWebMcp helper from the host's JavaScript evaluator (or a host WebMCP bridge when one is exposed): one screen read, one smallest mutation, one readback. If neither is available, it stops before a state-changing click or type fallback and reports the limitation.

/visual-edit

Open a running local app in Design as URL-backed iframe screens for visual inspection, route-state exploration, and source-backed editing.

Unlike a static mockup, the canvas stays connected to the app's real routes and the local bridge. Use /visual-edit when a UI needs to be reviewed or changed in context, including responsive states and multi-screen flows.

/rewind

Use local Clips Rewind screen memory to recover a recent moment: what was said, what appeared on screen, or what happened just before the current task. It searches bounded local chapters, transcripts, OCR, and frames first; it is not a hosted recording archive and does not upload raw local media by default.

Rewind requires macOS, the signed Clips Desktop app, and a compatible agent with the local clips-screen-memory MCP connection. If you invoke Rewind before installing Clips, the skill asks permission to open the official install flow instead of silently installing capture software. Follow the Rewind setup and first-test guide.

/visual-plan

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

Solves for plans that are too important to bury in chat. The output is scannable, commentable, and intuitive enough for a human to approve before code changes start.

Visual plans are MDX, customizable with your own components, and are viewed with the Agent-Native plans app. In local-files mode, /visual-plan writes and serves MDX locally through a localhost bridge instead of uploading plan content to the hosted database. Source here

/visual-recap

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

Solves for diffs that hide the shape of the change. Reviewers can understand contracts, architecture moves, schema changes, and UI impact before diving into raw line-by-line review.

Visual recaps are MDX, customizable with your own components, and are viewed with the Agent-Native plans app. Source here

You can also install a GitHub action for these to be automatically generated for every PR with

npx @agent-native/skills@latest add

/agent-watchdog

Audit another agent's work from a Codex session, Claude Code transcript, PR, branch, or run summary.

Solves for cross-agent handoffs: watch until done, reconstruct what was asked, check what actually changed and verified, report gaps, and optionally make narrow fixes.

/plan-arbiter

Compare competing agent plans and choose one executable direction.

Solves for multi-agent planning loops where Codex, Claude Code, or other agents produce separate strategies. The output is a decision memo with the winning or hybrid plan, rejected alternatives, verification gates, and executor recommendation.

/plow-ahead

Keep working through ordinary ambiguity and finish with a clear decision recap.

Solves for explicit autonomy requests: the agent converts routine questions into assumptions, proceeds with conservative choices, validates the work, and recaps the decisions it made without stopping.

/efficient-fable

Use Claude Fable as the orchestrator, architect, synthesizer, and final judge while lighter agents handle token-heavy research, coding, testing, and log reduction.

Solves for expensive-model waste: Fable should spend tokens on judgment, not on reading every file, reducing every log, or manually running every browser check.

/efficient-frontier

Apply the same orchestration as /efficient-fable to any high-cost frontier model: preserve the expensive model for planning, tradeoffs, integration, validation strategy, and final review; use cheaper agents for bounded heavy lifting.

Solves for broad work that can be parallelized without asking the most expensive model to do every scan and every edit itself.

/stay-within-limits

Check current 5-hour and weekly usage before substantial work and between parallel waves, then pause new execution at 95% until the active window is clear enough to continue.

Solves for long-running agent sessions that accidentally exhaust the current budget window mid-task instead of pausing cleanly and resuming with a self-contained plan.

/quick-recap

Add a concise final status block convention so every completed response ends with a clear green, yellow, or red work-state signal.

Solves for ambiguity at the end of agent work: done, pending a specific non-routine step, or blocked on the user.

Example green status:

🟢 Updated quick recap docs with output examples

Example yellow status:

🟡 Code updated, set PROVIDER_WEBHOOK_SECRET before testing webhooks

/read-the-damn-docs

Make agents web-search for authoritative docs before they guess from stale model memory.

Solves for version drift and API folklore: package installs, framework config, SDK imports, provider limits, auth, security, billing, data, migrations, deploys, and repo-specific contracts all require a docs pass before implementation. For external APIs and current product behavior, web search for official docs is usually the first move.

/turn-into-app

At the end of a thread, turn the current workflow into a fresh Agent-Native app with clear buttons, visible agent steps, a running local preview, and a concise deployment handoff. At the beginning of a thread, pass a skill name or workflow path, such as /turn-into-app /some-skill, to use that source immediately. Codex threads and local transcript exports work today; ChatGPT shared links and Claude web/project imports are marked coming soon. The result should be the concrete workflow app, not a generic app-builder intake form. Local previews can use ignored .env setting AUTH_DISABLED=1 so they open without an account.

Install

Run the installer:

npx @agent-native/skills@latest add

The picker shows the full catalog, with the recommended skills preselected. Toggle any additional skills you want.

The installer walks you through the choices:

• Which skills to install.
• Where visual plans and recaps should live: hosted shareable links

(recommended), local files only, or a self-hosted/custom Plan app.

• Agent Skills through the shared .agents path for Codex, Pi, Cursor,

OpenCode, GitHub Copilot / VS Code, and similar agents, plus Claude Code's native skills path when selected.

• User-level or project-level install.
• Whether to add managed AGENTS.md / CLAUDE.md instruction blocks when the

selected skills have always-on guidance.

• Whether to add the PR Visual Recap GitHub Action when /visual-recap is

selected.

• Whether to configure a compatible local agent connection when /rewind is

selected. The installer does not install Clips Desktop. If it is missing, invoking Rewind asks permission to open the official download flow; capture remains disabled until you turn it on in the Clips tray.

Skip the picker with --skill:

npx @agent-native/skills@latest add --skill quick-recap
npx @agent-native/skills@latest add --skill visual-recap --with-github-action
npx @agent-native/skills@latest add --skill rewind
npx @agent-native/skills@latest add --skill webmcp

You can also use Vercel's skills CLI for a plain skill-folder copy:

npx skills@latest add BuilderIO/skills --skill quick-recap

Do not use the plain-copy installer for Rewind: it cannot configure the local clips-screen-memory connection. Use @agent-native/skills or @agent-native/core for a complete Rewind setup.

That installer is useful for quick copying, but it does not add the managed AGENTS.md / CLAUDE.md instruction blocks or the PR Visual Recap GitHub Action that pair well with these skills.

Install in Claude Cowork

This repo is also a Claude plugin marketplace for Cowork. To install the shareable, updatable plugin in Cowork:

1. Open Customize > Plugins > Add marketplace. 2. Enter BuilderIO/skills (or https://github.com/BuilderIO/skills). 3. Install Builder Skills and enable the webmcp skill.

Invoke the installed skill with its plugin namespace:

/builder-skills:webmcp slides inspect the current screen without editing

For Team and Enterprise workspaces, an organization admin can provision the marketplace or plugin for everyone. Cowork does not currently expose a supported CLI command for installing an account-level plugin; the marketplace is shared through Git, while each Cowork user installs it from Customize.

Install in Claude Code

This repo is also a Claude Code plugin marketplace. To install all of the skills as a managed, updatable plugin, run these inside Claude Code:

/plugin marketplace add BuilderIO/skills
/plugin install builder-skills@builder-skills

The skills are then namespaced under the plugin (for example, /builder-skills:quick-recap). Pull future updates with:

/plugin marketplace update builder-skills

The plugin installs Rewind's instructions only; it cannot configure the local Clips Screen Memory MCP connection. When invoked, Rewind can ask permission to open the official Clips Desktop installer, but it must not install or enable capture silently. After Clips is installed and Rewind is enabled, also run:

npx @agent-native/core@latest skills add rewind --client claude-code --scope user --yes

Treat Rewind as unavailable until screen_memory_status succeeds.

This path does not add the managed AGENTS.md / CLAUDE.md instruction blocks or the PR Visual Recap GitHub Action; use the npx @agent-native/skills installer above if you want those.