horizonbymuneeb

Naqsha — Development skill for Claude Code

Development community

Free diagram skill for every coding agent: one small JSON file in, one self-contained interactive HTML out.

How to install Naqsha

This entry records only its repository, not the path inside it, so there is no exact command to give. Open horizonbymuneeb/naqsha and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Naqsha does

Free diagram skill for every coding agent: one small JSON file in, one self-contained interactive HTML out. Ten diagram types, walkthrough tours, diffs, path tracing, Mermaid both ways. Zero dependencies, offline, MIT.

Alternatives in Development

Root Cause Tracing — Use when errors occur deep in execution and you need to trace back to find the original trigger 102.5k ★
Deep Dive Claude Code — 《深入理解 Claude Code 源码》— 系统剖析 Anthropic Claude Code CLI 的架构设计、工程实践与编程哲学 25 chapters, 101 Mermaid diagrams, 467 c 181 ★
Activate Browser — Activate Chrome DevTools MCP for heavy browser sessions (network inspection, Lighthouse, performance tracing) 90 ★

README

naqsha

[![ci](https://github.com/horizonbymuneeb/naqsha/actions/workflows/ci.yml/badge.svg)](https://github.com/horizonbymuneeb/naqsha/actions/workflows/ci.yml) [![release](https://img.shields.io/github/v/release/horizonbymuneeb/naqsha?color=B4661F)](https://github.com/horizonbymuneeb/naqsha/releases) [![license](https://img.shields.io/badge/license-MIT-1D6A62)](LICENSE)

**A free diagram skill for every coding agent.** One small JSON file in, one self-contained interactive HTML out: no npm install for the reader, no network, no fonts, no hosted service, no account. Ten diagram types, ten native layouts.

./install.sh                 # every agent detected on this box
./install.sh --agent dsh     # one agent

Published: **https://github.com/horizonbymuneeb/naqsha** · `npm i -g naqsha` (gives the `naqsha` CLI; then `naqsha types`). MIT, English-only, zero runtime dependencies.

Then ask your agent:

use naqsha to map this repo's runtime architecture

The examples in this repository are **real**: every artifact under `docs/` is a diagram of the public [Archify](https://github.com/tt-a1i/archify) repository (Apache-2.0, 90k★) — its module layout, its finalize gates, its typed IR, its release history. Nothing here is an invented checkout flow.

![Naqsha — the Archify repository architecture](docs/shot-archify-repo.architecture.png)

Ten diagram types

Type	Use for	Extra IR fields
`architecture`	services, stores, actors, trust boundaries	—
`workflow`	ordered steps, decisions, retries	`direction`
`sequence`	messages between participants over time	—
`erd`	tables, columns, keys, cardinality	`attributes[{name,type,key,ref}]`, `cardinality`
`class`	types, members, inheritance, composition	`stereotype`, `members[]`, relation `kind`
`tree`	single-parent hierarchy from one root	—
`timeline`	dated events on a time axis	`at`, `lane`
`waterfall`	spans with start + duration on one a