dale-visualize

Dale Visualize

Turn material into a standalone HTML artifact that makes an important relationship easier to see, inspect, compare, or manipulate. Adapt patterns to the task; never replace the task with a generic dashboard.

Frame the visual question

Before writing HTML, identify:

• the one question the artifact should answer;
• the audience and the decision or understanding it should enable;
• the verified facts, code, data, and uncertainties available;
• the relationship best expressed spatially: comparison, hierarchy, sequence, dependency, change over time, state, or direct manipulation;
• whether interaction materially improves comprehension.

Do not invent metrics, events, citations, product behavior, or source evidence. Never embed secrets, credentials, private environment values, or unrelated user data. Label unknown or inferred material honestly.

If a compact table, short prose, or an existing repository-native component is clearer than HTML, say so and use the simpler form unless the user explicitly requires an HTML artifact.

Select examples deliberately

Read references/example-catalog.md before implementation. Select one primary example whose information shape matches the task, then at most two secondary examples for a specific interaction or visual device. Inspect only those HTML files under assets/examples/.

Borrow structure, interaction ideas, and implementation techniques—not the fictional Acme content, arbitrary palette, or entire page composition. Generate the final hierarchy from the user's material and the owning project's visual language when one exists.

Choose the artifact form

• Use a static explainer when the reader mainly needs to scan and understand.
• Use inline SVG for flows, architecture, timelines, call graphs, and custom figures whose geometry carries meaning.
• Use side-by-side cards or matrices for genuine alternatives and variants.
• Use controls only when changing an input teaches something or enables a real decision.
• Use a small editor when the output must be reordered, tuned, toggled, or exported back into the user's workflow.
• Use a slide deck only when pacing and sequential presentation matter.