How do I install the Shine skill?

Run npx skillmds@latest add enjalot/shine in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Shine safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shine?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shine free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

enjalot (@enjalot) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shine by enjalot — Agent Skill

Name: Shine
Author: enjalot

Shine

Create a self-contained interactive technical explanation (single HTML file with D3 v7, no build tools) inspired by Distill.pub. Use when the user wants to author, draft, or scaffold an explainer, interactive article, or visual essay about a technical concept. Invoked as `$shine` or `$shine <topic>`.

enjalot 0629e38 2.0 KB Updated Sep 17, 2026

File contents

Shine — Create an Interactive Explanation

Use this skill to start a new moonshine explanation. The user invokes it as $shine or $shine <topic> (anything after $shine is the starting topic; treat an empty topic as "start from scratch").

Workflow

Load the moonshine skill first. Read ../moonshine/SKILL.md and follow its full workflow — story discovery is mandatory and comes before any code.
Reference files live next to the moonshine skill:
- ../moonshine/ARTICLE.md — single-file HTML scaffold, CSS foundation, layout patterns, series structure.
- ../moonshine/VISUALS.md — D3 v7 visualization patterns, interaction, rendering decisions, iteration loop.
Output location. Write the project to ~/.agent/moonshine/<kebab-case-project-name>/ as a self-contained index.html plus an optional data/ directory. Vanilla JS + D3 v7 only. No build tools, no frameworks.
Story discovery is the gate. Do not skip to code. Ask the user about concept, audience, key insight, and progression of understanding, then checkpoint with "Here's what I think we're building..." before scaffolding.
Iterate. Start with prose and static figures; add interaction only where it genuinely helps the reader.

Notes

This skill is the single shine entry point in every harness; Claude Code surfaces it as /moonshine:shine.
For the structured Vite + React + Velite project flavor (multi-file content, markdown directives, React figures, in-place editing, authorship feedback), use $still instead. When the user hasn't picked a substrate, SKILL.md § "Two Substrates" makes still the default.

---name: shinedescription: Create a self-contained interactive technical explanation (single HTML file with D3 v7, no build tools) inspired by Distill.pub. Use when the user wants to author, draft, or scaffold an explainer, interactive article, or visual essay about a technical concept. Invoked as `$shine` or `$shine <topic>`.---# Shine — Create an Interactive ExplanationUse this skill to start a new moonshine explanation. The user invokes it as `$shine` or `$shine <topic>` (anything after `$shine` is the starting topic; treat an empty topic as "start from scratch").## Workflow1. **Load the moonshine skill first.** Read `../moonshine/SKILL.md` and follow its full workflow — story discovery is mandatory and comes before any code.2. **Reference files** live next to the moonshine skill: - `../moonshine/ARTICLE.md` — single-file HTML scaffold, CSS foundation, layout patterns, series structure. - `../moonshine/VISUALS.md` — D3 v7 visualization patterns, interaction, rendering decisions, iteration loop.3. **Output location.** Write the project to `~/.agent/moonshine/<kebab-case-project-name>/` as a self-contained `index.html` plus an optional `data/` directory. Vanilla JS + D3 v7 only. No build tools, no frameworks.4. **Story discovery is the gate.** Do not skip to code. Ask the user about concept, audience, key insight, and progression of understanding, then checkpoint with "Here's what I think we're building..." before scaffolding.5. **Iterate.** Start with prose and static figures; add interaction only where it genuinely helps the reader.## Notes- This skill is the single shine entry point in every harness; Claude Code surfaces it as `/moonshine:shine`.- For the structured **Vite + React + Velite** project flavor (multi-file content, markdown directives, React figures, in-place editing, authorship feedback), use `$still` instead. When the user hasn't picked a substrate, `SKILL.md` § "Two Substrates" makes still the default.

Frequently asked questions