Build an Animated Visual Explainer

Use a coding agent to create and publish an animated SVG explainer.

Introduction

30 Second Summary

A familiar topic can still be hard to explain with words or static slides. Movement can reveal the order of a process at a glance.

In this project, you will use the anatomy skill in a coding agent to turn a topic you understand into a single animated HTML explainer. You will direct five SVG scenes before sharing the finished page at a public URL.

What You'll Build

Your browser will play five animated scenes that guide a viewer through your topic from a single shareable page.

By the end of this project, you'll have:

  • A five-scene explainer that opens from one self-contained file. Each animated scene presents a distinct part of your topic.
  • A camera-directed sequence with closer views that make each scene easier to follow.
  • A public static page that you can open on your phone or share through a URL.
  • Secret Mission: An optional challenge to push your animated storytelling skills further.

Are there any prerequisites?

Bring a browser plus a coding agent that supports skills under your chosen plan. The anatomy skill itself is free.

Before We Start

Your animated explainer needs a local workspace where a coding agent can create the page without mixing it into your other files.

You will use Claude Code as that coding agent. This step also confirms that GitHub is ready for publishing later. It confirms that your browser can open the tools you need.

In this step, get ready to:
  • Install Claude Code on your computer.
  • Create a local folder for the animated explainer.
  • Confirm GitHub access in your browser.
Install Claude Code

Claude Code works from your terminal. A quick version check tells you whether it is already available.

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Terminal on macOS or PowerShell on Windows.
  • Press Enter to open the terminal.
  • Check whether Claude Code is installed by running this command:
claude --version

What does this command check?

The command asks Claude Code to print its installed version. A version number confirms that your terminal can find the coding agent.

✔️ I see a version number

Claude Code is ready. That removes the first setup hurdle before you create the project workspace.

ⓧ Command not found

Claude Code still needs to be installed. Choose your operating system below.

macOS

The installer can look idle because it prints no download progress. A quiet terminal during this download is expected.

  • Keep the terminal open until the installer completes.
  • Install Claude Code by running this command:
curl -fsSL https://claude.ai/install.sh | bash
What does this command do?

This downloads Anthropic's native installer. It runs the installer in your terminal.

Native installations update automatically in the background. Your coding agent stays current without a separate update routine.

  • Close the terminal after the installer reports completion.
  • Open a fresh terminal through system search.
  • Confirm the installation by running this command:
claude --version
What should you see?

A working installation prints a version number. This confirms that Claude Code is available from a fresh terminal session.

Windows

The installer can look idle because it prints no download progress. A quiet PowerShell window during this download is expected.

  • Keep PowerShell open until the installer completes.
  • Install Claude Code by running this command:
irm https://claude.ai/install.ps1 | iex
What does this command do?

This downloads Anthropic's native PowerShell installer. It runs the installer on Windows.

You do not need to run PowerShell as an administrator. Claude Code uses PowerShell for its shell tools when Git for Windows is unavailable.

  • Close PowerShell after the installer reports completion.
  • Open a fresh PowerShell window through system search.
  • Confirm the installation by running this command:
claude --version
What should you see?

A working installation prints a version number. This confirms that PowerShell can find Claude Code.

Claude Code still missing?

Open a new terminal if the version check still fails. A fresh session loads the path created by the installer.

If the command remains unavailable, help me fix my Claude Code installation.

Create the project workspace

Claude Code treats the folder where it starts as its working directory. Keeping the project in one named folder gives every generated file a predictable home.

macOS

  • Move to your Desktop by running this command:
cd ~/Desktop

What does this command do?

This moves your terminal session to the Desktop. The project folder you create next appears somewhere easy to find.

  • Create the animated-visual-explainer folder by running this command:
mkdir animated-visual-explainer

What does this command do?

This creates an empty folder for the project. Anatomy will place the explainer files inside this folder in a later step.

  • Confirm that the new folder exists by running this command:
ls

What should you see?

You should see animated-visual-explainer in the Desktop contents. This proves the workspace exists before Claude Code enters it.

  • Enter the folder and start Claude Code by running these commands:
