Graphic Ebook Skill for Claude

graphic-ebook

Creates professionally designed B2B SaaS e-books — lead magnets, gated guides, nurture assets, white papers. HTML + CSS → print-ready PDF. 3–10 pages.

Critical Rules

Before any step, these rules are absolute:

• Every page MUST fit within A4 canvas (1200×1697px). No content overflow.
• All scalable font sizes use clamp(). Fixed px only for borders/structural elements.
• Single self-contained HTML. All CSS inline. Font CDN <link> only external dependency.
• Never dump HTML in chat. Save to file, show summary only.
• Body copy is primary. Line-height ≥ 1.75 on all text-column and text-sidebar pages. Max-width ≤ 65ch for single-column body.
• No generic AI slop: no Inter as display font, no purple-to-blue gradient on white, no "Thank You" closing.
• Visual rhythm: never place 2+ text-column pages back-to-back. Break with chapter-intro, quote-callout, or stat-grid.

10. Before generating HTML, commit to a design direction: one tone, one signature element, one background system. Generic = failure. Each ebook must be distinctly designed for its audience and subject — not a template.

• * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — mandatory global CSS. Chromium strips all background colors in PDF without this.
• Every page except cover must have a page footer: page number + brand name. Absolute position at bottom of each .slide.

Step 1: Brief Intake

Four required fields. If all four are present in the user's prompt: skip to Step 2.

If any are missing, ask exactly:

> "To create your ebook, I need four things:

> 1. Topic — what is the ebook about? (be specific: "5 ways to reduce CAC" not "marketing tips")

> 2. Audience — who reads it? (role, company size, pain point: "Customer Success Managers at 50–500 person SaaS companies struggling with churn")

> 3. Desired action — what should the reader do after? (book a demo, download a template, share with team)

> 4. Content — do you have existing content, or should I draft from the topic?"

Stop and wait. Do not read reference files. Do not generate any HTML or outline.

Step 2: Complete Intake

Ask all 9 questions in one message, grouped. Defaults apply if skipped.

Content

• Page count — 3–5 (quick guide / checklist) / 6–8 (standard guide) / 9–10 (deep dive) (default: 6)
• Key takeaways — 3–5 things the reader should know or do after reading (informs chapter structure)
• Brand name — company or product name for cover and footer (or "skip")
• Brand logo — URL or "none"

Design

• Style — clean-slate / midnight-editorial / matt-gray / product-minimal / mint-pixel-corporate / warm-earth / brutalist / magazine-red / soft-cloud / "show me options" (default: clean-slate)
• Chapter count — how many main sections? (default: derived from page count)

Output

• CTA details — demo booking / newsletter signup / template download / other (default: "book a demo")
• Contact info — email + URL for closing CTA page (or "I'll add later")
• Slug — filename slug (e.g., "reduce-churn-guide-2025"; derived from topic if skipped)

Defaults:

| Question | Default |

|---|---|

| Page count | 6 |

| Key takeaways | derive from topic |

| Brand name | none |

| Brand logo | none |

| Style | clean-slate |

| Chapter count | derived from page count |

| CTA details | book a demo |

| Contact info | placeholder (flagged in checklist) |

| Slug | kebab-case of topic |

If style = "show me options": Generate 3 single-page HTML previews (cover page only) saved to .claude-design/previews/style-a.html, style-b.html, style-c.html. Open each automatically. Ask user to pick before Step 3.

Step 3: Internal Architecture

Derive internally. Never show this to the user.

Chapter → page mapping:

| Pages | Typical structure |

|---|---|

| 3 | cover + [1 content page] + closing-cta |

| 4 | cover + [1 chapter-intro + 1 text-column] + closing-cta |

| 5 | cover + toc + [1 chapter-intro + 1 text-column] + closing-cta |

| 6 | cover + toc + [2 chapter-intros + 1 text-column] + closing-cta |

| 8 | cover + toc + [3 chapter-intros + 2 content pages] + closing-cta |

| 10 | cover + toc + [4 chapter-intros + 3 content pages] + key-takeaways + closing-cta |

TOC rule: Include for ebooks ≥ 6 pages. For 3–5 page ebooks, use a "What's inside" bullet list on the cover page or skip entirely.

Three-point CTA architecture (for ebooks ≥ 6 pages):

