fs-notebook-tabs

Generate theme-locked HTML slide decks with notebook-style visual elements and fixed-ratio scaling.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#education #CSS #HTML #presentation #deck #Notebook #Slides

One-click install

npx skills add https://github.com/nexu-io/open-design --skill fs-notebook-tabs

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: fs-notebook-tabs
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/fs-notebook-tabs
Command: npx skills add https://github.com/nexu-io/open-design --skill fs-notebook-tabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill solves the inconsistency and design overhead of creating professional-grade presentation decks by providing a rigid, theme-locked visual system that ensures every slide adheres to a specific aesthetic standard.

Core Features & Use Cases

Notebook Aesthetic: Automatically applies a cream-paper background, binder holes, and vertical index tabs to all slides.
Fixed-Ratio Scaling: Uses a 1920x1080 viewport-base system to ensure consistent layout across all devices without reflow issues.
Use Case: Ideal for students or professionals needing to create high-fidelity, single-file HTML defense decks or coursework presentations that require a specific, non-responsive visual identity.

Quick Start

Use the fs-notebook-tabs skill to generate a new HTML deck based on the provided example.html template.

Frequently Asked Questions about fs-notebook-tabs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a new deck using the notebook theme?▼

Start by copying the example.html file provided in the plugin folder. Keep the CSS tokens, paper device, and controller script intact, and replace only the slide content within the section elements.

Can I change the fonts or colors in the deck?▼

No, the design tokens are locked to ensure visual consistency. You must use the specified Bodoni Moda and DM Sans fonts and the defined color palette to maintain the notebook aesthetic.

Does the deck support responsive design?▼

The deck uses a fixed 1920x1080 canvas that scales uniformly based on the viewport size. It is designed to avoid reflow, ensuring the layout remains identical across different screen resolutions.

How do I add new slides to the presentation?▼

Add new section elements with the class 'slide' inside the 'deck-stage' container. Ensure each slide includes the required paper, holes, and chrome elements to maintain the notebook theme.