what to include in a devtool listing: screenshots, docs, links

TL;DR

A strong devtool listing includes: the one-liner, a short description, homepage and docs links, two or three screenshots showing the core workflow (not the landing page), clear pricing, and one proof point. Screenshots of the product doing its job convert better than any copy; docs links signal a real tool.

what to include in a devtool listing: screenshots, docs, links

Use this when

• Assembling assets for a new listing
• Upgrading a thin existing listing
• Briefing a designer on listing visuals

Not for this skill when

• The directory has a fixed template (follow it)
• The product UI is not ready to screenshot (wait)
• You have no docs yet (ship docs first, listings second)

Steps

1. Capture workflow screenshots. Show the tool doing its main job in two or three shots: input, action, result. Not the marketing homepage. Expected: a stranger understands the workflow from images alone.

1. Link the docs, not just the homepage. A quickstart or core docs page next to the homepage URL. Expected: evaluators can go deep in one click.

asset checklist:
  one-liner: [sentence]
  description: [short paragraph]
  links: homepage, docs, quickstart
  screenshots: 2-3 workflow shots
  pricing: [clear statement]
  proof: [one proof point]

1. State pricing plainly. Free, freemium, paid, or open source; say it outright. Expected: no visitor has to hunt for the pricing page to know the model.

1. Add one proof point. User count, a known user, or a concrete outcome. Expected: a credibility anchor without hype.

1. Keep everything current. Screenshots age fast; refresh them when the UI changes meaningfully. Expected: the listing never shows a UI two versions old.

Variant phrasings

devtool listing asset checklist

One-liner, description, homepage plus docs links, workflow screenshots, pricing, one proof point.

best screenshots for a directory listing

The core workflow in action: input, action, result. Never the landing page.

what links belong in a tool listing

Homepage, docs, and one deep link like a quickstart. All canonical, all live.

Why it happens

Directory visitors decide in seconds whether a tool is worth a click, and they decide mostly from the screenshots and the first line. Docs links and clear pricing answer the next two questions (is it real, what does it cost) before the visitor has to ask.

Edge cases / pitfalls

• Redact or use demo data in screenshots; never show real user data or secrets.
• Keep image file sizes small; some directories reject huge uploads silently.
• If the tool is CLI-first, screenshots of terminal output beat a GUI you do not have.
• Alt text on images helps accessibility and some directories' SEO.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_-pkQ4ABFcmtMSm7uQVoHLg