design-instagram-post — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-instagram-post (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 pixel-exact HTML canvas for Instagram. Three canvas modes:
Plus an optional caption suggestion (2200-char limit; first 125 chars visible before "more").
DESIGN.md exists for the brandportrait | square | story, default portrait), supporting line, attribution, caption style, hashtag set./design/<brand-slug>/artifacts/instagram-<mode>-YYYY-MM-DD-<slug>.html
test -f ./design/<brand-slug>/tokens.cssDefault portrait (1080×1350) — gets the most feed space and converts best. Use square if user explicitly asks for grid coherence with existing square posts. Use story for Stories or Reel covers.
Ask in one message:
1. Headline — the dominant text on the canvas (max 8 words for portrait/square, max 6 for story)
2. Optional supporting line (max 12 words)
3. Attribution — name + handle, or leave blank
4. Caption style: insight | story | announcement | carousel-intro | reel-cover | none
5. Hashtag set: any specific tags, or leave blank for nonePick ONE archetype before any other axis. Portrait dimensions invite vertical type stacking and number-led layouts that horizontal formats don't — use them.
chrome-led — eyebrow + headline + footer band. Last resort. AI-editorial default.type-only — pure type, no chrome.number-led — one oversized number dominates; rest is short caption. Portrait format suits this beautifully.object-of-content — looks like the thing being communicated (a list, a transcript fragment, a printed page, a journal entry).pattern-led — typographic repetition or grid fills canvas; one element breaks it.inverse-text — headline carved from a block of body copy; or massive headline with body wrapping negative space.vertical-stack — words stacked one per line in display weight, leveraging portrait height. Each line is its own statement.After archetype, pick from:
centered-poster | top-anchored | bottom-anchored | split-vertical | corner-stampdisplay-dominant | mixed-weight | mono-ledmonochrome | single-accent-block | inverted | duotone-split-verticalheadline-led | quote-led | data-led | mark-ledCross-artifact rule: different archetype than the most recent artifact in this brand. Read variation comments in ./design/<brand-slug>/artifacts/.
Instagram crops portrait posts to a square in the explore feed and to ~1:1 thumbnails on profile grids. Keep critical content (headline + brand mark) within the center 1080×1080 of a portrait canvas, with safe margins of var(--space-2xl) from the top and bottom edges. The top/bottom 135px regions can carry secondary content (eyebrow, footer) but should remain readable when cropped out.
For Story mode (1080×1920), Instagram's interface chrome covers the top 250px and bottom 220px. Keep critical content within y: 250–1700.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Instagram <mode> — <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; display: grid; place-items: center; font-family: var(--type-body-md-family); }
.canvas {
/* Per mode:
portrait: 1080x1350
square: 1080x1080
story: 1080x1920 */
width: 1080px;
height: <1350 | 1080 | 1920>px;
background: var(--color-surface);
color: var(--color-ink);
position: relative;
overflow: hidden;
padding: var(--space-3xl);
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* Story mode — content respects IG's interface chrome */
.canvas--story {
padding: 270px var(--space-3xl) 240px;
}
/* Portrait/square — the safe-crop center ring (visual aid for design, removed in export) */
.canvas--portrait::after {
/* Uncomment during design to visualize crop safety
content: ""; position: absolute; left: 0; right: 0; top: 135px; bottom: 135px;
border: 1px dashed var(--color-rule);
pointer-events: none;
*/
}
.eyebrow {
font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family);
letter-spacing: var(--type-label-caps-tracking);
text-transform: uppercase;
color: var(--color-ink-soft);
}
.headline {
font-family: var(--type-display-xl-family);
font-weight: var(--type-display-xl-weight);
letter-spacing: var(--type-display-xl-tracking);
font-size: clamp(72px, 9vw, 132px);
line-height: 1.04;
margin: var(--space-md) 0 0;
}
.support {
font-family: var(--type-body-lg-family);
font-size: var(--type-body-lg-size);
font-size: clamp(20px, 2.4vw, 32px);
line-height: 1.45;
color: var(--color-ink-soft);
max-width: 80%;
margin: var(--space-lg) 0 0;
}
.footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--color-rule);
padding-top: var(--space-md);
font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family);
letter-spacing: var(--type-label-caps-tracking);
text-transform: uppercase;
color: var(--color-ink-soft);
}
@page { size: 1080px <height>px; margin: 0; }
</style>
</head>
<body>
<!--
Mode: <portrait | square | story>
Variation choices:
layout: <picked>
type-pressure: <picked>
color: <picked>
composition: <picked>
-->
<article class="canvas canvas--<mode>">
<header>
<span class="eyebrow"><eyebrow text></span>
<h1 class="headline"><headline></h1>
<!-- optional supporting line -->
</header>
<footer class="footer">
<span><Brand mark or @handle></span>
<span><YYYY.MM.DD></span>
<span><optional CTA or topic tag></span>
</footer>
</article>
</body>
</html>Instagram caption rules:
Append in HTML comment:
<!--
CAPTION (<count>/2200 chars):
<line 1 hook>
<paragraph 2>
<paragraph 3>
<final line — invitation or question>
[Hashtags in first comment, not caption — cleaner look:]
<hashtag set>
-->DESIGN-PLAN.md allows them (Instagram is emoji-heavy by default; if the brand stance is "no emojis", hold the line)Instagram artifact (<mode>mode) at./design/<brand-slug>/artifacts/instagram-<mode>-YYYY-MM-DD-<slug>.html.
>
Variation:<layout>×<type-pressure>×<color>×<composition>.
>
Export as PNG: open in browser → DevTools → device toolbar → 1080×<height> → screenshot. Or Cmd+P → save as PDF.>
Caption suggestion is in an HTML comment at the end of the file.
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(--*).../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.