MCP SERVER
YAML page specs compiled to standalone HTML5 documents — dark surfaces, scroll animations, responsive breakpoints, print stylesheet. Zero external dependencies.
| Tool | Purpose | Returns |
|---|---|---|
| render | Compile a YAML page spec to a complete HTML5 document. Validates after sanitization — auto-fixed issues don't block rendering | html_path, size, warnings, diagrams |
| validate | Check a YAML page spec for errors and warnings without rendering. Reports block count, scheme, and issues | valid flag, error/warning counts, issues |
| build | Incremental project compile — all YAML specs in a directory to .site/ with clean-URL layout. Skips unchanged specs via content hash | total, compiled, skipped, diagram manifest |
| snapshot | Full-page PNG screenshot of an HTML file via headless Chromium. Auto-detects Chrome binary across macOS/Linux/Windows | image_path |
A YAML file with three sections. scheme sets the color identity from 21 chromata palettes. hero and closing frame the page. blocks[] is an ordered list of typed content blocks — cards, prose, tables, diagrams, flow chains, stats. Two semantic axes control the feel: pace (dense · balanced · open) and weight (light · regular · heavy). No HTML. No CSS. No templates.
One .html file. Zero external dependencies. All CSS is a single inline <style> block — theme tokens as CSS custom properties plus block-type styles. All JS is a single inline <script> — IntersectionObserver for scroll-triggered entrances and nav active state. Dark surfaces from chromata's OKLCH color science. Responsive breakpoints at 768px and 480px. Print stylesheet. OG meta tags. Inline SVG favicon.
| Block | Purpose | Category | Shorthand |
|---|---|---|---|
| prose | Markdown text with semantic role — intro, body, caption | Content | ✓ |
| cards | Grid with title, subtitle, body, footer, badge, link | Content | |
| table | Structured data with semantic column sizing | Content | |
| stat | Big-number KPI grid — value, label, detail | Content | |
| heading | h2 or h3 with optional anchor | Content | ✓ |
| info_box | Styled callout — note, info, warning, tip | Content | |
| section_label | Full-width bar marking major page divisions | Structure | ✓ |
| page_nav | Sticky nav — auto-generates from section labels | Structure | |
| toc | In-page navigation with anchor links | Structure | |
| divider | Lightweight horizontal rule | Structure | |
| spacer | Explicit vertical whitespace in rem | Structure | ✓ |
| hero | Opening frame — eyebrow, title, body, accent bar | Frame | |
| closing | Final frame — divider and closing text | Frame | |
| flow_chain | Connected pills with arrows — temporal sequence | Visual | |
| badge | Inline colored status pills | Visual | |
| diagram | Inline SVG with hover interactivity and edge-drawing animation | Visual | |
| swatch_strip | Color palette preview cells | Visual |
Two additional block types — macro and raw — are Confluence-specific. Gutenberg emits an HTML comment and moves on.
Low-entropy spec flags that activate progressive visual enhancements for landing pages. Every effect degrades gracefully — without JS, pages render as static dark-themed documents with good typography.
| Flag | On | Effect | Degrades to |
|---|---|---|---|
| glow: true | Page | Cursor-responsive radial light follows the mouse | Nothing |
| effect: mesh | Hero | Animated OKLCH gradient mesh background | Static dark surface |
| effect: particles | Hero | Floating ambient dots on canvas | Static dark surface |
| animate: true | Stat | Numbers count up from 0 on scroll-in | Static numbers |
| surface: glass | Cards | Backdrop-blur frosted glass effect | Solid background |
| reveal: words | Prose | Word-by-word materialization on scroll | Normal text |
| reveal: lines | Prose | Line-by-line reveal on scroll | Normal text |
| reveal: draw | Diagram | Self-drawing SVG — edges animate then nodes appear | Full diagram |
page · base · deep · mid · raised — dark depth levels that separate content without borders. All surfaces resolve from the scheme at compile time via CSS custom properties. The hero uses deep, cards use raised, chrome uses mid.
primary · body · muted · caption · label · link — semantic colors with guaranteed contrast ratios against their target surface. The scheme resolves text colors from shade steps keyed to its surface depth. Dark schemes get light text, automatically.
Multiple card rows get coordinated colors via chromata's sequence resolution. Each block declares its cohesion relationship to its predecessor — continues, supports, contrasts, pivots, resolves — and the palette cycles accordingly.
IntersectionObserver reveals blocks on scroll with staggered fade-in. Cards and stat items animate individually with 40ms increments. Inline SVG edges draw themselves, then nodes fade in. All respect prefers-reduced-motion.
Fluid typography via clamp(). Breakpoints at 768px (tablet — cards reflow, nav goes edge-to-edge) and 480px (mobile — single column, flow chains go vertical). Print stylesheet strips animations and shadows, shows URLs after links.
Diagrams declared in specs are collected during compile, rendered via svg-tools, and inlined back into the HTML. Inline SVGs get hover interactivity — node glow, edge highlighting, sibling dimming — and scroll-triggered edge-drawing animation.
The temporal dimension of layout — how quickly the reader moves through. open gives spacious inter-block gaps and large card padding. dense tightens everything — compact cards, tight spacing. Resolves to two mechanical tokens: density (card padding) and separation (inter-block gap).
The gravitational dimension — how much each element asserts itself. light uses subtle 2px accent borders with no shadows. heavy uses bold 4px borders with deep box shadows. Resolves to emphasis (border weight) and shadow (shadow depth).
page-spec — the shared type contract. Block types, semantic axes, cohesion model, palette shorthand, YAML parsing, and visual lint. Every rendering backend (gutenberg for HTML, xhtml-tools for Confluence) consumes the same spec types. chromata — color system. Scheme resolution, theme tokens, color functions, and cross-block sequence coordination. mcp-helpers — MCP server bootstrap and tool registration.
pages-helper deploys the compiled .site/ to Cloudflare Pages. svg-tools renders diagrams declared in specs — gutenberg collects them during compile and writes a _diagrams.json manifest. The inline SVG pipeline reads rendered SVGs back and embeds them in the HTML. The full pipeline: page-spec (types) → gutenberg (render) → Cloudflare Pages (host).
This page was rendered by the tool it describes.