cd animated-visual-explainer
claude

What do these commands do?

The first command moves your terminal into the project folder. The second command starts an interactive Claude Code session there.

Windows

  • Move to your Desktop by running this command:
cd ~/Desktop

What does this command do?

This moves your PowerShell session to the Desktop. The project folder you create next appears somewhere easy to find.

  • Create the animated-visual-explainer folder by running this command:
mkdir animated-visual-explainer

What does this command do?

This creates an empty folder for the project. Anatomy will place the explainer files inside this folder in a later step.

  • Confirm that the new folder exists by running this command:
ls

What should you see?

You should see animated-visual-explainer in the Desktop contents. This proves the workspace exists before Claude Code enters it.

  • Enter the folder and start Claude Code by running these commands:
cd animated-visual-explainer
claude

What do these commands do?

The first command moves PowerShell into the project folder. The second command starts an interactive Claude Code session there.

Check your Claude access

Claude Code requires a Pro, Max, Team, Enterprise, or Console account. The free Claude.ai plan does not include Claude Code access.

You can use an eligible account you already have. Claude Code opens your browser for authentication on the first launch.

  • Follow the browser prompts to sign in to your Claude account.
  • Return to the terminal after authentication finishes.
  • Confirm that the Claude Code prompt shows animated-visual-explainer as the working directory.

Sign-in did not complete?

Keep the terminal session open while you finish authentication in the browser. Return to that same session when the browser confirms access.

If the prompt does not appear, help me troubleshoot Claude Code sign-in.

Confirm GitHub access

The final explainer will be published from a GitHub repository. Checking account access now keeps the later deployment focused on the site.

✔️ I have a GitHub account

  • Open the GitHub sign-in page in your browser.
  • Sign in with your GitHub credentials.
  • Confirm that GitHub opens your signed-in home page.

Your successful sign-in confirms that the browser is ready. It also confirms that your publishing account is accessible.

ⓧ I need a GitHub account

  • Open the GitHub sign-up page in your browser.
  • Follow the prompts to create a personal account.
  • Verify the email address connected to the account.
  • Return to GitHub after verification.
  • Confirm that GitHub opens your signed-in home page.

Why verify your email?

GitHub requires a verified email address for basic tasks such as creating a repository. Completing verification now prepares the account for publishing.

Before the final check, do you expect Claude Code to show its command list inside your project session?

  • Switch back to the Claude Code session from earlier.
  • Check that the session responds by entering this command:
/help

What does this command prove?

The command displays the available Claude Code commands. A response confirms that the signed-in session is active.

You will see Claude Code's available commands. The prompt above the list shows its version. It also shows the current model. It shows animated-visual-explainer as the working directory.

Help command not responding?

Make sure you enter the command inside the running Claude Code session. A normal terminal prompt will treat it as a shell command.

If the session has closed, start Claude Code again from the animated-visual-explainer folder. You can also ask for help restoring the project session.

Your coding workspace is ready. Next, you will install the Anatomy skill and confirm that Claude Code can find it.

Install the Anatomy Skill

Your coding agent needs a reusable workflow before it can turn an idea into a visual explainer. The Anatomy repository packages that workflow as an Agent Skill.

This project uses Claude Code because Anatomy is written for that coding agent. You will install the GitHub repository for your user account.

In this step, get ready to:
  • Install Anatomy from its GitHub repository.
  • Reload the skills available in your current Claude Code session.
  • Confirm that Anatomy appears in the available-skills list.
Install Anatomy from GitHub

The repository contains the skill instructions in SKILL.md. It also includes the drawing kit that Claude Code uses when producing an explainer.

A global installation places Anatomy in ~/.claude/skills/anatomy. This makes the skill available across your Claude Code projects.

Claude Code may ask for permission before it runs the installer. This permission allows the command to download the repository into your personal skills folder.

  • Ask Claude Code to install Anatomy by pasting this prompt into the current session:
Run this command to install the Anatomy skill for my Claude Code user:

