Visual Docs Diagrams

Use this skill to decide whether developer docs need visuals and to design or review those visuals for comprehension, accessibility, performance, and maintainability.

This skill is derived from Docs for Developers: An Engineer's Field Guide to Technical Writing, especially Chapter 6, "Adding visual content." The guidance is transformed and paraphrased; do not copy book prose into user outputs. Source: https://link.springer.com/book/10.1007/978-1-4842-7217-6

Quick Start

1. Load guidelines.md to choose the smallest useful reference set.
2. Define what the visual must help the reader understand or do.
3. Choose screenshot, diagram, flowchart, swimlane, or text-only based on the task.
4. Use workflows/design-technical-visual.md for full visual design or review.
5. Check accessibility, performance, placement, source files, and maintenance before finalizing.

Default Output

When designing or reviewing visual docs, return: