Awesome-omni-skill json-visualization-dev

Develop and maintain the JSON Visualization web application - a Next.js tool for visualizing JSON/YAML/CSV/XML data as interactive graphs. Use when working with this codebase, adding features, fixing bugs, or understanding the graph visualization, data conversion, or type generation systems.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data-ai/json-visualization-dev" ~/.claude/skills/diegosouzapw-awesome-omni-skill-json-visualization-dev && rm -rf "$T"

manifest: skills/data-ai/json-visualization-dev/SKILL.md

source content

JSON Visualization Development Skill

This skill helps you work with the JSON Visualization codebase - an open-source web application for visualizing and manipulating JSON data.

When to use this skill

Adding new features to the editor, graph visualization, or converters
Fixing bugs in data parsing, rendering, or state management
Understanding the codebase architecture and data flow
Creating new data format converters or type generators
Modifying UI components or styling

Project overview

What it does: Converts JSON, YAML, CSV, XML, TOML into interactive graphs/trees with features like format conversion, validation, code generation, and image export.

Tech stack:

Next.js (React 19) + TypeScript
Zustand (state management)
Styled-components + Mantine v8 (UI)
Monaco Editor (code editor)
Reaflow (graph visualization)

Quick start

# Install dependencies
pnpm install

# Start dev server
pnpm dev  # http://localhost:3000

# Lint and format
pnpm lint
pnpm lint:fix

Architecture

Core directories

src/
├── pages/              # Next.js routes (index, editor, converters, type generators)
├── features/
│   ├── editor/        # Main editor (TextEditor, GraphView, TreeView, Toolbar)
│   └── modals/        # Import, Download, Type, Schema, JQ, JPath modals
├── store/             # Zustand stores (useFile, useConfig, useJson, useModal)
├── components/        # Reusable UI (buttons, animations, effects)
├── layout/            # Page layouts (Navbar, Footer, Landing sections)
├── lib/utils/         # Utilities (jsonAdapter, json2go, generateType, search)
├── hooks/             # Custom hooks (useFocusNode, useJsonQuery)
├── constants/         # Theme, global styles, graph config
├── enums/             # FileFormat, TypeLanguage, ViewMode
└── types/             # TypeScript type definitions

Data flow

Input →
```
useFile
```
store → Parse via
```
jsonParser.ts
```
→ Graph nodes
Render →
```
GraphView
```
(Reaflow + custom nodes/edges)
Actions → Toolbar → Modals → Store updates → Re-render

Key files

```
src/store/useFile.ts
```
- File operations, content management (160 LOC)

src/features/editor/views/GraphView/lib/jsonParser.ts

- JSON → graph parser (207 LOC)

```
src/lib/utils/jsonAdapter.ts
```
- Format conversions (104 LOC)

src/features/editor/views/GraphView/index.tsx

- Main graph view (198 LOC)

Code style guidelines

TypeScript

// ✅ Use type imports
import type { MenuItemProps } from "@mantine/core";

// ❌ Don't use regular imports for types
import { MenuItemProps } from "@mantine/core";

Import order (enforced by Prettier)

React (
```
react
```
,
```
react/*
```
)
Next.js (
```
next
```
,
```
next/*
```
)
```
@mantine/core
```
Other
```
@mantine
```
packages
```
styled-components
```
Third-party modules
Internal
```
src/
```
imports
Relative imports (
```
./
```
,
```
../
```
)

Naming conventions

Components: PascalCase (
```
Navbar.tsx
```
,
```
GraphView.tsx
```
)
Hooks: camelCase with
```
use
```
prefix (
```
useFocusNode.ts
```
)
Stores: camelCase with
```
use
```
prefix, default export (
```
useFile.ts
```
)
Styled components: Prefix with
```
Styled
```
(
```
StyledButton
```
)
Functions: camelCase (
```
fetchUrl
```
,
```
setContents
```
)

Formatting

Double quotes only
Semicolons required
Max 100 chars per line
No multiple empty lines
Avoid parens for single arrow function params:
```
x => x * 2
```

Common tasks

Adding a new converter

Create route in

src/pages/converter/[format1]-to-[format2].tsx

Use
```
ConverterLayout/ToolPage.tsx
```
wrapper
Conversion logic is in
```
lib/utils/jsonAdapter.ts
```

Adding a new type generator

Create route in

src/pages/type/[format]-to-[language].tsx

Use
```
TypeLayout/TypegenWrapper.tsx
```
wrapper
Generation logic in
```
lib/utils/generateType.ts
```
or
```
json2go.js
```

Creating a Zustand store

import { create } from "zustand";

interface MyState {
  value: string;
}

interface MyActions {
  setValue: (value: string) => void;
}

const useMyStore = create<MyState & MyActions>()((set, get) => ({
  value: "",
  setValue: value => set({ value }),
}));

export default useMyStore;

Creating a styled component

import styled from "styled-components";

const StyledButton = styled.button`
  background-color: #f7c948;
  color: #1a1a1a;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background-color: #37ff8b;
  }
`;

Design system

Colors:

Background:
```
#f7f3e6
```
(warm beige)
Primary text:
```
#1a1a1a
```
Accent:
```
#37ff8b
```
(neon green)
Yellow:
```
#f7c948
```

Fonts:

Global: Playfair Display (serif)
Code: JetBrains Mono (monospace)

Important notes

No tests: Project has no test suite - don't create tests unless requested
Package manager: Use
```
pnpm
```
only (not npm/yarn)
Privacy-first: All processing is client-side
Node version: >=24.x required
ESLint:
```
src/enums
```
directory is ignored

Getting help

See references/ARCHITECTURE.md for detailed architecture
See references/COMPONENTS.md for component catalog
See references/STATE.md for state management patterns
Check
```
AGENTS.md
```
in project root for full guidelines