npx skills add wheresryan22/anatomy -g -a claude-code

What does this install command do?

  • The npx skills add command runs the skills installer.
  • The wheresryan22/anatomy value identifies the GitHub repository containing the skill.
  • The -g flag installs Anatomy for your user account.
  • The -a claude-code option targets Claude Code.
  • Approve the command if Claude Code shows a permission request.
  • Wait for Claude Code to return control to the prompt.

You will see an installation summary that names Anatomy as an installed skill. That is the first piece in place: Anatomy now lives in Claude Code's personal skills folder.

Installer did not finish?

Check that your connection can reach GitHub. The npx installer also needs a working Node.js environment.

Use the repository's installation guidance to diagnose your setup. Help me troubleshoot the Anatomy skill installation.

Reload and list the available skills

The repository now exists on disk. Reloading makes the current Claude Code session scan its skill directories again.

  • Refresh the current Claude Code session by entering this command at the prompt:
/reload-skills

What does this command do?

The /reload-skills command rescans the skill directories without restarting Claude Code. It reports how many skills are available after the scan.

Claude Code reports the number of available skills. It also reports whether the reload added or removed any skills.

Before you open the list, do you expect Anatomy to be available only in this project or across your Claude Code projects?

  • Open the available-skills list by entering this command at the Claude Code prompt:
/skills

What should this list show?

The /skills menu lists the skills available to Claude Code. The global installation should place anatomy in this list.

Great, the list now shows anatomy. Claude Code can use the skill across your projects because you installed it for your user account.

Anatomy missing from the list?

  • Check that the installation summary names Claude Code as the target agent.
  • Repeat the reload step directly above.

If Anatomy still does not appear, help me find why Claude Code cannot discover the skill.

Anatomy is installed. Next up, you will use /anatomy to create the first explainer file.

Generate Your Animated Explainer

Your coding agent now has the Anatomy skill ready. The next challenge is giving it enough direction to build the explainer you want.

A clear topic lets you check factual accuracy. A precise request keeps five animated SVG scenes inside one portable HTML file.

In this step, get ready to:
  • Choose a topic you understand well enough to verify.
  • Generate a self-contained HTML file with five animated SVG scenes.
  • Confirm that animated-explainer.html appears in your project folder.
Choose a topic you can verify

Anatomy can turn weak assumptions into convincing visuals. A familiar topic gives you a reliable baseline for checking each explanation.

  • Choose a topic you understand well enough to spot an incorrect claim: a topic you understand.

Why use a familiar topic?

The finished page needs to explain a real process accurately. Your own knowledge helps you catch a missing step or a misleading visual before you share the explainer.

Generate the self-contained file

The skill uses your message as its creative brief. Each output requirement gives Anatomy a clear constraint for the page it creates.

What should your request include?

  • The /anatomy command at the beginning.
  • Your chosen topic: a topic you understand.
  • Exactly five animated SVG scenes.
  • A single self-contained HTML file named animated-explainer.html.
  • Embedded CSS styling.
  • Embedded JavaScript animation logic.
  • Embedded SVG assets.

The coding agent may ask clarifying questions before it writes the file. A file-write permission can look broad, so only approve a write that targets the project folder from earlier.

This generation can take several minutes while the agent plans the scenes and builds the animation.

  • Switch back to the coding agent's chat panel from earlier.
  • Compose one message using every requirement in the callout above.
  • Submit the message to start generation.

If the agent pauses for more information, it needs a concrete detail before continuing.

  • Answer each clarification with a fact you can verify.
  • Review any file-writing request from the agent.
  • Approve the write when it targets the project folder from earlier.
  • Let the agent continue until it reports that the file is complete.

When the run finishes, you should see a completion message naming animated-explainer.html as the generated file.

Generation stopped before the file was written?

  • Check whether the agent is waiting for an answer or file permission.
  • Ask the agent to continue the same task if its response ended before creating animated-explainer.html.

Share the last visible part of the agent's response when you ask for help finishing an interrupted Anatomy generation.

