design-carousel-slide — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-carousel-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 N pixel-exact 1080×1080 canvas divs. Each canvas is an individual carousel slide; screenshot each separately at native dimensions to upload as a multi-slide post on LinkedIn or Instagram.
The carousel format is high-leverage for editorial brands — it lets the brand's longer-form thinking land in a feed that otherwise rewards single posts. The discipline: cover and closing slides do the visual work; middle slides do the content work.
DESIGN.md exists for the brand./design/<brand-slug>/artifacts/carousel-YYYY-MM-DD-<slug>.html
test -f ./design/<brand-slug>/tokens.cssAsk in one message:
1. Topic / thesis — the carousel's argument in one sentence (sentence-case ending in period per brand voice)
2. Number of slides — default 5 (1 cover + N content + 1 closing CTA); valid range 3–9 (carousel max)
3. Per-slide content — optional. If omitted, the agent drafts from the topic.
4. Closing CTA — the action you want readers to take (e.g. "read the full piece at shane.logsdon.io")Carousel formats reward visual variation between cover and content. The discipline:
Cover slide (slide 1) — picks from the most distinctive archetypes:
single-word — one massive Fraunces serif wordinverse-text — full canvas dark inversion with the carousel's claim as the headlinenumber-led — the topic's defining stat dominates the covertype-only — the topic statement at maximum scale, no chromeContent slides (slides 2 through N-1) — picks from CONSISTENT archetypes (slides should feel like a series, not a deck of mismatched cards):
chrome-led — running head + numbered headline + brief bodyobject-of-content — looks like a fragment from the brand's actual writingpattern-led — typographic pattern with a punctumClosing slide (slide N) — picks from action-oriented archetypes:
chrome-led with explicit CTAinverse-text with the CTA as the carved headlinesingle-word ("more.") with URL beneathColor treatment must hold across all slides for series coherence: cream-page | inverted-feature-on-cover (cover dark, body cream, closing dark to bookend) | full-cream.
Cross-artifact rule: if a recent carousel for this brand used a particular cover archetype, vary it.
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Carousel — <topic></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-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 slides at exact 1080×1080 */
.canvas {
width: 1080px; height: 1080px;
background: var(--color-surface);
color: var(--color-ink);
position: relative; overflow: hidden;
padding: 80px;
box-sizing: border-box;
display: grid;
}
/* Cover slide — strongest treatment */
.canvas--cover { /* style per cover archetype: single-word / inverse-text / etc. */ }
/* Content slide — consistent archetype across slides 2..N-1 */
.canvas--content {
grid-template-rows: auto 1fr auto;
gap: 32px;
}
/* Closing slide — action-oriented */
.canvas--closing { /* style per closing archetype */ }
/* Slide-position folio (same as page numbers in a magazine) */
.slide-folio {
position: absolute; bottom: 64px; right: 64px;
font-family: var(--type-mono-family); font-size: 14px; letter-spacing: 0.06em;
color: var(--color-ink-3);
}
.slide-folio .pos { color: var(--color-ink); }
@page { size: 1080px 1080px; margin: 0; }
</style>
</head>
<body>
<!--
Variation choices:
cover-archetype: <picked>
content-archetype: <picked>
closing-archetype: <picked>
color: <picked>
-->
<span class="slide-label">→ Slide 1 / N · COVER · 1080×1080</span>
<article class="canvas canvas--cover">
<!-- cover content per chosen archetype -->
<span class="slide-folio"><span class="pos">01</span> / 05</span>
</article>
<span class="slide-label">→ Slide 2 / N · CONTENT</span>
<article class="canvas canvas--content">
<!-- content slide -->
<span class="slide-folio"><span class="pos">02</span> / 05</span>
</article>
<!-- ... repeat for content slides 3, 4 ... -->
<span class="slide-label">→ Slide N / N · CLOSING</span>
<article class="canvas canvas--closing">
<!-- closing CTA per archetype -->
<span class="slide-folio"><span class="pos">05</span> / 05</span>
</article>
</body>
</html>--color-accent) appears AT MOST once across the whole carousel — typically on the cover or closingCarousel artifact at ./design/<brand-slug>/artifacts/carousel-YYYY-MM-DD-<slug>.html.>
Variations: cover<arch>· content<arch>· closing<arch>· color<picked>.
>
Export: open in browser → DevTools → device toolbar → 1080×1080 viewport → screenshot each .canvas separately. Upload as multi-slide post in LinkedIn or Instagram in slide-folio order.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.../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.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.