Interactive HTML Demo Skill | Marina Current
MarinaCurrent
DEPTH 071M
BACK TO SKILLS

MARINA CURRENT ORIGINAL

Interactive HTML Demo

Turn a linear explanation into a portable experience where every click reveals a visible consequence.

TRY THE STARTERVIEW SOURCE
SKILL.mdPUBLIC CONTRACT
name: interactive-html-demo

job: build portable interactive HTML
model: state before styling
fallback: retry, jump, reset
boundary: label every simulation
proof: render and click the full path
PROVENANCE
Marina Current Original
LICENSE
MIT
RELEASE
1.0.0
FORMAT
Skill folder plus single-file starter

A document describes the path. A demo shows it working.

Visible state

An action changes the interface, not just the narration.

Room-safe recovery

Retry, jump and reset controls keep a live presentation moving.

Honest simulation

Prototype behavior stays visibly separate from production capability.

RUN THE ARTIFACT

Test the actual starter.

This is the actual single-file asset included in the Skill. Click through it here or open it in a clean browser tab.

OPEN FULL SIZE
single-file-starter.htmlOFFLINE CORE

Define the state before styling.

The reusable unit is not a color palette. It is an ordered path from action to consequence and recovery.

  1. Ready
  2. Action
  3. Consequence
  4. Feedback
  5. Retry
  6. Success
  7. Next decision

Six decisions before CSS.

Freezing this contract prevents a polished page from becoming an empty interaction.

Goal
Name the one thing the audience should understand or decide.
Page map
Give every page or section one job in the argument.
Actions
List what people can click, tap, type, filter or navigate.
State changes
Specify what becomes visibly different after each action.
Fallbacks
Plan a recovery path for time, network and click-path failure.
Truth boundary
Mark every real, simulated, illustrative or unverified capability.

What ships in the folder.

The instructions stay short. Conditional detail lives beside them, and deterministic checks stay executable.

INSPECT THE REPOSITORY
interactive-html-demo/
├── SKILL.md                workflow and boundaries
├── agents/openai.yaml       interface metadata
├── assets/
│   └── single-file-starter.html
├── references/
│   └── acceptance-checklist.md
├── scripts/
│   └── validate_interactive_html.mjs
├── PROVENANCE.md
└── RELEASE.md

INSTALL AND INVOKE

Start local. Package wider later.

OpenAI documents standalone Skills for local and repository-scoped use. Plugins are the preferred distribution layer when a reusable Skill should be broadly installable.

OPENAI SKILLS DOCUMENTATION

Ask the installer

After the repository becomes public, give Codex this request:

Use $skill-installer to install interactive-html-demo from https://github.com/Marina-builds/headfirst-skills.

Install for your user

Codex reads personal Skills from $HOME/.agents/skills.

git clone https://github.com/Marina-builds/headfirst-skills.git
mkdir -p "$HOME/.agents/skills"
cp -R headfirst-skills/skills/interactive-html-demo "$HOME/.agents/skills/"

Invoke it explicitly with $interactive-html-demo, or let Codex match the Skill description.

Evidence before release.

The package is small enough to inspect and strict enough to catch structural omissions before a browser review.

15
static checks passed
3
responsive browser sizes
0
warnings and console errors

Known limits

  • The starter is a presentation shell, not a general application framework.
  • The static validator does not replace rendered browser review.
  • Fullscreen depends on browser permission and a user gesture.
  • The example flow is simulated and does not call a live backend.

Source, license and release evidence live together.

Use it. Inspect it. Change it with the boundary intact.

READ THE STORYVIEW SOURCEALL SKILLS