Not in the top 1,000 by GitHub stars

Ramakm/folio-anatomy

Explain any idea the way a museum explains a specimen. A Claude Code skill for live, engraved isometric explainers.

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

3fdd974eb19b → 3fdd974eb19b

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → 3fdd974eb19b

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 3fdd974eb19bf66cf27c8a5723a9e8486e60e25f

11GitHub stars

0stars in 7 days

1skill in this repository

15commits in 30 days

Heat

1.6

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

folio /

How it works

folio

When your agent uses it

Build a museum-style exhibition plate that explains a technical idea - an invented scientific instrument drawn as a live, engraved isometric figure in three views (SVG, WebGL light, and a 3D bench you can turn through 360 degrees) with internal parts that really rotate and interact, with numbered specimen pins, a catalogue key, a working model behind every number, and wall texts that walk through the formula term by term. Use for explanatory figures, interactive explainers, "how does X work" visuals, or technical illustrations for docs, courses, posts and landing pages, even when the request never mentions museums, plates or isometric drawing.

What it loads into context

Frontmatter

137 tokens

Always available to the agent

SKILL.md

17,508 tokens

When the skill is activated

Reference documents

3,035 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Three commitments
Getting started
Phase A: the brief (no drawing yet)
Phase B: the bench
Phase C: the mount
Phase C2: three views
Phase C2b: moving internals
Phase C3: looking closer
Phase C4: the website
Phase D: proof
Drawing style
Type and colour
Library reference
Appendix: folio-kit.js
Appendix: folio-live.js
Appendix: folio-theme.js

Scripts executed separately

examples/attention/model.js
examples/attention/page.js
examples/attention/plate.js
examples/grid/model.js
examples/grid/page.js
examples/grid/plate.js
examples/hashmap/model.js
examples/hashmap/page.js
examples/hashmap/plate.js
examples/heart/model.js
examples/heart/page.js
examples/heart/plate.js
kit/folio-kit.js
kit/folio-live.js
kit/folio-theme.js
package.json
scripts/build-site.mjs
scripts/build.mjs
scripts/capture.mjs
scripts/new-plate.mjs

Files

.gitignoreasset37 bytes
LICENSEasset1,078 bytes
README.mddoc11,814 bytes
SKILL.mdcore58,013 bytes
SKILL.mdcore58,013 bytes
SKILL.mdcore58,013 bytes
docs/attention.htmlasset117,784 bytes
docs/embed-attention.htmlasset101,913 bytes
docs/embed-grid.htmlasset109,290 bytes
docs/embed-hashmap.htmlasset121,960 bytes
docs/embed-heart.htmlasset107,601 bytes
docs/grid.htmlasset129,186 bytes
docs/hashmap.htmlasset147,358 bytes
docs/heart.htmlasset130,411 bytes
docs/img/detail.pngasset92,073 bytes
docs/img/grid-turned.pngasset120,831 bytes
docs/img/grid-webgl.pngasset212,402 bytes
docs/img/inspect.pngasset371,642 bytes
docs/img/loupe.pngasset311,715 bytes
docs/img/plate-i-dark.pngasset429,911 bytes
docs/img/plate-i-light.pngasset448,289 bytes
docs/img/plate-i.gifasset677,882 bytes
docs/img/plate-i.pngasset409,001 bytes
docs/img/plate-ii-dark.pngasset431,909 bytes
docs/img/plate-ii-light.pngasset448,479 bytes
docs/img/plate-ii.pngasset406,891 bytes
docs/img/plate-iii-dark.pngasset438,440 bytes
docs/img/plate-iii-light.pngasset452,478 bytes
docs/img/plate-iii.pngasset416,961 bytes
docs/img/plate-iv-dark.pngasset330,926 bytes
docs/img/plate-iv-light.pngasset344,558 bytes
docs/img/plate-iv.pngasset297,866 bytes
docs/img/view-3d.pngasset208,422 bytes
docs/img/view-svg.pngasset172,177 bytes
docs/img/view-webgl.pngasset274,042 bytes
docs/img/wall-text.pngasset243,304 bytes
docs/index.htmlasset62,759 bytes
examples/attention/model.jsruns3,806 bytes
examples/attention/page.htmlasset10,528 bytes
examples/attention/page.jsruns7,287 bytes
examples/attention/plate.jsruns32,200 bytes
examples/grid/model.jsruns5,302 bytes
examples/grid/page.htmlasset12,437 bytes
examples/grid/page.jsruns9,382 bytes
examples/grid/plate.jsruns38,102 bytes
examples/hashmap/model.jsruns5,597 bytes
examples/hashmap/page.htmlasset14,936 bytes
examples/hashmap/page.jsruns12,635 bytes
examples/hashmap/plate.jsruns50,227 bytes
examples/heart/model.jsruns6,256 bytes
examples/heart/page.htmlasset13,219 bytes
examples/heart/page.jsruns11,523 bytes
examples/heart/plate.jsruns35,450 bytes
kit/folio-kit.jsruns12,622 bytes
kit/folio-live.jsruns19,380 bytes
kit/folio-page.cssasset30,006 bytes
kit/folio-theme.jsruns1,868 bytes
package.jsonruns531 bytes
scripts/build-site.mjsruns4,336 bytes
scripts/build.mjsruns1,302 bytes
scripts/capture.mjsruns2,339 bytes
scripts/new-plate.mjsruns1,059 bytes
site/embed.htmlasset1,653 bytes
site/index.htmlasset30,766 bytes

