From grimoire
Use this skill when the user wants to generate the study-oriented frontend, build the HTML/CSS/JS presentation layer, or says "grimoire present", "build frontend", "generate site", or "/grimoire:present". Creates a static site with 6 study modes from compiled wiki content and design configuration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:presentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate a study-oriented static frontend from compiled wiki content and
Generate a study-oriented static frontend from compiled wiki content and the design configuration.
SCHEMA.md.
If missing, tell the user to run /grimoire:init first.wiki/.compile/ directory must exist with JSON artifacts.
If missing, tell the user to run /grimoire:compile first._config/design.md file should exist. If missing, use defaults
(midnight-teal palette, editorial typography, subtle motion, comfortable density).SCHEMA.md in the current directory firstwiki/.compile/ exists and contains notes.json, graph.json,
analytics.jsonSCHEMA.md for topic and scope contextExecute the static site generator:
node ${CLAUDE_PLUGIN_ROOT}/dist/present.js {workspace-path}
This reads:
_config/design.md — palette, typography, motion, density settingswiki/.compile/*.json — compile artifacts (notes, graph, analytics)wiki/*.md — article content (converted to HTML)wiki/log.md — changelog entries for feed modeAnd generates a complete static site in {workspace}/site/:
| File | Mode |
|---|---|
site/index.html | Hub page with mode navigation and wiki stats |
site/read/index.html | Linear reading — articles in reading order with TOC |
site/graph/index.html | Graph exploration — force-directed concept map |
site/search/index.html | Search + answer — full-text search with results |
site/feed/index.html | Changelog — timeline of ingest/compile activity |
site/gaps/index.html | Gap map — coverage visualization by topic |
site/quiz/index.html | Flashcard — auto-generated Q&A from article content |
site/assets/style.css | Generated CSS from design config |
If the script fails, show the error and stop.
After generation, tell the user how to preview:
Site generated at {workspace}/site/
To preview, open in your browser:
open {workspace}/site/index.html
Modes: read | graph | search | feed | gaps | quiz
Design: {palette} palette, {typography} typography, {motion} motion, {density} density
Ask: "Open the site and let me know if anything needs adjusting — layout, colors, reading order, content."
Wait for feedback before proceeding. The user may want to:
_config/design.md and re-runIf the user requests design changes:
_config/design.md with the requested changesOnce the user is satisfied, print:
Frontend complete.
Site: {workspace}/site/
Pages: {N} HTML files
Size: {total size}
Palette: {palette}
Articles: {N}
The site is fully static — no server needed. Open index.html in any browser.
Works offline. Works from file:// protocol.
Next steps:
- Run /grimoire:serve to expose the wiki via MCP server
- Deploy site/ to any static hosting (Netlify, Vercel, GitHub Pages)
- Share the site/ folder — it's self-contained
Append:
## {YYYY-MM-DD} — Frontend Generated
- Palette: {palette}
- Typography: {typography}
- Modes: read, graph, search, feed, gaps, quiz
- Output: site/
The design configuration at _config/design.md controls the visual output.
Palettes: midnight-teal, noir-cinematic, cold-steel, warm-concrete, electric-dusk, smoke-light, obsidian-chalk, custom
Typography: editorial (serif headings), technical (monospace-forward), playful (rounded sans), brutalist (bold oversized), minimal (neutral sans)
Motion: none, subtle, expressive
Density: compact, comfortable, spacious
All palettes support dark/light modes. All output meets WCAG AA contrast. Mobile-first responsive. Print-safe.
site/ directory is a build artifact. It can be deleted and regenerated.site/ to .gitignore if not already presentfile:// protocol)${CLAUDE_PLUGIN_ROOT} for the present script pathnpx claudepluginhub vedantggwp/athanor --plugin grimoireFetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Applies a firm's KYC/AML rules grid to parsed onboarding records: assigns risk rating, checks required documents, outputs rule outcomes with citations, and routes for escalation.
Generates daily or weekly digests of activity from connected sources (chat, email, docs, tasks, CRM), highlighting action items, decisions, mentions, and project updates.