c4-interactive-html

Language: Match the user's language (中文提问则中文回复).

When this skill applies, the agent MUST analyze the user's current workspace project (the opened repo), then generate one self-contained HTML file that implements the interactive C4 viewer described below. Do not only describe the HTML—write the file to disk.

Architectural anchors (from design)

• L1: The current product/repo is the core system (highlighted, only node that drills to L2).
• L2: Containers arranged in a left-to-right columnar layout inside a dashed system boundary box; only the container that has L3 content shows the drill badge.
• L3: Exactly one chosen core container (e.g. main API or main web app) is expanded; others stay at L2 only.
• Evidence: Prefer facts from files; in the side panel, state inference basis when uncertain (e.g. "inferred from docker-compose.yml").

Step 1 · Analyze project architecture