Message State Playground
Pair an inspectable state machine with a phone chat preview to explore composing, sending, delivery, failure and retry of the same message. Save landscape cards, play a locally synthesized three-note memo and download local attachment copies. Everything stays on the page.
Live demo
Interactive demoWrite and send a message, select failure or offline to explore retry, and add a card, memo or local attachment from the side panel.
Open preview in a new windowMake this effect yours
Includes Skill instructions, a Python generator, an HTML template, design notes, and an offline preview. Requires Python 3.10+ with no additional dependencies. Supports custom text and colors, keyboard controls, and reduced motion.
Download SKILL.md only- Download and unzip
Keep the
message-state-playground/folder. ItsSKILL.mdfile is the Skill entry point, and scripts/ contains the generator, templates/ the HTML template, and references/ the design notes. Open preview.html directly in your browser. - Give it to your AI coding assistant
Add the folder to your project and ask your assistant to read SKILL.md. If your tool supports Skills, follow its installation method.
- Describe the result you want
Build an interactive chat-state experiment with normal, fail-once and offline scenarios, original-message retry and a visible event trace.
