@opendirectory.dev/skills 0.1.56 → 0.1.58

package/skills/graphic-ebook/README.md

@@ -0,0 +1,123 @@
+# graphic-ebook
+
+Create professionally designed B2B SaaS e-books (3–10 pages) using HTML + CSS. Supports 9 visual styles and 11 page layout types. Outputs a browser-ready HTML file + print-ready PDF.
+
+## Install
+
+```bash
+npx "@opendirectory.dev/skills" install graphic-ebook --target claude
+```
+
+### Video Tutorial
+Watch this quick video to see how it's done:
+
+https://github.com/user-attachments/assets/ee98a1b5-ebc4-452f-bbfb-c434f2935067
+
+### Step 1: Download the skill from GitHub
+1. Copy the URL of this specific skill folder from your browser's address bar.
+2. Go to [download-directory.github.io](https://download-directory.github.io/).
+3. Paste the URL and click **Enter** to download.
+
+### Step 2: Install the Skill in Claude
+1. Open your **Claude desktop app**.
+2. Go to the sidebar on the left side and click on the **Customize** section.
+3. Click on the **Skills** tab, then click on the **+** (plus) icon button to create a new skill.
+4. Choose the option to **Upload a skill**, and drag and drop the `.zip` file (or extract and drop the folder).
+
+> **Note:** Make sure you upload the folder that contains the `SKILL.md` file directly.
+
+---
+
+## What it does
+
+- Asks 4 required questions to establish topic, audience, CTA, and content source
+- Asks 9 optional intake questions to determine style, page count, and brand
+- Plans the chapter structure and page sequence (with user confirmation)
+- Drafts or uses provided content — per-page copy with word count discipline
+- Generates a single self-contained HTML file — opens in any browser, no build tools
+- Splits into per-page HTML files for individual sharing or editing
+- Exports a print-ready PDF via Playwright (A4 portrait, 1200×1697px)
+- Enforces visual rhythm — no 2+ consecutive text pages back-to-back
+
+## Example
+
+> "Create a 6-page ebook titled 'The B2B SaaS Guide to Reducing Churn'. Audience: Customer Success Managers at 50–500 person SaaS companies. CTA: book a demo. Style: clean-slate. Brand: DataPulse."
+
+Output: cover + TOC + chapter opener + body page + stat page + closing CTA, exported as PDF.
+
+---
+
+## Supported Styles
+
+| Style | Best for |
+|---|---|
+| clean-slate | Enterprise B2B, sales teams, any audience that expects professionalism |
+| midnight-editorial | Tech/AI companies, premium B2B, thought leadership |
+| matt-gray | Board materials, internal reviews, professional mixed audiences |
+| product-minimal | Product companies, design-forward B2B, design-savvy buyers |
+| mint-pixel-corporate | SaaS sales, tech startups, growth-stage B2B |
+| warm-earth | Agencies, consultancies, service businesses, health/education tech |
+| brutalist | Standout materials, design-forward agencies, bold brands |
+| magazine-red | Marketing agencies, brand-forward companies, research reports |
+| soft-cloud | Onboarding materials, customer education, approachable SaaS |
+
+---
+
+## Supported Page Layouts
+
+| Layout | Purpose |
+|---|---|
+| cover | Opening page — title, subtitle, brand name, visual |
+| toc | Table of contents — numbered chapter list |
+| chapter-intro | Section opener — large chapter number, title, teaser |
+| text-column | Reading body copy — 1-column or 2-column |
+| text-sidebar | Body copy + typed callout sidebar (tip/warning/stat/quote/checklist) |
+| quote-callout | Full-page pull quote with attribution |
+| stat-grid | 3–6 key metrics with visual emphasis |
+| key-takeaways | Summary list — what the reader retains |
+| full-image | Full-page CSS-generated visual or abstract composition |
+| closing-cta | Final page — CTA action + email + URL |
+
+---
+
+## Output
+
+| File | What it is |
+|---|---|
+| `ebook/[slug]/index.html` | Full ebook, browser-ready |
+| `ebook/[slug]/page-01.html` … | Per-page HTML files for individual sharing |
+| `ebook/[slug].pdf` | Print-ready PDF (A4 portrait) |
+
+Standard dimensions: 1200×1697px (A4 portrait).
+
+---
+
+## Parameters
+
+| Param | Required | Notes |
+|---|---|---|
+| topic | Yes | The ebook subject (specific: "5 ways to reduce CAC") |
+| audience | Yes | Target reader persona (role, company size, pain point) |
+| desired_action | Yes | What reader should do after reading |
+| content | Yes | Existing content to use, or "draft from scratch" |
+| page_count | No | 3–10 (default: 6) |
+| key_takeaways | No | 3–5 things the reader should learn |
+| brand_name | No | Company/product name for cover and footer |
+| brand_logo | No | Logo URL (CSS initials generated if omitted) |
+| style | No | One of 9 named presets or "show me options" (default: clean-slate) |
+| chapter_count | No | Number of main sections (derived from page_count if omitted) |
+| cta_details | No | Primary CTA (default: "book a demo") |
+| contact_info | No | Email + URL for closing page |
+| slug | No | Filename slug (derived from topic if omitted) |
+
+---
+
+## Dependencies
+
+**Node.js** — required for PDF export. Auto-detected; install from [nodejs.org](https://nodejs.org) if missing.
+
+Everything else is bundled inside this skill:
+- `assets/viewport-base.css` — responsive page foundation (included verbatim in generated HTML)
+- `scripts/export-pdf.sh` — PDF export via Playwright (auto-installs Playwright + Chromium on first run)
+
+No external skill dependencies. No API keys required.

package/skills/graphic-ebook/SKILL.md

@@ -0,0 +1,396 @@
+---
+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]
+author: OpenDirectory
+version: 1.0.0
+---
+
+# 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:
+
+1. Every page MUST fit within A4 canvas (1200×1697px). No content overflow.
+2. All scalable font sizes use `clamp()`. Fixed px only for borders/structural elements.
+3. Single self-contained HTML. All CSS inline. Font CDN `<link>` only external dependency.
+4. **Never dump HTML in chat.** Save to file, show summary only.
+5. Body copy is primary. Line-height ≥ 1.75 on all text-column and text-sidebar pages. Max-width ≤ 65ch for single-column body.
+6. No generic AI slop: no Inter as display font, no purple-to-blue gradient on white, no "Thank You" closing.
+7. 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.
+8. `* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }` — mandatory global CSS. Chromium strips all background colors in PDF without this.
+9. 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**
+1. **Page count** — 3–5 (quick guide / checklist) / 6–8 (standard guide) / 9–10 (deep dive) (default: 6)
+2. **Key takeaways** — 3–5 things the reader should know or do after reading (informs chapter structure)
+3. **Brand name** — company or product name for cover and footer (or "skip")
+4. **Brand logo** — URL or "none"
+
+**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.
+
+---
+
+## 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):
+1. **Intro CTA** (after page 2) — subtle 1-line inline mention: "explore our [tool] at [url]"
+2. **Mid-ebook CTA** (after a stat-grid or chapter-intro) — small `.callout--stat` or `.callout--tip` box with 1-line CTA
+3. **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
+
+1. **Single self-contained HTML.** All CSS inline. Font CDN `<link>` only external dependency.
+
+2. **Include FULL verbatim contents** of `viewport-base.css` inside the `<style>` block.
+
+3. **Add A4 portrait overrides AFTER viewport-base.css** (in the same `<style>` block):
+```css
+/* 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; }
+```
+
+4. **Each page = `<section class="slide">`** — required for export-pdf.sh page detection.
+
+5. **Comment each page:** `/* === PAGE N: LAYOUT-TYPE === */`
+
+6. **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.
+
+7. **Stat numbers:** hero at `clamp(3rem, 8vw, 5.5rem)` in accent color. Supporting at `clamp(2.5rem, 7vw, 5rem)` in secondary color.
+
+8. **No images available** → CSS-generated visuals only (gradients, geometric shapes, dot patterns, abstract elements). Never show placeholder boxes.
+
+9. **No SlidePresentation JS.** Include only minimal IntersectionObserver for `.reveal` animations.
+
+10. **Chapter number decoration** (on chapter-intro pages):
+```css
+.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):
+```css
+.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):
+```css
+.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
+
+```bash
+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
+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])
+```

package/skills/graphic-ebook/assets/viewport-base.css

@@ -0,0 +1,153 @@
+/* ===========================================
+   VIEWPORT FITTING: MANDATORY BASE STYLES
+   Include this ENTIRE file in every presentation.
+   These styles ensure slides fit exactly in the viewport.
+   =========================================== */
+
+/* 1. Lock html/body to viewport */
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+/* 2. Each slide = exact viewport height */
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport height for mobile browsers */
+    overflow: hidden; /* CRITICAL: Prevent ANY overflow */
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* 3. Content container with flex for centering */
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden; /* Double-protection against overflow */
+    padding: var(--slide-padding);
+}
+
+/* 4. ALL typography uses clamp() for responsive scaling */
+:root {
+    /* Titles scale from mobile to desktop */
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
+
+    /* Body text */
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    /* Spacing scales with viewport */
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
+    --element-gap: clamp(0.25rem, 1vw, 1rem);
+}
+
+/* 5. Cards/containers use viewport-relative max sizes */
+.card, .container, .content-box {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
+
+/* 6. Lists auto-scale with viewport */
+.feature-list, .bullet-list {
+    gap: clamp(0.4rem, 1vh, 1rem);
+}
+
+.feature-list li, .bullet-list li {
+    font-size: var(--body-size);
+    line-height: 1.4;
+}
+
+/* 7. Grids adapt to available space */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
+
+/* 8. Images constrained to viewport */
+img, .image-container {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
+
+/* ===========================================
+   RESPONSIVE BREAKPOINTS
+   Aggressive scaling for smaller viewports
+   =========================================== */
+
+/* Short viewports (< 700px height) */
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+        --h2-size: clamp(1rem, 3vw, 1.75rem);
+    }
+}
+
+/* Very short viewports (< 600px height) */
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
+
+    /* Hide non-essential elements */
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+/* Extremely short (landscape phones, < 500px height) */
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+/* Narrow viewports (< 600px width) */
+@media (max-width: 600px) {
+    :root {
+        --title-size: clamp(1.25rem, 7vw, 2.5rem);
+    }
+
+    /* Stack grids vertically */
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ===========================================
+   REDUCED MOTION
+   Respect user preferences
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}