• Intro CTA (after page 2) — subtle 1-line inline mention: "explore our [tool] at [url]"
• Mid-ebook CTA (after a stat-grid or chapter-intro) — small .callout--stat or .callout--tip box with 1-line CTA
• Closing CTA (final page) — full-page, primary conversion action

Visual rhythm check: If 2+ consecutive text-column pages appear in the plan → insert quote-callout or stat-grid between them before proceeding.

Design direction (derive from style preset + audience — never shown to user):

| Decision | Derive from |

|---|---|

| Tone | What emotional register does this audience expect? (authoritative, editorial, energetic, calm, warm…) |

| Signature element | ONE visual device used consistently: oversized decorative numerals, diagonal accent bar, dot-grid overlay, gradient mesh on cover, rule lines, geometric shape bleed. Pick one. Use it. |

| Background system | How do backgrounds vary across pages? Cover and chapter-intros = most distinctive. Content pages quieter but NOT all-white. Closing CTA = dark or full-accent inversion. No 3+ consecutive pages with identical background. |

| Motion style | What do .reveal animations do? Pick one and stay consistent: translateY(16px) → 0, scale(0.97) → 1, translateX(-12px) → 0. Stagger delays 0.1s apart. |

| Unforgettable detail | What is the ONE thing a reader will remember about the design? Name it before writing any CSS. |

If no strong direction is derivable from style preset alone, ask yourself: what would a top-tier design agency produce for this specific audience and topic? Then execute that.

Body copy density limits:

• text-column 1-col: 180–250 words max per page
• text-column 2-col: 280–380 words max (140–190 per column)
• text-sidebar: 140–180 words main + ≤70 words sidebar
• chapter-intro: 40–60 words (teaser only)
• quote-callout: 30–45 words
• stat-grid: 3–6 metrics, minimal labels

Step 4: Page Structure

Read references/page-library.md before planning.

Output a numbered list with [layout-type] labels per page. Example for 6-pager:

Page 1: [cover] — title, subtitle, brand
Page 2: [toc] — 3 chapter titles + page numbers
Page 3: [chapter-intro] — Chapter 1 opener
Page 4: [text-column] — Chapter 1 body (1-column)
Page 5: [stat-grid] — 4 key metrics
Page 6: [closing-cta] — demo booking CTA + contact

Confirm with user before Step 5.

Step 5: Content Draft

Write per-page copy in plain text (no HTML). Rules per layout type:

• cover: title (≤10 words, leads with value or tension — not a generic label) + subtitle (≤15 words) + optional category label + brand name
• toc: chapter titles (≤6 words each) + corresponding section numbers. Clean, numbered list.
• chapter-intro: chapter number (decorative) + chapter title (≤8 words) + teaser paragraph (2–3 sentences)
• text-column (1-col): section heading + body paragraphs. Max 250 words. Prose > bullets. Every sentence earns its place.
• text-column (2-col): same rules, 140–190 words per column. Use for comparisons, step pairs, dual perspectives.
• text-sidebar: main body (140–180 words) + sidebar callout type (tip / warning / stat / quote / checklist) with max 70 words
• quote-callout: pull quote ≤40 words + attribution (name, title, company or source)
• stat-grid: 3–6 metrics — number + label + 1-line context. Optional: 1-sentence narrative below.
• key-takeaways: 5–8 takeaways, ≤15 words each, imperative where possible
• closing-cta: headline ≤5 words (imperative) + 1-sentence body + CTA action + email + URL (both required)

Forbidden words (no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler).

Step 6: HTML Generation

Read ALL of these before generating. Do not paraphrase or summarize them — read the actual files.

This skill's references:

• references/design-system.md
• references/page-library.md
• references/style-presets.md

Bundled asset (exact path — include FULL verbatim contents in <style> block):

• assets/viewport-base.css — bundled inside this skill's directory

> Path resolution: All paths prefixed assets/ or scripts/ are relative to the directory containing this SKILL.md file. In Claude Code after install: ~/.claude/skills/graphic-ebook/assets/ and ~/.claude/skills/graphic-ebook/scripts/. Resolve the actual path from the SKILL.md file location before reading.

Generation Rules

• Single self-contained HTML. All CSS inline. Font CDN <link> only external dependency.

• Include FULL verbatim contents of viewport-base.css inside the <style> block.

• Add A4 portrait overrides AFTER viewport-base.css (in the same <style> block):

/* A4 portrait overrides */
html { scroll-snap-type: none; scroll-behavior: auto; }
.slide {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-snap-align: none;
}
/* CRITICAL: prevents Chromium from stripping backgrounds in PDF */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

• Each page = <section class="slide"> — required for export-pdf.sh page detection.

• Comment each page: /* === PAGE N: LAYOUT-TYPE === */

• Body text: clamp(0.875rem, 1.25vw, 1.05rem), line-height: 1.75, max-width: min(65ch, 100%) on all <p> in text-column and text-sidebar layouts.

• Stat numbers: hero at clamp(3rem, 8vw, 5.5rem) in accent color. Supporting at clamp(2.5rem, 7vw, 5rem) in secondary color.

• No images available → CSS-generated visuals only (gradients, geometric shapes, dot patterns, abstract elements). Never show placeholder boxes.

• No SlidePresentation JS. Include only minimal IntersectionObserver for .reveal animations.

10. Chapter number decoration (on chapter-intro pages):

.chapter-number-deco {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: var(--display-weight);
  opacity: 0.06;
  position: absolute;
  top: -0.1em;
  right: var(--page-padding);
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  user-select: none;
}

11. Typed callout boxes (for text-sidebar pages):

