npm - @telepath-computer/television - Versions diffs - 0.1.177 → 0.1.179 - Mend

@telepath-computer/television 0.1.177 → 0.1.179

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/canonical/v1/components.js +25 -7
package/dist/canonical/v1/styles.css +17 -1
package/dist/cli.cjs +1187 -392
package/dist/onboarding/README.md +35 -0
package/dist/onboarding/business-ops/about.html +150 -0
package/dist/onboarding/business-ops/retention-vs-releases.html +572 -0
package/dist/onboarding/business-ops/revenue-vs-goals.html +621 -0
package/dist/onboarding/onboarding-screens.json +167 -0
package/dist/onboarding/productivity/about.html +149 -0
package/dist/onboarding/productivity/company-todos/index.html +121 -0
package/dist/onboarding/productivity/company-todos/task.css +205 -0
package/dist/onboarding/productivity/company-todos/task.js +307 -0
package/dist/onboarding/productivity/meeting-prep.html +440 -0
package/dist/onboarding/productivity/priorities-today.html +409 -0
package/dist/onboarding/productivity/todays-calendar/calendar.css +1 -0
package/dist/onboarding/productivity/todays-calendar/calendar.js +716 -0
package/dist/onboarding/productivity/todays-calendar/index.html +52 -0
package/dist/onboarding/research/about.html +152 -0
package/dist/onboarding/research/draft-blog-post.md +30 -0
package/dist/onboarding/research/open-model-research.html +542 -0
package/dist/onboarding/research/todays-news.html +503 -0
package/dist/onboarding/{television-onboarding → tv-guide/welcome}/index.html +5 -5
package/dist/skills/television/SKILL.md +44 -0
package/dist/skills/tv-tasks/SKILL.md +241 -0
package/dist/skills/tv-tasks/task.css +205 -0
package/dist/skills/tv-tasks/task.js +307 -0
package/dist/views/markdown/index.html +1 -1
package/dist/web/assets/calendar-DToAnkzj.png +0 -0
package/dist/web/assets/main-5017mprd.css +1 -0
package/dist/web/assets/main-C-OjKUzX.js +865 -0
package/dist/web/assets/markdown-DdDrJuVK.png +0 -0
package/dist/web/assets/table-oeG9uAN1.png +0 -0
package/dist/web/assets/tasks-D4xqXFPl.png +0 -0
package/dist/web/index.html +2 -2
package/package.json +1 -1
package/dist/web/assets/main-BSAIRhnY.js +0 -768
package/dist/web/assets/main-o9Z-XUYA.css +0 -1
/package/dist/onboarding/{television-onboarding → tv-guide/welcome}/assets/television.svg +0 -0

package/dist/onboarding/research/todays-news.html ADDED Viewed