Confirm the explainer was created

The first proof of success is a new file in the project folder. Opening it in the editor also confirms that the agent wrote a complete document instead of returning only a chat response.

Before you check, do you expect the generated file to appear beside the other items in your project folder?

  • Look in the project folder's file sidebar from earlier for animated-explainer.html.

You should see animated-explainer.html listed in the project folder. This confirms that the agent saved the explainer as a local file.

  • Select animated-explainer.html in the file sidebar to view its contents in the editor.

You should see HTML structure with embedded styling. You should also see animation logic plus SVG markup in the same document.

That is the key build step complete. Your five-scene explainer now lives in one file that can travel anywhere a static page can go.

✔️ Awesome, I've got everything!

Great. Keep animated-explainer.html saved in the project folder from earlier.

ⓧ I'd like to double check the full code

Your generated source reflects the topic you chose. Compare the file against these required outcomes:

  • The Anatomy skill remains available in the coding agent.
  • The project folder contains animated-explainer.html.
  • The file contains five animated SVG scenes about your selected topic.
  • The file contains its HTML structure internally.
  • The file contains its CSS styling internally.
  • The file contains its JavaScript logic internally.
  • The file contains its SVG assets internally.

Your animated explainer file is ready. Next up, you will open it in your browser and watch all five scenes play through.

Preview the Five Scenes

Your coding agent has created the first version of animated-explainer.html.

A saved file still needs a browser check before you can trust its animation. In this step, you will watch the explainer from beginning to end as your first-version baseline.

In this step, get ready to:
  • Open animated-explainer.html locally in a modern browser.
  • Watch all five animated SVG scenes in order.
  • Confirm the fifth scene completes in the first-version preview.
Open the explainer in your browser

A self-contained HTML file keeps every required asset inside one file. Your browser can run the explainer directly from your computer.

The option for revealing a file can be easy to miss because coding agents use different wording for it.

  • Return to the project folder already open in your coding agent.
  • Locate animated-explainer.html in the agent's file tree.
  • Right-click animated-explainer.html.
  • Select the menu option that reveals the file in Finder on macOS or File Explorer on Windows.
  • Double-click animated-explainer.html in the system file manager.

Your modern browser opens the local explainer. You will see scene 1 begin its animation.

Page Opens as Text?

  • Return to Finder or File Explorer.
  • Use your operating system's app chooser to select a modern browser for animated-explainer.html.

If the page still displays source code, help me open this HTML file as a webpage.

Watch the complete sequence

Your first uninterrupted viewing establishes the baseline for the explainer. Count each distinct scene as the sequence advances.

Before you replay it, do you expect the full sequence to reach scene 5 without stopping?

  • Reload the browser tab to restart the local preview from scene 1.
  • Let the animation play without switching tabs.
  • Count each new scene as the sequence advances.
  • Watch through the end of scene 5.

You will see five distinct scenes play in order. The sequence finishes after scene 5 has had time to animate.

Good work. Your first-version explainer now runs locally from scene 1 through scene 5.

Sequence Stops Before Scene 5?

  • Reload the browser tab to restart the sequence.
  • Confirm that the browser is displaying the same animated-explainer.html file from your open project folder.
  • Keep the browser tab active while the animation plays.

If the sequence still stops early, help me troubleshoot this five-scene HTML animation.

You now have a working baseline for all five scenes. Next, you will direct the camera so each scene focuses on the part that matters most.

Zoom In on Every Scene

Your first-version explainer already plays five animated SVG scenes in the browser. That preview gave you a baseline for how much of each scene the camera currently shows.

Wide framing can make the main action feel distant. Small labels can also become difficult to follow.

You will direct your coding agent to zoom in on scenes 1 through 5. Then you will reload the file to compare every scene with your first version.

In this step, get ready to:
  • Request closer camera framing for scenes 1 through 5.
  • Reload the updated animated-explainer.html file in your browser.
  • Compare each zoomed scene with the first-version preview.
Request closer framing for all five scenes

