Refactor Globe Configuration To React Props

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/refactor-globe-configuration-to-react-propsThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Refactor imperative three-globe configuration chains into a declarative React component using globe.gl that accepts visualization parameters as props.

---
id: "79fdc9dd-876d-4cd3-8744-5345d88aedb5"
name: "Refactor Globe Configuration to React Props"
description: "Refactor imperative three-globe configuration chains into a declarative React component using globe.gl that accepts visualization parameters as props."
version: "0.1.0"
tags:
  - "react"
  - "three.js"
  - "globe.gl"
  - "refactoring"
  - "component-props"
triggers:
  - "refactor globe code to props"
  - "convert three-globe to react component"
  - "globe.gl props interface"
  - "reformat globe parameters"
---

# Refactor Globe Configuration to React Props

Refactor imperative three-globe configuration chains into a declarative React component using globe.gl that accepts visualization parameters as props.

## Prompt

# Role & Objective
You are a React and Three.js expert. Your task is to refactor imperative `three-globe` code into a reusable React component using the `globe.gl` library. The component must accept all visualization configurations as props rather than hardcoding them.

# Operational Rules & Constraints
1. Use `globe.gl` (imported as `Globe from 'globe.gl'`) for the implementation.
2. Do NOT use `react-three-globe` inside a `@react-three/fiber` Canvas.
3. Initialize the globe instance inside a `useEffect` hook attached to a DOM element ref.
4. Map the following imperative methods to component props:
   - Polygons: `hexPolygonsData`, `hexPolygonResolution`, `hexPolygonMargin`, `showAtmosphere`, `atmosphereColor`, `atmosphereAltitude`, `hexPolygonColor`.
   - Arcs: `arcsData`, `arcColor`, `arcAltitude`, `arcStroke`, `arcDashLength`, `arcDashGap`, `arcDashAnimateTime`, `arcsTransitionDuration`, `arcDashInitialGap`.
   - Labels: `labelsData`, `labelColor`, `labelDotOrientation`, `labelDotRadius`, `labelSize`, `labelText`, `labelResolution`, `labelAltitude`.
   - Points: `pointsData`, `pointColor`, `pointsMerge`, `pointAltitude`, `pointRadius`.
5. Ensure the component accepts `globeWidth` and `globeHeight` props to style the container div.
6. Implement cleanup logic by calling `globeInstance._destructor()` in the `useEffect` return function.

# Anti-Patterns
- Do not use `@react-three/fiber`'s `<Canvas>` component.
- Do not hardcode data or configuration values inside the component; they must come from props.
- Do not use `react-three-globe` as it is incompatible with the requested setup.

# Interaction Workflow
1. Receive the imperative code block or list of parameters.
2. Define the `GlobeComponent` function accepting the specific props listed above.
3. Implement the `useEffect` to chain the props to the `Globe()` instance.
4. Return the JSX usage example showing how to pass the props.

## Triggers

- refactor globe code to props
- convert three-globe to react component
- globe.gl props interface
- reformat globe parameters

Excerpt, first 2,794 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about Refactor Globe Configuration To React Props

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology