MCPInstall

reveal-3d

by cognitedataMedia & Creative

Integrates a local Cognite Reveal 3D CAD viewer bundle into Dune apps by copying app-local source code. Use when adding 3D viewer, 3D visualization, Reveal, CAD model, RevealProvider, RevealCanvas, Reveal3DResources, FDM 3D mapping, asset 3D model, model browser, or Cognite 3D content to a Dune application.

Installs
337
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/cognitedata/dune-skills --skill reveal-3d
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads reveal-3d automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Reveal 3D Viewer

Add a Cognite Reveal 3D viewer to a Dune app by copying the bundled source into the target app. Renders CAD models from CDF, with support for model browsing, direct model/revision IDs, or FDM-linked assets.

FDM instance to visualize: $ARGUMENTS

Use This When

The user wants to embed an interactive Cognite Reveal viewer for CDF 3D/CAD content in a Dune app.

Do not use this skill for static diagrams, graph visualizations, or unrelated custom Three.js scenes.

Prerequisites

  • The app uses React + TypeScript and is wrapped in @cognite/dune auth.
  • The app has a QueryClientProvider from @tanstack/react-query.
  • The CDF project has 3D models, or the user has supplied direct model/revision IDs.
  • For FDM-linked 3D, the instance must be linked through Core DM (CogniteVisualizable.object3D -> CogniteCADNode).

Integration Workflow