Camera framing controls how much of a scene fits within the visible area. A closer frame gives the main action more space on the screen.

  • Switch back to the coding agent from earlier.
  • Ask the agent to zoom the camera in for scenes 1 through 5 within the existing self-contained animated-explainer.html file.
  • Submit the request to start the update.
  • Keep the agent open until it reports that the file update is complete.

Good progress: your agent has now revised the camera framing across all five scenes.

Did the agent update the wrong file?

  • Check the agent response for the name of the file it edited.
  • Ask the agent to apply the camera changes to the existing animated-explainer.html file if it created a second file.
  • Confirm that the revised file remains a single self-contained page.

Help me check whether my coding agent updated the correct animated HTML file.

Reload the updated explainer

The existing browser tab still shows the version it last loaded. Reloading the page reads the updated file from your project folder.

Before you reload, which scenes do you expect to feel easier to read once the camera moves closer?

  • Switch back to the browser tab from earlier.
  • Click the browser's reload control to reload the page.
  • Watch the complete playback from scene 1 through scene 5.

You should see tighter camera framing in every scene. You should still see five distinct animated scenes play through.

Still seeing the first version?

  • Confirm that the browser tab is displaying animated-explainer.html from your open project folder.
  • Check the agent response for confirmation that it finished editing the same file.
  • Reload the browser page after the agent finishes the update.

Help me work out why my browser still shows the first version of my explainer.

Compare the five zoomed scenes

A useful zoom makes the main action easier to follow. The important parts of the explanation should remain visible inside the frame.

  • Compare scene 1's updated camera distance with the first-version preview you watched earlier.
  • Compare scene 2's updated camera distance with the first-version preview you watched earlier.
  • Compare scene 3's updated camera distance with the first-version preview you watched earlier.
  • Compare scene 4's updated camera distance with the first-version preview you watched earlier.
  • Compare scene 5's updated camera distance with the first-version preview you watched earlier.

Each scene's central subject should occupy more of the frame than it did in the first-version preview. The explainer should still play all five scenes in sequence.

You have turned a broad first pass into a closer scene-by-scene explainer.

All five scenes now have tighter framing. Next, you can focus on the scene that needs the clearest targeted revision.

Refine One Confusing Scene

Your explainer now uses tighter camera framing across all five scenes. Now you will refine the one scene that still feels unclear.

A broad revision can disturb scenes that already work. A scene-only request gives your coding agent a clear boundary.

In this step, get ready to:
  • Identify the one scene that needs another pass.
  • Describe one precise visual change for that scene.
  • Reload the explainer to confirm only the selected scene changed.
Choose the scene to refine

Clear feedback begins with one observable problem. Look for a difficult label, cramped spacing, or a confusing motion sequence.

  • Switch back to the browser preview from earlier.
  • Watch all five scenes once.
  • Replay the scene that feels least clear.
  • Record the selected scene number here: your selected scene number.
  • Record the exact problem here: the exact confusing detail.
  • Decide on one visual change that addresses the problem.
  • Record that change here: your targeted visual change.

Why keep the scope narrow?

One precise change makes the result easy to evaluate. It also gives the agent a clear boundary around the selected scene.

Send a scene-only request

A targeted request names the scene plus the visible problem. It also defines the exact refinement and protects the other four scenes.

What should your request include?

  • Scene target: your selected scene number.
  • Observed problem: the exact confusing detail.
  • Requested refinement: your targeted visual change.
  • Boundary: Keep the other four scenes unchanged.

Your coding agent may request permission before editing the file. That approval gives it access to update animated-explainer.html.

  • Return to the coding agent chat from earlier.
  • Send a scene-only request using the four parts above.
  • Approve access to animated-explainer.html if the agent requests file-edit permission.
  • Wait until the agent reports that the file update is complete.

Your focused request paid off. The targeted refinement is now written into animated-explainer.html.

Agent asking for more detail?

Give the agent the exact scene number from your notes. Describe one visible outcome that would make the scene clearer.

