Creates B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. Supports 3–10 pages, 9 style presets, 11 page layouts for lead magnets and whitepapers.
npx claudepluginhub varnan-tech/opendirectory --plugin opendirectory-gtm-skillsThis skill uses the workspace's default tool permissions.
Creates professionally designed B2B SaaS e-books — lead magnets, gated guides, nurture assets, white papers. HTML + CSS → print-ready PDF. 3–10 pages.
Generates print-ready PDF case studies from B2B SaaS customer stories using self-contained HTML. Supports 7 layouts, 9 styles, 1-4 pages for sales and marketing.
Generates self-contained HTML documents (resumes, slides, one-pagers, portfolios, letters, white papers) in warm-parchment aesthetic with ink-blue accents and editorial typography for PDF rendering via WeasyPrint.
Generates print-ready brochure designs using each::sense AI. Supports tri-fold, bi-fold, corporate, travel, product, real estate, healthcare, educational, event, service layouts.
Share bugs, ideas, or general feedback.
Creates professionally designed B2B SaaS e-books — lead magnets, gated guides, nurture assets, white papers. HTML + CSS → print-ready PDF. 3–10 pages.
Before any step, these rules are absolute:
clamp(). Fixed px only for borders/structural elements.<link> only external dependency.* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } — mandatory global CSS. Chromium strips all background colors in PDF without this..slide.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:
- Topic — what is the ebook about? (be specific: "5 ways to reduce CAC" not "marketing tips")
- Audience — who reads it? (role, company size, pain point: "Customer Success Managers at 50–500 person SaaS companies struggling with churn")
- Desired action — what should the reader do after? (book a demo, download a template, share with team)
- 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.
Ask all 9 questions in one message, grouped. Defaults apply if skipped.
Content
Design 5. 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) 6. Chapter count — how many main sections? (default: derived from page count)
Output 7. CTA details — demo booking / newsletter signup / template download / other (default: "book a demo") 8. Contact info — email + URL for closing CTA page (or "I'll add later") 9. 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.
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):
.callout--stat or .callout--tip box with 1-line CTAVisual 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:
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.
Write per-page copy in plain text (no HTML). Rules per layout type:
Forbidden words (no exceptions): "powerful", "seamless", "game-changing", "leverage", "innovative", "revolutionary", "transform", "cutting-edge", "robust", "unlock", "scalable" (as filler).
Read ALL of these before generating. Do not paraphrase or summarize them — read the actual files.
This skill's references:
references/design-system.mdreferences/page-library.mdreferences/style-presets.mdBundled asset (exact path — include FULL verbatim contents in <style> block):
assets/viewport-base.css — bundled inside this skill's directoryPath resolution: All paths prefixed
assets/orscripts/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.
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.
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;
}
.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; }
.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>
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.
Text-sidebar layout: display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);
These govern the aesthetic ambition of every generated ebook. Applied after structural rules, before output.
Typography:
Backgrounds and atmosphere:
::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.var(--bg-alt) or a style-appropriate alt treatment.radial-gradient(circle, var(--accent) 1px, transparent 1px) dot grids; repeating-linear-gradient rule lines; ::before with clipped geometric shapes.Spatial composition:
Motion:
.reveal animations use consistent direction derived from design direction step.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.
Fix every failure before proceeding to output. Do not skip this step.
Layout & rendering:
.slide has height:100vh; height:100dvh; overflow:hidden* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } present globallyclamp()-clamp(), -min(), -max() directly (wrap negatives in calc(-1 * ...))Structure:
class="slide" on <section> onlyReading quality:
line-height ≥ 1.75 on text-column and text-sidebar pagesmax-width ≤ 65ch.chapter-number-deco (opacity 0.06–0.08).page-footer with page number + brand name.callout--tip/warning/stat/quote/checklist)Design quality:
references/style-presets.md)references/design-system.md DO NOT USE list)::before/::after element — not just text on a flat colorContent:
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])