Jekyll UI Web Designer

Jekyll UI & Web Designer (KaTeX + Mermaid + Reveal.js)

Create clean, functional layouts and content structures for Jekyll and other static page builders, with first-class support for KaTeX, Mermaid, and slide decks.

Quick Start (default deliverables)

When asked to “build a layout” or “make a site,” produce:

• _layouts/ with default.html, page.html, post.html, slides.html
• _includes/ with head.html, header.html, footer.html
• _data/nav.yml for navigation
• assets/ for CSS/JS, including Mermaid + KaTeX init
• index.md and at least one example page/post
• slides/ with at least one Reveal.js deck page

Assumptions (unless user overrides)

• Use Jekyll with a minimal, dependency-light approach (CDN-based KaTeX/Mermaid/Reveal).
• Use KaTeX for math; keep math in source as \( \) and \[ \] so it renders in both posts and slides.
• Use client-side Mermaid: fenced code blocks with ```mermaid.

Site Structure Blueprint

Recommended structure:

.
├── _config.yml
├── _data/
│   └── nav.yml
├── _includes/
│   ├── head.html
│   ├── header.html
│   └── footer.html
├── _layouts/
│   ├── default.html
│   ├── page.html
│   ├── post.html
│   └── slides.html
├── _posts/
│   └── YYYY-MM-DD-title.md
├── assets/
│   ├── css/site.css
│   └── js/
│       ├── mermaid-init.js
│       └── katex-init.js
├── slides/
│   └── trustworthy-ai.html
└── index.md

Layout Implementation Guidelines

Core layout behavior

• Keep a single default layout that defines the page chrome (header/nav/footer).
• Use semantic HTML (main, nav, header, footer) and accessible patterns.
• Use responsive CSS with a readable baseline:
  • max content width (e.g., 70–80ch)
  • comfortable line-height
  • good contrast

Navigation

Drive nav from _data/nav.yml, e.g.:

- title: Home
  url: /
- title: Blog
  url: /blog/
- title: Slides
  url: /slides/

KaTeX

• Include KaTeX CSS/JS in _includes/head.html (CDN).
• Add assets/js/katex-init.js that renders math in the document body.
• Keep authoring format in Markdown/HTML as \( ... \) and \[ ... \].

Mermaid

• Include Mermaid (CDN) in _includes/head.html (or just before </body>).
• Initialize Mermaid in assets/js/mermaid-init.js against pre > code.language-mermaid blocks.

Reveal.js slides

Prefer a standalone slides/*.html deck using Reveal.js via CDN so it works anywhere (no build tooling required).

• Include KaTeX and Mermaid on slides pages too.
• Use vertical slides for “multi-page depth” within one deck (Reveal sections inside sections).

Content Conventions (front matter)

Pages

---
layout: page
title: "About"
permalink: /about/
---

Posts

---
layout: post
title: "Post Title"
date: 2026-01-30
tags: [trustworthy-ai, notes]
series: trustworthy-ai
part: 1
---

Slides index page (optional)

Create a slides/index.md that lists decks and links to slides/*.html.

Component Patterns (portable)

When the user asks for “components,” implement as:

• Include partials in _includes/ for reusable UI (hero, callout, card grid)
• Use simple, class-based CSS in assets/css/site.css

Common components:

• Callout: .callout.callout--info|--warn|--success
• Two-column layout: .grid.grid--2
• Cards: .cards > .card

Output Checklist (quality bar)

• Builds without custom plugins (unless user explicitly wants them)
• Responsive across mobile/desktop
• Accessible nav and headings (no skipped levels)
• KaTeX renders inline and display math
• Mermaid diagrams render (and degrade gracefully if JS blocked)
• Reveal.js deck loads and can be navigated with keyboard

What to return to the user

Return:

• The file tree you created/modified
• Any required config additions (e.g., _config.yml settings)
• A short “how to preview” note (e.g., bundle exec jekyll serve if bundler is used; otherwise whatever the repo already uses)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.