Agent Academy

Agent Academy is a free, source-linked library of skills, prompts, MCP servers and bot templates, organised into courses by profession, for people who hand real work to AI agents: 1,467 live resources, each with its original link, license and safety tags.

Skill

visual-edit-precision

Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also use when editing components where spatial context (element identity, DOM references, layout data) supplements text instructions.

No credentialsDoes not send
Open the original

https://github.com/wshobson/agents/blob/main/plugins/skill-forge-essentials/skills/visual-edit-precision/SKILL.md

Install
npx skills add wshobson/agents --skill visual-edit-precision

Original content

Full originalMITSource

Republished in full under its license, with attribution. The source is authoritative.

name: visual-edit-precision
description: >-
  Use when making UI/frontend changes guided by visual context, when the user
  selects elements visually, draws annotations, or provides screenshots alongside
  change requests. Also use when editing components where spatial context
  (element identity, DOM references, layout data) supplements text instructions.

Visual Edit Precision

Overview

When visual context accompanies a change request (element selections, annotations, screenshots), make targeted, minimal edits. Precision over ambition: change exactly what was indicated, preserve everything else.

Process

When visual context is provided:

  1. IDENTIFY - What exact element(s) were indicated? Which component file owns them?
  2. SCOPE - Change ONLY what was pointed at. Don't refactor surrounding code.
  3. PRESERVE - Keep existing styles, classes, and behavior. Only modify what was asked.
  4. TARGETED - Make the minimal CSS/markup change that achieves the visual result.
  5. VERIFY - Confirm the change renders correctly without side effects.

Key Principles

Precision Over Ambition

Visual context gives a SPECIFIC element. Don't:

  • Refactor the entire component when only one style was requested
  • Change the component's API when only its appearance was pointed at
  • Touch logic when only visuals were selected

Do:

  • Find the exact file and line for the selected element
  • Make the minimal edit that achieves the described visual change
  • Preserve all existing behavior, event handlers, accessibility

Multiple Edits

When multiple visual edits arrive:

  • Each targets its own element independently
  • Don't wait for one to finish before processing another
  • If two edits conflict (same element, different requests), handle the most recent

Common Mistakes

  • Rewriting an entire component when the user pointed at one button
  • Changing global config when only one element's color needs adjusting
  • Breaking responsive behavior by adding fixed widths to match a selection
  • Ignoring specificity (user indicated ONE card, agent changed ALL cards)
  • Removing accessibility attributes (aria-*, role, tabindex) during visual edits

Related

SkillSoftware engineering

claude-api

Reference for the Claude API / Anthropic SDK — model ids, pricing, params, streaming, tool use, MCP, agents, caching, token counting, model migration. TRIGGER — read BEFORE opening the target file; don't skip because it "looks like a one-liner" — whenever: the prompt names Claude/Anthropic in any form (Claude, Anthropic, Fable, Opus, Sonnet, Haiku, `anthropic`, `@anthropic-ai`, `claude-*`, `us.anthropic.*`,…

Sourcegithub.com/anthropics/skills/blob/main/skills/claude-api/SKILL.md

No credentialsDoes not sendApache-2.0
SkillSoftware engineering

doc-coauthoring

Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar…

Sourcegithub.com/anthropics/skills/blob/main/skills/doc-coauthoring/SKILL.md

No credentialsDoes not sendnot stated
SkillSoftware engineering

mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

Sourcegithub.com/anthropics/skills/blob/main/skills/mcp-builder/SKILL.md

No credentialsDoes not sendApache-2.0
SkillSoftware engineering

skill-creator

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

Sourcegithub.com/anthropics/skills/blob/main/skills/skill-creator/SKILL.md

No credentialsDoes not sendApache-2.0
SkillSoftware engineering

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Sourcegithub.com/anthropics/skills/blob/main/skills/webapp-testing/SKILL.md

No credentialsDoes not sendApache-2.0
SkillSoftware engineering

ai-debt-detector

Use after generating code, after accepting AI suggestions, or when reviewing AI-written modules. Also use when code works but feels brittle, when error handling seems thin, when orphaned resources or missing cleanup are suspected, or when the agent claims done but hidden debt may exist. Catches the specific failure patterns AI agents produce that humans would not.

Sourcegithub.com/wshobson/agents/blob/main/plugins/skill-forge-essentials/skills/ai-debt-detector/SKILL.md

No credentialsDoes not sendMIT