---
name: svg-highlight-nav
description: Create an expressive section navigation with animated hand-drawn SVG rings, working tab panels, hover previews, and accessible keyboard selection.
---

# SVG highlight navigation

Use this skill for a quiet editorial page whose navigation gains a hand-drawn ring. The standalone template uses real tab panels: hover previews the ring, while click or keyboard selection updates the content.

```sh
python3 scripts/generate.py -o index.html
python3 scripts/generate.py -o index.html --title "Studio North" --accent "#ca6a36"
```

Use `--params config.json` for structured content. Supported keys: `title`, `subtitle` (1–180 characters), `accent`, `bg` (hex colors), `duration` (integer 0–2000 ms), and `items` (2–8 objects containing `label`, `heading`, `body`). Label limits are 24 characters; headings 120; body text 400.

Read [references/design.md](references/design.md) when adapting the ring or semantics. Preserve a visible distinction between preview and selected content. For site navigation, change tab buttons to genuine links and remove tab semantics; do not intercept all page arrow keys.