{"id":"10fad57c-36ac-42f0-8abf-829e8e1c8808","shortId":"ZDMBx6","kind":"skill","title":"graphic-ebook","tagline":"Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says \"create an ebook\", \"design a lead magnet\", \"make a PDF guide\", \"build a gated content piece\", \"write a B2B ebook\"","description":"# graphic-ebook\n\nCreates professionally designed B2B SaaS e-books — lead magnets, gated guides, nurture assets, white papers. HTML + CSS → print-ready PDF. 3–10 pages.\n\n## Critical Rules\n\nBefore any step, these rules are absolute:\n\n1. Every page MUST fit within A4 canvas (1200×1697px). No content overflow.\n2. All scalable font sizes use `clamp()`. Fixed px only for borders/structural elements.\n3. Single self-contained HTML. All CSS inline. Font CDN `<link>` only external dependency.\n4. **Never dump HTML in chat.** Save to file, show summary only.\n5. Body copy is primary. Line-height ≥ 1.75 on all text-column and text-sidebar pages. Max-width ≤ 65ch for single-column body.\n6. No generic AI slop: no Inter as display font, no purple-to-blue gradient on white, no \"Thank You\" closing.\n7. Visual rhythm: never place 2+ text-column pages back-to-back. Break with chapter-intro, quote-callout, or stat-grid.\n10. **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.\n8. `* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }` — mandatory global CSS. Chromium strips all background colors in PDF without this.\n9. Every page except cover must have a page footer: page number + brand name. Absolute position at bottom of each `.slide`.\n\n---\n\n## Step 1: Brief Intake\n\nFour required fields. If all four are present in the user's prompt: **skip to Step 2.**\n\nIf any are missing, ask **exactly**:\n\n> \"To create your ebook, I need four things:\n> 1. **Topic** — what is the ebook about? (be specific: \"5 ways to reduce CAC\" not \"marketing tips\")\n> 2. **Audience** — who reads it? (role, company size, pain point: \"Customer Success Managers at 50–500 person SaaS companies struggling with churn\")\n> 3. **Desired action** — what should the reader do after? (book a demo, download a template, share with team)\n> 4. **Content** — do you have existing content, or should I draft from the topic?\"\n\nStop and wait. Do not read reference files. Do not generate any HTML or outline.\n\n---\n\n## Step 2: Complete Intake\n\nAsk all 9 questions in one message, grouped. Defaults apply if skipped.\n\n**Content**\n1. **Page count** — 3–5 (quick guide / checklist) / 6–8 (standard guide) / 9–10 (deep dive) (default: 6)\n2. **Key takeaways** — 3–5 things the reader should know or do after reading (informs chapter structure)\n3. **Brand name** — company or product name for cover and footer (or \"skip\")\n4. **Brand logo** — URL or \"none\"\n\n**Design**\n5. **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)\n6. **Chapter count** — how many main sections? (default: derived from page count)\n\n**Output**\n7. **CTA details** — demo booking / newsletter signup / template download / other (default: \"book a demo\")\n8. **Contact info** — email + URL for closing CTA page (or \"I'll add later\")\n9. **Slug** — filename slug (e.g., \"reduce-churn-guide-2025\"; derived from topic if skipped)\n\n**Defaults:**\n\n| Question | Default |\n|---|---|\n| Page count | 6 |\n| Key takeaways | derive from topic |\n| Brand name | none |\n| Brand logo | none |\n| Style | clean-slate |\n| Chapter count | derived from page count |\n| CTA details | book a demo |\n| Contact info | placeholder (flagged in checklist) |\n| Slug | kebab-case of topic |\n\n**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.\n\n---\n\n## Step 3: Internal Architecture\n\nDerive internally. Never show this to the user.\n\n**Chapter → page mapping:**\n\n| Pages | Typical structure |\n|---|---|\n| 3 | cover + [1 content page] + closing-cta |\n| 4 | cover + [1 chapter-intro + 1 text-column] + closing-cta |\n| 5 | cover + toc + [1 chapter-intro + 1 text-column] + closing-cta |\n| 6 | cover + toc + [2 chapter-intros + 1 text-column] + closing-cta |\n| 8 | cover + toc + [3 chapter-intros + 2 content pages] + closing-cta |\n| 10 | cover + toc + [4 chapter-intros + 3 content pages] + key-takeaways + closing-cta |\n\n**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.\n\n**Three-point CTA architecture** (for ebooks ≥ 6 pages):\n1. **Intro CTA** (after page 2) — subtle 1-line inline mention: \"explore our [tool] at [url]\"\n2. **Mid-ebook CTA** (after a stat-grid or chapter-intro) — small `.callout--stat` or `.callout--tip` box with 1-line CTA\n3. **Closing CTA** (final page) — full-page, primary conversion action\n\n**Visual rhythm check:** If 2+ consecutive `text-column` pages appear in the plan → insert `quote-callout` or `stat-grid` between them before proceeding.\n\n**Design direction** (derive from style preset + audience — never shown to user):\n\n| Decision | Derive from |\n|---|---|\n| **Tone** | What emotional register does this audience expect? (authoritative, editorial, energetic, calm, warm…) |\n| **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. |\n| **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. |\n| **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. |\n| **Unforgettable detail** | What is the ONE thing a reader will remember about the design? Name it before writing any CSS. |\n\nIf 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.\n\n**Body copy density limits:**\n- text-column 1-col: 180–250 words max per page\n- text-column 2-col: 280–380 words max (140–190 per column)\n- text-sidebar: 140–180 words main + ≤70 words sidebar\n- chapter-intro: 40–60 words (teaser only)\n- quote-callout: 30–45 words\n- stat-grid: 3–6 metrics, minimal labels\n\n---\n\n## Step 4: Page Structure\n\nRead `references/page-library.md` before planning.\n\nOutput a numbered list with `[layout-type]` labels per page. Example for 6-pager:\n```\nPage 1: [cover] — title, subtitle, brand\nPage 2: [toc] — 3 chapter titles + page numbers\nPage 3: [chapter-intro] — Chapter 1 opener\nPage 4: [text-column] — Chapter 1 body (1-column)\nPage 5: [stat-grid] — 4 key metrics\nPage 6: [closing-cta] — demo booking CTA + contact\n```\n\n**Confirm with user before Step 5.**\n\n---\n\n## Step 5: Content Draft\n\nWrite per-page copy in plain text (no HTML). Rules per layout type:\n\n- **cover**: title (≤10 words, leads with value or tension — not a generic label) + subtitle (≤15 words) + optional category label + brand name\n- **toc**: chapter titles (≤6 words each) + corresponding section numbers. Clean, numbered list.\n- **chapter-intro**: chapter number (decorative) + chapter title (≤8 words) + teaser paragraph (2–3 sentences)\n- **text-column (1-col)**: section heading + body paragraphs. Max 250 words. Prose > bullets. Every sentence earns its place.\n- **text-column (2-col)**: same rules, 140–190 words per column. Use for comparisons, step pairs, dual perspectives.\n- **text-sidebar**: main body (140–180 words) + sidebar callout type (tip / warning / stat / quote / checklist) with max 70 words\n- **quote-callout**: pull quote ≤40 words + attribution (name, title, company or source)\n- **stat-grid**: 3–6 metrics — number + label + 1-line context. Optional: 1-sentence narrative below.\n- **key-takeaways**: 5–8 takeaways, ≤15 words each, imperative where possible\n- **closing-cta**: headline ≤5 words (imperative) + 1-sentence body + CTA action + email + URL (both required)\n\n**Forbidden words (no exceptions):** \"powerful\", \"seamless\", \"game-changing\", \"leverage\", \"innovative\", \"revolutionary\", \"transform\", \"cutting-edge\", \"robust\", \"unlock\", \"scalable\" (as filler).\n\n---\n\n## Step 6: HTML Generation\n\nRead ALL of these before generating. Do not paraphrase or summarize them — read the actual files.\n\n**This skill's references:**\n- `references/design-system.md`\n- `references/page-library.md`\n- `references/style-presets.md`\n\n**Bundled asset (exact path — include FULL verbatim contents in `<style>` block):**\n- `assets/viewport-base.css` — bundled inside this skill's directory\n\n> **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.\n\n### Generation Rules\n\n1. **Single self-contained HTML.** All CSS inline. Font CDN `<link>` only external dependency.\n\n2. **Include FULL verbatim contents** of `viewport-base.css` inside the `<style>` block.\n\n3. **Add A4 portrait overrides AFTER viewport-base.css** (in the same `<style>` block):\n```css\n/* A4 portrait overrides */\nhtml { scroll-snap-type: none; scroll-behavior: auto; }\n.slide {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  scroll-snap-align: none;\n}\n/* CRITICAL: prevents Chromium from stripping backgrounds in PDF */\n* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\n```\n\n4. **Each page = `<section class=\"slide\">`** — required for export-pdf.sh page detection.\n\n5. **Comment each page:** `/* === PAGE N: LAYOUT-TYPE === */`\n\n6. **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.\n\n7. **Stat numbers:** hero at `clamp(3rem, 8vw, 5.5rem)` in accent color. Supporting at `clamp(2.5rem, 7vw, 5rem)` in secondary color.\n\n8. **No images available** → CSS-generated visuals only (gradients, geometric shapes, dot patterns, abstract elements). Never show placeholder boxes.\n\n9. **No SlidePresentation JS.** Include only minimal IntersectionObserver for `.reveal` animations.\n\n10. **Chapter number decoration** (on chapter-intro pages):\n```css\n.chapter-number-deco {\n  font-family: var(--font-display);\n  font-size: clamp(6rem, 18vw, 14rem);\n  font-weight: var(--display-weight);\n  opacity: 0.06;\n  position: absolute;\n  top: -0.1em;\n  right: var(--page-padding);\n  line-height: 1;\n  color: var(--accent);\n  pointer-events: none;\n  user-select: none;\n}\n```\n\n11. **Typed callout boxes** (for text-sidebar pages):\n```css\n.callout { border-left: 3px solid; border-radius: var(--card-radius, 4px); padding: clamp(0.75rem, 1.5%, 1.1rem); }\n.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; }\n.callout--tip      { background: rgba(22, 163, 74, 0.07);  border-color: #16A34A; }\n.callout--tip      .callout-label { color: #16A34A; }\n.callout--warning  { background: rgba(217, 119, 6, 0.07);  border-color: #D97706; }\n.callout--warning  .callout-label { color: #D97706; }\n.callout--stat     { background: rgba(var(--accent-rgb, 100,100,100), 0.07); border-color: var(--accent); }\n.callout--stat     .callout-label { color: var(--accent); }\n.callout--quote    { background: var(--bg-elevated); border-color: var(--divider); font-style: italic; }\n.callout--quote    .callout-label { color: var(--text-muted); }\n.callout--checklist { background: rgba(8, 145, 178, 0.07);  border-color: #0891B2; }\n.callout--checklist .callout-label { color: #0891B2; }\n```\n\n12. **Page footer** (on every page except cover):\n```css\n.page-footer {\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  padding: clamp(0.5rem, 1%, 0.625rem) var(--page-padding);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-top: 1px solid var(--divider);\n  font-family: var(--font-body);\n  font-size: clamp(0.55rem, 0.75vw, 0.65rem);\n  font-weight: 600;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--text-muted);\n}\n```\nHTML: `<div class=\"page-footer\"><span>[Brand Name]</span><span>[N]</span></div>`\n\n13. **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.\n\n14. **Text-sidebar layout:** `display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.5rem, 3%, 2.5rem);`\n\n### Design Quality Rules (from frontend-design principles)\n\nThese govern the aesthetic ambition of every generated ebook. Applied after structural rules, before output.\n\n**Typography:**\n- 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.\n- 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).\n- 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.\n\n**Backgrounds and atmosphere:**\n- 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.\n- Chapter-intro pages MUST visually contrast with adjacent content pages — use `var(--bg-alt)` or a style-appropriate alt treatment.\n- 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).\n- Closing CTA: always dark or full-accent inversion — never light. It is the conversion moment.\n- 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.\n\n**Spatial composition:**\n- Generous whitespace on chapter-intro pages — the visual openness signals a chapter break.\n- 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.\n- Avoid centered layouts unless the preset explicitly calls for it (quote-callout is the only centered-by-default layout).\n\n**Motion:**\n- All `.reveal` animations use consistent direction derived from design direction step.\n- Stagger delays: 0.05s increments, max 0.5s cumulative. Nothing slower than 0.65s duration.\n- Stat items in stat-grid: stagger by index for cascade effect.\n- No animation on structural elements (footers, borders, rules). Animation = content appearing, not layout materializing.\n\n**The unforgettable detail rule:**\nBefore 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.\n\n---\n\n## Step 7: Self-QA\n\nFix every failure before proceeding to output. Do not skip this step.\n\n**Layout & rendering:**\n- [ ] Every `.slide` has `height:100vh; height:100dvh; overflow:hidden`\n- [ ] `* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }` present globally\n- [ ] All scalable font sizes use `clamp()`\n- [ ] No content overflows at 1200×1697 — review each page's density\n- [ ] No placeholder boxes visible\n- [ ] No `-clamp()`, `-min()`, `-max()` directly (wrap negatives in `calc(-1 * ...)`)\n\n**Structure:**\n- [ ] Page count matches Step 4 plan\n- [ ] Every page uses `class=\"slide\"` on `<section>` only\n- [ ] All layout types from Step 4 present in correct order\n- [ ] TOC included for ebooks ≥ 6 pages\n\n**Reading quality:**\n- [ ] Body text `line-height ≥ 1.75` on text-column and text-sidebar pages\n- [ ] Single-column body text `max-width ≤ 65ch`\n- [ ] No 2+ consecutive text-column pages without visual break\n- [ ] TOC has chapter titles + section/page numbers\n- [ ] Chapter-intro pages have `.chapter-number-deco` (opacity 0.06–0.08)\n- [ ] Every page except cover has `.page-footer` with page number + brand name\n- [ ] Sidebar callout boxes use typed CSS class (`.callout--tip/warning/stat/quote/checklist`)\n\n**Design quality:**\n- [ ] Style preset tokens applied consistently (from `references/style-presets.md`)\n- [ ] No slop patterns (see `references/design-system.md` DO NOT USE list)\n- [ ] Typography hierarchy: cover title >> chapter heading >> section heading >> body (2:1 min ratio between levels)\n- [ ] Stat numbers visually dominant — no body copy at same visual weight\n- [ ] Cover has a significant decorative `::before`/`::after` element — not just text on a flat color\n- [ ] Chapter-intro pages visually distinct from content pages (different bg or treatment)\n- [ ] Closing CTA uses dark or full-accent inversion background — never light\n- [ ] No 3+ consecutive pages with identical background color\n- [ ] Signature element from design direction step is present and visible\n- [ ] At least one layout element breaks the grid (oversized deco number, bleed shape, dominant stat)\n- [ ] Reveal animations consistent direction and stagger — not random per-element\n\n**Content:**\n- [ ] No forbidden words anywhere\n- [ ] Cover title ≤10 words, leads with value or tension\n- [ ] Quote callout ≤40 words\n- [ ] Closing CTA: imperative headline + email + URL (both mandatory — QA fails without both)\n- [ ] TOC matches actual page structure\n- [ ] Three-point CTA present for ebooks ≥ 6 pages\n\n---\n\n## Step 8: Output\n\n```bash\nmkdir -p ebook/[slug]\n```\n\n**Write main HTML:** `ebook/[slug]/index.html`\n**Open:** `open ebook/[slug]/index.html`\n\n**Per-page split (always generate):**\nExtract each `<section class=\"slide\">` into standalone HTML files with full `<style>` block, no JS:\n`ebook/[slug]/page-01.html`, `page-02.html`, … (zero-padded 2 digits)\n\n**PDF export (always run):**\n```bash\nbash [skill-root]/scripts/export-pdf.sh \\\n  ebook/[slug]/index.html \\\n  ebook/[slug].pdf --portrait\n```\n`[skill-root]` = the directory containing this SKILL.md. Resolve it before running (e.g. `~/.claude/skills/graphic-ebook` in Claude Code after install).\n\n**Cleanup:** Delete `.claude-design/previews/` if style preview files were generated in Step 2.\n\n**Summary (no HTML in chat):**\n```\n## Ebook: [title]\nDate: [today] | Style: [style] | Pages: [N] | Format: A4 portrait\nBrand: [brand name] | Topic: [topic]\n\nFiles\n  Main:      ebook/[slug]/index.html\n  Per-page:  ebook/[slug]/page-01.html → page-0N.html\n  PDF:       ebook/[slug].pdf\n\nChecklist\n- [ ] Replace contact info placeholders (email + URL on closing page)\n- [ ] Replace brand logo initials with real asset\n- [ ] Verify TOC section numbers match actual page positions\n- [ ] Proof all stat accuracy (page [N])\n- [ ] Review body copy — no page should feel overflowed\n- [ ] Test PDF opens correctly (page count = [N])\n```","tags":["graphic","ebook","opendirectory","varnan-tech","agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"capabilities":["skill","source-varnan-tech","skill-graphic-ebook","topic-agent-skills","topic-gtm","topic-hermes-agent","topic-marketing-skills","topic-openclaw-skills","topic-skill-pack","topic-skills","topic-technical-seo"],"categories":["opendirectory"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Varnan-Tech/opendirectory/graphic-ebook","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Varnan-Tech/opendirectory","source_repo":"https://github.com/Varnan-Tech/opendirectory","install_from":"skills.sh"}},"qualityScore":"0.593","qualityRationale":"deterministic score 0.59 from registry signals: · indexed on github topic:agent-skills · 286 github stars · SKILL.md body (19,426 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:54:41.288Z","embedding":null,"createdAt":"2026-05-02T18:54:59.697Z","updatedAt":"2026-05-18T18:54:41.288Z","lastSeenAt":"2026-05-18T18:54:41.288Z","tsv":"'-12':984 '/previews/style-a.html':648 '0':979,986 '0.1':989 '0.97':981 '1':92,301,335,438,681,689,693,703,707,721,792,799,830,982,1049,1126,1145,1153,1155,1249,1325,1329,1352 '1.75':152 '10':22,81,220,451,741,1200 '11':27 '1200':100 '140':1066,1073,1272,1289 '15':1212,1339 '1697px':101 '16px':978 '180':1051,1074,1290 '190':1067,1273 '2':105,199,320,352,422,456,717,735,797,808,848,1060,1132,1243,1268 '2025':578 '250':1052,1256 '280':1062 '3':21,80,118,374,441,459,473,634,660,662,679,731,748,765,833,959,1097,1134,1140,1244,1320 '30':1091 '380':1063 '4':132,392,486,687,744,1103,1148,1162 '40':1083,1309 '45':1092 '5':144,344,442,460,493,700,766,1158,1179,1181,1336,1349 '50':366 '500':367 '6':172,446,455,528,589,714,762,790,1098,1123,1166,1222,1321,1383 '60':1084 '65ch':166 '7':194,541 '70':1077,1302 '8':253,447,555,728,1239,1337 '9':24,279,427,450,569 'a4':98 'absolut':91,293 'accent':908,956 'across':933 'action':376,843,1356 'actual':1400 'add':567 'adjust':258,264 'agenc':1031 'ai':175 'all-whit':947 'alon':1021 'anim':970 'apart':991 'appear':854 'appli':434 'architectur':664,787 'ask':325,425,654,1022 'asset':71,1410 'attribut':1311 'audienc':247,353,876,890,1036 'authorit':892 'automat':653 'b2b':7,53,61 'back':205,207 'back-to-back':204 'background':235,273,927,931,964 'bar':909 'bleed':922 'blue':186 'bodi':145,171,1042,1154,1253,1288,1354 'book':11,65,383,545,552,613,1171 'borders/structural':116 'bottom':296 'box':828 'brand':291,474,487,595,598,1130,1217 'break':208 'brief':302 'brutalist':514 'build':46 'bullet':774,1259 'bundl':1409 'cac':348 'callout':215,823,826,861,1090,1293,1306 'calm':895 'canva':99 'case':625 'categori':1215 'cdn':128 'chang':1369 'chapter':211,471,529,605,673,691,705,719,733,746,820,938,1081,1135,1142,1144,1152,1220,1232,1234,1237 'chapter-intro':210,690,704,718,732,745,819,937,1080,1141,1231 'chat':137 'check':846 'checklist':445,621,1299 'chromium':270 'churn':373,576 'clamp':111 'claud':646 'claude-design':645 'clean':496,526,603,1228 'clean-slat':495,525,602 'close':193,561,685,698,712,726,739,755,834,950,1168,1346 'closing-cta':684,697,711,725,738,754,1167,1345 'cloud':520 'col':1050,1061,1250,1269 'color':257,263,274 'column':157,170,202,696,710,724,852,1048,1059,1069,1151,1156,1248,1267,1276 'commit':224 'compani':358,370,476,1314 'comparison':1279 'complet':423 'confirm':1174 'consecut':849,960 'consist':903,976 'contact':556,616,1173 'contain':122 'content':49,103,393,398,437,682,736,749,942,1182,1416 'context':1327 'convers':842 'copi':146,1043,1188 'corpor':510 'correspond':1225 'count':440,530,539,588,606,610 'cover':283,481,640,680,688,701,715,729,742,778,917,935,1127,1198 'creat':4,35,58,328 'critic':83 'css':14,75,125,269,1011 'cta':542,562,611,686,699,713,727,740,756,786,794,812,832,835,951,1169,1172,1347,1355 'custom':362 'cut':1375 'cutting-edg':1374 'dark':952 'decis':881 'decor':905,1236 'deep':452 'default':433,454,524,535,551,584,586 'delay':988 'demo':385,544,554,615,1170 'densiti':1044 'depend':131 'deriv':536,579,592,607,665,872,882,1017 'design':6,38,60,227,244,492,647,870,1005,1030 'desir':375 'detail':543,612,993 'devic':901 'diagon':907 'direct':228,871,1015 'display':180 'distinct':243,941 'dive':453 'dot':911 'dot-grid':910 'download':386,549 'draft':402,1183 'dual':1282 'dump':134 'e':10,64 'e-book':9,63 'e.g':573 'earn':1262 'earth':513 'ebook':3,37,54,57,240,330,340,761,768,789,811 'edg':1376 'editori':500,893 'element':117,233,898 'email':558,1357 'emot':886 'energet':894 'entir':782 'everi':93,280,1260 'exact':259,265,326,1411 'exampl':1121 'except':282,1364 'execut':1040 'exist':397 'expect':891 'explor':803 'export':15 'extern':130 'failur':238 'field':306 'file':140,413,1401 'filenam':571 'filler':1381 'final':836 'fit':96 'fix':112 'flag':619 'font':108,127,181 'footer':288,483 'forbidden':1361 'four':304,309,333 'full':839,955,1414 'full-acc':954 'full-pag':838 'game':1368 'game-chang':1367 'gate':48,68 'generat':222,416,633,1385,1391 'generic':174,237,1209 'geometr':920 'global':268 'gradient':187,914 'graphic':2,56 'graphic-ebook':1,55 'gray':503 'grid':219,817,865,912,1096,1161,1319 'group':432 'guid':45,69,444,449,577 'head':1252 'headlin':1348 'height':151 'html':13,74,123,135,223,418,638,1193,1384 'ident':963 'imper':1342,1351 'import':260,266 'includ':759,1413 'info':557,617 'inform':470 'inlin':126,801 'innov':1371 'insert':858 'insid':773 'intak':303,424 'inter':178 'intern':663,666 'intro':212,692,706,720,734,747,793,821,939,1082,1143,1233 'invers':957 'kebab':624 'kebab-cas':623 'key':457,590,752,1163,1334 'key-takeaway':751,1333 'know':465 'label':1101,1118,1210,1216,1324 'later':568 'layout':29,1116,1196 'layout-typ':1115 'lead':40,66,1202 'leverag':1370 'limit':1045 'line':150,800,831,919,1326 'line-height':149 'list':775,1113,1230 'll':566 'logo':488,599 'magazin':516 'magazine-r':515 'magnet':41,67 'main':533,1076,1287 'make':42 'manag':364 'mandatori':267 'mani':532 'map':675 'market':350 'matt':502 'matt-gray':501 'max':164,1054,1065,1255,1301 'max-width':163 'mention':802 'mesh':915 'messag':431 'metric':1099,1164,1322 'mid':810 'mid-ebook':809 'midnight':499 'midnight-editori':498 'minim':506,1100 'mint':508 'mint-pixel-corpor':507 'miss':324 'motion':965 'must':95,241,284 'name':292,475,479,596,1006,1218,1312 'narrat':1331 'need':332 'never':133,197,667,877 'newslett':546 'none':491,597,600 'number':290,1112,1138,1227,1229,1235,1323 'numer':906 'nurtur':70 'one':229,231,234,430,899,924,973,997 'open':651,1146 'option':523,632,1214,1328 'outlin':420 'output':540,1110 'overflow':104 'overlay':913 'overs':904 'page':23,28,82,94,162,203,281,287,289,439,538,563,587,609,637,641,674,676,683,737,750,763,767,779,791,796,837,840,853,934,943,961,1056,1104,1120,1125,1131,1137,1139,1147,1157,1165,1187 'pager':1124 'pain':360 'pair':1281 'paper':73 'paragraph':1242,1254 'paraphras':1394 'path':1412 'pdf':20,44,79,276 'per':1055,1068,1119,1186,1195,1275 'per-pag':1185 'person':368 'perspect':1283 'pick':657,923,972 'piec':50 'pixel':509 'place':198,1264 'placehold':618 'plain':1190 'plan':857,1109 'point':361,785 'posit':294 'possibl':1344 'power':1365 'present':311 'preset':26,875,1020 'preview':639 'primari':148,841 'print':18,77,256,262 'print-color-adjust':261 'print-readi':17,76 'proceed':869 'produc':1032 'product':478,505 'product-minim':504 'profession':5,59 'prompt':316 'prose':1258 'pull':1307 'purpl':184 'purple-to-blu':183 'px':113,985 'question':428,585 'quick':443 'quieter':944 'quot':214,860,1089,1298,1305,1308 'quote-callout':213,859,1088,1304 'read':355,411,469,1106,1386,1398 'reader':380,463,1000 'readi':19,78 'red':517 'reduc':347,575 'reduce-churn-guid':574 'refer':412,1405 'references/design-system.md':1406 'references/page-library.md':1107,1407 'references/style-presets.md':1408 'regist':887 'rememb':1002 'requir':305,1360 'reveal':969 'revolutionari':1372 'rhythm':196,845 'robust':1377 'role':357 'rule':84,89,758,918,1194,1271 'saa':8,62,369 'save':138,643 'say':34 'scalabl':107,1379 'scale':980 'seamless':1366 'section':534,1226,1251 'self':121 'self-contain':120 'sentenc':1245,1261,1330,1353 'shape':921 'share':389 'show':141,521,630,668 'shown':878 'sidebar':161,1072,1079,1286,1292 'signatur':232,897 'signup':547 'singl':119,169,636 'single-column':168 'single-pag':635 'size':109,359 'skill':1403 'skill-graphic-ebook' 'skip':317,436,485,583,781 'slate':497,527,604 'slide':299 'slop':176 'slug':570,572,622 'small':822 'soft':519 'soft-cloud':518 'sourc':1316 'source-varnan-tech' 'specif':343,1035 'stagger':987 'standard':448 'stat':218,816,824,864,1095,1160,1297,1318 'stat-grid':217,815,863,1094,1159,1317 'stay':975 'step':87,300,319,421,659,661,1102,1178,1180,1280,1382 'stop':406 'strip':271 'strong':1014 'structur':472,678,1105 'struggl':371 'style':25,494,601,629,874,966,1019 'style-b.html':649 'style-c.html':650 'subject':249 'subtitl':1129,1211 'subtl':798 'success':363 'summar':1396 'summari':142 'system':236,928 'takeaway':458,591,753,1335,1338 'team':391 'teaser':1086,1241 'templat':252,388,548 'tension':1206 'text':156,160,201,695,709,723,851,1047,1058,1071,1150,1191,1247,1266,1285 'text-column':155,200,694,708,722,850,1046,1057,1149,1246,1265 'text-sidebar':159,1070,1284 'thank':191 'thing':334,461,998 'three':784 'three-point':783 'tier':1029 'tip':351,827,1295 'titl':1128,1136,1199,1221,1238,1313 'toc':702,716,730,743,757,1133,1219 'tone':230,884 'tool':805 'top':1028 'top-tier':1027 'topic':336,405,581,594,627,1038 'topic-agent-skills' 'topic-gtm' 'topic-hermes-agent' 'topic-marketing-skills' 'topic-openclaw-skills' 'topic-skill-pack' 'topic-skills' 'topic-technical-seo' 'transform':1373 'translatex':983 'translatey':977 'trigger':31 'type':30,1117,1197,1294 'typic':677 'unforgett':992 'unlock':1378 'url':489,559,807,1358 'use':110,769,902,925,1277 'user':33,314,655,672,880,1176 'valu':1204 'vari':932 'verbatim':1415 'visual':195,844,900 'wait':408 'warm':512,896 'warm-earth':511 'warn':1296 'way':345 'webkit':255 'webkit-print-color-adjust':254 'white':72,189,949 'width':165 'within':97 'without':277 'word':1053,1064,1075,1078,1085,1093,1201,1213,1223,1240,1257,1274,1291,1303,1310,1340,1350,1362 'would':1025 'write':51,1009,1184","prices":[{"id":"dfedea10-4a9b-4bad-8090-8cab13b1150a","listingId":"10fad57c-36ac-42f0-8abf-829e8e1c8808","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Varnan-Tech","category":"opendirectory","install_from":"skills.sh"},"createdAt":"2026-05-02T18:54:59.697Z"}],"sources":[{"listingId":"10fad57c-36ac-42f0-8abf-829e8e1c8808","source":"github","sourceId":"Varnan-Tech/opendirectory/graphic-ebook","sourceUrl":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/graphic-ebook","isPrimary":false,"firstSeenAt":"2026-05-02T18:54:59.697Z","lastSeenAt":"2026-05-18T18:54:41.288Z"}],"details":{"listingId":"10fad57c-36ac-42f0-8abf-829e8e1c8808","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Varnan-Tech","slug":"graphic-ebook","github":{"repo":"Varnan-Tech/opendirectory","stars":286,"topics":["agent-skills","gtm","hermes-agent","marketing-skills","openclaw-skills","skill-pack","skills","technical-seo"],"license":"mit","html_url":"https://github.com/Varnan-Tech/opendirectory","pushed_at":"2026-05-18T18:27:10Z","description":" AI Agent Skills built for Founders who hate Marketing","skill_md_sha":"9052a448939703533c6f21959880f719b4a3255f","skill_md_path":"skills/graphic-ebook/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Varnan-Tech/opendirectory/tree/main/skills/graphic-ebook"},"layout":"multi","source":"github","category":"opendirectory","frontmatter":{"name":"graphic-ebook","description":"Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says \"create an ebook\", \"design a lead magnet\", \"make a PDF guide\", \"build a gated content piece\", \"write a B2B ebook\", \"design a white paper\", \"create a nurture asset\", or \"make a PDF report\".","compatibility":"[claude-code, gemini-cli, github-copilot]"},"skills_sh_url":"https://skills.sh/Varnan-Tech/opendirectory/graphic-ebook"},"updatedAt":"2026-05-18T18:54:41.288Z"}}