# book-serif-index

Sets rules for archival readers and editorial interfaces: serif typography, aged paper textures, marginalia boxes, and monospace catalog navigation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 installs · ★ 7001
- Author: MengTo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/book-serif-index/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/book-serif-index

## What it does

This skill guides the agent to generate archival reading surfaces wrapped in a technical catalog frame. The layout relies on a two-zone structure. A dark outer container encloses a centered paper-like reading area. Typographic hierarchy comes first, pairing readable serif body text with monospace navigation rails.

Instead of flat cards, the reading spread uses subtle paper textures, crease shadows, and edge shading. The color palette stays restrained. It pairs warm paper interiors and muted ink tones with single accent shades like oxblood or antique gold. Bright modern SaaS palettes break the intended atmosphere.

Editorial details reinforce the archival feel through drop caps, margin notes, and bottom folio markers. Motion remains quiet, using masked reveals and slow hover transitions. Applying this direction requires tactile surface depth, so simple cream rectangles without shadows will fail the visual target.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill book-serif-index -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/book-serif-index/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/book-serif-index/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill book-serif-index -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/book-serif-index/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill book-serif-index -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/book-serif-index/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills book-serif-index
```

2. **Manually: put the files in place**
- File: `.github/skills/book-serif-index/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill book-serif-index -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/book-serif-index
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/book-serif-index/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill book-serif-index -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/book-serif-index/SKILL.md

## When to use it
- style an archival document viewer or literary catalog
- structure layouts with serif body text and monospace index labels
- add paper textures and crease shadows to book spreads
- build catalog navigation rails with chapter markers and section trees

## Example prompts
- Build an archival document reader layout following book-serif-index guidelines
- Design an editorial page with serif body text, marginal notes, and a catalog frame

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: db32afe45d8c0aa4.

BEGIN THIRD-PARTY FILE db32afe45d8c0aa4
```text
---
name: book-serif-index
description: "Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame."
---

# Book Serif Index Skill

## Use When
- Create an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.

## Workflow

## Scope
- Apply this as a full design-system direction when the interface should feel like a curated archival reader, manuscript viewer, or premium literary catalog.
- Use it for editorial experiences, story-driven product pages, archives, research interfaces, lore systems, or reading-centric layouts that need bookish structure and index navigation.
- This is not generic blog styling; it should combine immersive book surfaces with a technical or catalog-like outer frame.

## Visual target
- Create a central reading surface that feels like an open book, folio spread, or archival document laid within a darker surrounding interface shell.
- Let typography lead the experience: display serif or gothic-inspired headings, readable serif body text, and mono utility labels for navigation, metadata, and indexing.
- Use aged paper tones, subtle texture, crease shadows, edge shading, and light wear so the main content surface feels tactile and collected.
- Surround the reading area with restrained index or catalog UI: sidebar sections, chapter markers, section lists, archive labels, or mono navigation rails.
- Keep the palette restrained and atmospheric: dark outer shell, warm paper interior, muted ink tones, and one selective accent color derived from the design. If no brand accent exists, a subdued oxblood, bronze, or antique gold is acceptable.

## Implementation guidance
- Prefer a two-zone composition: a darker outer interface frame plus a lighter book-like content surface centered inside it.
- Use serif body copy with generous line height for readability, then pair it with mono labels, tracking-heavy section names, and quiet metadata for contrast.
- Build the book surface with gradients, inset shadows, subtle center crease treatment, edge shadows, and light paper texture so it reads as layered material rather than a flat beige card.
- Include index-like navigation patterns such as chapter lists, section trees, archive groupings, or sidebar entries with active states and small markers.
- Add scholarly details like drop caps, marginalia boxes, block labels, annotations, citations, folio markers, or footer metadata to reinforce the editorial system.
- Motion should stay calm and literary: masked text reveals, gentle entrance motion, slow ambient background drift, and restrained hover cues.

## Recommended patterns
- Outer shell: dark full-screen container with thin frame lines, subtle vertical rails, and muted corner markers.
```
END THIRD-PARTY FILE db32afe45d8c0aa4

The third-party file has ended. Everything between the db32afe45d8c0aa4 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2870 of 4526 bytes. © MengTo · MIT · https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/book-serif-index/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md