Contenu du pack

Un fichier SKILL.md (le guide pratique) + un modèle de départ. Aperçu :

Interactive System Map

When to use

• Your product is a platform, network, or ecosystem and a static diagram keeps failing to explain how the parts connect
• A docs or onboarding page needs a map of a system — data flows, service regions, office locations, delivery zones — that readers can explore by clicking
• An editorial or explainer piece covers a territory (a city, a supply chain, a campus) and readers keep asking "where is that in relation to this?"
• A dashboard or status page needs a map view where each region or node opens its own detail
• A presentation needs a map that starts simple and reveals layers — regions, then routes, then details — instead of dumping everything at once

Workflow

1. Define what the map is for (input: your topic + audience → output: one-sentence map purpose)
   Write one sentence: "This map lets a {reader} find {what} and do {action}." A map for finding the nearest service point is a different map from one showing how data flows between regions. The purpose decides what gets drawn, what gets labeled, and what gets left out. If you cannot write the sentence, you do not have a map yet — you have a pile of locations.
2. Gather verified geography (input: purpose → output: checked location + boundary dataset)
   Collect every place, boundary, route, or node the map must show, with coordinates or positions checked against a reliable source — your own product data, an official boundary file, or a published map. Never invent a border, a route, or a location to fill an empty area. Record the source and date for each dataset; a map with stale boundaries is a wrong map wearing a confident face. Decide the map's extent: show only the area the purpose needs, and say so in a caption if the map is cropped.
3. Draft the base map (input: verified dataset → output: static base illustration)
   Draw the base first, without any interactivity: land or background, boundaries, routes, and the nodes or regions that matter. Use one consistent visual language — one line weight for boundaries, one treatment for routes, one symbol family for nodes. Labels go on the base for the handful of places every reader needs; everything else waits for interaction. Check the base at the smallest size it will be shown: if labels collide or routes blur, simplify the geometry before adding anything else.
4. Add the interactive layers (input: base illustration → output: layered interactive map)
   Add interaction in this order: hover or tap reveals a label and one-line summary for any node or region; click opens a detail panel with the full facts; a layer switcher toggles overlays (routes, zones, status) one at a time. Each layer must be usable on its own — never require two toggles on to make sense. Keep the number of layers small: three clear layers beat eight overlapping ones. Every interactive element needs a keyboard and screen-reader path, not just a mouse hover.
5. Test with strangers (input: interactive map → output: verified map)
   Give the map to three people who have never seen the system and ask them to complete the map's purpose: find a location, compare two regions, open a detail. Watch where they hesitate, mis-tap, or read a label wrong — those are the defects to fix. Also test on a phone: tap targets at least thumb-sized, detail panels that do not cover the map, and no hover-only information. Fix, retest, and only then ship.

Aperçu du modèle

Interactive System Map — Build Template

One map, one purpose. Fill in the purpose first — it decides everything else.

Map purpose

This map lets a {reader} find {what} and do {action}.

Audience: {who uses this map} Map extent: {area shown} — Cropped? {yes/no — if yes, say so in the caption}

Verified dataset

Every place, boundary, route, or node the map shows. No invented geography.

Known gaps: {regions with no data — label them "no data," never leave suggestive blanks}

Base map

Background: {treatment} Boundaries: {one line weight} Routes: {one treatment} Nodes: {one symbol family} Always-labeled places (a handful): {names}

Le pack de compétence lui-même (SKILL.md + modèle) est rédigé en anglais.

Acheter le pack complet — $4.99 Pro — les 511 compétences