# Digital Eguide

> Digital E-Guide Template

- Skill: `martin65536/digital-eguide` (Agent Skill, multi-file: 21 files)
- Install (CLI): `npx skillmds@latest add martin65536/digital-eguide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/martin65536/digital-eguide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: martin65536 (https://skillmd.com/u/martin65536)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/martin65536/digital-eguide

---


# Digital E-Guide Template

Use this template family for **premium, metadata-rich, exploratory digital artifacts** — designer portfolios, archival photo series, knowledge guides — that reward slow browsing instead of fast scrolling.

This template ships two variants. Pick before building.

## Variants

### `case/` — Infinite-canvas portfolio (作品集)

> On-disk path: `case（无限画布：作品集）/case/index.html`

- A Miro-like 3D-cylindrical canvas of 18 tiles you drag, zoom, and click to open case detail pages.
- Use for: designer 作品集, studio portfolio, photographer archive, case-study lobby.
- Distinctive moves: Three.js-style cylindrical projection, drag inertia, gold/dark glass UI, hash-routed detail pages, "Works / About / Resume" nav.
- Companion generator: see top-level `../vr-canvas/` template (modern frontmatter version).

### `social-carousel.html` — 12-frame field-notes carousel

- A 50/50 photo + metadata carousel with 12 horizontal slides, progress bar, slide counter, scaling-on-focus serif title.
- Use for: digital ebook chapter navigation, photography series, "12 lessons from the field"-style guides, museum/archive viewer.
- Distinctive moves: Fraunces italic display that scales on active slide, Inter metadata, film-frame photo marks, 50/50 desktop split that stacks on mobile.

## Use When

- The user wants a **considered, curatorial** browsing experience — not a marketing site, not a social card.
- Every item carries metadata (year, location, technique, brand, tags) and that metadata is part of the design.
- The audience is designers, creators, or curious readers who will spend minutes, not seconds.

## Avoid When

- The artifact is a fast-conversion marketing page (use `saas-landing/`).
- The content has no per-item metadata to display (the template will feel empty).
- The user actually wants a flat blog index, dashboard, or social-card pack.
- Mobile is the dominant channel and rich interaction would degrade — both variants are desktop-leaning.

## Required Reading

Read this `SKILL.md` first. Do **not** read `case/index.html` or `social-carousel.html` by default.

Read the chosen variant only when you need concrete interaction geometry — drag inertia easing, cylinder radius, slide-scale-on-focus curve, breakpoint behavior. Extract patterns; do not lift Three.js code, placeholder project names, or photo URLs wholesale.

## Design Strategy

Pick the variant from the **interaction contract**, not the topic:

- "Let me wander a room of work" → **case/**
- "Walk me through 8–14 numbered entries" → **social-carousel.html**

Then commit to the metadata schema up front (year / category / location / brand …). The template only sings when every entry carries the same set of labels.

## Layout Bias

Prefer:

- one dominant image per entry, full-bleed inside its frame
- metadata in mono / small-caps / Latin to contrast the serif display
- a single warm accent (gold, rust) over a dark or paper ground
- smooth eased motion (cubic-bezier), no bouncy springs
- generous negative space — the artifact's premium feel comes from restraint

Avoid:

- stacking multiple thumbnails per slide / tile (kills the curatorial feel)
- bright neon accents, gradient meshes, sticker decorations
- pop-in animations on every element — choose one motion idiom and hold it
- treating metadata as a footnote — surface it equally with the image