Stats
Actions
Tags
From playtime
HTML/CSS template and style guide for generating print-ready Playtime packets. Single-page or multi-page, color or B&W, US Letter or A4. Use this when rendering the final HTML file.
How this skill is triggered — by the user, by Claude, or both
Slash command
/playtime:playtime-printThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Every packet ends as a **single self-contained HTML file** the parent opens in a browser and Cmd+P's. No external fonts, no CDNs, no JS frameworks — just inline CSS and inline SVG. Should still print in 10 years.
Every packet ends as a single self-contained HTML file the parent opens in a browser and Cmd+P's. No external fonts, no CDNs, no JS frameworks — just inline CSS and inline SVG. Should still print in 10 years.
~/.playtime/packets/YYYY-MM-DD/<kid-id>.html
See references/template.html for the complete starter HTML. It includes:
<head> with:
<meta charset="utf-8"><meta name="viewport"> (so it looks decent on screen too)<title> (kid name + date)<style> with:
@page { size: letter; margin: 0.5in } (or A4)@media print rules: hide screen-only chrome, ensure backgrounds print<body> with the Playtime layout<body class="packet color-color"> <!-- or color-bw -->
<header class="hello">
<div class="greeting">Good morning, Maya!</div>
<div class="meta">Tuesday · April 28 · ☀️</div>
</header>
<main class="activity">
<h1 class="title">Maya's Megalodon Mystery</h1>
<p class="instruction">Connect the dots from 1 to 20. Then color in the megalodon!</p>
<div class="content">
<!-- inline SVG, the activity content -->
</div>
<aside class="extras">
<!-- 1-2 small bonus elements: a joke, a today's word, a tiny prompt -->
</aside>
</main>
<footer class="grownup">
<details>
<summary>For grown-ups</summary>
<p><strong>Materials:</strong> printer, crayons.</p>
<p><strong>What this builds:</strong> number sequencing 1-20, fine motor, ocean vocabulary.</p>
<p><strong>Framework note:</strong> [if any]</p>
<p><strong>Extension:</strong> when she's done, ask her to tell you the megalodon's story. Write down her words.</p>
</details>
<p class="fineprint">✨ Brought to you by Playtime · dailyplaytime.com · 2026-04-28 · maya · activity #c01-2026-04-28</p>
</footer>
</body>
font-size: 28-32px, font-weight: 700font-size: 18-20pxfont-size: 14-16px for early readers, 12-14px for olderfont-size: 10px, color: #777Use a single warm-bright accent color per packet + black text. Pick from a small palette to keep things charming:
#F4A261#E76F51#2A9D8F#A23E48#588157#3D348B#E85D75Pick the accent based on theme/kid. Use it sparingly — title underline, accent lines, accent illustrations. Don't make it a full-color free-for-all.
If defaultColorMode: "bw" (or user override):
hatching, stipple, dotted, dashed to differentiate elements that color would have differentiated<svg> — never <img> (for offline + scalability)viewBox for scaling@media print hides screen-only details (anchor cursors, etc.)-webkit-print-color-adjust: exact; print-color-adjust: exact; to force background colors to printpage-break-inside: avoid on .activity and .extras so they don't split mid-block<details> summary expansion arrow in print — print the parent footer expandedDate format: "Tuesday · April 28 · ☀️" with a weather emoji guess (sunny default; rainy on rainy days if known).
Greeting line uses kid's nickname if set, full name otherwise. Examples:
Before saving, verify:
id attributes or filenamesWhen generating SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H"> (set W/H to match your design)<text> (no images of text)<g> for related elementsfilter, mask, complex effects unless needed — keep printablereferences/template.html — the full HTML starterreferences/color-vs-bw.md — color mode design tipsreferences/svg-snippets.md — common decorative motifs as inline SVG (waves, leaves, stars, sun, clouds, frame borders)npx claudepluginhub jtemps/playtime-plugin --plugin playtimeProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.