graph-viewer
Integrate the reusable CDF graph viewer (useGraphViewer) into a Flows app by copying the local code bundle. Use when embedding a graph visualization, adding a knowledge graph, or showing CDF data model relationships and instances.
- Installs
- 1.9K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads graph-viewer automatically when relevant.
- 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.
Graph Viewer
Use This When
The user wants to embed an interactive graph of a CDF data model — nodes, direct relations, edges, and reverse relations — inside a Flows app.
Do not use this skill for static diagrams, pure dataflow visualizations, or non-CDF graphs.
Prerequisites
- The app is wrapped in
@cognite/dune's<DuneProvider>souseDune()returns an authenticated SDK. - The target data model exists in CDF and you know its
space,externalId, andversion. - The app uses React 18+ and TypeScript.
Integration Workflow
Follow these steps in order. Adapt to the target repo's conventions instead of inventing new ones.
-
Inspect the target app. Read
package.jsonand look at the existing folder structure (e.g.src/features/*,src/components/*, path aliases like@/*). -
Install missing dependencies with the app's package manager (
npm,pnpm,yarn, …). See the Dependencies table below for purposes and suggested versions. Reuse the React version already pinned by the app rather than upgrading it, and prefer any versions the repo already pins over the suggestions here. -
Copy the bundle into the app. Copy every file from
skills/graph-viewer/code/into an app-local feature folder, for example:src/features/graph-viewer/If the repo already has a different feature/components layout or alias, mirror it.
-
Import from the local folder, never from
@skills/.... With a typical@/*alias:import { useGraphViewer } from "@/features/graph-viewer"; -
Render
GraphCanvasinside a container with explicit dimensions (height is required — see the minimal example below). -
Run typecheck and build (
tsc --noEmit,npm run build, etc.) and fix any path or type issues introduced by the copy.
Minimal Example
import { useGraphViewer } from "@/features/graph-viewer";
export function GraphPanel() {
const { GraphCanvas, isLoading, error } = useGraphViewer({
dataModel: { space: "my-space", externalId: "my-data-model", version: "1" },
instance: { space: "my-instance-space", externalId: "pump-001" },
});
if (isLoading) return <div>Loading graph…</div>;
if (error) return <div>Error: {error}</div>;
return <GraphCanvas className="h-[600px] w-full" />;
}
Dependencies
Suggested versions reflect the latest published majors at the time of writing. They are starting points — if the target app already pins different versions, defer to the app.
| Package | Suggested version | Purpose |
|---|---|---|
react | ^18.2.0 | UI framework (peer; reuse the app's version) |
@cognite/sdk | ^10.10.0 | CDF API client (instances, data models) |
@cognite/dune | ^2.1.0 | Provides the authenticated SDK via useDune() |
reagraph | ^4.30.8 | WebGL graph rendering engine |
lucide-react | ^1.14.0 | Icon set used by the node-type legend |
Example install (npm; adapt to the app's package manager):
npm install @cognite/sdk@^10.10.0 @cognite/dune@^2.1.0 reagraph@^4.30.8 lucide-react@^1.14.0
CDF Cost & Performance
Graph expansion can issue many CDF requests, especially with reverse relations. For large or unfamiliar data models, be conservative:
- Set
whitelistedRelationPropsto the few properties the app actually needs to traverse. - Lower
initialConnectionLimit(it is a hard maximum of connections fetched per expansion). - Lower
maxNodesto bound the in-memory LRU buffer. - Only declare
coreReverseQueriesfor relations the app must surface; each entry adds an extra query per expansion.
Tuples in coreReverseQueries are version-aware:
[space, viewExternalId, viewVersion, propertyName, isList].
Advanced Reference
For full configuration tables, return-value docs, layouts, theming, and richer examples, read code/README.md.
For implementation details, inspect the source files under code/.
Verification Checklist
- The app is wrapped in
<DuneProvider>. - All files from
skills/graph-viewer/code/were copied into an app-local folder. - Imports point to the app-local folder (e.g.
@/features/graph-viewer), not@skills/.... -
@cognite/dune,@cognite/sdk,reagraph, andlucide-reactare present inpackage.json. - The container that renders
<GraphCanvas>has an explicit height. -
tsc --noEmitand the app's build both pass. - No references to
dune-industrial-componentswere introduced.
FAQ
What does the graph-viewer skill do?
Integrate the reusable CDF graph viewer (useGraphViewer) into a Flows app by copying the local code bundle. Use when embedding a graph visualization, adding a knowledge graph, or showing CDF data model relationships and instances.
How do I install graph-viewer?
Run npx skills add https://github.com/cognitedata/builder-skills --skill graph-viewer 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/graph-viewer/ (personal) or .claude/skills/graph-viewer/ (project).
Which AI agents can use graph-viewer?
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 graph-viewer 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 graph-viewer?
It is published by cognitedata in cognitedata/builder-skills. It has 1,898 recorded installs.
More from cognitedata/builder-skills
skill-creator
cognitedata/builder-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.
code-quality
cognitedata/builder-skills
MUST be used whenever reviewing a Flows 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.
test-coverage
cognitedata/builder-skills
MUST be used whenever fixing test coverage for a Flows app to meet the 80% line coverage hard gate. This skill finds AND fixes coverage gaps — it configures tooling, writes missing tests, covers untested paths, and refactors code for testability. It does not just report. Triggers: test coverage, fix tests, write tests, add tests, coverage fix, 80% coverage, coverage gate, missing tests, testability, vitest coverage, jest coverage.
dependencies-audit
cognitedata/builder-skills
MUST be used whenever fixing dependency issues in a Flows app. This skill finds AND fixes vulnerabilities, outdated packages, deprecated dependencies, and license issues — it does not just report them. Triggers: dependencies, packages, fix dependencies, update packages, fix vulnerabilities, npm audit fix, pnpm audit fix, CVE fix, outdated, deprecated, supply chain, license.
design
cognitedata/builder-skills
Simplified Aura guidance for selecting primitives, keeping token usage consistent, and applying reliable layout/copy/state patterns in Flows and Fusion apps.
reveal-3d
cognitedata/builder-skills
Integrates the @cognite/reveal-widget npm package into Flows apps for an interactive Cognite Reveal 3D Scene/CAD/point cloud/360-image viewer. Use when adding 3D viewer, 3D visualization, Reveal, CAD model, Point cloud model, 360 image collection, Scenes, RevealWidget, RevealWidgetController, DM 3D mapping, asset 3D model, model browser, or Cognite 3D content to a Flows application.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, 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.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available