|
20 | 20 | Companion to `content-write-blog` (which scaffolds the post itself). This skill makes the |
21 | 21 | imagery; it can be invoked standalone or as the cover step of that workflow. |
22 | 22 |
|
23 | | -## Read first |
24 | | - |
25 | | -Use [`README.md`](README.md) when the operator asks how to use this skill or wants sample |
26 | | -prompts. Use this `SKILL.md` as the execution contract when actually producing assets. Read |
27 | | -[`references/design-system.md`](references/design-system.md) **before designing** and |
28 | | -[`references/design-review.md`](references/design-review.md) **before the design-review pass**. |
| 23 | +Use [`README.md`](README.md) for usage and sample prompts; this `SKILL.md` is the execution contract for producing assets. |
29 | 24 |
|
30 | 25 | ## References (load on demand) |
31 | 26 |
|
@@ -77,11 +72,9 @@ cards. A single design may serve both files. |
77 | 72 |
|
78 | 73 | ## Pre-conditions — halt if unmet |
79 | 74 |
|
80 | | -1. A blog post slug is known or can be derived. If the operator has not given one, ask for the |
81 | | - slug or the post title and derive the kebab-case slug. |
82 | | -2. The reference material is present: the bundled `assets/` (examples, logos, fonts, tokens) — or |
83 | | - the recent posts found during discovery. If nothing is available, ask the operator to supply |
84 | | - reference material before proceeding. |
| 75 | +1. A blog post slug, or a post title to derive the kebab-case slug from. Ask if neither is given. |
| 76 | +2. Reference material: the bundled `assets/` (examples, logos, fonts, tokens) or the recent posts |
| 77 | + found during discovery. Ask the operator to supply some if none is available. |
85 | 78 |
|
86 | 79 | ## Discover blog conventions |
87 | 80 |
|
@@ -322,24 +315,18 @@ Visually inspect the rendered PNG, then verify: |
322 | 315 |
|
323 | 316 | ## Anti-patterns |
324 | 317 |
|
| 318 | +(Format, filename, and destination rules live in _Output contract_ and _Validation_; these are the |
| 319 | +creative and brand traps a checklist can't catch.) |
| 320 | + |
325 | 321 | - **Hardcoding blog conventions.** The repo evolves — always discover the image directory, |
326 | 322 | filenames, and frontmatter fields from recent posts; the documented standard is a fallback. |
327 | | -- **An SVG meta image.** Open Graph and social cards do not render SVG; the meta image is always |
328 | | - raster. |
329 | | -- **A raster hero by default.** SVG is the house standard for the hero; use PNG only when the hero |
330 | | - is genuinely photographic and the operator asked for it. |
331 | 323 | - **Generic AI look.** Glows everywhere, faux-3D blobs, busy gradients, literal robots. Prisma |
332 | 324 | covers are restrained and typographic. When in doubt, remove an element. |
333 | 325 | - **Off-system styling.** Inventing colors, or swapping the Mona Sans + Inter pairing (Barlow is |
334 | 326 | off-brand). |
335 | 327 | - **Decorative logos.** Marks are a footer sign-off or the subject — never wallpaper. |
336 | 328 | - **Centering text-only layouts.** Default covers are left-anchored with right-side breathing room. |
337 | 329 | Center only a single graphic-led composition. |
338 | | -- **Content hashes or dimensions in filenames.** Keep the base names `hero` and `meta`; the |
339 | | - extension follows the format and nothing else. |
340 | | -- **PNG-only or SVG-only.** SVG is the editable source of truth; the PNG is the export. Produce |
341 | | - both for the hero; the meta is always PNG. |
342 | | -- **Saving to temp.** Final assets live in a durable repo location. |
343 | 330 | - **Fabricating product palettes.** Postgres = teal, ORM = indigo. Compute/Next have no official |
344 | 331 | tokens yet — use the platform teal and say so; don't invent a brand color. |
345 | 332 | - **Tagline filler.** Avoid lines like `Resize. Encode. Cache.` If a secondary line is needed, |
|
0 commit comments