@@ -0,0 +1,503 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Today&#39;s AI News</title>
+<link rel="stylesheet" href="/canonical/v1/styles.css">
+<script type="module" src="/canonical/v1/components.js"></script>
+<style>
+/* Shared base for onboarding artifacts ([[../index.md]]): document padding
+   and the centered content shell. Typography, text color, and background
+   are the canonical stylesheet's — nothing in this set restates or pins
+   them, so artifacts follow the active theme ([[../index.md#^respect-theme]]). */
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: var(--space-32, 32px) var(--space-32, 32px) var(--space-64, 64px);
+}
+.shell {
+  max-width: 720px;
+  margin: 0 auto;
+  display: grid;
+  /* Pin the single column to the container so a wide child (a data table)
+     scrolls inside its own .table-wrap instead of stretching the track and
+     overflowing the card. */
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-20, 20px);
+}
+/* Card-density headings ([[../index.md]]): document-scale h1 is oversized
+   inside a TV card. */
+h1 {
+  margin: 0;
+  font-size: var(--text-xl, 17px);
+  font-weight: 600;
+  line-height: 1.25;
+}
+/* A lead paragraph (the .lede or .summary-deck standfirst) belongs in the
+   header, tight beneath the title — not a full grid-gap below it. Every
+   onboarding artifact places its lead this way so the spacing is uniform. */
+header > .lede,
+header > .summary-deck {
+  margin-top: var(--space-8, 8px);
+}
+/* The hero header idiom ([[../index.md]]): a plain document header opening a
+   dashboard-shaped artifact — the title with a fictional freshness line and
+   an optional source/meta line, sitting on the document itself rather than
+   inside a card. */
+header.hero h1 {
+  margin: 0 0 var(--space-6, 6px);
+}
+.generated {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+  font-weight: 500;
+}
+.meta-line {
+  margin-top: var(--space-4, 4px);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+}
+/* Artifact-specific styling for Today's AI News ([[index.md]]): the wider
+   feed shell, per-source accent props over canonical ramp tokens, the
+   source chips, the agent "why" notes, and the three source-shaped cards.
+   Chrome colors are semantic tokens; the artifact never redefines them
+   ([[../../index.md#^respect-theme]]). */
+.shell {
+  max-width: 760px;
+  gap: var(--space-16, 16px);
+  /* Source accents, scoped to this artifact. */
+  --hn-color: var(--orange-600);
+  --x-color: var(--neutral-950);
+  --tm-color: var(--red-600);
+}
+.feed {
+  display: grid;
+  gap: var(--space-12, 12px);
+}
+/* Each source is one card: a brand-colored header band, the body, and a grey
+   "Why:" footer. The source color lives only in the header now. */
+.card {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-12, 12px);
+  background: var(--color-surface);
+}
+.card-header {
+  padding: var(--space-10, 10px) var(--space-16, 16px);
+  color: var(--white);
+}
+.card.hn .card-header { background: var(--hn-color); }
+.card.x .card-header  { background: var(--x-color); }
+.card.tm .card-header { background: var(--tm-color); }
+/* Small source label, then the item's own title, both inside the band. */
+.card-source {
+  font-size: var(--text-xs, 11px);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+.card-title {
+  display: block;
+  margin-top: var(--space-2, 2px);
+  color: var(--white);
+  font-size: var(--text-base, 13.5px);
+  font-weight: 600;
+  line-height: 1.3;
+  text-decoration: none;
+}
+a.card-title:hover {
+  text-decoration: underline;
+}
+/* Source metadata (domain / timestamp / outlet) under the title, dimmed. */
+.card-meta {
+  margin-top: var(--space-4, 4px);
+  color: var(--white);
+  font-size: var(--text-sm, 12px);
+  opacity: 0.75;
+}
+/* X: author name is the title; handle rides alongside it, dimmed. */
+.x-handle-h {
+  margin-left: var(--space-4, 4px);
+  font-weight: 400;
+  opacity: 0.7;
+}
+.x-handle-h::before {
+  content: "@";
+}
+.card-body {
+  padding: var(--space-12, 12px) var(--space-16, 16px);
+}
+.card-footer {
+  padding: var(--space-8, 8px) var(--space-16, 16px);
+  border-top: 1px solid var(--color-border-muted);
+  background: var(--color-surface-muted);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+  line-height: 1.4;
+}
+.card-footer::before {
+  content: "Why: ";
+  font-weight: 600;
+  color: var(--color-text);
+}
+/* Hacker News body. */
+.hn-subhead {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+  line-height: 1.4;
+}
+.hn-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-16, 16px);
+  margin: var(--space-10, 10px) 0 0;
+}
+.hn-stat {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 4px);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+}
+.hn-stat strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+.hn-discussion {
+  color: var(--hn-color);
+  font-size: var(--text-sm, 12px);
+  text-decoration: none;
+}
+.hn-discussion:hover {
+  text-decoration: underline;
+}
+.hn-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6, 6px);
+  margin: var(--space-8, 8px) 0 0;
+}
+.hn-tag {
+  display: inline-flex;
+  padding: 2px var(--space-8, 8px);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-surface-muted);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+}
+/* X body. */
+.x-text {
+  margin: 0;
+  color: var(--color-text);
+  font-size: var(--text-base, 13.5px);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.x-text a {
+  color: var(--color-link);
+  text-decoration: none;
+}
+.x-text a:hover {
+  text-decoration: underline;
+}
+.x-stats {
+  display: flex;
+  gap: var(--space-24, 24px);
+  margin: var(--space-12, 12px) 0 0;
+  padding-top: var(--space-10, 10px);
+  border-top: 1px solid var(--color-border-muted);
+}
+.x-stat {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6, 6px);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+}
+.x-stat strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+/* TechMeme body. */
+.tm-excerpt {
+  margin: 0 0 var(--space-8, 8px);
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+  line-height: 1.45;
+}
+.tm-related {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm, 12px);
+  line-height: 1.5;
+}
+.tm-related-label {
+  color: var(--tm-color);
+  font-weight: 700;
+}
+.tm-related a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+.tm-related a:hover {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+.tm-related-sep {
+  margin: 0 var(--space-2, 2px);
+  opacity: 0.3;
+}
+@media (max-width: 520px) {
+  .x-stats { gap: var(--space-16, 16px); }
+}
+</style>
+</head>
+<body>
+<main class="shell">
+  <header class="hero">
+    <h1>Today's AI News</h1>
+    <div class="meta-line">38 posts read across Hacker News, X, and TechMeme · 7 selected by relevance</div>
+  </header>
+  <div class="feed">
+    <article class="card hn">
+      <div class="card-header">
+        <div class="card-source">Hacker News</div>
+        <a class="card-title" href="https://news.ycombinator.com/item?id=42901234" target="_blank" rel="noopener">Why Open Models Are Critical to the Future of Computing</a>
+        <div class="card-meta">openweights.blog</div>
+      </div>
+      <div class="card-body">
+        <p class="hn-subhead">A front-page essay argues that open models — weights you can download, inspect, modify, and run on your own hardware — are the only path that preserves user sovereignty, privacy, censorship resistance, low latency, and cost control. The thread also rounds up recent open model releases: GLM-4.6-405B, Llama-4-70B, Mistral-Large-2, DeepSeek-V3, and Qwen-3-72B. Commenters debate whether the frontier gap is closing fast enough to matter for production deployments.</p>
+        <div class="hn-stats">
+          <span class="hn-stat">▲ <strong>927</strong> points</span>
+          <span class="hn-stat">💬 <strong>413</strong> comments</span>
+          <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42901234" target="_blank" rel="noopener">view discussion →</a>
+        </div>
+        <div class="hn-tags">
+          <span class="hn-tag">open-models</span>
+          <span class="hn-tag">llm</span>
+          <span class="hn-tag">sovereignty</span>
+          <span class="hn-tag">privacy</span>
+          <span class="hn-tag">latency</span>
+        </div>
+      </div>
+      <div class="card-footer">You've been thinking and writing a lot about open models lately.</div>
+    </article>
+    <article class="card x">
+      <div class="card-header">
+        <div class="card-source">X</div>
+        <div class="card-title">Marcus Vane <span class="x-handle-h">marcusvane</span></div>
+        <div class="card-meta">3h ago</div>
+      </div>
+      <div class="card-body">
+        <div class="x-text">most AI startups are building for the demo, not the deployment. the enterprise buyers i talk to care about three things: does it work reliably, can i audit what it did, and can i roll it back. "autonomy" is maybe 4th on the list. maybe.</div>
+        <div class="x-stats">
+          <div class="x-stat">💬 <strong>287</strong> replies</div>
+          <div class="x-stat">🔁 <strong>1.2K</strong> reposts</div>
+          <div class="x-stat">❤️ <strong>5.8K</strong> likes</div>
+          <div class="x-stat">📊 <strong>89K</strong> views</div>
+        </div>
+      </div>
+      <div class="card-footer">Validates the Acme pilot positioning — auditability and rollback over autonomy is exactly what you're betting on.</div>
+    </article>
+    <article class="card x">
+      <div class="card-header">
+        <div class="card-source">X</div>
+        <div class="card-title">Nadia Okonkwo <span class="x-handle-h">nadiaoko</span></div>
+        <div class="card-meta">6h ago</div>
+      </div>
+      <div class="card-body">
+        <div class="x-text">we just open-sourced an eval framework for agentic workflows — regression thresholds, latency budgets, rollback traces, all configurable. 2k stars in 6 hours. link in reply 👇
+the best part: it plugs into CI with 3 lines of yaml. no vendor lock-in. no managed service upsell. just the harness.</div>
+        <div class="x-stats">
+          <div class="x-stat">💬 <strong>94</strong> replies</div>
+          <div class="x-stat">🔁 <strong>2.1K</strong> reposts</div>
+          <div class="x-stat">❤️ <strong>7.3K</strong> likes</div>
+          <div class="x-stat">📊 <strong>120K</strong> views</div>
+        </div>
+      </div>
+      <div class="card-footer">This is likely the same framework that showed up as HN #1 today — worth evaluating for the Priya eval ownership discussion.</div>
+    </article>
+    <article class="card hn">
+      <div class="card-header">
+        <div class="card-source">Hacker News</div>
+        <a class="card-title" href="https://news.ycombinator.com/item?id=42900721" target="_blank" rel="noopener">How we cut our LLM inference latency by 60% with streaming + speculative decoding</a>
+        <div class="card-meta">eng.blog</div>
+      </div>
+      <div class="card-body">
+        <p class="hn-subhead">Engineering deep-dive on reducing p99 latency for agentic workloads using speculative decoding and chunked streaming, with benchmark code included. Covers tradeoffs between accuracy loss and latency gains across three model families.</p>
+        <div class="hn-stats">
+          <span class="hn-stat">▲ <strong>176</strong> points</span>
+          <span class="hn-stat">💬 <strong>63</strong> comments</span>
+          <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42900721" target="_blank" rel="noopener">view discussion →</a>
+        </div>
+        <div class="hn-tags">
+          <span class="hn-tag">latency</span>
+          <span class="hn-tag">inference</span>
+          <span class="hn-tag">engineering</span>
+        </div>
+      </div>
+      <div class="card-footer">The latency issues that came up in the Product Reliability Sync could benefit from this approach.</div>
+    </article>
+    <article class="card tm">
+      <div class="card-header">
+        <div class="card-source">TechMeme</div>
+        <a class="card-title" href="https://techmeme.com/clip" target="_blank" rel="noopener">Mistral releases Mixtral 12B with Apache 2.0 license; benchmarks show parity with leading hosted mini models on tool-use at 1/8 the cost</a>
+        <div class="card-meta">TechCrunch · 8h ago</div>
+      </div>
+      <div class="card-body">
+        <p class="tm-excerpt">French AI lab Mistral published Mixtral 12B under Apache 2.0, with a Mixture-of-Experts architecture active at 4B parameters per token. Independent benchmarks on the AgentBench-2.0 agentic suite score it at parity with leading hosted mini models while running at roughly $0.30/M input tokens on self-hosted A100s.</p>
+        <div class="tm-related">
+          <span class="tm-related-label">More:</span>
+          <a href="#" target="_blank">The Register</a><span class="tm-related-sep">/</span>
+          <a href="#" target="_blank">VentureBeat</a><span class="tm-related-sep">/</span>
+          <a href="#" target="_blank">Hacker News (298↑)</a>
+        </div>
+      </div>
+      <div class="card-footer">Apache 2.0 with tool-use parity is worth a spike — could reduce per-workflow inference cost for the Acme pilot significantly.</div>
+    </article>
+    <article class="card hn">
+      <div class="card-header">
+        <div class="card-source">Hacker News</div>
+        <a class="card-title" href="https://news.ycombinator.com/item?id=42900555" target="_blank" rel="noopener">Seed funding landscape Q3 2026: AI rounds are closing faster but valuations are flattening</a>
+        <div class="card-meta">pitchbook.com</div>
+      </div>
+      <div class="card-body">
+        <p class="hn-subhead">Analysis of 120 seed rounds shows AI startups are raising 2-3x faster than last year, but median valuations have plateaued as investors demand more proof of revenue. The median time-to-close dropped from 8 weeks to 3 weeks.</p>
+        <div class="hn-stats">
+          <span class="hn-stat">▲ <strong>256</strong> points</span>
+          <span class="hn-stat">💬 <strong>98</strong> comments</span>
+          <a class="hn-discussion" href="https://news.ycombinator.com/item?id=42900555" target="_blank" rel="noopener">view discussion →</a>
+        </div>
+        <div class="hn-tags">
+          <span class="hn-tag">fundraising</span>
+          <span class="hn-tag">seed</span>
+          <span class="hn-tag">valuation</span>
+        </div>
+      </div>
+      <div class="card-footer">Relevant to your investor update with Jake — sets context for what investors are seeing across the market right now.</div>
+    </article>
+    <article class="card x">
+      <div class="card-header">
+        <div class="card-source">X</div>
+        <div class="card-title">Lena Park <span class="x-handle-h">lenapark</span></div>
+        <div class="card-meta">14h ago</div>
+      </div>
+      <div class="card-body">
+        <div class="x-text">hot take: the "eval harness" conversation is the most important infra convo in AI right now.
+if you can't define what "good enough" means, you can't ship reliably, and if you can't ship reliably, enterprise won't buy.
+it's not a QA problem, it's a go-to-market problem.</div>
+        <div class="x-stats">
+          <div class="x-stat">💬 <strong>156</strong> replies</div>
+          <div class="x-stat">🔁 <strong>847</strong> reposts</div>
+          <div class="x-stat">❤️ <strong>3.4K</strong> likes</div>
+          <div class="x-stat">📊 <strong>54K</strong> views</div>
+        </div>
+      </div>
+      <div class="card-footer">Directly relevant to the eval harness ownership decision you're discussing with Priya today.</div>
+    </article>
+  </div>
+</main>
+</body>
+</html>

package/dist/onboarding/{television-onboarding → tv-guide/welcome}/index.html RENAMED Viewed

@@ -23,7 +23,7 @@
       font-size: 15px;
     }