Keep the request limited to one change inside animated-explainer.html. Help me make my scene refinement more specific.

Reload and compare all five scenes

Reloading the local file runs the updated animation. This check reveals whether the edit stayed inside the selected scene.

Before you reload, which visible detail do you expect to change in scene your selected scene number?

  • Switch back to the browser tab from earlier.
  • Reload the preview using your browser's reload control.
  • Watch the selected scene through one full animation loop.

You should see your targeted visual change in scene your selected scene number. The change should address the exact confusing detail.

  • Replay all five scenes.
  • Compare each unselected scene with the previous zoomed version.

The other four scenes should keep the same content plus the same zoomed camera framing. This confirms the request produced a targeted refinement.

What should I see?

The animated-explainer.html file remains one self-contained HTML page with embedded CSS plus JavaScript.

All five animated SVG scenes keep their zoomed camera framing.

Your selected scene now has one targeted refinement. The other four scenes remain unchanged.

Did another scene change?

  • Return to the coding agent chat from earlier.
  • Send a correction that preserves the selected refinement while restoring the four unselected scenes.

Use the previous zoomed version as the reference state. Help me narrow the correction so only my selected scene changes.

Your final local explainer now communicates the topic scene by scene. Next, you will put it online for a phone-ready public preview.

Publish Your Static Page

Your five scenes now use tighter camera framing. The scene you refined also explains its idea more clearly.

The finished file still lives on your computer. GitHub Pages provides static hosting directly from a repository. This step gives your explainer a public HTTPS link for your phone.

In this step, get ready to:
  • Upload the final animated-explainer.html file to a public repository.
  • Publish the repository through GitHub Pages.
  • Verify the public HTTPS page on your phone.
Create a public GitHub repository

A repository gives GitHub Pages a source to publish. Its history also gives your finished explainer a permanent home.

Your work becomes public

Publishing can feel like a big switch. GitHub Pages makes the repository content publicly accessible.

Your final explainer belongs in this repository. Secrets or private notes do not belong in the published file.

  • Return to GitHub in the browser from earlier.
  • Click New repository from the create menu in the upper-right corner.
  • Use the Owner dropdown menu to select your personal account.
  • Enter animated-visual-explainer in the Repository name field.
  • Select Public from the Choose visibility dropdown menu.
  • Toggle Add README to On.
  • Click Create repository.

Good progress. Your explainer now has a public repository ready to receive the final file.

  • Click Add file above the repository file list.
  • Click Upload files.
  • Click choose your files.
  • Select animated-explainer.html from the local project folder already open in your coding agent.
  • Keep the default option that commits directly to the main branch.
  • Click Commit changes.

You should see animated-explainer.html beside README.md in the repository file list. That visible filename confirms the upload reached GitHub.

File missing from the repository?

  • Confirm that the uploaded filename is exactly animated-explainer.html.
  • Return to Upload files if the browser file picker was closed before the file finished loading.
  • Repeat the upload if the repository still shows only README.md.

Help me diagnose why my HTML file is missing from GitHub.

Publish with GitHub Pages

Your self-contained file already includes its styles and animation logic. GitHub Pages can serve it without a build process or application server.

Why publish from a branch?

Branch publishing turns the static files in a selected repository folder into a website. Every future commit to that source can trigger another publication.

This approach fits a self-contained HTML explainer because the browser already has everything it needs. The repository remains the source for the public page.

  • Click Settings under your repository name.
  • Click Pages in the Code, planning, and automation section of the sidebar.
  • Select Deploy from a branch under Source.
  • Select main from the branch dropdown menu.
  • Select the repository root from the folder dropdown menu.
  • Click Save.

The first publication can take up to 10 minutes. A quiet wait here is expected while GitHub prepares the site.

Before you open the deployment, predict whether all five scenes will behave exactly as they did in the local file.

  • Refresh the Pages settings after the publication link becomes available.
  • Click Visit site.
  • Type animated-explainer.html after the final slash in the browser address bar.
  • Press Enter.

You should see the explainer load from an address beginning with https://. All five animated scenes should play in the browser.

