Skill: jvy/cesium (version 1.0.1)

--- name: cesium description: Build, debug, and optimize CesiumJS 3D globe apps, including viewer setup, terrain/imagery, 3D Tiles, GeoJSON/CZML loading, camera control, picking, entity styling, and performance tuning. Use when the user asks for Cesium code, Cesium architecture, Cesium bugs, or migration guidance in web projects. homepage: https://cesium.com/platform/cesiumjs/ metadata: { "openclaw": { "emoji": "🌍", "homepage": "https://cesium.com/platform/cesiumjs/", }, } --- # Cesium Implement CesiumJS solutions with minimal assumptions and production-safe defaults. ## Workflow 1. Confirm runtime assumptions first: framework (vanilla/Vite/React), CesiumJS version, and whether Cesium Ion is available. 2. Start with the smallest runnable viewer setup before adding terrain, 3D Tiles, or heavy data layers. 3. Keep token handling out of source code; use environment variables and project config wiring. 4. Add data layers incrementally and verify camera framing after each step. 5. For rendering/perf issues, reduce scene complexity first, then tune request/render settings. ## Implementation guardrails - Prefer explicit imports from `cesium` and avoid hidden globals. - Use `requestRenderMode` for mostly static scenes to reduce GPU/CPU usage. - Dispose resources in teardown paths (`viewer.destroy()`) in SPA route changes/unmounts. - For large datasets, prefer 3D Tiles over huge entity collections when possible. - Keep picking logic resilient: handle `undefined` picks and mixed primitive/entity results. ## Debugging checklist - Blank globe: verify CSS container height/width and render loop not blocked. - Missing terrain/tiles: verify network access, token, and dataset permissions. - Misplaced data: verify CRS and coordinate order (lon, lat, height). - Memory/GPU pressure: profile number of entities/primitives and texture-heavy layers. ## Reference docs in this skill - Read `{baseDir}/references/patterns.md` when generating or fixing Cesium code.

path: references/patterns.md
content: # Cesium Patterns

Use this file as a quick reference for common CesiumJS implementation patterns.

## 1. Minimal viewer bootstrap

```ts
import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";

const viewer = new Viewer("cesiumContainer", {
  animation: false,
  timeline: false,
  requestRenderMode: true,
});
```

Notes:
- Ensure `#cesiumContainer` has explicit width/height in CSS.
- In SPA teardown, call `viewer.destroy()`.

## 2. Environment token wiring

```ts
import { Ion } from "cesium";

Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_ION_TOKEN ?? "";
```

Notes:
- Do not hardcode real tokens in repo files.
- Fail fast with a clear error if required token is missing.

## 3. Load GeoJSON and frame camera

```ts
import { GeoJsonDataSource } from "cesium";

const ds = await GeoJsonDataSource.load("/data/boundaries.geojson", {
  stroke: undefined,
});
viewer.dataSources.add(ds);
await viewer.zoomTo(ds);
```

## 4. Screen picking safety

```ts
const picked = viewer.scene.pick(click.position);
if (!picked) return;

const entity = (picked as { id?: unknown }).id;
if (!entity) return;
```

Notes:
- Picking may return primitives without `.id`.
- Guard all casts and branch by object shape.

## 5. Performance baseline toggles

Start with:
- `requestRenderMode: true`
- `maximumRenderTimeChange: Infinity`
- hide heavy UI widgets unless needed

Then profile before adding custom optimizations.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)