Menú
Non-negotiable performance rules for rendering a 5k-50k node constellation graph in three.js — one draw call for nodes, one for edges, GPU picking, selective bloom, and label culling. Violating any of them costs the frame rate.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Crear, abrir y mantener un JSON canónico conversacional en VisualSpecs, con componentes y relaciones que se actualizan mientras avanza una charla, sin modificar el código ni la configuración de la aplicación. Usar cuando el usuario quiera visualizar una idea viva en VisualSpecs o pida levantar la app apuntando a un canónico.
Before asking the user to choose between two or more options that differ in anything visual, spatial, or UI/layout-related, first build a quick self-contained HTML artifact that shows the CURRENT state and each option side by side (with a selector to switch), to scale and with honest metrics, so the user decides with the picture in front of them. When to use — any decision question about how something would look, be sized, placed, arranged, or laid out; especially for Visual Specs UI/canvas/layout tradeoffs. Load right before an AskUserQuestion whose options a person could see.
Start, verify, and open the local Visual Specs application from whatever CodebaseConstellation checkout the caller is working in. Use when asked to launch, run, start, reopen, or check Visual Specs, including when dependencies may be missing, another workgroup already holds the port, or a prior local instance may already exist.
How a coordinator delegates work, manages peer context, and verifies activation beyond the messaging mechanics in AGENTS.md.
Git, issue-branch, PR and version mechanics for Visual Specs repositories. Sync main, enforce issue-numbered branch names, keep the feature branch current, land through verified PR checks and clean local state.
Canonical Visual Specs delivery workflow. Confirm the change, assign one owner per artifact, use the constructive and adversarial gates, and land an issue-backed branch through a verified PR.
| name | constellation-render |
| description | Non-negotiable performance rules for rendering a 5k-50k node constellation graph in three.js — one draw call for nodes, one for edges, GPU picking, selective bloom, and label culling. Violating any of them costs the frame rate. |
| when_to_use | Load before writing or reviewing any three.js render code, picking logic, postprocessing pass, or label system in this project. |
Target: 5k-50k nodes, 60fps, static hosting, no backend.
THREE.Points with a ShaderMaterial and instanced attributes. Never a Mesh per node.THREE.LineSegments over a merged BufferGeometry.Two draw calls total for the graph. Anything that adds a third needs a reason.
GPU picking: render node ids encoded as color into an offscreen render target, read back the pixel under the cursor. Raycasting against 50k points kills the frame.
SelectiveBloomEffect from pmndrs postprocessing. This is where the reference image's look comes from — bloom applied selectively to nodes, not to the whole scene.
Hard cap ~200 visible labels, rendered with troika-three-text (SDF atlas). Choose which by PageRank × camera distance, then resolve screen-space collisions. Label count is the axis that gets underestimated; the cap is not a suggestion.
Positions and colors arrive as Float32Array binary blobs and never as SQL rows or JSON. 50k nodes = 600 KB of xyz. 200k edges = 1.6 MB. Parsing 50k JSON rows costs more than the entire render.
Tooltip metadata is fetched per-node through wa-sqlite doing HTTP range requests against the remote .sqlite. Only the hovered node's row travels.
Blockers · Dependents · PageRank · Depth · Betweenness · K-core · Eigen — all read from the metrics table, none computed in the browser.