From zensical-customizer
Customize and extend Zensical documentation sites with interactive pages, custom templates, JavaScript widgets, and CSS styling. Use when working on documentation site customization including: (1) creating custom or interactive doc pages, (2) adding JavaScript widgets or third-party libraries to docs, (3) overriding templates or partials, (4) adding/modifying CSS styles, (5) creating custom page layouts (landing pages, demos, dashboards), (6) configuring zensical.toml settings, (7) integrating external JS frameworks into doc pages. Triggers on: docs site, documentation page, interactive demo, custom template, zensical, extra_css, extra_javascript, overrides, template block, page layout, widget integration. Do NOT use for: writing or editing markdown documentation content, general MkDocs questions (this is Zensical-specific), or reading/viewing existing docs pages.
npx claudepluginhub titusz/skills --plugin zensical-customizerThis skill uses the workspace's default tool permissions.
Zensical is the successor to Material for MkDocs, built by the same team. Config file:
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Retrieves current documentation, API references, and code examples for libraries, frameworks, SDKs, CLIs, and services via Context7 CLI. Ideal for API syntax, configs, migrations, and setup queries.
Uses ctx7 CLI to fetch current library docs, manage AI coding skills (install/search/generate), and configure Context7 MCP for AI editors.
Zensical is the successor to Material for MkDocs, built by the same team. Config file:
zensical.toml (TOML format, all settings under [project]). Template engine: MiniJinja (Rust).
Dev server: uv run poe docs-serve. Build: uv run poe docs-build.
Use DeepWiki (mcp__deepwiki__ask_question with repo zensical/zensical) for questions about
Zensical internals not covered here.
Add styles to existing pages -> Edit docs/stylesheets/extra.css or create a new
stylesheet and register in extra_css. See project-setup.md.
Add JavaScript to all pages -> Place script in docs/javascripts/, register in
extra_javascript in zensical.toml. See javascript.md.
Add interactive widget to specific page -> Add <div id="mount"> in markdown, create
JS that uses document$ to mount on that element. See "Pattern 1" in
javascript.md.
Create a fully custom page layout -> Set up overrides/ directory, create custom
template extending base.html, reference via page frontmatter template: field. See
templates.md.
Override header/footer/nav -> Override partials in overrides/partials/. See
"Overridable Partials" in templates.md.
Embed a JS framework app (React, Vue, Svelte) -> Build externally, output bundle to
docs/javascripts/, mount via document$ or custom template. See "Pattern 2" and
"Pattern 3" in javascript.md.
Add to zensical.toml under [project.theme]:
custom_dir = "overrides"
Create the directory: overrides/
Create overrides/interactive.html:
{% extends "base.html" %}
{% block content %}
{{ page.content }}
<div id="app-mount"></div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="module" src="{{ base_url }}/javascripts/my-app.js"></script>
{% endblock %}
Create a markdown file (e.g., docs/demos/my-demo.md):
---
template: interactive.html
icon: lucide/play
---
# Interactive Demo
Description of the demo.
Place docs/javascripts/my-app.js with initialization logic.
Add to nav in zensical.toml:
{ "Demos" = ["demos/my-demo.md"] },
html { font-size: 125% } (20px); third-party
libraries with rem-based sizing render 25% larger. Fix with explicit pixel values.navigation.instant not enabled in this project - window.load works for site-wide
scripts, but page-specific widgets should still use document$ for forward compatibility