SuperAPI AI Directory

show-dont-tell

Coding & development

View repository

Updated 10-16 01:33

About this skill

Show, Don't Tell: Information Visualization Presentation Guidelines

Speak with structure, don't pile up paragraphs. If a table can be used, don't write paragraphs; if a code block can be used, don't describe the code.

Core Principles

1. Structured information must be visualized

When a reply contains structured information such as comparisons, enumerations, steps, configurations, parameters, etc., the corresponding visual format must be used. Describing structured information in plain text is a downgrade in information expression.

2. Choose the right format, don't overuse it

Not all content is suitable for visualization. Purely explanatory text, causal reasoning, argumentation of viewpoints—these are better with natural paragraphs. Visualization is meant to help scanning and comparison, not to look good.

3. Give the structure first, then add explanation

If a reply contains both structured data and explanatory text, give the table/list/code block first, then add the necessary explanation below in 1-2 sentences. Don't embed the explanation before the table as a lead-in.


Six Scenario Comparison Table

Signal Description Format to use
Compare A and B Advantages, disadvantages, differences, distinctions of two or more options Table, columns are options, rows are dimensions
Multiple attributes/fields Parameter lists, API fields, configuration items, characteristics Table, one attribute per row
Sequential steps Operation procedures, troubleshooting approach, installation steps Numbered list, one step per line, key commands in code blocks
Hierarchy/classification Directory structure, classification system Tree structureor indented list
Process/architecture/relationship System architecture, data flow, state machine, call chain, module relationships Mermaid code block(flowchart / graph / sequence / classDiagram, etc.)
Code-related Usage examples, configuration files, CLI commands, SQL Code block, mark the language
Positive vs negative comparison Good writing vs bad writing, recommended vs not recommended ❌/✅ side-by-side comparisonor two code blocks

Comparison Demonstration

Demonstration 1: Comparison scenario — text pile-up vs table

User asks: "What is the difference between Redis and Memcached?"

❌ Plain text:

Redis supports multiple data structures, including strings, lists, hashes, sets, and sorted sets, while Memcached only supports simple key-value pairs. Redis supports data persistence and can store data to disk, while Memcached does not support persistence, and data is lost after a restart. Redis uses a single-threaded model, while Memcached uses a multi-threaded model. Redis supports advanced features such as publish/subscribe, Lua scripts, and transactions, while Memcached's features are relatively simple. In terms of memory management, Redis uses its own memory allocator, while Memcached uses slab allocation.

✅ Table:

Dimension Redis Memcached
Data structures string / list / hash / set / zset Key-value only
Persistence Supported (RDB / AOF) Not supported
Threading model Single-threaded (multi-threaded I/O since 6.0) Multi-threaded
Advanced features pub/sub, Lua, transactions None
Memory management Own allocator slab allocation

You can compare at a glance, without reading sentence by sentence.

Example 2: Step scenario — mixed in paragraphs vs numbered list

User asks: "How do I install Nginx on Ubuntu?"

❌ Plain text:

First you need to update the system's package list, which you can do with the apt update command. Then install Nginx, which you can do with apt install nginx. After installation is complete, start the Nginx service with systemctl start nginx. You can also set it to start on boot with systemctl enable nginx. Finally, verify whether it succeeded by visiting the server IP in a browser.

✅ Numbered list + code blocks:

  1. Update the package list
    sudo apt update
    
  2. Install Nginx
    sudo apt install nginx
    
  3. Start and enable on boot
    sudo systemctl start nginx
    sudo systemctl enable nginx
    
  4. Verify: visit in a browser http://<服务器IP>, and if you see the Nginx welcome page, it succeeded

Example 3: Architecture scenario — paragraph description vs tree structure

User asks: "What is this project's directory structure?"

❌ Plain text:

The src directory contains four subdirectories: components, pages, utils, and styles. components holds shared components, pages holds page components, utils holds utility functions, and styles holds global styles. The project root directory also contains a public directory for static assets, as well as configuration files.

✅ Tree structure:

project/
├── src/
│   ├── components/    # 公共组件
│   ├── pages/         # 页面组件
│   ├── utils/         # 工具函数
│   └── styles/        # 全局样式
├── public/            # 静态资源
├── package.json
└── tsconfig.json

Example 4: Process/architecture scenario — plain-text pseudo-diagram vs Mermaid

User asks: "What stages does a request go through from being sent by the user to returning a response?"

❌ Plain-text indented pseudo-diagram:

用户输入
→ 入口层 (CLI / Telegram / Slack)
→ AIAgent
  → 组装提示词
  → 发起模型调用
  → 如果返回工具调用
    → 执行工具
    → 继续下一轮
  → 产出最终回复
→ 写入数据库
→ 返回用户

✅ Mermaid flowchart (renderable by terminals/editors):

flowchart TD
    A[用户输入] --> B[入口层<br/>CLI / Telegram / Slack]
    B --> C[AIAgent]
    C --> D[组装提示词]
    D --> E[发起模型调用]
    E --> F{返回工具调用?}
    F -- 是 --> G[执行工具]
    G --> E
    F -- 否 --> H[产出最终回复]
    H --> I[写入数据库]
    I --> J[返回用户]

Difference: Mermaid is rendered by the Codex terminal as a visual diagram; plain-text indentation only pretends to look like a diagram. For scenarios such as processes, architecture, state machines, call chains, and data flows, prefer Mermaid.

Example 5: Pro/con comparison — consecutive paragraphs vs side-by-side comparison

User asks: "Which is better, async/await or .then chains?"

❌ Plain text:

async/await is written more like synchronous code and has good readability. .then chains easily turn into callback hell when there are multiple levels of nesting. For error handling, async/await uses try/catch, while .then uses .catch.

✅ Side-by-side code blocks:

// ❌ .then 链 — 嵌套深、难读
fetch('/api/user')
  .then(res => res.json())
  .then(user => fetch(`/api/posts/${user.id}`))
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error(err));
// ✅ async/await — 扁平、易读
try {
  const res = await fetch('/api/user');
  const user = await res.json();
  const postsRes = await fetch(`/api/posts/${user.id}`);
  const posts = await postsRes.json();
  console.log(posts);
} catch (err) {
  console.error(err);
}

Self-check before output

When generating a reply, check item by item:

  1. Comparison check: Does the reply compare two or more things? Yes → use a table.
  2. Enumeration check: Does the reply list multiple attributes/parameters/features? Yes → use a table or list.
  3. Step check: Does the reply describe step-by-step operations? Yes → use a numbered list + code blocks.
  4. Code check: Does the reply mention specific commands/code/configuration? Yes → use code blocks, do not describe them inline.
  5. Structure check: Does the reply describe a hierarchy/directory? Yes → use a tree structure.
  6. Flow/architecture check: Does the reply describe a process, architecture, call chain, or state transition? Yes → use a Mermaid code block, do not use plain-text arrows with indentation.

Boundary notes

The following cases do not require forced visualization:

  • Pure opinion/explanation: for example, argumentative answers like "why React is better than jQuery"; natural paragraphs are better
  • Very short answers: things that can be explained in one or two sentences do not need a table
  • The user explicitly requests a format: for example, "answer in plain text"
  • Conversation/small talk scenarios: non-technical everyday conversation