Read SKILL.md


# Folio

A Folio plate explains an idea the way a natural history museum explains a specimen. There is one object on a mount, a numbered key beside it, and wall texts that tell you how to look at it. The object here is an instrument you invent, such as a bench, a balance, a loom or a still, whose working parts perform the idea. Readers can poke it, and every reading on it is computed.

## Three commitments

1. **Mechanism, not metaphor.** The instrument has to *perform* the idea, not stand beside it as an illustration. Before drawing, write one line: "When the reader does X, part Y moves, and that movement is Z in the idea."
2. **A single source of numbers.** A small pure model computes everything: needle angles, fluid levels, the readout, the key, the tables. The page only displays what the model returns, so no two places can disagree.
3. **A guided reading.** A good drawing still needs a guide. Each plate ships with a key, a term-by-term reading, the full working, and an honest account of what was simplified.

## Getting started

- Three reference plates ship with the repo. **Plate I** (`examples/attention/`, attention as an assay bench) is the model for ideas made of discrete steps and a formula. **Plate II** (`examples/heart/`, the human heart as a double pump) is the model for anything that runs in time: a simulation integrated every frame, continuous flow, phases, and charts redrawn after each cycle. **Plate III** (`examples/grid/`, a power grid in miniature) is the model for electricity, magnetism and energy flows, and for a bench built from free-standing machines rather than bands: a turbine, a generator with a spinning rotor, transformers, pylons and a town. **Plate IV** (`examples/hashmap/`, a hash map as a sorting office) is the model for algorithms and data structures, where the idea is a sequence of discrete operations: each operation (insert, look up, resize) expands into a short list of timed acts (lift, carry, dip to compare, fly every card to a new place), played one after another, so the reader watches the algorithm take each step. Open the closest one first.
- The fastest start is to copy a reference plate: `node scripts/new-plate.mjs <name>` makes `examples/<name>/` from Plate I. Then replace its model, scene and texts. Building from a working plate is quicker and safer than starting blank.

View the complete source on GitHub

Skills included

folio

Repository facts

License: MIT
Created: Oct 11, 2026
Last pushed: Oct 13, 2026
Forks: 0
Open issues: 0
Project activity: Active

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 4, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 2 notes

SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
214 network referencesin 19 files: docs/heart.html:3 docs/index.html:4 site/index.html:1 and 16 more
No hidden or obfuscated text
No instruction overrides
20 executable scriptsin 20 files: examples/attention/model.js:1 examples/attention/page.js:1 examples/attention/plate.js:1 and 17 more
No access to secrets
No requests to vote in Hot