Follow these steps in order. Adapt paths to the target app's conventions instead of inventing new ones.

  1. Inspect the target app. Read package.json, vite.config.ts, src/main.tsx, and the app's folder/alias conventions.

  2. Install missing dependencies with the app's package manager. See Dependencies. Reuse existing pinned React, Dune, SDK, and React Query versions.

  3. Copy the bundle into the app. Copy every file from skills/reveal-3d/code/reveal/ into an app-local feature folder, typically:

    src/features/reveal-3d/

  4. Import from the local folder, never from the skill directory or the old external package. With a typical @/* alias:

    import { CacheProvider, RevealKeepAlive, RevealProvider } from '@/features/reveal-3d';

  5. Configure Vite and main.tsx. Read vite-config.md and apply the process polyfill, manual process/util/assert aliases, three alias, dedupe settings, and worker.format: 'es'.

  6. Choose the implementation pattern. Use Pattern B (model browser or direct model ID) unless you already have a DMInstanceRef and confirmed Core DM 3D linkage. For full examples, read implementation.md.

  7. Keep provider placement stable. CacheProvider and RevealKeepAlive are always mounted at page/app level. RevealProvider is conditional, only when a model is selected or linked.

  8. Run typecheck and build (tsc --noEmit, pnpm build, etc.) and fix any copied-import or dependency issues.

Minimal Example

import { useCallback, useMemo } from 'react';
import type { CogniteClient } from '@cognite/sdk';
import {
  CacheProvider,
  Reveal3DResources,
  RevealCanvas,
  RevealKeepAlive,
  RevealProvider,
  type AddCadResourceOptions,
} from '@/features/reveal-3d';

type SelectedModel = { modelId: number; revisionId: number };

function ViewerContent({ modelId, revisionId }: SelectedModel) {
  const resources = useMemo<AddCadResourceOptions[]>(
    () => [{ modelId, revisionId }],
    [modelId, revisionId]
  );
  const onLoaded = useCallback(() => {}, []);

  return (
    <RevealCanvas>
      <Reveal3DResources resources={resources} onModelsLoaded={onLoaded} />
    </RevealCanvas>
  );
}

export function ViewerPage({
  sdk,
  selected,
}: {
  sdk: CogniteClient;
  selected: SelectedModel | null;
}) {
  const memoizedSdk = useMemo(() => sdk, [sdk.project]);

  return (
    <CacheProvider>
      <RevealKeepAlive>
        <div style={{ width: '100%', height: '70vh', position: 'relative' }}>
          {selected && (
            <RevealProvider sdk={memoizedSdk}>
              <ViewerContent
                modelId={selected.modelId}
                revisionId={selected.revisionId}
              />
            </RevealProvider>
          )}
        </div>
      </RevealKeepAlive>
    </CacheProvider>
  );
}

Dependencies

Suggested versions are starting points. If the target app already pins compatible versions, defer to the app.

PackageSuggested versionPurpose
react / react-domapp versionUI framework
@cognite/duneapp versionAuthenticated SDK via useDune()
@cognite/reveal^4.30.0Reveal viewer runtime
@cognite/sdk^10.0.0CDF API client
@tanstack/react-query^5.90.21Reveal/FDM data fetching hooks
three^0.180.0Three.js singleton used by Reveal
process, util, assertlatestBrowser polyfills for Reveal dependencies
ajv^8Avoids older transitive AJV resolution in monorepos
@types/threelatest dev depTypeScript types

Example install (pnpm; adapt to the app's package manager):

pnpm add @cognite/reveal @cognite/sdk @tanstack/react-query three process util assert ajv
pnpm add -D @types/three

After install, check @cognite/reveal's three peer requirement and align three if needed.

Do not install vite-plugin-node-polyfills; use the explicit Vite aliases in vite-config.md.

Critical Rules

  • ViewerContent contains only RevealCanvas and Reveal3DResources; no providers.
  • resources passed to Reveal3DResources must be memoized with useMemo.
  • onModelsLoaded, onSelect, and similar callbacks must be memoized with useCallback.
  • The SDK passed to RevealProvider must be memoized with useMemo keyed on client.project.
  • RevealCanvas fills its parent; the parent must have an explicit height.
  • Lazy-load canvas-heavy viewer content with React.lazy + Suspense when adding a route/page.

Advanced Reference

For the copied bundle API and exports, read code/README.md.

For model browser and FDM-linked implementations, read references/implementation.md.

For Vite, worker, polyfill, and troubleshooting details, read references/vite-config.md.

Verification Checklist

  • All files from skills/reveal-3d/code/reveal/ were copied into an app-local feature folder.
  • Imports point to the app-local folder (e.g. @/features/reveal-3d).
  • The app does not import Reveal helpers from the old external package.
  • Required dependencies are present in package.json.
  • main.tsx starts with the process polyfill before other imports.
  • vite.config.ts uses manual aliases, dedupe, three singleton alias, and worker.format: 'es'.
  • CacheProvider and RevealKeepAlive are always mounted; RevealProvider is conditional when model selection is conditional.
  • The viewer container has an explicit height.
  • Typecheck and build pass.

FAQ

What does the reveal-3d skill do?

Integrates a local Cognite Reveal 3D CAD viewer bundle into Dune apps by copying app-local source code. Use when adding 3D viewer, 3D visualization, Reveal, CAD model, RevealProvider, RevealCanvas, Reveal3DResources, FDM 3D mapping, asset 3D model, model browser, or Cognite 3D content to a Dune application.

How do I install reveal-3d?

Run npx skills add https://github.com/cognitedata/dune-skills --skill reveal-3d in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/reveal-3d/ (personal) or .claude/skills/reveal-3d/ (project).

Which AI agents can use reveal-3d?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is reveal-3d safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains reveal-3d?

It is published by cognitedata in cognitedata/dune-skills. It has 337 recorded installs.

More from cognitedata/dune-skills

View all →

code-quality

cognitedata/dune-skills

MUST be used whenever reviewing a Dune app for code quality, maintainability, or clean code issues — before a PR review, after a feature is complete, or when the user asks for a code review. Do NOT skip linting steps. Triggers: code quality, code review, clean code, refactor, maintainability, technical debt, any type, naming, dead code, duplication, DRY, single responsibility, component size, lint, linting, TypeScript strict, dependency injection, file structure.

Code Quality & Workflow343 installs

skill-creator

cognitedata/dune-skills

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch for Claude Code or Cursor, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

AI & Agents341 installs

design

cognitedata/dune-skills

Unified Aura design guidance — components and tokens, page layouts, UX copy, forms and async feedback, and accessibility. Use when building or styling customer-facing UI, structuring pages, writing interface text, or implementing validation, loading, errors, and a11y.

Frontend & Design341 installs

create-client-tool

cognitedata/dune-skills

MUST be used whenever creating an AtlasTool (client-side tool) for an Atlas agent. Do NOT manually write AtlasTool definitions or wire them into useAtlasChat — this skill handles the TypeBox schema, execute function, and hook wiring. This includes tools that fetch data, render UI, call APIs, show charts, query local state, or perform any browser-side action. Triggers: AtlasTool, client tool, add tool, create tool, new tool, tool definition, agent tool.

Frontend & Design340 installs

performance

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow338 installs

dune-app-review

cognitedata/dune-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow338 installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs