←Leaderboard/Design/three-scope-map-skill
Last commit on July 29, 2026·Created on May 19, 2026

songsummer920-dazzle/three-scope-map-skill

“Constructs hierarchical 3D geographic maps and Earth View transitions using Three.js”
Combined rank
#537
across all skills
In Design
#60
category rank
Stars
552
+0.2% in last 7d
Forks
74
0.0% in last 7d
Watchers
4
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill enables the creation and modification of reusable 3D maps for Vue or web dashboards. It focuses on managing geographic scopes, allowing developers to implement hierarchical drill-downs from global views down to specific districts and counties.

It provides a structured approach to updating GeoJSON data, terrain textures, and chase-light paths while maintaining visual consistency. The skill also handles the derivation of complete map color systems from a single theme color to preserve specific aesthetics, such as dark HUD-style visuals.

WHO IT'S FOR
Frontend engineers
build 3D geographic maps for web dashboards
Data visualization specialists
implement hierarchical geographic drilldown workflows
Creative technologists
theme dark HUD-style 3D map visuals
GIS developers
integrate GeoJSON data into Three.js renderers
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Copy into Codex skills

Installs: Installs the standalone three-scope-map skill folder, including its bundled runnable Vue template. · Codex

Before you start
  • The repository contents, including the three-scope-map folder, must be available locally.
  • Node.js ^20.19.0 or >=22.12.0 is required when using the bundled Vue template.

Run from: Repository root containing the three-scope-map folder

  1. In a terminal, copy the three-scope-map folder from the repository root into the Codex skills directory.

    cp -R three-scope-map ~/.codex/skills/
README.md ↗ · Checked Oct 18, 2026three-scope-map/SKILL.md ↗ · Checked Oct 18, 2026

Give it something to do.

Suggested first task

Create a minimal Earth-to-China map project

Uses three-scope-map

  • [TARGET_PROJECT]: destination directory for the new project
  • Node.js ^20.19.0 or >=22.12.0
Use the three-scope-map skill to create a minimal runnable project in [TARGET_PROJECT]. The target is an empty or non-frontend directory. Copy the complete bundled assets/templates/smart-mine-vue project, keep EarthView.vue, EarthChinaMap.vue, ChinaMap.vue, mapTheme.ts, map data, and textures together, and make EarthChinaMap.vue the initial view. Preserve the real Three.js Earth entrance and its handoff to the China map. Do not add dashboard panels or business content.
README.md ↗ · Checked Oct 18, 2026three-scope-map/SKILL.md ↗ · Checked Oct 18, 2026
Suggested first task

Apply one shared map theme color

Uses three-scope-map

  • [TARGET_PROJECT]: local project directory
  • [HEX_COLOR]: desired hexadecimal color, for example #E8FF4F
Use the three-scope-map skill to change the shared map theme in [TARGET_PROJECT] to [HEX_COLOR]. Change only MAP_THEME_PRIMARY through the skill's apply_map_theme.py workflow, keeping both the Earth view and every 3D map scope connected to the shared theme. Avoid broad shader, CSS, or material color replacement.
three-scope-map/SKILL.md ↗ · Checked Oct 18, 2026
Suggested first task

Add a geographic drilldown transition

Uses three-scope-map

  • [TARGET_PROJECT]: local Vue or web map project
  • [SOURCE_SCOPE]: world, country, province, or city
  • [DESTINATION_SCOPE]: the next supported scope in the hierarchy
  • [DESTINATION_GEOJSON_PATH]: path to real GeoJSON at the destination subdivision level
Use the three-scope-map skill to add one [SOURCE_SCOPE] to [DESTINATION_SCOPE] drilldown in [TARGET_PROJECT], using the supplied [DESTINATION_GEOJSON_PATH]. Validate that the GeoJSON has the correct subdivision level, then update the geometry, labels, effects, texture scope, hover targets, and camera together while preserving the existing renderer style. Record the prior scope and camera preset so navigation can return to the parent map.
three-scope-map/SKILL.md ↗ · Checked Oct 18, 2026