build-and-test
Build, test, and serve the documentation site using Zensical (recommended) or MkDocs.
SKILL.md.github/skills/build-and-test/SKILL.md
GitHubSkill: Build and Test Documentation
Build, test, and serve the documentation site using Zensical (recommended) or MkDocs.
When to Use
- Before committing documentation changes
- After adding or modifying pages
- Debugging build errors
- Previewing changes locally
- After patching shared UI chrome such as headers, drawers, overlays, dropdowns, or global CSS/JS
Quick Commands
# Build and serve with Zensical (primary, 20x faster)
make serve
# Or using doc-cli
./doc-cli.sh serve
# Build only (no serve)
make build
Fast Paths
Choose the smallest verification path that still covers the risk of the change:
Content-only edits
make build
Single-page layout or styling edits
make build
# then preview the touched page locally
Shared UI / global CSS / header / drawer / overlay / dropdown changes
make viewport-check
Use make screenshots when the visual design itself changed and image review is needed.
Versioning or production release changes
Use the Version and Deploy skill after the local build/test pass is green.
Legacy MkDocs Commands
# Serve with MkDocs (legacy, slower)
make mkdocs-serve
# Build with MkDocs
make mkdocs-build
Build Systems Comparison
| System | Build Time | Use Case |
|---|---|---|
| Zensical | ~0.4s | Primary development, production |
| MkDocs | ~8s | Legacy support, versioning with mike |
Build Process
1. Setup (First Time)
make setup
This installs:
- Python dependencies from
requirements.txt - Zensical and MkDocs
- Local plugins from
mkdocs_plugins/(editable install)
2. Build
# Zensical (primary)
make build
# MkDocs (legacy)
make mkdocs-build
Output goes to site/ directory. Build will:
- Compile all markdown to HTML
- Process navigation structure
- Validate internal links
3. Serve Locally
# Zensical on port 8001 (primary)
make serve
# MkDocs on port 8000 (legacy)
make mkdocs-serve
Zensical features:
- Blazing fast rebuilds (~0.4s)
- Hot reload on file changes
- Modern architecture
If MkDocs hot reload stops working, use make serve-clean or see Hot Reload Troubleshooting.
Shared UI Patch Workflow
When changing shared UI behavior, do not stop at make build. Run a focused regression pass on the shell elements most likely to break across pages.
1. Rebuild the shipped assets
make build
2. Run targeted browser checks first
make viewport-check
If visual polish changed, also run:
make screenshots
If a browser-backed test is blocked by sandbox restrictions or missing Chromium dependencies, rerun it with the needed approval instead of skipping it silently.
3. Sanity check the shared shell, not just the page you touched
For shared CSS/JS changes, verify at least:
- Home page plus one content page with sidebar navigation
- Mobile drawer opens with a crisp panel while the backdrop blur stays behind it
- Header controls remain clickable and are not trapped behind overlays or stacking contexts
- Version selector dropdown has an opaque background and older versions are clickable
- A fix on one shared element does not break another shared element in the same header or overlay stack
Use the Browser Automation skill when browser interaction is required.
Using Doc-CLI
The doc-cli provides an interactive menu:
./doc-cli.sh
Available commands:
serve- Start Zensical dev server (port 8001)build- Build with Zensicalmkdocs-serve- Start MkDocs dev server (legacy)
Environment Variables
# Custom Zensical server address
DEV_ADDR=0.0.0.0:8080 make serve
Troubleshooting
"Page not in nav" Warning
Expected for problem sub-pages. These are linked from parent pages, not nav.
Port Already in Use
# Kill existing server
pkill -f zensical
pkill -f mkdocs
# Then restart
make serve
Import Errors (MkDocs only)
# Ensure PYTHONPATH is set
export PYTHONPATH=$PYTHONPATH:$(pwd)
make build
Browser-Level UI Test Is Blocked
If a regression test or visual check needs a real browser and the sandbox blocks it:
- Run the build first so
site/reflects the current patch - Use
make viewport-check,make screenshots, ormake accessibility-check - If Chromium needs missing OS dependencies outside the sandbox, request escalation and rerun the exact targeted check
Checklist
- Run
make setupif dependencies changed - Run
make buildto validate - Run targeted regression checks for any shared UI shell changes
- Check for ERROR messages
- Run
make serveto preview - Verify navigation and version selector interactions work
- Check responsive layout, especially mobile drawer and header interactions