mdecks: a prompt for your agent, and SKILL.md
A "Copy prompt for your agent" button in the header copies SKILL.md as a prompt: one line pointing to the hosted file (for agents that can install skills) and then the skill itself, without its frontmatter, so it works in any agent, including one that can't open links. Until SKILL.md loads, or if it can't, the button copies a one-line prompt that points to it. SKILL.md teaches the format, the #d= link recipe in Python and Node, the #md= fallback for agents without code, and how to hand the link over. How it works gets a fourth card, and the README points to both. Two agents given only the copied prompt made working links, one compressed with code and one percent-encoded by hand. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CYHXFvWMCs1GUmRmpySqQ6
This commit is contained in:
teahubxyzandClaude Opus 5.5 committed
1 parent
a02baa4aa6
commit
1ba3b854b8
4 files changed
+84
-1
No files matched your search
@@ -29,6 +29,8 @@ Everything runs in the page. Nothing is stored, nothing is sent anywhere, no acc
|
||||
|
||||
## Links, for agents and scripts
|
||||
|
||||
The quickest way to hand this to an agent is the page's **Copy prompt for your agent** button. It copies [SKILL.md](SKILL.md) as a prompt: paste it into Claude, ChatGPT, Cursor or any other agent, ask for a deck, and the agent answers with a link that opens here. An agent that can install skills can keep SKILL.md as the `mdeck` skill instead.
|
||||
|
||||
A link is the page's address, then `#d=`, then the deck's text (UTF-8) compressed with raw deflate and written in base64url without padding. Anything that can't compress can use `#md=` and the text percent-encoded instead; those links are just longer. The page opens either kind.
|
||||
|
||||
In Python:
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
name: mdeck
|
||||
description: Make slide decks as .mdeck links, plain-text slides that open at mdecks.yolopreneur.lol with the whole deck inside the link and nothing uploaded. Use when asked for slides, a deck or a presentation to open in a browser or share as a link.
|
||||
---
|
||||
|
||||
# Slide decks as .mdeck links
|
||||
|
||||
.mdeck (https://mdecks.yolopreneur.lol/) turns plain text into slides. The deck travels inside its link, after the `#`, so nothing is uploaded and opening it needs no account. Whoever opens the link can present it with the arrow keys, edit it, or copy it as one HTML file.
|
||||
|
||||
## Write the deck
|
||||
|
||||
- `# Title` starts a slide's title, and `## Subtitle` goes under it.
|
||||
- `- point` (or `* point`) is a bullet.
|
||||
- Any other line is a paragraph.
|
||||
- `---` on its own line starts a new slide.
|
||||
- Inline: `**bold**`, `*italic*`, `` `code` `` and `[text](https://...)`.
|
||||
|
||||
Nothing else renders: no images, tables, nested lists or code blocks. Aim for a title and three to six short bullets per slide. A slide that runs long shrinks its text and, past 70%, is cut in two with its title repeated, so nothing overflows, but your own `---` breaks will fall in better places.
|
||||
|
||||
For example:
|
||||
|
||||
```
|
||||
# Q3 in one minute
|
||||
## What shipped and what slipped
|
||||
|
||||
- Shipped: the new editor
|
||||
- Slipped: PDF export, now due in November
|
||||
- Next: a link for every deck
|
||||
|
||||
---
|
||||
# Thanks
|
||||
|
||||
Questions welcome.
|
||||
```
|
||||
|
||||
## Make the link
|
||||
|
||||
The link is `https://mdecks.yolopreneur.lol/#d=` followed by the deck's UTF-8 text compressed with raw deflate (no zlib header) and encoded as base64url without padding. In Python:
|
||||
|
||||
```python
|
||||
import base64, zlib
|
||||
|
||||
c = zlib.compressobj(9, zlib.DEFLATED, -15)
|
||||
data = c.compress(deck.encode()) + c.flush()
|
||||
link = "https://mdecks.yolopreneur.lol/#d=" + base64.urlsafe_b64encode(data).decode().rstrip("=")
|
||||
```
|
||||
|
||||
In Node: `"https://mdecks.yolopreneur.lol/#d=" + require("zlib").deflateRawSync(deck).toString("base64url")`.
|
||||
|
||||
If you can't run code, use `https://mdecks.yolopreneur.lol/#md=` followed by the text percent-encoded, the way `encodeURIComponent` does it. Those links are longer but work the same.
|
||||
|
||||
## Hand it over
|
||||
|
||||
Reply with the link, and keep the deck's text so you can revise it: every change makes a new link. Someone who wants a file can open the link and press **Copy deck as HTML** for one self-contained HTML file.
|
||||
@@ -500,6 +500,26 @@
|
||||
else makeLink(text).then(share);
|
||||
});
|
||||
|
||||
// The prompt for an agent is SKILL.md, fetched once, so pasting it teaches any agent to make these links;
|
||||
// it also points to the file, for agents that can install it as a skill. Until SKILL.md arrives (or if
|
||||
// it can't), the prompt only points to it.
|
||||
var SKILL_URL = "https://mdecks.yolopreneur.lol/SKILL.md";
|
||||
var agentBtn = document.getElementById("agent");
|
||||
var agentPrompt = "Read " + SKILL_URL + " and follow it to make slide decks for me as .mdeck links.";
|
||||
|
||||
fetch("SKILL.md").then(function (r) {
|
||||
if (!r.ok) throw new Error("SKILL.md: " + r.status);
|
||||
return r.text();
|
||||
}).then(function (skill) {
|
||||
agentPrompt = "Use .mdeck to make slide decks for me. These instructions are also at " + SKILL_URL +
|
||||
"; if you can install skills, save that file as a skill named mdeck so you have it next time.\n\n" +
|
||||
skill.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n+/, "");
|
||||
}).catch(function () { /* keep the prompt that points to SKILL.md */ });
|
||||
|
||||
agentBtn.addEventListener("click", function () {
|
||||
copyText(agentPrompt, agentBtn, "Prompt copied!");
|
||||
});
|
||||
|
||||
// Build the self-contained export deck: the slides as shown, cuts and all.
|
||||
function buildExport() {
|
||||
var slidesHtml = deck.map(function (s) {
|
||||
|
||||
@@ -250,7 +250,7 @@
|
||||
}
|
||||
.steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.step {
|
||||
@@ -379,12 +379,14 @@
|
||||
header h1 { font-size: 1.4rem; letter-spacing: -0.01em; }
|
||||
header .promise { margin: 0; color: var(--ink-dim); font-size: 0.9rem; }
|
||||
header .early-note { margin: 0 0 0 auto; font-size: 0.75rem; color: var(--ink-dim); }
|
||||
header .agent { padding: 6px 12px; font-size: 0.8rem; white-space: nowrap; }
|
||||
main { flex: none; height: calc(100svh - 60px); min-height: 460px; }
|
||||
main section { padding: 0; max-width: none; margin: 0; }
|
||||
.hint code { white-space: nowrap; }
|
||||
@media (max-width: 820px) {
|
||||
header { padding: 10px 16px; }
|
||||
header .early-note { margin: 0; flex: 1 1 150px; }
|
||||
header .agent { order: 1; }
|
||||
main { height: auto; min-height: 0; grid-template-rows: auto auto; padding: 12px 16px 16px; }
|
||||
}
|
||||
</style>
|
||||
@@ -393,6 +395,7 @@
|
||||
<header>
|
||||
<h1><span class="dot">.</span>mdeck</h1>
|
||||
<p class="promise">Plain text in, slides out.</p>
|
||||
<button id="agent" class="agent">Copy prompt for your agent</button>
|
||||
<p class="early-note">Opens a public GitHub issue. No email, no payment.</p>
|
||||
<a class="cta" href="https://teahub.xyz/teahubxyz/time/issues/new?template=early-access.yml&title=Early+access%3A+.mdeck&venture=mdecks&plan=Pro" target="_blank" rel="noopener">Get early access</a>
|
||||
</header>
|
||||
@@ -435,6 +438,10 @@
|
||||
<h3>Take the file with you</h3>
|
||||
<p>One button copies the deck as a single self-contained HTML file. Open it anywhere, present it offline, email it, done. Or copy a link with the whole deck inside it.</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<h3>Or ask your agent</h3>
|
||||
<p>Press <b>Copy prompt for your agent</b> at the top, paste it into Claude, ChatGPT, Cursor or any other agent, and ask for a deck. It answers with a link that opens here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in new issue
Block a user