The zoomed camera framing should match your final local version. The targeted scene refinement should also remain visible.

  • Record the full public address here: your public HTTPS explainer URL.

Public page unavailable?

  • Allow up to 10 minutes for the first GitHub Pages publication.
  • Confirm that main remains selected as the publishing branch.
  • Confirm that animated-explainer.html appears in the repository root.

Help me troubleshoot my GitHub Pages deployment.

Test the live page on your phone

A phone test proves that the explainer is reachable beyond your computer. It also confirms that the animated scenes remain readable on a smaller screen.

  • Send your public HTTPS explainer URL to your phone using a message or email.

Before you tap the link, predict whether the public page will preserve the refined scene without changing the other four scenes.

  • Tap the public URL on your phone.
  • Watch all five animated scenes play through.
  • Check the targeted refinement in the scene you selected earlier.

You should see all five scenes animate from the public HTTPS page. The selected scene should retain its targeted refinement.

The other four scenes should match the final local version. This confirms that GitHub Pages published the intended file.

Page not loading on your phone?

  • Confirm that your phone has an active internet connection.
  • Open your public HTTPS explainer URL again from the message or email.
  • Reload the phone browser once if an older version of the page appears.

Help me troubleshoot the public explainer on my phone.

You made it. Your animated explainer now has a public HTTPS home that you can share as a portfolio piece.

Secret mission

Run a Viewer Comprehension Test

Your explainer works on your phone. Now put its message under pressure by asking a new viewer to watch the five scenes without any background. Their first summary reveals which scene deserves the next revision.

Clean Up Your Resources

Clean Up Your Resources

A self-contained HTML file has no ongoing cost by itself. Your coding agent and static hosting deployment follow the plans you selected for those services.

Decide whether to keep the explainer available, pause your local work, or remove the project resources entirely.

Resources you used:

  • Local animated-explainer.html file containing five animated SVG scenes.
  • GitHub-connected static hosting deployment serving the explainer through a public HTTPS URL.
  • Anatomy skill installation in your coding agent.

Keep everything running

No action is needed. Choose this if you want the public explainer to remain available.

  • Keep animated-explainer.html in the local project folder.
  • Leave the static hosting deployment active so the public URL keeps working.
  • Keep the Anatomy skill installed for future visual explainers.
  • Review your coding-agent plan and hosting plan for any ongoing charges.

Pause - I'll come back to this later

Pause your local work while keeping the explainer file and public page available for later.

  • Close the coding agent to end your current local session.
  • Keep animated-explainer.html in the local project folder.
  • Leave the static hosting deployment active if the public URL should remain available.
  • Review your selected service plans before leaving the deployment active for an extended period.

Delete - I don't want to use this again

Remove the published deployment, the local explainer file, and the installed skill. The hosting service and coding agent vary, so use each service's documented removal flow without deleting unrelated projects.

  • Return to the GitHub-connected static hosting deployment from earlier.
  • Delete the hosting project that serves animated-explainer.html by following the provider's documented project-removal flow.
  • Open the public HTTPS URL to confirm it no longer serves the explainer.
  • Remove animated-explainer.html from the local project folder using your file manager.
  • Confirm animated-explainer.html no longer appears in the local project folder.
  • Return to the coding agent's skill-management area from earlier.
  • Uninstall Anatomy by following the coding agent's documented skill-removal flow.
  • Check the available-skills list to confirm Anatomy is no longer listed.

Nice Work!

Nice Work!

You did it! You created a published visual explainer with five animated SVG scenes that anyone can open from a phone.

You've learned how to:

  • Install an agent skill from its repository. Use /anatomy to generate a self-contained HTML explainer with five animated scenes.
  • Improve the explainer's camera framing across all five scenes. Refine one confusing scene without changing the others.
  • Publish animated-explainer.html through a GitHub-connected static hosting service. Verify its public HTTPS URL on a phone.
  • Extend your work through an optional Secret Mission that pushes your visual explainer skills further.

Ready to quiz yourself?