# 097 Index 3a160ccc

> Reference Documentation Index

- Skill: `tools-only/097-index-3a160ccc` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/097-index-3a160ccc`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/097-index-3a160ccc/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tools-only/097-index-3a160ccc

---

# Reference Documentation Index

## Quick Navigation

| Question | File | Mode |
|----------|------|------|
| What colors/tokens should I use? | `design-system.md`, `overwatch-design-system.md` | Blueprint, Overwatch |
| How do I animate elements? | `animation-patterns.md`, `overwatch-interactions.md` | Blueprint, Overwatch |
| What components exist? | `component-patterns.md`, `overwatch-interactions.md` | Blueprint, Overwatch |
| How do I add WebGPU shaders? | `overwatch-shaders.md` | Overwatch |
| What slide templates are available? | `slide-templates.md`, `overwatch-slide-templates.md` | Blueprint, Overwatch |
| How do I export to PDF? | `export-workflow.md` | Blueprint |
| How do I check visual quality? | `visual-qa-checklist.md` | Both |
| What icons should I use? | `icon-reference.md` | Both |
| How do I add charts? | `data-visualization.md` | Blueprint |
| What typography rules apply? | `2026-best-practices.md` | Both |
| How do I generate custom assets? | `custom-asset-generation.md` | Both |
| ML-specific visualizations? | `ml-visualization.md` | Blueprint |
| Advanced Overwatch patterns? | `overwatch-advanced-patterns.md` | Overwatch |
| Data-driven deck authoring? | `overwatch-deck-schema.md` | Overwatch |

## All Reference Files

### Blueprint Mode
| File | Purpose |
|------|---------|
| `design-system.md` | Colors (dark + light), typography, spacing, grid, card color strategy |
| `component-patterns.md` | Component props, examples, TOC navigation pattern |
| `visual-qa-checklist.md` | Agent-browser screenshot workflow, 10 common visual bugs + fixes |
| `2026-best-practices.md` | Typography scale, content density, color rules, structural patterns |
| `slide-templates.md` | 8+ slide type templates |
| `export-workflow.md` | PDF and static export guide |
| `data-visualization.md` | Chart components and best practices |
| `icon-reference.md` | Icon libraries by domain |
| `animation-patterns.md` | Motion components and timing |
| `ml-visualization.md` | ML-specific components |
| `custom-asset-generation.md` | Custom icon/graphic generation pipeline |

### Overwatch Mode
| File | Purpose |
|------|---------|
| `overwatch-design-system.md` | Color tokens, typography, dimensions, 3 slide modes (dark/white/orange) |
| `overwatch-interactions.md` | Animation patterns, timing, hover conventions, 19 interaction components + hooks |
| `overwatch-shaders.md` | WebGPU setup, WGSL syntax, lava-nebula shader, CSS gradient fallback |
| `overwatch-slide-templates.md` | 14 slide type templates with component composition examples |
| `overwatch-advanced-patterns.md` | Reference-only patterns: waterfall trace, carousel, strikethrough, dual-layer shader |
| `overwatch-deck-schema.md` | YAML schema for data-driven deck authoring with all 14 template field specs |