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.
npx claudepluginhub jtemps/playtime-plugin --plugin playtimeThis skill uses the workspace's default tool permissions.
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.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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)