Agent skill · design visual · nexu-io
fs-notebook-tabs
A computer-science capstone: an on-device ML keyboard that predicts next words privately — problem, method, evaluation, and defense answers. Built as a decision-grade coursework defense deck for professor, defense committee.
Why this skill is useful
Provides a structured template and design guidelines for creating a visually consistent academic presentation that the AI wouldn't generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Notebook Tabs (索引笔记本) A theme-locked deck plugin derived from the MIT-licensed zarazhangrui/frontend-slides "Notebook Tabs" style preset (STYLEPRESETS.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) Fonts load via one Google Fonts @import (Bodoni Moda ital,wght 0,400/0,700/1,400 + DM Sans 400/500/700). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/fs-notebook-tabs