Skip to main content
skillsmp

Menu

plz-3d-explain

Builds a single-file HTML study page that teaches a technical concept, mechanism, or system structure with a 3D model. Scrolling the text on the left switches a three.js axonometric model on the right, chapter by chapter, and a button in each chapter plays out cause and effect on the model (where code is blocked, how a request flows, when a resource is created and destroyed). The page is written in the user's language; screen text is built in for en, ko, ja, zh-CN. Use when someone wants to learn or understand a concept visually, or knows nothing about a topic and wants interactive study material. Not for static architecture or sequence diagrams (archify), data charts, Blender modeling, or product landing pages and app UI. Triggers: "explain X in 3D", "3D explainer", "show how X works as a 3D model"; "3D로 공부하게 만들어줘", "개념을 3D로 보여줘", "원리를 모형으로 보여줘", "3D 그래픽으로 설명해줘"; "3Dで解説して", "仕組みを3Dモデルで見せて"; "用3D讲解这个概念", "做成3D模型演示原理".

Aller à l'installationVérifier les fichiers

Informations de source

Dépôt
codekongdev/plz
Dernière activité de la source
4 novembre 2026 à 08:24
Langue détectée de SKILL.md
anglais
Étoiles
2
Forks
1

plz-3d-explain: scroll-synced 3D study

Builds a single-file HTML study page that teaches a concept with a scroll-synced axonometric three.js model and per-chapter action buttons.

Examples

Author demo: AI agent code-sandbox explainer (English and Korean pages linked from the post and README).

Uses

Use to learn or teach a technical concept, mechanism, or system structure visually. Not for product landing UI, Blender modeling, static architecture/sequence diagrams, or data charts.

Prerequisites

An agent that can edit HTML. Opening the finished page needs network for three.js r170 and fonts from CDN. Verification uses python3 http.server plus browser automation (e.g. Playwright).

How to use

Name the concept and page language → skill fact-checks when needed, designs 5–10 chapters (scene/action/gist) → copies assets/template.html and fills TEXT + SCENES only → verify with local server, __explainer hooks, desktop and phone viewports → deliver the absolute path and open command.

Limitations

Generated HTML includes scripts—review before serving. Built-in UI languages: en, ko, ja, zh-CN; other languages need UI_OVERRIDES. Mark unchecked facts. When working inside a repository, prefer saving the study page to a working-notes folder that git check-ignore confirms is not committed; if none exists (or you are outside a repo), use the preferences path or ask the user. SkillsMP did not execute this skill.

Sources

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers
14 fichiers

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
nameplz-3d-explain
descriptionBuilds a single-file HTML study page that teaches a technical concept, mechanism, or system structure with a 3D model. Scrolling the text on the left switches a three.js axonometric model on the right, chapter by chapter, and a button in each chapter plays out cause and effect on the model (where code is blocked, how a request flows, when a resource is created and destroyed). The page is written in the user's language; screen text is built in for en, ko, ja, zh-CN. Use when someone wants to learn or understand a concept visually, or knows nothing about a topic and wants interactive study material. Not for static architecture or sequence diagrams (archify), data charts, Blender modeling, or product landing pages and app UI. Triggers: "explain X in 3D", "3D explainer", "show how X works as a 3D model"; "3D로 공부하게 만들어줘", "개념을 3D로 보여줘", "원리를 모형으로 보여줘", "3D 그래픽으로 설명해줘"; "3Dで解説して", "仕組みを3Dモデルで見せて"; "用3D讲解这个概念", "做成3D模型演示原理".
Retour à la rechercheRetour à l’installation