Agent Skills › asgeirtj/system_prompts_leaks › maps-geography

maps-geography

GitHub

提供基于真实地理数据的地图生成方案，支持静态TopoJSON渲染与交互式OpenStreetMap展示。禁止手绘，强制使用指定库和HTML结构确保准确性与兼容性。

Anthropic/claude-design/skills/maps-geography/SKILL.md asgeirtj/system_prompts_leaks

Trigger Scenarios

需要生成国家、海岸线或街道等地理图形制作包含地图元素的演示文稿或文档插图

Install

npx skills add asgeirtj/system_prompts_leaks --skill maps-geography -g -y

More Options

Non-standard path

npx skills add https://github.com/asgeirtj/system_prompts_leaks/tree/main/Anthropic/claude-design/skills/maps-geography -g -y

Use without installing

npx skills use asgeirtj/system_prompts_leaks@maps-geography

指定 Agent (Claude Code)

npx skills add asgeirtj/system_prompts_leaks --skill maps-geography -a claude-code -g -y

安装 repo 全部 skill

npx skills add asgeirtj/system_prompts_leaks --all -g -y

预览 repo 内 skill

npx skills add asgeirtj/system_prompts_leaks --list

SKILL.md

Frontmatter

{
    "name": "maps-geography",
    "description": "Accurate maps from real geo data — use for any map, or whenever geography would make a good graphic for a deliverable",
    "user-invocable": true
}

Maps & geography

Geographic maps are data problems, not drawings: never freehand country outlines, coastlines, or street layouts — hand-drawn geography is reliably wrong, and users notice. Load real geometry and render it.

Build every map page as plain HTML — a .html file with ordinary <script> tags, NEVER a .dc.html Design Component, even when every other design in the project is one: DC confines scripts to , whose mount timing races the map container — the same call the data-viz and 3D skills make.

For decks, docs, graphics, and animations — anything static or exported — render TopoJSON geometry with d3-geo: fetch https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json (Natural Earth data, public domain; the URL is version-pinned — use it exactly), convert with topojson.feature(topology, topology.objects.countries), and draw with d3.geoPath() under a projection chosen for the job (d3.geoNaturalEarth1 for the whole world; d3.geoMercator().fitSize(...) to zoom a region). d3-geo ships inside the d3 bundle below. Load the libraries ONLY through these exact pinned, hash-verified tags, in . These tags fail closed if tampered with; any other script you add would load unverified — so do not change versions, URLs, or hashes, and add nothing else from a CDN:

Inline SVG from d3 also exports cleanly to PNG and PDF, which live map tiles do not — so exported deliverables always get d3 geometry, never an embedded tile map.

For street-level interactive maps — prototypes, websites, anything the user pans and zooms — use Leaflet with OpenStreetMap tiles, loaded ONLY through these exact tags (the stylesheet is required: without leaflet.css the tiles render scrambled):

Create the map with L.map(...) and L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }). The attribution string is OpenStreetMap's license requirement — never omit it.