3D Web Experiences
madebyaris/advance-minimax-m3-cursor-rules
Builds 3D web scenes with Three.js and React Three Fiber, with attention to art direction, a performance budget, mobile behavior and fallbacks.
Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow)…
Install Code Map Visualization
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pproenca/dot-skills code-map-visualization --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/.experimental/code-map-visualization .claude/skills/code-map-visualization && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .claude/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualizationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pproenca/dot-skills code-map-visualization --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/.experimental/code-map-visualization .agents/skills/code-map-visualization && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .agents/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pproenca/dot-skills code-map-visualization --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/.experimental/code-map-visualization .cursor/skills/code-map-visualization && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .cursor/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pproenca/dot-skills.git --path skills/.experimental/code-map-visualization--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pproenca/dot-skills code-map-visualization --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/.experimental/code-map-visualization .gemini/skills/code-map-visualization && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .gemini/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pproenca/dot-skills code-map-visualizationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/.experimental/code-map-visualization .github/skills/code-map-visualization && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .github/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pproenca/dot-skills --skill code-map-visualization -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pproenca/dot-skills code-map-visualization --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pproenca/dot-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/.experimental/code-map-visualization .opencode/skills/code-map-visualization && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "code-map-visualization" agent skill from https://github.com/pproenca/dot-skills/tree/master/skills/.experimental/code-map-visualization into .opencode/skills/code-map-visualization/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "code-map-visualization", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
code-map-visualization- GitHub stars
- 214
- Token cost
- ~3.2k tokens
- SKILL.md length
- 948 words
- Files
- 52 (incl. references, assets)
- Skills in repo
- 182
- Repo updated
- First seen
- Licence
- MIT
At a glance
Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow)…
- Works in 9 steps: Visual Encoding & Perceptual Channels… → Color & Perceptual Color Scales (CRITICAL) → GPU Render Pipeline — Canvas2D + WebGL… → …
- Even when the user does not say visualisation — if the work involves drawing
- SKILL.md covers When to Apply, A note on scope, Rule Categories by Priority and Quick Reference, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Code Map Visualization is an agent skill from pproenca/dot-skills. Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow), drawing tens of thousands of cells on Canvas2D + WebGL/deck.gl inside a 16ms frame budget, placing and decluttering labels, GPU or spatial-index picking, camera animation and level-of-detail crossfades, and keyboard plus screen-reader accessibility for the canvas. Sits on top of geohash-spatial-code-maps, which owns the…
Its SKILL.md is about 3.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 54 other files, including reference files and assets (for example `AGENTS.md`, `assets/templates/_template.md` and `metadata.json`).
It sits in Game Development, covering Accessibility and 3D graphics and WebGL. The repository describes itself as: A collection of AI agent skills following the Agent Skills open format. The licence is MIT.
When your agent uses it
- Even when the user does not say visualisation — if the work involves drawing
- Making navigable a code map
- Spatial heatmap
- Large cell/point layer on the web
Example prompts
- “visualisation”
- “/code-map-visualization”
Workflow steps
9 steps, taken from the step headings in SKILL.md.
- Visual Encoding & Perceptual Channels (CRITICAL)
- Color & Perceptual Color Scales (CRITICAL)
- GPU Render Pipeline — Canvas2D + WebGL (HIGH)
- Render Performance & Frame Budget (HIGH)
- Labels & Text Rendering (MEDIUM-HIGH)
- Interaction, Picking & Camera (MEDIUM-HIGH)
- Animation & Transitions (MEDIUM)
- Accessibility & Inclusive Rendering (MEDIUM)
- Nature- & Cell-Inspired Layout & Rendering (MEDIUM)
What it can do on your machine
Read from SKILL.md and the folder at commit cf93c57. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Code Map Visualization loads about 3.2k tokens when it runs, and up to ~24k if it reads all its reference files. Until then it costs about 234 tokens; SKILL.md has 948 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pproenca/dot-skills at commit cf93c57, republished under its MIT licence (© pproenca). 948 words, ~3,234 tokens.
Download SKILL.mdSave it as
.claude/skills/code-map-visualization/SKILL.md (or your agent's skills folder). This skill also uses 51 other files; get the full folder from GitHub.- name
- code-map-visualization
- description
- Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow), drawing tens of thousands of cells on Canvas2D + WebGL/deck.gl inside a 16ms frame budget, placing and decluttering labels, GPU or spatial-index picking, camera animation and level-of-detail crossfades, and keyboard plus screen-reader accessibility for the canvas. Sits on top of geohash-spatial-code-maps, which owns the geohash encoding, projection, tiling, and navigation math. Also covers nature-inspired rendering — Voronoi, circle packing, phyllotaxis, metaball hulls, edge bundling. Trigger even when the user does not say "visualisation" — if the work involves drawing, colouring, labelling, animating, or making navigable a code map, spatial heatmap, or large cell/point layer on the web, this is the skill.
Code Map Visualization Best Practices
How to render and visually navigate a codebase that has been projected and geohashed into a 2D map — making it honest, fast, legible, interactive, animated, and accessible. This is the rendering and perception craft on top of the spatial structure: it draws on decades of information-visualisation, cartography, computer-graphics, and nature-/biology-inspired layout knowledge so a code map reads correctly and runs at interactive rates. Contains 47 rules across 9 categories, prioritised by impact.
When to Apply
Reference these guidelines when:
- Deciding what code attribute to put on which visual channel (position, size, colour) and which colour scale tells the truth
- Drawing tens of thousands to millions of cells on the web with Canvas2D, WebGL, or deck.gl, and keeping the render loop inside the frame budget
- Placing and decluttering region/file labels, and rendering legible text over a busy map
- Wiring up interaction — hover, picking, selection, a camera/view-state model, deep links, keyboard control
- Animating camera moves, level-of-detail transitions, and data updates without disorienting the viewer
- Making the canvas accessible to color-vision-deficient, motion-sensitive, keyboard-only, and screen-reader users
A note on scope
This skill is the rendering and perception layer. The companion skill geohash-spatial-code-maps owns the spatial math — geohash encoding, the code→plane projection, bbox/covering-set queries, tiling, and the precision↔zoom navigation model. Rules here cross-link into that skill (e.g. map-deterministic-projection, nav-level-of-detail-aggregation) rather than re-deriving it. Examples target TypeScript with Canvas2D + WebGL/deck.gl and d3-scale/d3-color; the perceptual reasoning generalises to any rendering stack.
Rule Categories by Priority
| Priority | Category | Impact | Prefix | Rules |
|---|---|---|---|---|
| 1 | Visual Encoding & Perceptual Channels | CRITICAL | encode- | 6 |
| 2 | Color & Perceptual Color Scales | CRITICAL | color- | 5 |
| 3 | GPU Render Pipeline (Canvas2D + WebGL) | HIGH | gpu- | 6 |
| 4 | Render Performance & Frame Budget | HIGH | perf- | 5 |
| 5 | Labels & Text Rendering | MEDIUM-HIGH | text- | 5 |
| 6 | Interaction, Picking & Camera | MEDIUM-HIGH | interact- | 5 |
| 7 | Animation & Transitions | MEDIUM | anim- | 4 |
| 8 | Accessibility & Inclusive Rendering | MEDIUM | access- | 4 |
| 9 | Nature- & Cell-Inspired Layout & Rendering | MEDIUM | bio- | 7 |
Quick Reference
1. Visual Encoding & Perceptual Channels (CRITICAL)
encode-rank-channels-by-perceptual-accuracy— Put the decision metric on position/length, not hueencode-let-projection-own-position— The geohash projection owns x/y; don't re-layoutencode-size-by-area-not-radius— Map value to area; take the square root for radiusencode-separate-categorical-from-quantitative— Hue for category, ordered channels for magnitudeencode-redundant-encoding-for-key-signals— Double-encode the few signals that must never be missedencode-maximize-data-ink-drop-chartjunk— Strip shadows, bevels, heavy grids that fight the data
2. Color & Perceptual Color Scales (CRITICAL)
color-perceptually-uniform-sequential-ramp— Viridis/OKLCH, never rainbow/jetcolor-match-scale-type-to-data— Sequential vs diverging vs categorical, matched to the datacolor-design-for-color-vision-deficiency— CVD-safe palettes, verified by simulationcolor-limit-categorical-hues— Cap at ~8–12 hues; bucket the long tailcolor-control-contrast-against-basemap— Keep cells legible on light or dark backgrounds
3. GPU Render Pipeline — Canvas2D + WebGL (HIGH)
gpu-layer-canvas2d-over-webgl— Bulk cells in GL, crisp labels/overlays in Canvas2Dgpu-instance-cells-not-per-quad-draw— One instanced draw call, not one per cellgpu-batch-to-cut-draw-calls-and-state-changes— Group by program/texture to avoid pipeline flushesgpu-pack-attributes-into-typed-arrays— A reusable Float32Array, zero per-frame allocationgpu-atlas-tiles-and-glyphs— One atlas bound once, addressed by UV offsetgpu-size-canvas-to-devicepixelratio— Size the backing store to DPR for crisp, non-overdrawn output
4. Render Performance & Frame Budget (HIGH)
perf-render-in-a-single-raf-loop— Coalesce input into one redraw per frameperf-redraw-only-dirty-regions— Repaint the overlay, not the static cell layerperf-debounce-viewport-recompute— Throttle the covering-set recompute; draw every frameperf-offload-to-worker-and-offscreencanvas— Heavy projection/packing off the main threadperf-bound-the-tile-cache— LRU-cap the tile cache; free GPU buffers on eviction
5. Labels & Text Rendering (MEDIUM-HIGH)
text-place-and-declutter-labels-greedily— Greedy collision placement by prioritytext-show-labels-by-level-of-detail— Domain labels low-zoom, file labels only when bigtext-render-glyphs-on-canvas2d-not-per-glyph-textures— Native fillText, not GL glyph uploadstext-add-halo-for-legibility— A halo keeps labels readable over any filltext-anchor-region-labels-at-centroid— Pole of inaccessibility, not the bbox centre
Show full SKILL.md (371 more words)Show less
6. Interaction, Picking & Camera (MEDIUM-HIGH)
interact-pick-with-gpu-color-id-or-spatial-index— O(1)/O(log n) picking, not a linear scaninteract-keep-hover-feedback-under-one-frame— Instant overlay highlight, async detailsinteract-model-the-camera-not-the-dom— One view-state object as the source of truthinteract-sync-view-state-to-the-url— Deep-linkable, shareable viewsinteract-support-keyboard-pan-zoom-and-focus— Arrow and +/- keys drive the camera
7. Animation & Transitions (MEDIUM)
anim-ease-camera-transitions-not-jumps— Ease centre and zoom so the eye can followanim-crossfade-between-lod-levels— Dissolve aggregates into points, don't popanim-preserve-object-constancy-on-data-update— Key by geohash; animate only real changesanim-keep-transitions-interruptible-and-budgeted— Cancel and retarget in-flight tweens
8. Accessibility & Inclusive Rendering (MEDIUM)
access-encode-redundantly-never-color-alone— Pair colour with shape or label (WCAG 1.4.1)access-honor-prefers-reduced-motion— Collapse animation for motion-sensitive usersaccess-make-the-map-keyboard-operable— Focusable, focus-visible, no keyboard trapaccess-provide-a-text-alternative-for-the-canvas— A synced DOM/ARIA outline for screen readers
9. Nature- & Cell-Inspired Layout & Rendering (MEDIUM)
A situational toolbox for rendering the map organically; two of these were invented for software visualisation.
bio-voronoi-regions-for-space-filling-tessellation— Gapless Voronoi cells seeded by projected pointsbio-relax-weights-for-even-cell-areas— Lloyd/CVT on weights; keep seed positions fixedbio-circle-packing-for-nested-counts— Packed circles for hierarchy and countsbio-phyllotaxis-packing-for-even-point-spread— Golden-angle spiral for dense, even fillsbio-metaball-hulls-for-region-membranes— Marching-squares organic region outlinesbio-edge-bundling-for-dependency-overlays— Holten bundling vs a straight-line hairballbio-flow-fields-for-animated-dependency-load— Physarum/boids flow when motion encodes load
How to Use
Read individual reference files for detailed explanations, code examples, and "when NOT to apply" guidance:
- Section definitions — Category structure and impact levels
- Rule template — Template for adding new rules
Rules cross-link via [[other-rule-slug]]; follow them when a related pattern is referenced. Cross-links to enc-, prec-, dec-, qry-, nbr-, idx-, map-, and nav- rules point into the companion geohash-spatial-code-maps skill — read them there for the spatial math.
To build a renderer end to end, the spine is: decide the encoding (category 1) → choose colour (category 2) → stand up the GPU pipeline (category 3) → hold the frame budget (category 4) → add labels, interaction, animation, and accessibility (categories 5–8); reach for organic, cell-based rendering — Voronoi regions, packing, membranes, edge bundling — when it suits the map (category 9). The upstream projection and tiling come from geohash-spatial-code-maps.
Reference Files
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |
| AGENTS.md | Auto-built TOC navigation |
Related Skills
geohash-spatial-code-maps— The spatial layer this renders: geohash encoding, the code→plane projection, tiling, and the precision↔zoom navigation modelcomputer-science-algorithms— The spatial-index, sorting, and complexity primitives behind fast picking, declutter, and the render loop
© pproenca, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 51 other files (references, assets) in skills/.experimental/code-map-visualization of pproenca/dot-skills.
- SKILL.md
- AGENTS.md
- assets/templates/_template.md
- metadata.json
- references/_sections.md
- references/access-encode-redundantly-never-color-alone.md
- references/access-honor-prefers-reduced-motion.md
- references/access-make-the-map-keyboard-operable.md
- references/access-provide-a-text-alternative-for-the-canvas.md
- references/anim-crossfade-between-lod-levels.md
- references/anim-ease-camera-transitions-not-jumps.md
- references/anim-keep-transitions-interruptible-and-budgeted.md
- references/anim-preserve-object-constancy-on-data-update.md
- references/bio-circle-packing-for-nested-counts.md
- references/bio-edge-bundling-for-dependency-overlays.md
- references/bio-flow-fields-for-animated-dependency-load.md
- references/bio-metaball-hulls-for-region-membranes.md
- references/bio-phyllotaxis-packing-for-even-point-spread.md
- … and 34 more
Open the folder on GitHubat commit cf93c57
Compare with similar skills
Code Map Visualization next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Code Map Visualization this skillpproenca/dot-skills | 214 | — | ~3.2k | Automated safety check: Pass | MIT | |
| 3D Web Experiencesmadebyaris/advance-minimax-m3-cursor-rules | 126 | — | ~3k | Automated safety check: Pass | MIT | |
| Liquid Metal Borderboraoztunc/skills | 393 | 2 repos | ~3.4k | Automated safety check: Pass | Apache-2.0 | |
| Better Designmarvkr/better-design | 252 | — | ~1.2k | Automated safety check: Pass | MIT | |
| 3D Asset Productioncalesthio/generative-media-skills | 191 | — | ~9.7k | Automated safety check: Pass | MIT | |
| Oma Designfirst-fluke/oh-my-agent | 1.3k | — | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Liquid Metal Border
boraoztunc/skills
Add and tune animated liquid-metal WebGL borders with the React metal-fx package.
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
3D Asset Production
calesthio/generative-media-skills
A skill your agent uses to turn generated, captured, scanned, or modeled 3D output into production-ready standalone assets for DCC, real-time engine, web, or interchange delivery.
Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
Explorer Interface Brief
mohitagw15856/pm-claude-skills
A skill your agent uses when asked to design the interface for an interactive 3D explorer, plan a UI for exploring a 3D model of a topic, or write an image-model prompt for a 3D learning app mock-up.
More from pproenca/dot-skills
All 182 skills in this repoAudio Voice Recovery
pproenca/dot-skills
Audio forensics and voice recovery guidelines for CSI-level audio analysis.
Codemod React Pipeline
pproenca/dot-skills
Guided, scripted pipeline for running JSX/TSX/React codemods safely across large legacy codebases.
Dev Rfc
pproenca/dot-skills
Create well-structured RFCs and technical proposals for software projects.
Dx Harness
pproenca/dot-skills
Developer-experience friction auditing and fixing — slow onboarding, repeated manual setup steps, missing bootstrap/reset/seed scripts, undiscoverable conventions.
Language Spec Author
pproenca/dot-skills
Turn a rough idea for a language into a complete, implementable specification — a DSL, query, config/data, template, or protocol language — by interviewing the author dimension by dimension until…
Python Pep Author
pproenca/dot-skills
Drafting Python Enhancement Proposals (PEPs) — proposing a Python language feature, a standard library change, an interoperability standard, or an informational/process document for the Python…
Related
Categories
Questions about Code Map Visualization
What does Code Map Visualization do?
Rendering and perception layer for codebase-as-geohash-map visualisations — choosing what to encode on colour/size/position, picking perceptually honest colour scales (viridis/OKLCH, not rainbow)…. Code Map Visualization is an agent skill from pproenca/dot-skills.gl inside a 16ms frame budget, placing and decluttering labels, GPU or spatial-index picking, camera animation and level-of-detail crossfades, and keyboard plus screen-reader accessibility for the canvas.
When should I use Code Map Visualization?
Code Map Visualization fits situations like: even when the user does not say visualisation — if the work involves drawing; making navigable a code map; spatial heatmap; large cell/point layer on the web.
How do I install Code Map Visualization in Claude Code?
Run `npx skills add pproenca/dot-skills --skill code-map-visualization -a claude-code`. Or copy the skill folder (skills/.experimental/code-map-visualization in pproenca/dot-skills) into .claude/skills/code-map-visualization in your project. Claude Code loads it when a task matches its description.
How do I install Code Map Visualization in Codex?
Run `npx skills add pproenca/dot-skills --skill code-map-visualization -a codex`. Or copy the skill folder (skills/.experimental/code-map-visualization in pproenca/dot-skills) into .agents/skills/code-map-visualization in your project. Codex loads it when a task matches its description.
Can I use Code Map Visualization in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pproenca/dot-skills --skill code-map-visualization -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code-map-visualization, .gemini/skills/code-map-visualization, .github/skills/code-map-visualization and .opencode/skills/code-map-visualization in your project.
What does Code Map Visualization need to run?
SKILL.md names no scripts, command-line tools or credentials: Code Map Visualization is instructions for the agent only.
Does Code Map Visualization access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Code Map Visualization safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Code Map Visualization use?
Code Map Visualization is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Code Map Visualization use?
About 3.2k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 21k tokens, read only when the agent opens those files.
What are the alternatives to Code Map Visualization?
Skills that share tags, products or a category with Code Map Visualization: 3D Web Experiences (madebyaris/advance-minimax-m3-cursor-rules, 126 stars), Liquid Metal Border (boraoztunc/skills, 393 stars), Better Design (marvkr/better-design, 252 stars) and 3D Asset Production (calesthio/generative-media-skills, 191 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Code Map Visualization?
pproenca (a GitHub user) maintains it in pproenca/dot-skills, which has 214 GitHub stars. The repository holds 182 skills in this directory. The repository was last updated on August 15, 2026.
Source: pproenca/dot-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.