.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }
.callout-label { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.callout--tip      { background: rgba(22, 163, 74, 0.07);  border-color: #16A34A; }
.callout--tip      .callout-label { color: #16A34A; }
.callout--warning  { background: rgba(217, 119, 6, 0.07);  border-color: #D97706; }
.callout--warning  .callout-label { color: #D97706; }
.callout--stat     { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }
.callout--stat     .callout-label { color: var(--accent); }
.callout--quote    { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }
.callout--quote    .callout-label { color: var(--text-muted); }
.callout--checklist { background: rgba(8, 145, 178, 0.07);  border-color: #0891B2; }
.callout--checklist .callout-label { color: #0891B2; }

12. Page footer (on every page except cover):

.page-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--divider);
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.75vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

HTML: <div class="page-footer"><span>[Brand Name]</span><span>[N]</span></div>

13. 2-column layout: display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4%, 3.5rem); with border-right: 1px solid var(--divider) on left column.

14. Text-sidebar layout: display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);

Design Quality Rules (from frontend-design principles)

These govern the aesthetic ambition of every generated ebook. Applied after structural rules, before output.

Typography:

• Display font must have character at large sizes. Plus Jakarta Sans 800, Instrument Serif, Syne, Lora, Fraunces — all acceptable. Inter at display weight = immediate slop signal.
• Never use the same font weight for two consecutive hierarchy levels. Cover title (800) → chapter heading (700) → section heading (700, smaller size) → body (400/500).
• Pair a display font with a refined body font when the preset supports it (e.g. Instrument Serif + Inter, Syne + IBM Plex Sans). Single-font stacks must use weight contrast instead.

Backgrounds and atmosphere:

• Cover MUST have a significant decorative ::before or ::after pseudo-element creating visual depth: ghost letter at opacity: 0.04–0.06, geometric shape bleed, radial gradient overlay, or dot/line grid pattern.
• Chapter-intro pages MUST visually contrast with adjacent content pages — use var(--bg-alt) or a style-appropriate alt treatment.
• Content pages (text-column, text-sidebar) can be white/neutral, but the stat-grid and quote-callout pages should carry a distinct background (alt section bg, elevated card, or accent inversion).
• Closing CTA: always dark or full-accent inversion — never light. It is the conversion moment.
• CSS texture patterns when appropriate: radial-gradient(circle, var(--accent) 1px, transparent 1px) dot grids; repeating-linear-gradient rule lines; ::before with clipped geometric shapes.

Spatial composition:

• Generous whitespace on chapter-intro pages — the visual openness signals a chapter break.
• At least one element per ebook should break the standard grid: oversized chapter deco number that bleeds off-screen right, quote mark that overlaps content, stat number that dominates 60%+ of its column.
• Avoid centered layouts unless the preset explicitly calls for it (quote-callout is the only centered-by-default layout).

Motion:

• All .reveal animations use consistent direction derived from design direction step.
• Stagger delays: 0.05s increments, max 0.5s cumulative. Nothing slower than 0.65s duration.
• Stat items in stat-grid: stagger by index for cascade effect.
• No animation on structural elements (footers, borders, rules). Animation = content appearing, not layout materializing.

The unforgettable detail rule:

Before writing the first line of CSS, name the ONE element that makes this ebook unmistakably designed — not just competently assembled. That element gets the most CSS investment. If you cannot name it, you have not thought hard enough about the design.

Step 7: Self-QA

Fix every failure before proceeding to output. Do not skip this step.

Layout & rendering:

• [ ] Every .slide has height:100vh; height:100dvh; overflow:hidden
• [ ] * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } present globally
• [ ] All scalable font sizes use clamp()
• [ ] No content overflows at 1200×1697 — review each page's density
• [ ] No placeholder boxes visible
• [ ] No -clamp(), -min(), -max() directly (wrap negatives in calc(-1 * ...))

Structure:

• [ ] Page count matches Step 4 plan
• [ ] Every page uses class="slide" on <section> only
• [ ] All layout types from Step 4 present in correct order
• [ ] TOC included for ebooks ≥ 6 pages

Reading quality:

• [ ] Body text line-height ≥ 1.75 on text-column and text-sidebar pages
• [ ] Single-column body text max-width ≤ 65ch
• [ ] No 2+ consecutive text-column pages without visual break
• [ ] TOC has chapter titles + section/page numbers
• [ ] Chapter-intro pages have .chapter-number-deco (opacity 0.06–0.08)
• [ ] Every page except cover has .page-footer with page number + brand name
• [ ] Sidebar callout boxes use typed CSS class (.callout--tip/warning/stat/quote/checklist)

Design quality:

• [ ] Style preset tokens applied consistently (from references/style-presets.md)
• [ ] No slop patterns (see references/design-system.md DO NOT USE list)
• [ ] Typography hierarchy: cover title >> chapter heading >> section heading >> body (2:1 min ratio between levels)
• [ ] Stat numbers visually dominant — no body copy at same visual weight
• [ ] Cover has a significant decorative ::before/::after element — not just text on a flat color
• [ ] Chapter-intro pages visually distinct from content pages (different bg or treatment)
• [ ] Closing CTA uses dark or full-accent inversion background — never light
• [ ] No 3+ consecutive pages with identical background color
• [ ] Signature element from design direction step is present and visible
• [ ] At least one layout element breaks the grid (oversized deco number, bleed shape, dominant stat)
• [ ] Reveal animations consistent direction and stagger — not random per-element

Content:

• [ ] No forbidden words anywhere
• [ ] Cover title ≤10 words, leads with value or tension
• [ ] Quote callout ≤40 words
• [ ] Closing CTA: imperative headline + email + URL (both mandatory — QA fails without both)
• [ ] TOC matches actual page structure
• [ ] Three-point CTA present for ebooks ≥ 6 pages

Step 8: Output

mkdir -p ebook/[slug]

Write main HTML: ebook/[slug]/index.html

Open: open ebook/[slug]/index.html

Per-page split (always generate):

Extract each <section class="slide"> into standalone HTML files with full <style> block, no JS:

ebook/[slug]/page-01.html, page-02.html, … (zero-padded 2 digits)

PDF export (always run):

bash [skill-root]/scripts/export-pdf.sh \
  ebook/[slug]/index.html \
  ebook/[slug].pdf --portrait

[skill-root] = the directory containing this SKILL.md. Resolve it before running (e.g. ~/.claude/skills/graphic-ebook in Claude Code after install).

Cleanup: Delete .claude-design/previews/ if style preview files were generated in Step 2.

Summary (no HTML in chat):

## Ebook: [title]
Date: [today] | Style: [style] | Pages: [N] | Format: A4 portrait
Brand: [brand name] | Topic: [topic]

Files
  Main:      ebook/[slug]/index.html
  Per-page:  ebook/[slug]/page-01.html → page-0N.html
  PDF:       ebook/[slug].pdf

Checklist
- [ ] Replace contact info placeholders (email + URL on closing page)
- [ ] Replace brand logo initials with real asset
- [ ] Verify TOC section numbers match actual page positions
- [ ] Proof all stat accuracy (page [N])
- [ ] Review body copy — no page should feel overflowed
- [ ] Test PDF opens correctly (page count = [N])