Show all 234 signals by file

`README.md`

Network accessline 13

[The collection](#the-collection) · [Install](#ii-install) · [Commission a plate](#iii-commission-a-plate) · [Anatomy of a plate](#iv-anatomy-of-a-plate) · [Make your own](#v-make-your-own) <img width="1776" height="896" alt="Untitled desig

Network accessline 14

<img width="1776" height="896" alt="Untitled design" src="https://github.com/user-attachments/assets/ee106ff7-05df-4765-a7d2-03b81f1fc639" />

Network accessline 39

All four plates live on one website, with a cover page written as a short illustrated essay: **[ramakm.github.io/folio-anatomy/docs](https://ramakm.github.io/folio-anatomy/docs/)**. Its source is in [`site/`](site/) and the built site in [`

Network accessline 105

# for you, in every project git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio

Network accessline 106

git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio

Network accessline 108

# for one project, shared with everyone who works on it git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio

Network accessline 109

git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio

Network accessline 215

Folio was inspired by [Anatomy](https://github.com/wheresryan22/anatomy) by Ryan, which first showed that Claude can draw an idea as a working isometric machine. Folio is an independent project. Its code, drawing library, skill text and pla

Network accessline 225

[Instagram @techwith.ram](https://www.instagram.com/techwith.ram/) · [X @techwith_ram](https://x.com/techwith_ram)

`SKILL.md`

Network accessline 668

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 669

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 670

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 671

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 788

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 789

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 790

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/attention.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Folio Plate I: Attention</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Folio Plate I: Attention</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 429

<div class="corners"><span class="tl">Pl. I</span><span class="tr"><span class="cap">The assay of a query</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 430

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric assay bench that computes attention. Use the arrow keys to move the query, 1 to 4 to change head, square brackets for temperature, M for the mask.">         <svg i

Network accessline 431

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 1012

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1013

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1014

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1015

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1132

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 1133

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1134

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/embed-attention.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Plate I</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Plate I</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 408

<div class="corners"><span class="tl">Pl. I</span><span class="tr"><span class="cap">The assay of a query</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 409

<div class="fig" id="plate" tabindex="0" role="img" aria-label="Plate I: attention as an assay bench">     <svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>   </div>

Network accessline 410

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 878

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 879

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 880

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 881

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 998

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 999

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1000

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/embed-grid.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Plate III</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Plate III</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 408

<div class="corners"><span class="tl">Pl. III</span><span class="tr"><span class="cap">From water to lamp</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 409

<div class="fig" id="plate" tabindex="0" role="img" aria-label="Plate III: a power grid in miniature">     <svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>   </div>

Network accessline 410

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 878

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 879

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 880

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 881

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 998

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 999

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1000

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/embed-hashmap.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Plate IV</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Plate IV</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 408

<div class="corners"><span class="tl">Pl. IV</span><span class="tr"><span class="cap">The sorting office</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tool

Network accessline 409

<div class="fig" id="plate" tabindex="0" role="img" aria-label="Plate IV: a hash map as a sorting office">     <svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>   </div>

Network accessline 410

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 878

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 879

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 880

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 881

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 998

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 999

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1000

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/embed-heart.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Plate II</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Plate II</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 408

<div class="corners"><span class="tl">Pl. II</span><span class="tr"><span class="cap">The double pump</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tools">

Network accessline 409

<div class="fig" id="plate" tabindex="0" role="img" aria-label="Plate II: the human heart as a double pump">     <svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>   </div>

Network accessline 410

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 878

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 879

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 880

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 881

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 998

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 999

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1000

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/grid.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Folio Plate III: The Grid</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Folio Plate III: The Grid</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 453

<div class="corners"><span class="tl">Pl. III</span><span class="tr"><span class="cap">From water to lamp</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 454

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric model of a power grid: a water wheel and generator, two transformers, a three-phase line on pylons, and a small town. Up and down change demand, left and right cha

Network accessline 455

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 1031

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1032

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1033

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1034

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1151

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 1152

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1153

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/hashmap.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Folio Plate IV: The Hash Map</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Folio Plate IV: The Hash Map</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 478

<div class="corners"><span class="tl">Pl. IV</span><span class="tr"><span class="cap">The sorting office</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tool

Network accessline 479

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric sorting office for a hash map: a card file of keys, a hash press with bit windows, a dial, a carriage on a rail and eight bins. I files the next key, L looks one u

Network accessline 480

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 1060

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1061

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1062

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1063

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1180

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 1181

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1182

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`docs/heart.html`

Network accessline 3

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Folio Plate II: The Heart</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<title>Folio Plate II: The Heart</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 6

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 7

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 452

<div class="corners"><span class="tl">Pl. II</span><span class="tr"><span class="cap">The double pump</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tools">

Network accessline 453

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric bench of pumps, valves, bellows and tubes that circulates blood like the human heart. Up and down arrows change heart rate, square brackets change contractility, 1

Network accessline 454

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

Network accessline 1040

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1041

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1042

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 1043

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 1160

function loupe(o) {     // o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 1161

// o: { fig, svg, W, H, sceneId, mag, r }     const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";     const layer = document.createElementNS(NS, "svg");

Network accessline 1162

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

Network accessline 2006

const $ = (id) => document.getElementById(id);   const r0 = (v) => Math.round(v);   const svgNS = "http://www.w3.org/2000/svg";

Network accessline 2008

const svgNS = "http://www.w3.org/2000/svg";

`docs/index.html`

Network accessline 4

<title>Folio</title> <meta name="description" content="A Claude Code skill that explains an idea the way a museum explains a specimen: an invented instrument, drawn live, mounted with a key and wall texts."> <link rel="preconnect" href="htt

Network accessline 5

<meta name="description" content="A Claude Code skill that explains an idea the way a museum explains a specimen: an invented instrument, drawn live, mounted with a key and wall texts."> <link rel="preconnect" href="https://fonts.googleapis

Network accessline 6

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 7

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 8

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 528

<a class="mark" href="#">Folio</a>     <nav aria-label="Sections">       <a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://gi

Network accessline 529

<nav aria-label="Sections">       <a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://github.com/Ramakm/folio-anatomy">GitHub</

Network accessline 530

<a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://github.com/Ramakm/folio-anatomy">GitHub</a><button class="theme" type="butt

Network accessline 658

<pre class="block">npx skills add Ramakm/folio-anatomy -g -a claude-code</pre>       <p>Or clone it yourself, into your own skills or into a single project:</p> <pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.cla

Network accessline 659

<p>Or clone it yourself, into your own skills or into a single project:</p> <pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio <span class="c"># or, for one project</span>

Network accessline 660

<pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio

Network accessline 661

<span class="c"># or, for one project</span> git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio</pre>       <p>Then type <code>/folio</code> and name an idea. The repository also holds every plate's source, the drawi

Network accessline 662

git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio</pre>

Network accessline 678

<footer class="colophon">   <span class="mark">Folio</span>   <p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/

Network accessline 679

<span class="mark">Folio</span>   <p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/wheresryan22/anatomy">Anatom

Network accessline 680

<p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/wheresryan22/anatomy">Anatomy</a> by Ryan; all of Folio was wr

Network accessline 681

<span class="links"><a href="https://www.instagram.com/techwith.ram/">Instagram @techwith.ram</a><a href="https://x.com/techwith_ram">X @techwith_ram</a><a href="https://github.com/Ramakm/folio-anatomy">GitHub</a></span>

`examples/attention/model.js`

Executable scriptline 1
```
Executable file
```

`examples/attention/page.html`

Network accessline 1

<title>Folio Plate I: Attention</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 2

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 3

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 4

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 34

<div class="corners"><span class="tl">Pl. I</span><span class="tr"><span class="cap">The assay of a query</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 35

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric assay bench that computes attention. Use the arrow keys to move the query, 1 to 4 to change head, square brackets for temperature, M for the mask.">         <svg i

Network accessline 36

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

`examples/attention/page.js`

Executable scriptline 1
```
Executable file
```

`examples/attention/plate.js`

Executable scriptline 1
```
Executable file
```

`examples/grid/model.js`

Executable scriptline 1
```
Executable file
```

`examples/grid/page.html`

Network accessline 1

<title>Folio Plate III: The Grid</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 2

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 3

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 4

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 58

<div class="corners"><span class="tl">Pl. III</span><span class="tr"><span class="cap">From water to lamp</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Too

Network accessline 59

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric model of a power grid: a water wheel and generator, two transformers, a three-phase line on pylons, and a small town. Up and down change demand, left and right cha

Network accessline 60

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

`examples/grid/page.js`

Executable scriptline 1
```
Executable file
```

`examples/grid/plate.js`

Executable scriptline 1
```
Executable file
```

`examples/hashmap/model.js`

Executable scriptline 1
```
Executable file
```

`examples/hashmap/page.html`

Network accessline 1

<title>Folio Plate IV: The Hash Map</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 2

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 3

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 4

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 83

<div class="corners"><span class="tl">Pl. IV</span><span class="tr"><span class="cap">The sorting office</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tool

Network accessline 84

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric sorting office for a hash map: a card file of keys, a hash press with bit windows, a dial, a carriage on a rail and eight bins. I files the next key, L looks one u

Network accessline 85

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

`examples/hashmap/page.js`

Executable scriptline 1
```
Executable file
```

`examples/hashmap/plate.js`

Executable scriptline 1
```
Executable file
```

`examples/heart/model.js`

Executable scriptline 1
```
Executable file
```

`examples/heart/page.html`

Network accessline 1

<title>Folio Plate II: The Heart</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 2

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 3

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 4

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 57

<div class="corners"><span class="tl">Pl. II</span><span class="tr"><span class="cap">The double pump</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tools">

Network accessline 58

<div class="fig" id="plate" tabindex="0" role="img" aria-label="An isometric bench of pumps, valves, bellows and tubes that circulates blood like the human heart. Up and down arrows change heart rate, square brackets change contractility, 1

Network accessline 59

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

`examples/heart/page.js`

Executable scriptline 1
```
Executable file
```

Network accessline 5

const $ = (id) => document.getElementById(id);   const r0 = (v) => Math.round(v);   const svgNS = "http://www.w3.org/2000/svg";

Network accessline 7

const svgNS = "http://www.w3.org/2000/svg";

`examples/heart/plate.js`

Executable scriptline 1
```
Executable file
```

`kit/folio-kit.js`

Executable scriptline 1
```
Executable file
```

`kit/folio-live.js`

Executable scriptline 1
```
Executable file
```

Network accessline 192

const clone = o.svg.cloneNode(true);           clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 193

clone.setAttribute("width", w); clone.setAttribute("height", h);           clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");           const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 194

clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");

Network accessline 195

const style = document.createElementNS("http://www.w3.org/2000/svg", "style");

Network accessline 314

const NS = "http://www.w3.org/2000/svg", id = o.sceneId + "-loupe";

`kit/folio-theme.js`

Executable scriptline 1
```
Executable file
```

`package.json`

Executable scriptline 1
```
Executable file
```

`scripts/build-site.mjs`

Executable scriptline 1
```
Executable file
```

`scripts/build.mjs`

Executable scriptline 1
```
Executable file
```

`scripts/capture.mjs`

Executable scriptline 1
```
Executable file
```

`scripts/new-plate.mjs`

Executable scriptline 1
```
Executable file
```

`site/embed.html`

Network accessline 1

<title>{{TITLE}}</title> <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 2

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 3

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 4

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 13

<div class="corners"><span class="tl">{{TL}}</span><span class="tr"><span class="cap">{{CAP}}</span><span class="views" id="views" role="group" aria-label="View"></span><span class="tools" id="tools" role="group" aria-label="Tools"><button

Network accessline 14

<div class="fig" id="plate" tabindex="0" role="img" aria-label="{{ARIA}}">     <svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>   </div>

Network accessline 15

<svg id="plate-svg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"></svg>

`site/index.html`

Network accessline 1

<title>Folio</title> <meta name="description" content="A Claude Code skill that explains an idea the way a museum explains a specimen: an invented instrument, drawn live, mounted with a key and wall texts."> <link rel="preconnect" href="htt

Network accessline 2

<meta name="description" content="A Claude Code skill that explains an idea the way a museum explains a specimen: an invented instrument, drawn live, mounted with a key and wall texts."> <link rel="preconnect" href="https://fonts.googleapis

Network accessline 3

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 4

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Network accessline 5

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&di

Network accessline 133

<a class="mark" href="#">Folio</a>     <nav aria-label="Sections">       <a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://gi

Network accessline 134

<nav aria-label="Sections">       <a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://github.com/Ramakm/folio-anatomy">GitHub</

Network accessline 135

<a href="#plates">Plates</a><a class="opt" href="#views">Views</a><a class="opt" href="#method">Method</a><a href="#install">Install</a><a class="opt" href="https://github.com/Ramakm/folio-anatomy">GitHub</a><button class="theme" type="butt

Network accessline 263

<pre class="block">npx skills add Ramakm/folio-anatomy -g -a claude-code</pre>       <p>Or clone it yourself, into your own skills or into a single project:</p> <pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.cla

Network accessline 264

<p>Or clone it yourself, into your own skills or into a single project:</p> <pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio <span class="c"># or, for one project</span>

Network accessline 265

<pre class="block">git clone https://github.com/Ramakm/folio-anatomy.git ~/.claude/skills/folio

Network accessline 266

<span class="c"># or, for one project</span> git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio</pre>       <p>Then type <code>/folio</code> and name an idea. The repository also holds every plate's source, the drawi

Network accessline 267

git clone https://github.com/Ramakm/folio-anatomy.git .claude/skills/folio</pre>

Network accessline 283

<footer class="colophon">   <span class="mark">Folio</span>   <p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/

Network accessline 284

<span class="mark">Folio</span>   <p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/wheresryan22/anatomy">Anatom

Network accessline 285

<p>Made by Ramakrushna Mohapatra. Every plate drawn by Claude with the Folio skill. Set in Bodoni Moda, Source Serif 4 and IBM Plex Mono. Inspired by <a href="https://github.com/wheresryan22/anatomy">Anatomy</a> by Ryan; all of Folio was wr

Network accessline 286

<span class="links"><a href="https://www.instagram.com/techwith.ram/">Instagram @techwith.ram</a><a href="https://x.com/techwith_ram">X @techwith_ram</a><a href="https://github.com/Ramakm/folio-anatomy">GitHub</a></span>

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 43 facts

Network access in prose of documentationREADME.md:13Low confidence
Network access in prose of documentationREADME.md:14Low confidence
Network access in prose of documentationREADME.md:39Low confidence
Network access in code of documentationREADME.md:105Low confidence
Network access in code of documentationREADME.md:106Low confidence
Network access in code of documentationREADME.md:108Low confidence
Network access in code of documentationREADME.md:109Low confidence
Network access in prose of documentationREADME.md:215Low confidence
Network access in prose of documentationREADME.md:225Low confidence
Network access in code of the SKILL.mdSKILL.md:668High confidence
Network access in code of the SKILL.mdSKILL.md:669High confidence
Network access in code of the SKILL.mdSKILL.md:670High confidence
Network access in code of the SKILL.mdSKILL.md:671High confidence
Network access in code of the SKILL.mdSKILL.md:788High confidence
Network access in code of the SKILL.mdSKILL.md:789High confidence
Network access in code of the SKILL.mdSKILL.md:790High confidence
Executable script in a comment of a file that runsexamples/attention/model.js:1Low confidence
Executable script in a comment of a file that runsexamples/attention/page.js:1Low confidence
Executable script in a comment of a file that runsexamples/attention/plate.js:1Low confidence
Executable script in a comment of a file that runsexamples/grid/model.js:1Low confidence
Executable script in a comment of a file that runsexamples/grid/page.js:1Low confidence
Executable script in a comment of a file that runsexamples/grid/plate.js:1Low confidence
Executable script in a comment of a file that runsexamples/hashmap/model.js:1Low confidence
Executable script in a comment of a file that runsexamples/hashmap/page.js:1Low confidence
Executable script in a comment of a file that runsexamples/hashmap/plate.js:1Low confidence
Executable script in a comment of a file that runsexamples/heart/model.js:1Low confidence
Executable script in a comment of a file that runsexamples/heart/page.js:1Low confidence
Network access in code of a file that runsexamples/heart/page.js:5High confidence
Network access in code of a file that runsexamples/heart/page.js:7High confidence
Executable script in a comment of a file that runsexamples/heart/plate.js:1Low confidence
Executable script in a comment of a file that runskit/folio-kit.js:1Low confidence
Executable script in a comment of a file that runskit/folio-live.js:1Low confidence
Network access in code of a file that runskit/folio-live.js:192High confidence
Network access in code of a file that runskit/folio-live.js:193High confidence
Network access in code of a file that runskit/folio-live.js:194High confidence
Network access in code of a file that runskit/folio-live.js:195High confidence
Network access in code of a file that runskit/folio-live.js:314High confidence
Executable script in a comment of a file that runskit/folio-theme.js:1Low confidence
Executable script in code of a file that runspackage.json:1High confidence
Executable script in a comment of a file that runsscripts/build-site.mjs:1Low confidence
Executable script in a comment of a file that runsscripts/build.mjs:1Low confidence
Executable script in a comment of a file that runsscripts/capture.mjs:1Low confidence
Executable script in a comment of a file that runsscripts/new-plate.mjs:1Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Compatible	Standard SKILL.md SKILL.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Ramakm/folio-anatomy

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

folio

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

README.md

SKILL.md

docs/attention.html

docs/embed-attention.html

docs/embed-grid.html

docs/embed-hashmap.html

docs/embed-heart.html

docs/grid.html

docs/hashmap.html

docs/heart.html

docs/index.html

examples/attention/model.js

examples/attention/page.html

examples/attention/page.js

examples/attention/plate.js

examples/grid/model.js

examples/grid/page.html

examples/grid/page.js

examples/grid/plate.js

examples/hashmap/model.js

examples/hashmap/page.html

examples/hashmap/page.js

examples/hashmap/plate.js

examples/heart/model.js

examples/heart/page.html

examples/heart/page.js

examples/heart/plate.js

kit/folio-kit.js

kit/folio-live.js

kit/folio-theme.js

package.json

scripts/build-site.mjs

scripts/build.mjs

scripts/capture.mjs

scripts/new-plate.mjs

site/embed.html

site/index.html

How the signals fit together

Works with

You might also use

notque/vexjoy-agent

foyzulkarim/skills

IdoCohen560/claude-unity-game-studio

Appllama/appllama-skills

haidrrrry/claude-remotion-skill

aerovato/container

`SKILL.md`

`README.md`

`SKILL.md`

`docs/attention.html`

`docs/embed-attention.html`

`docs/embed-grid.html`

`docs/embed-hashmap.html`

`docs/embed-heart.html`

`docs/grid.html`

`docs/hashmap.html`

`docs/heart.html`

`docs/index.html`

`examples/attention/model.js`

`examples/attention/page.html`

`examples/attention/page.js`

`examples/attention/plate.js`

`examples/grid/model.js`

`examples/grid/page.html`

`examples/grid/page.js`

`examples/grid/plate.js`

`examples/hashmap/model.js`

`examples/hashmap/page.html`

`examples/hashmap/page.js`

`examples/hashmap/plate.js`

`examples/heart/model.js`

`examples/heart/page.html`

`examples/heart/page.js`

`examples/heart/plate.js`

`kit/folio-kit.js`

`kit/folio-live.js`

`kit/folio-theme.js`

`package.json`

`scripts/build-site.mjs`

`scripts/build.mjs`

`scripts/capture.mjs`

`scripts/new-plate.mjs`

`site/embed.html`

`site/index.html`