Building with AI
playhtml keeps a single guide for coding agents at playhtml.fun/docs/llms.txt. It covers the APIs, which kind of data to use, and the mistakes that silently break sync. Pick whichever way of handing it over fits your tool.
Paste one line
Section titled “Paste one line”Works with any agent or chat that can open links, including Claude, ChatGPT, Codex, Cursor, and Copilot. Start your request with:
Read https://playhtml.fun/docs/llms.txt first, then help me build a playhtml element that...
If your assistant can’t browse, open llms.txt yourself and paste its contents into the chat instead.
Install it as a skill
Section titled “Install it as a skill”To have your agent pick up the guide on its own every time, install it as a skill. One command works across Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and other agents that support skills:
npx skills add spencerc99/playhtml --skill building-playhtml-elements
The installer asks which agents to set up. After that, just describe the element you want.
Your idea leads
Section titled “Your idea leads”The guide tells agents that you design the experience. They build only what you describe, ask before deciding how an interaction works, and match your page’s existing style with a lighter touch, rather than adding a look of their own. Ideas they have come back as suggestions, not extra code. If you’d rather they fill in the gaps, tell them to use their judgment.
The more of these you describe up front, the fewer questions you’ll get:
- What people see and do with the element, and what happens in response.
- Whether everyone shares the same state, or each person has their own.
- Whether the state should persist across reloads, last only while people are online, or fire once as an event (like a confetti burst).
For example: “A draggable sticky note in vanilla HTML. Anyone can drag it and everyone sees it move. Its position should stay after reload.”
For the hand-written setup, see getting started.