design-talk-slide — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-talk-slide (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Produces a single self-contained HTML file containing THREE 1920×1080 slide canvases, each demarcated for individual screenshot:
This skill produces the BUILDING BLOCKS for a talk deck. The user duplicates and edits content slides as needed; the title and divider patterns repeat across the deck.
DESIGN.md exists for the brand./design/<brand-slug>/artifacts/talk-slide-YYYY-MM-DD-<slug>.html
test -f ./design/<brand-slug>/tokens.cssIf missing, stop and tell the user to run /design-system <brand-slug> first.
Ask in one message:
1. Talk title — sentence-case ending in period (max ~12 words)
2. Speaker — name + role/affiliation
3. Venue — conference / event + date (e.g. "Strange Loop 2026 · 09.18.2026")
4. Optional content slide headline + 2-4 short body lines (used to populate the template)
5. Optional section-divider title (e.g. "On settlement")Talks need visual continuity across slides — pick ONE variation set and apply throughout:
cream-page (warm cream throughout) | inversion-feature (cream-page slides + ONE inversion-block slide as a moment, e.g. the section-divider) | full-inversion (every slide on dark, for keynote drama)display-led (Fraunces or brand display does the heavy lifting) | mixed-weight (display headlines + sans body per slide)asymmetric (off-center anchoring across all slides) | symmetric (centered — the conference-talk default; use only if the talk venue is formal)Cross-artifact rule: if a previous talk-slide artifact for this brand chose asymmetric, the next one might choose symmetric for a different talk — but within a single deck, consistency wins.
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Talk slides — <talk title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>
html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; font-family: var(--type-sans-family); }
body { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px 0; }
/* Slide labels (above each canvas — for screenshotter, NOT part of the slide) */
.slide-label {
font-family: var(--type-mono-family);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
align-self: center;
}
/* All 3 slides at exact 1920×1080 */
.canvas {
width: 1920px;
height: 1080px;
background: var(--color-surface); /* override per slide variation */
color: var(--color-ink);
position: relative;
overflow: hidden;
padding: 80px;
box-sizing: border-box;
display: grid;
/* Layout per slide type */
}
/* Title slide */
.canvas--title {
grid-template-rows: auto 1fr auto;
gap: 48px;
}
/* Content slide */
.canvas--content {
grid-template-rows: auto auto 1fr auto;
gap: 24px;
}
/* Section-divider slide — often the inversion moment */
.canvas--divider {
/* Cream-page or inversion based on variation choice */
display: grid;
place-items: center;
}
.canvas--divider.is-inverted {
background: var(--color-ink);
color: var(--color-surface);
}
/* The slide-typography rules (display-xxl for divider, display-xl for title, headline-md for content) */
.slide-display { font-family: var(--type-display-family); font-weight: 400; font-size: 144px; line-height: 0.96; letter-spacing: -0.022em; margin: 0; }
.slide-title { font-family: var(--type-display-family); font-weight: 400; font-size: 96px; line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.slide-headline { font-family: var(--type-display-family); font-weight: 500; font-size: 56px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.slide-body { font-family: var(--type-sans-family); font-size: 28px; line-height: 1.5; max-width: 64ch; }
/* Folio + speaker meta in lower corners */
.slide-folio {
font-family: var(--type-mono-family);
font-size: 18px;
letter-spacing: 0.06em;
color: var(--color-ink-3);
display: inline-flex; gap: 16px; align-items: baseline;
}
.slide-folio .pos { color: var(--color-ink); }
.canvas--divider.is-inverted .slide-folio { color: rgba(251,250,249,0.55); }
.canvas--divider.is-inverted .slide-folio .pos { color: var(--color-surface); }
@page { size: 1920px 1080px; margin: 0; }
</style>
</head>
<body>
<!--
Variation choices:
color: <picked>
type-press: <picked>
composition: <picked>
-->
<span class="slide-label">→ Slide 1 · TITLE · 1920×1080 · screenshot this for the cover</span>
<article class="canvas canvas--title">
<!-- top-row meta (venue + date) -->
<!-- center: large display title with optional type-accent on subject word -->
<!-- bottom-row: speaker + folio -->
</article>
<span class="slide-label">→ Slide 2 · CONTENT · 1920×1080 · template for any body slide (duplicate + edit)</span>
<article class="canvas canvas--content">
<!-- running head: talk title in small caps -->
<!-- headline -->
<!-- body region (prose, list, or code) -->
<!-- folio -->
</article>
<span class="slide-label">→ Slide 3 · SECTION DIVIDER · 1920×1080 · the pause-and-breathe slide</span>
<article class="canvas canvas--divider is-inverted">
<!-- center: massive display section title -->
<!-- folio -->
</article>
</body>
</html>EP. 01 / Slide 01 cosplay markers), and 8 (no animations on static slides)--color-accent) across the 3 template slidesTalk slides at ./design/<brand-slug>/artifacts/talk-slide-YYYY-MM-DD-<slug>.html.>
Variation:<color>×<type-press>×<composition>.
>
Export each slide as PNG: open in browser → DevTools → device toolbar → set viewport to 1920×1080 → screenshot each .canvas element separately. Use the labels above each canvas to identify which is which.>
To extend into a full deck: duplicate the content slide template, edit per-slide content, screenshot each.
Governed by three shared canonical references — read them, do not restate them:
Forbidden (fast scan — the references hold the full list):
hsl(230–280) family on a near-white surface. The single loudest AI tell.Required variation (every invocation):
Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders.
var(--*) from tokens.css. Only literal pixel values: 1px for hairlines and the canvas dimensions.../design-anti-patterns.md (the hard floor — wins every conflict), ../design-principles.md (the craft floor), and ../design-variation-sop.md (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. If you find a new tell in the output, add it there.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.