# Cesium Impl Resium

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-cesiumjs-claude-skill-package-cesium-impl-resium`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** https://github.com/Impertio-Studio/CesiumJS-Claude-Skill-Package/tree/main/skills/source/cesium-impl/cesium-impl-resium

## Install

```sh
agentstack add skill-impertio-studio-cesiumjs-claude-skill-package-cesium-impl-resium
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Resium: CesiumJS in React

## Overview

Resium is a declarative React component library that wraps CesiumJS. Each
Resium component maps to a CesiumJS object: `` to `Cesium.Viewer`,
`` to `Cesium.Entity`, `` to
`Cesium.Cesium3DTileset`. The component tree builds and tears down the
underlying Cesium objects as React mounts and unmounts.

**Core principle:** CesiumJS is a peer dependency of Resium. The application
installs and pins `cesium` itself; Resium does not bundle it. ALWAYS install
both `resium` and `cesium`.

**Core principle:** Every Resium component except a root component MUST be
nested inside a `` or ``. A component placed outside a
root renders nothing.

Resium 1.21.1 declares peer dependencies `cesium: "1.x"`,
`react: ">=18.2.0"`, and `react-dom: ">=18.2.0"`. It ships full TypeScript
types.

## When to Use This Skill

Use this skill when ANY of these apply:

- Building a CesiumJS scene inside a React application
- A Resium `` renders blank or unstyled
- A component is placed in the tree but never appears
- Reaching the native Cesium object from a Resium component
- `ref.current.cesiumElement` is `undefined`
- Reading the viewer, scene, or camera from a child component

Do NOT use this skill for plain CesiumJS without React; use the `syntax`
skills directly. Do NOT use it for the CesiumJS bundler and `CESIUM_BASE_URL`
setup; that is `cesium-impl-build-deploy`.

## Installation and Setup

```bash
npm install resium cesium
```

CesiumJS needs its static assets served and `window.CESIUM_BASE_URL` set
before import. In a Vite project, the `vite-plugin-cesium` plugin does both.
The CesiumJS widget CSS MUST be imported once, or the `Viewer` toolbar and
widgets render unstyled.

```js
import "cesium/Build/Cesium/Widgets/widgets.css";
```

The bundler and `CESIUM_BASE_URL` detail is in `cesium-impl-build-deploy`.

## Root Components

`Viewer` and `CesiumWidget` are the only root components. Use `Viewer` for the
full UI with widgets; use `CesiumWidget` for a minimal canvas with no toolbar.

```jsx
import { Viewer, Entity } from "resium";
import { Cartesian3 } from "cesium";

function Map() {
  return (
    
      
    
  );
}
```

The `full` prop makes the `Viewer` fill the viewport. A `Viewer` accepts the
same options as `new Cesium.Viewer`, passed as props.

## The Declarative Component Model

A Resium component maps to a CesiumJS class with the same name. Its props
mirror the constructor options or settable properties of that class. The
component tree is the scene.

```jsx

  
  
  
    
  
  

```

A graphics object is set either as an `Entity` prop (`point={{ ... }}`) or as
a nested graphics component (``). The full component
catalog is in `references/methods.md`.

## Accessing the Native Cesium Object

A Resium component exposes its underlying Cesium object through a `ref`. The
ref value is a `CesiumComponentRef`, whose `cesiumElement` property holds
the native object.

```ts
export type CesiumComponentRef = {
  cesiumElement?: Element;
};
```

`cesiumElement` is OPTIONAL. It is `undefined` until the component has
mounted and the Cesium object is created. ALWAYS read it inside `useEffect`
and ALWAYS guard it with a check. NEVER read `cesiumElement` during render.

```jsx
import { useRef, useEffect } from "react";
import { Viewer } from "resium";

function Map() {
  const viewerRef = useRef(null);

  useEffect(() => {
    const viewer = viewerRef.current?.cesiumElement;
    if (!viewer) {
      return;
    }
    viewer.scene.globe.enableLighting = true;
  }, []);

  return ;
}
```

## The useCesium Hook

`useCesium` reads the Resium context from inside a component nested under a
root. It returns the context object with optional `viewer`, `cesiumWidget`,
`scene`, `globe`, `camera`, `screenSpaceEventHandler`, `entity`, and the
collection fields.

```jsx
import { useCesium } from "resium";

function FlyHomeButton() {
  const { camera } = useCesium();

  return (
     camera?.flyHome(2)}
      disabled={!camera}
    >
      Fly home
    
  );
}
```

Every field of the returned context is OPTIONAL. ALWAYS guard a field before
use. `useCesium` called outside a `Viewer` or `CesiumWidget` returns an empty
object, because the context provider is the root component.

## Decision: Ref or useCesium

```dot
digraph access_choice {
    rankdir=TB;
    node [shape=box, fontname="Helvetica"];
    start [label="Need the native Cesium object"];
    q [shape=diamond, label="From the same component\nthat renders it?"];
    use_ref [label="Use a ref and\nref.current.cesiumElement."];
    use_hook [label="Use useCesium() in a\nchild component nested\nunder the Viewer."];

    start -> q;
    q -> use_ref [label="yes, same component"];
    q -> use_hook [label="no, a descendant"];
}
```

## Common Mistakes

| Mistake | Consequence | Fix |
|---------|-------------|-----|
| `resium` installed without `cesium` | Peer-dependency error, build fails | Install both `resium` and `cesium` |
| A component outside `` | Renders nothing | Nest it inside a `Viewer` or `CesiumWidget` |
| Reading `cesiumElement` in render | `undefined`, crash | Read it inside `useEffect` |
| Using `cesiumElement` without a guard | Crash when it is `undefined` | Check it before use |
| `useCesium` outside a root component | Empty context object | Call it in a descendant of `Viewer` |
| Missing `widgets.css` import | Toolbar and widgets unstyled | Import `cesium/Build/Cesium/Widgets/widgets.css` |
| `CESIUM_BASE_URL` unset | Blank viewer, worker 404s | Configure the bundler; see `cesium-impl-build-deploy` |
| Pinning a `cesium` version Resium rejects | Peer-dependency warning | Use a `1.x` CesiumJS, 1.124 or newer |

## Reference Files

- `references/methods.md` : the full Resium component catalog, the
  `useCesium` context shape, the `CesiumComponentRef` type, and the peer
  dependencies.
- `references/examples.md` : complete recipes for setup, the viewer, entities,
  refs, the hook, camera flight, tilesets, and events.
- `references/anti-patterns.md` : each Resium failure with symptom, root
  cause, and fix.

## Related Skills

- `cesium-impl-build-deploy` : `CESIUM_BASE_URL`, `vite-plugin-cesium`, and
  the static-asset setup Resium depends on.
- `cesium-syntax-viewer` : the `Cesium.Viewer` options behind ``.
- `cesium-syntax-entity` : the `Cesium.Entity` model behind ``.
- `cesium-syntax-3d-tiles` : the `Cesium3DTileset` behind ``.
- `cesium-core-memory` : Resium unmount calls `destroy()`; manual native
  objects still need teardown.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** [Impertio-Studio/CesiumJS-Claude-Skill-Package](https://github.com/Impertio-Studio/CesiumJS-Claude-Skill-Package)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-cesiumjs-claude-skill-package-cesium-impl-resium
- Seller: https://agentstack.voostack.com/s/impertio-studio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.