{
"markdown": "# Skills for coding agents\n\nSmall, composable skills for coding agents.\n\n### Quick install recommended skills\n\n```sh\nnpx @agent-native/skills@latest add\n```\n\nSee the [full CLI docs below](#install).\n\n## Skills At A Glance\n\n- [`/webmcp`](skills/webmcp/README.md) - Open web apps in the built-in browser and use MCP tools first.\n- [`/visual-plan`](#visual-plan) - Turn text plans into rich visual plans.\n- [`/visual-recap`](#visual-recap) - Turn diffs into interactive visual recaps.\n- [`/visual-edit`](#visual-edit) - Open a running local app for visual editing.\n- [`/rewind`](#rewind) - Recover recent local screen context through Clips Desktop.\n- [`/agent-watchdog`](#agent-watchdog) - Audit another agent's work.\n- [`/plan-arbiter`](#plan-arbiter) - Compare competing plans and choose a direction.\n- [`/plow-ahead`](#plow-ahead) - Keep working through ordinary ambiguity.\n- [`/efficient-fable`](#efficient-fable) - Orchestrate Fable with cheaper helper agents.\n- [`/efficient-frontier`](#efficient-frontier) - Preserve high-cost models for judgment.\n- [`/stay-within-limits`](#stay-within-limits) - Track usage limits before long-running work.\n- [`/quick-recap`](#quick-recap) - End work with a clear status signal.\n- [`/read-the-damn-docs`](#read-the-damn-docs) - Check authoritative docs before guessing.\n\n## Skill Details\n\n### [`/webmcp`](skills/webmcp/README.md)\n\nOpen a requested URL in the host's built-in browser and use the page's MCP or\nWebMCP tools before browser UI automation for app communication or edits. For\nexample, run `/webmcp slides.agent-native.com make me a new deck about onboarding`\nto open Slides and complete the request in that tab. The skill waits for the\nuser to sign in when needed, then calls the page's `window.__agentNativeWebMcp`\nhelper from the host's JavaScript evaluator (or a host WebMCP bridge when one\nis exposed): one screen read, one smallest mutation, one readback. If neither\nis available, it stops before a state-changing click or type fallback and\nreports the limitation.\n\n### [`/visual-edit`](skills/visual-edit/README.md)\n\nOpen a running local app in Design as URL-backed iframe screens for visual\ninspection, route-state exploration, and source-backed editing.\n\nUnlike a static mockup, the canvas stays connected to the app's real routes and\nthe local bridge. Use `/visual-edit` when a UI needs to be reviewed or changed\nin context, including responsive states and multi-screen flows.\n\n### [`/rewind`](skills/rewind/README.md)\n\nUse local Clips Rewind screen memory to recover a recent moment: what was said,\nwhat appeared on screen, or what happened just before the current task. It\nsearches bounded local chapters, transcripts, OCR, and frames first; it is not a\nhosted recording archive and does not upload raw local media by default.\n\nRewind requires macOS, the signed\n[Clips Desktop app](https://clips.agent-native.com/download), and a compatible\nagent with the local `clips-screen-memory` MCP connection. If you invoke Rewind\nbefore installing Clips, the skill asks permission to open the official install\nflow instead of silently installing capture software. Follow the [Rewind setup\nand first-test guide](skills/rewind/README.md).\n\n### [`/visual-plan`](skills/visual-plan/README.md)\n\nTurn ordinary text plans into rich interactive visual plans with diagrams, file\nmaps, annotated code, open questions, and UI/prototype review when useful.\n\nSolves for plans that are too important to bury in chat. The output is\nscannable, commentable, and intuitive enough for a human to approve before code\nchanges start.\n\n\n \n\n\nVisual plans are MDX, customizable with your own components, and are viewed with the [Agent-Native plans app](https://www.agent-native.com/docs/template-plan). 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](https://github.com/BuilderIO/agent-native/)\n\n### [`/visual-recap`](skills/visual-recap/README.md)\n\nTurn a branch, commit, or PR diff into an interactive visual recap with\nannotated diffs, diagrams, API/schema summaries, file maps, UI state summaries,\nand focused review notes.\n\nSolves for diffs that hide the shape of the change. Reviewers can understand\ncontracts, architecture moves, schema changes, and UI impact before diving into\nraw line-by-line review.\n\n\n \n\n\nVisual recaps are MDX, customizable with your own components, and are viewed with the [Agent-Native plans app](https://www.agent-native.com/docs/template-plan). [Source here](https://github.com/BuilderIO/agent-native/)\n\nYou can also install a GitHub action for these to be automatically generated for every PR with\n\n```sh\nnpx @agent-native/skills@latest add\n```\n\n\n\n### [`/agent-watchdog`](skills/agent-watchdog/README.md)\n\nAudit another agent's work from a Codex session, Claude Code transcript, PR,\nbranch, or run summary.\n\nSolves for cross-agent handoffs: watch until done, reconstruct what was asked,\ncheck what actually changed and verified, report gaps, and optionally make\nnarrow fixes.\n\n### [`/plan-arbiter`](skills/plan-arbiter/README.md)\n\nCompare competing agent plans and choose one executable direction.\n\nSolves for multi-agent planning loops where Codex, Claude Code, or other agents\nproduce separate strategies. The output is a decision memo with the winning or\nhybrid plan, rejected alternatives, verification gates, and executor\nrecommendation.\n\n### [`/plow-ahead`](skills/plow-ahead/README.md)\n\nKeep working through ordinary ambiguity and finish with a clear decision recap.\n\nSolves for explicit autonomy requests: the agent converts routine questions into\nassumptions, proceeds with conservative choices, validates the work, and recaps\nthe decisions it made without stopping.\n\n### [`/efficient-fable`](skills/efficient-fable/README.md)\n\nUse Claude Fable as the orchestrator, architect, synthesizer, and final judge\nwhile lighter agents handle token-heavy research, coding, testing, and log\nreduction.\n\nSolves for expensive-model waste: Fable should spend tokens on judgment, not on\nreading every file, reducing every log, or manually running every browser check.\n\n\n \n \n \n\n\n### [`/efficient-frontier`](skills/efficient-frontier/README.md)\n\nApply the same orchestration as `/efficient-fable` to any high-cost frontier\nmodel: preserve the expensive model for planning, tradeoffs, integration,\nvalidation strategy, and final review; use cheaper agents for bounded heavy\nlifting.\n\nSolves for broad work that can be parallelized without asking the most expensive\nmodel to do every scan and every edit itself.\n\n### [`/stay-within-limits`](skills/stay-within-limits/README.md)\n\nCheck current 5-hour and weekly usage before substantial work and between\nparallel waves, then pause new execution at 95% until the active window is clear\nenough to continue.\n\nSolves for long-running agent sessions that accidentally exhaust the current\nbudget window mid-task instead of pausing cleanly and resuming with a\nself-contained plan.\n\n### [`/quick-recap`](skills/quick-recap/README.md)\n\nAdd a concise final status block convention so every completed response ends\nwith a clear green, yellow, or red work-state signal.\n\nSolves for ambiguity at the end of agent work: done, pending a specific\nnon-routine step, or blocked on the user.\n\nExample green status:\n\n```md\n🟢 Updated quick recap docs with output examples\n```\n\nExample yellow status:\n\n```md\n🟡 Code updated, set PROVIDER_WEBHOOK_SECRET before testing webhooks\n```\n\n### [`/read-the-damn-docs`](skills/read-the-damn-docs/README.md)\n\nMake agents web-search for authoritative docs before they guess from stale model\nmemory.\n\nSolves for version drift and API folklore: package installs, framework config,\nSDK imports, provider limits, auth, security, billing, data, migrations, deploys,\nand repo-specific contracts all require a docs pass before implementation. For\nexternal APIs and current product behavior, web search for official docs is\nusually the first move.\n\n## Install\n\nRun the installer:\n\n```sh\nnpx @agent-native/skills@latest add\n```\n\nThe picker shows the full catalog, with the recommended skills preselected.\nToggle any additional skills you want.\n\nThe installer walks you through the choices:\n\n- Which skills to install.\n- Where visual plans and recaps should live: hosted shareable links\n (recommended), local files only, or a self-hosted/custom Plan app.\n- Agent Skills through the shared `.agents` path for Codex, Pi, Cursor,\n OpenCode, GitHub Copilot / VS Code, and similar agents, plus Claude Code's\n native skills path when selected.\n- User-level or project-level install.\n- Whether to add managed `AGENTS.md` / `CLAUDE.md` instruction blocks when the\n selected skills have always-on guidance.\n- Whether to add the PR Visual Recap GitHub Action when `/visual-recap` is\n selected.\n- Whether to configure a compatible local agent connection when `/rewind` is\n selected. The installer does not install Clips Desktop. If it is missing,\n invoking Rewind asks permission to open the official download flow; capture\n remains disabled until you turn it on in the Clips tray.\n\nSkip the picker with `--skill`:\n\n```sh\nnpx @agent-native/skills@latest add --skill quick-recap\nnpx @agent-native/skills@latest add --skill visual-recap --with-github-action\nnpx @agent-native/skills@latest add --skill rewind\nnpx @agent-native/skills@latest add --skill webmcp\n```\n\nYou can also use Vercel's `skills` CLI for a plain skill-folder copy:\n\n```sh\nnpx skills@latest add BuilderIO/skills --skill quick-recap\n```\n\nDo not use the plain-copy installer for Rewind: it cannot configure the local\n`clips-screen-memory` connection. Use `@agent-native/skills` or\n`@agent-native/core` for a complete Rewind setup.\n\nThat installer is useful for quick copying, but it does not add the managed\n`AGENTS.md` / `CLAUDE.md` instruction blocks or the PR Visual Recap GitHub\nAction that pair well with these skills.\n\n### Install as a Claude Code plugin\n\nThis repo is also a [Claude Code plugin\nmarketplace](https://code.claude.com/docs/en/plugin-marketplaces). To install\nall of the skills as a managed, updatable plugin, run these inside Claude Code:\n\n```sh\n/plugin marketplace add BuilderIO/skills\n/plugin install builder-skills@builder-skills\n```\n\nThe skills are then namespaced under the plugin (for example,\n`/builder-skills:quick-recap`). Pull future updates with:\n\n```sh\n/plugin marketplace update builder-skills\n```\n\nThe plugin installs Rewind's instructions only; it cannot configure the local\nClips Screen Memory MCP connection. When invoked, Rewind can ask permission to\nopen the official Clips Desktop installer, but it must not install or enable\ncapture silently. After Clips is installed and Rewind is enabled, also run:\n\n```sh\nnpx @agent-native/core@latest skills add rewind --client claude-code --scope user --yes\n```\n\nTreat Rewind as unavailable until `screen_memory_status` succeeds.\n\nThis path does not add the managed `AGENTS.md` / `CLAUDE.md` instruction blocks\nor the PR Visual Recap GitHub Action; use the `npx @agent-native/skills`\ninstaller above if you want those.\n",
"bytes": 11753,
"sha": "3dce7a8aa25debbc258d1de629f11a0a96ff2ba4755c81fa09947da4513d8524",
"repo_slug": "builderio/skills",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/skl_builderio_skills_visual_plan_b92d26ed/readme"
}
![\"Visual](\"media/visual-plan.png\")
\n![\"Visual](\"media/visual-recap.gif\")
\n![\"Fable](\"skills/efficient-fable/assets/fable-orchestrator.png\")
\n