---
name: dark-docs-navigation
description: Generate a standalone dark documentation interface with header tabs, grouped sidebar navigation, expandable trees, and responsive layout. Use for documentation shells and navigation prototypes with configurable branding, colors, and initial selection.
---

# Dark documentation navigation

Create a single HTML file with inline CSS, JavaScript, and SVG icons. The generated page works offline without npm packages or remote assets. It provides a navigation prototype; replace the sample article text and connect real routes when building a documentation site.

## Generate

Run from this skill's directory, or use the absolute path to `scripts/generate.py`. Python 3.10+ is required; no third-party Python packages are needed.

```bash
python3 scripts/generate.py -o out/index.html
python3 scripts/generate.py --brandName "Nexus" --accent "#4d7cff" --activeId edge -o out/custom.html
python3 scripts/generate.py --params params.json -o out/index.html
```

CLI flags override JSON parameters. Use the output location requested by the user.

## Parameters

| Key | Default | Accepted value |
| --- | --- | --- |
| `title` | Dark documentation navigation | Non-empty browser title |
| `brandName` | Atlas | Non-empty brand text |
| `brandDocs` | Docs | Non-empty header label |
| `accent` | `#e23b3b` | 3- or 6-digit hex color |
| `bg` | `#000000` | 3- or 6-digit hex color |
| `surface` | `#1a1a1a` | Active row hex color |
| `activeId` | `what` | Existing navigation ID |
| `intro` | Platform introduction | Non-empty plain text |
| `sidebarWidth` | `280px` | Integer pixel width, 240–400px |
| `transitionMs` | `220` | Integer duration, 0–2000ms |

JSON also accepts the hex colors `hover`, `text`, `muted`, `section`, `border`, and `tree`, plus a plain `fontFamily` list. Unknown parameters are rejected. User text is escaped and remains literal, including text that resembles HTML or template tokens.

Navigation IDs: `what`, `quickstart`, `architecture`, `features`, `fundamentals`, `datasets`, `edge`, `limits`, `performance`, `optimize`, `requirements`, `semantic`, `glossary`, `security`, `roadmap`, `ref-arch`, `methods`, `console`, `console-home`, `console-query`, `console-dash`, `console-stream`. Initial selection of a child opens its parent.

For layout changes or integrating real content, read [references/design.md](references/design.md). Edit [templates/index.template.html](templates/index.template.html) for structure and interaction, and `DEFAULT_TITLES` / `DEFAULT_BODIES` in the generator for article content. Keep IDs and `aria-controls` targets consistent. Top tabs switch sample content rather than real routes.

## Verify the result

- Generate default and customized outputs; check the requested brand, accent, and initial selection in the browser.
- Inspect at 1440×900, 390×844, and 320px width. The sidebar should scroll without horizontal page overflow.
- Expand and collapse Fundamentals and Console, select a child, and switch tabs. The selected navigation item and displayed article must agree.
- Use Tab and Enter for navigation; use Left/Right, Home/End within the header tabs. Collapsed children must not receive focus. This is grouped button navigation, not an ARIA tree widget.
- Check focus visibility and reduced motion. No remote network requests or page errors should occur.

The bundled layout and article text are a starting point, not a complete documentation system. Search, routing, article fetching, and server features must be implemented separately when requested.