-    ui-icon {
+    tv-icon {
       position: relative;
       top: 1px;
       color: var(--color-text-muted);
@@ -181,9 +181,9 @@
   <p class="lede">Television is the missing GUI for your personal agent, created by the team at Telepath. We’re glad you’re here.</p>
-  <p>This card is an <ui-icon name="subtract-square" weight="duotone"></ui-icon> <strong>Artifact</strong>: a live surface your agent can create, edit, and update. Artifacts can be notes, editable documents, dashboards, web pages, reports, or custom web apps.</p>
+  <p>This card is an <tv-icon name="subtract-square" weight="duotone"></tv-icon> <strong>Artifact</strong>: a live surface your agent can create, edit, and update. Artifacts can be notes, editable documents, dashboards, web pages, reports, or custom web apps.</p>
-  <p>Artifacts live on <ui-icon name="squares-four" weight="duotone"></ui-icon> <strong>Screens</strong>. We put you on <strong>TV Guide</strong> to start. Double-click its name to rename it, use <ui-icon name="plus" weight="bold"></ui-icon> to add more screens, and drag artifacts to arrange them. Your open screens appear as tabs up the top. If you close one, you can find it again by clicking <ui-icon name="squares-four" weight="bold"></ui-icon>.</p>
+  <p>Artifacts live on <tv-icon name="squares-four" weight="duotone"></tv-icon> <strong>Screens</strong>. We put you on <strong>TV Guide</strong> to start. Double-click its name to rename it, use <tv-icon name="plus" weight="bold"></tv-icon> to add more screens, and drag artifacts to arrange them. Your open screens appear as tabs up the top. If you close one, you can find it again by clicking <tv-icon name="squares-four" weight="bold"></tv-icon>.</p>
   <p>To create or change an artifact, just describe what you want to see. Try asking your agent…</p>
@@ -196,8 +196,8 @@
   <p>Your agent will usually know when to answer by creating an artifact. If it replies in chat instead, just say: “put that on my TV.”</p>
   <section class="callout">
-    <h2><svg class="callout-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><g transform="translate(256 0) scale(-1 1)"><path d="M240,120a40,40,0,0,1-40,40H160V80h40A40,40,0,0,1,240,120Z" opacity="0.2"/><path d="M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z"/></g></svg>Spread the word</h2>
-    <p>Television isn’t public yet, but it’s not a secret. If you make something cool, we’d love you to share it!</p>
+    <h2><svg class="callout-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,104a79.86,79.86,0,0,1-30.59,62.92A24.29,24.29,0,0,0,168,186v6a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-6a24.11,24.11,0,0,0-9.3-19A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24A80,80,0,0,1,208,104Z" opacity="0.2"/><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z"/></svg>More examples</h2>
+    <p>See the screens above for other examples of how to use Television. (You can close or delete these screens whenever you like; they're just there to give you ideas!)</p>
   </section>
 </body>
 </html>

package/dist/skills/television/SKILL.md CHANGED Viewed

@@ -45,6 +45,10 @@ That relationship matters:
 - deleting an artifact removes its registry record and its card from the screen
 - moving the same underlying path or URL to another screen means deleting the old artifact and creating a new artifact with the same path or URL on the target screen
+### Onboarding screens
+Fresh installations receive a small set of bundled onboarding screens, each installed exactly once per storage directory. After installation they are ordinary screens: rename, edit, or delete them like any other, and Television never re-creates or overwrites what changed. You can tell one apart from a user-created screen by the `onboarding` marker (slug and install order) persisted in its screen metadata — visible in `tv list-screens` / `tv get-screen` output; user-created screens have no such field. The marker changes nothing about how you manage the screen.
 ### Artifact shapes
 Television artifacts point to one of three shapes:
@@ -494,6 +498,29 @@ blockquotes, rules, images, and tables have readable defaults. Add local CSS for
 artifact-specific layout, density, hierarchy, or specialized presentations; do
 not recreate baseline prose styling in every artifact.
+## Page header
+A page header is optional — the Television card already names the artifact in
+its title bar, so don't add one just to repeat that. Add one when the document
+benefits from its own masthead: a title that differs from or says more than
+the card name, or a subtitle line carrying context like a date, a person, or
+a status.
+When you do, use the house header idiom — a `<header>` holding an `<h1>` and
+optionally one `<p>` subtitle:
+```html
+<header>
+  <h1>Quarterly plan</h1>
+  <p>Friday, June 26</p>
+</header>
+```
+A `<p>` inside any `<header>` renders as a subtitle — slightly smaller than
+body prose, at body weight, hugging its heading; proximity and the heading
+above do the differentiating. The idiom is house language: use it as-is,
+don't restyle it per artifact.
 For prose-like documents, consider giving the content enough room above the bottom title bar. A reasonable starting point is 32px padding on the top and sides, with 64px at the bottom; adjust based on the content and layout:
 ```css
@@ -569,6 +596,23 @@ checkbox-item::part(box) {
 }
 ```
+### Icons
+`<tv-icon name="…" size="16|24|32">` renders a glyph from the canonical
+catalog. The catalog is small and closed — these are the only valid names:
+- `calendar-blank`
+- `hash`
+- `plus`
+- `squares-four`
+- `subtract-square`
+- `television`
+Do not invent other names (an unknown name silently renders the
+`subtract-square` fallback, which looks like a broken glyph). If no glyph
+fits, use text without an icon; if a glyph is genuinely needed and none
+fits, use an emoji instead of `<tv-icon>`.
 ## Viewport
 Artifacts render inside a resizable Television card, not a full browser page.