canvas-lms-mcp: Skill for Cursor

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 \[ ... \].