fs-notebook-tabs

Imported from nexu-io/open-design (plugins/_official/examples/fs-notebook-tabs/SKILL.md). Install upstream with npx skills add nexu-io/open-design --skill fs-notebook-tabs. Copyright stays with the author.

Notebook Tabs (索引笔记本)

A theme-locked deck plugin derived from the MIT-licensed zarazhangrui/frontend-slides "Notebook Tabs" style preset (STYLE_PRESETS.md section 5). The whole deck reads as one physical, editorially typeset notebook: every slide is a cream paper page floating on a dark desk, with a colorful tab index on the right fore-edge and binder holes on the left.

Start from example.html in this plugin folder. It is the proven seed: keep its stage CSS, the paper/holes/tabs device, the :root token block, and the entire SlidePresentation controller script verbatim — replace only the slide content. Do not redesign, do not introduce any color or font outside this spec.

Fixed 16:9 stage (locked scaling system)

• Every deck is authored on a fixed 1920×1080 canvas: .deck-viewport (fills the window) wraps .deck-stage (1920×1080, transform-origin: 0 0).
• JavaScript scales the whole stage uniformly: factor = min(innerWidth/1920, innerHeight/1080), then translate(x, y) scale(factor) to center with letterbox/pillarbox; re-run on resize. This is the viewport-base.css system — the full file is already inlined in the seed.
• Never reflow slide content per device. No responsive breakpoints inside slides. All measurements are fixed px at the 1920×1080 design size (the upstream preset's clamp() tab sizing is superseded by stage scaling — use fixed px).
• Slide switching toggles .active/.visible (visibility/opacity/pointer-events) — never display: none.
• Keyboard (←/→/↑/↓/Space/PageUp/PageDown/Home/End), debounced wheel (~650ms), touch swipe (≥40px), and #/<index> hash routing with deep-link restore. The page counter lives in .deck-controls, fixed-positioned outside the scaled stage.

Design tokens (locked — reproduce exactly, never substitute)

:root {
    /* Colors */
    --bg-outer: #2d2d2d;          /* dark desk behind the notebook */
    --bg-page: #f8f6f1;           /* cream paper */
    --text-primary: #1a1a1a;
    --text-secondary: #6b6358;
    --rule: #d8d2c4;              /* hairline rules on paper */
    --tab-1: #98d4bb;             /* Mint */
    --tab-2: #c7b8ea;             /* Lavender */
    --tab-3: #f4b8c5;             /* Pink */
    --tab-4: #a8d8ea;             /* Sky */
    --tab-5: #ffe6a7;             /* Cream */
    --stage-bg: var(--bg-outer);
    --slide-bg: var(--bg-outer);

    /* Typography */
    --font-display: 'Bodoni Moda', 'Didot', serif;   /* 400/700 + italic */
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;  /* 400/500/700 */
    --title-size: 150px;
    --h2-size: 84px;
    --subtitle-size: 30px;
    --body-size: 26px;
    --label-size: 17px;

    /* Paper geometry inside the 1920×1080 stage */
    --paper-top: 56px;
    --paper-bottom: 56px;
    --paper-left: 120px;
    --paper-right: 150px;        /* leaves room for the protruding tabs */
    --paper-pad-x: 110px;
    --paper-pad-y: 78px;

    /* Motion */
    --ease-page: cubic-bezier(0.16, 1, 0.3, 1);   /* the one signature easing */
    --duration-normal: 0.7s;
}

Fonts load via one Google Fonts @import (Bodoni Moda ital,wght 0,400/0,700/1,400 + DM Sans 400/500/700). Forbidden: any other font, Inter/Roboto/Arial/system display fonts, any color outside the tokens above, gradients as decoration, indigo #6366f1, dark-glassmorphism panels.

Signature devices (every slide carries all of them)

1. Paper card .paper — absolutely positioned by the --paper-* insets, border-radius: 8px, layered shadow (0 2px 4px + 0 18px 50px dark drops + a 1px inner white highlight), faint 44px-pitch ruled-line grain via a layered linear-gradient, z-index: 1.
2. Binder holes .holes — a left-margin flex column of 10 punched circles (26px, background: var(--bg-outer), inset dark shadow + 1px white bottom highlight), inside the paper at left: 38px.
3. Margin rule .margin-rule — a 1px vertical line at left: 92px in var(--tab-3) at 0.55 opacity, echoing a real notebook's red margin line.
4. Index tabs .tabs — a vertical column of 5 tabs on the right fore-edge, writing-mode: vertical-rl, DM Sans 700 uppercase letter-spaced, 56×158px, border-radius: 0 10px 10px 0, colored --tab-1…--tab-5 in order. The column is positioned against the stage (right: calc(--paper-right - 44px)) at z-index: 0 so 12px of each tab root tucks under the paper. The current section's tab gets .on (full opacity, translateX(0), stronger shadow); inactive tabs sit at 0.82 opacity, translateX(-6px). Tab labels name the deck's sections (seed: Intro / Craft / Numbers / Plan / End) — rename to the actual sections, keep the color order.
5. Page chrome — .runhead top ("No. NN" + running title, uppercase DM Sans, hairline bottom border) and .baseline bottom (section name + "NN / total", hairline top border). Keep both on every slide.

Layout vocabulary (compose every deck from these masters)

cover (kicker with color chip + giant Bodoni display with one italic word + swatch row), contents (index rows: color chip + roman numeral + dotted leaders + page no.), section divider (430px outline-stroke Bodoni numeral + color bar + h2), bullets (max 3 points: colored circular pin with inline-SVG icon + Bodoni h3 + DM Sans support line), quote (lavender 220px quote mark + Bodoni italic 66px), big-stat (300px Bodoni number with italic unit + mint-left-border side note), CSS bar chart (scaleY-animated bars in tab colors over a solid axis), two-column comparison (plain column vs .hot column with 8px 8px 0 var(--tab-4) hard offset shadow), principle grid (2×2 cards, each with a 12px colored left edge via --edge), closing (display sign-off + underlined contact links + colophon line). Default 8-11 slides per deck; honor the requested slide count when the user picks one; split content rather than shrinking type. No scrolling, no overflow.

Motion

• Entrances only via .reveal elements transitioning when the slide gains .visible; stagger with transition-delay steps of ~0.1s (.d1–.d6 helper classes).
• One signature easing: cubic-bezier(0.16, 1, 0.3, 1). Animate only transform and opacity. Chart bars grow with transform: scaleY from transform-origin: bottom.
• prefers-reduced-motion support is mandatory (already in the inlined stage CSS).

Output contract

• Single self-contained .html: all CSS and JS inline, zero build step, zero external JS libraries or CDN scripts (no Chart.js, no mermaid — pure CSS/SVG only). Icons are inline SVG. No remote images. The only allowed external reference is the Google Fonts @import.
• Comment every block: /* === SECTION NAME === */.
• From example.html, change only the content (text, section/tab names, data values, icon paths). The tokens, paper device, tabs, chrome, and controller script are the product — do not rewrite them, and never introduce colors or fonts outside this spec.