toc-generator
When the user wants to add, optimize, or audit table of contents (TOC) for long-form content. Also use when the user mentions "TOC," "table of contents," "table of contents for article," "article TOC," "jump links," "content outline," "article navigation," "in-page navigation," "add TOC to blog," or "TOC for long content." For article SEO template, use article-page-generator.
Best use case
toc-generator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
When the user wants to add, optimize, or audit table of contents (TOC) for long-form content. Also use when the user mentions "TOC," "table of contents," "table of contents for article," "article TOC," "jump links," "content outline," "article navigation," "in-page navigation," "add TOC to blog," or "TOC for long content." For article SEO template, use article-page-generator.
Teams using toc-generator should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/toc/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How toc-generator Compares
| Feature / Agent | toc-generator | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
When the user wants to add, optimize, or audit table of contents (TOC) for long-form content. Also use when the user mentions "TOC," "table of contents," "table of contents for article," "article TOC," "jump links," "content outline," "article navigation," "in-page navigation," "add TOC to blog," or "TOC for long content." For article SEO template, use article-page-generator.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Marketing
Discover AI agents for marketing workflows, from SEO and content production to campaign research, outreach, and analytics.
Best AI Agents for Marketing
A curated list of the best AI agents and skills for marketing teams focused on SEO, content systems, outreach, and campaign execution.
SKILL.md Source
# Components: Table of Contents (TOC)
Guides TOC implementation for long-form articles, guides, and whitepapers. TOCs improve UX and SEO by enabling quick navigation and reducing bounce rates.
**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.
## Initial Assessment
**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for content structure.
Identify:
1. **Content type**: Blog article, guide, whitepaper, documentation
2. **Length**: TOC most valuable for 1000+ word content
3. **Platform**: Web, mobile, both
## Placement Strategies
| Placement | Best For | Pros | Cons |
|-----------|----------|------|------|
| **After intro** | Most articles | Natural flow; visible early | Can scroll out of view |
| **Floating sidebar** | Very long content | Always visible | More complex; mobile challenges |
| **Collapsible** | Long articles | Less intrusive | May be overlooked |
| **Top of article** | Mobile-first | Accessible on all devices | Takes space |
## Technical Implementation
### Heading Structure
- One `<h1>` per page
- `<h2>` for major sections
- `<h3>` for subsections; avoid skipping levels
- Headings >=15 characters for SEO
### Jump Links
- Assign unique IDs to headings (e.g., `id="keyword-optimization"`)
- Use kebab-case for IDs
- Link TOC entries via anchor tags (`#section-id`)
- Descriptive anchor text; include target keywords naturally
### Semantic HTML
```html
<nav aria-label="Table of contents">
<ol>
<li><a href="#section-1">Section Title</a></li>
</ol>
</nav>
```
## SEO Best Practices
| Practice | Purpose |
|----------|---------|
| **Schema.org TableOfContents** | Help search engines understand structure |
| **Keywords in headings** | Natural integration; avoid stuffing |
| **Jump links in SERP** | Google may feature TOC links; increases CTR; see **serp-features** |
## UX Guidelines
### Visibility & Interaction
- Clear visual hierarchy; indent nested items
- Highlight current section when scrolling (optional)
- Smooth scroll behavior for jump links
### Mobile
- Minimum 16px font size
- Touch targets >=44x44px
- Responsive layout; consider collapsible on small screens
### Accessibility
| Requirement | Practice |
|-------------|----------|
| **ARIA** | `aria-label="Table of contents"` on nav |
| **Keyboard** | All links keyboard-accessible |
| **Screen readers** | Proper heading structure; TOC aids skimming |
## Output Format
- **TOC structure** (sections, nesting)
- **Heading/ID mapping** suggestions
- **HTML/ARIA** notes
- **SEO** checklist
## Related Skills
- **tab-accordion**: Collapsible TOC uses same disclosure pattern; details/summary implementation
- **heading-structure**: TOC built from heading structure
- **content-optimization**: H2 structure, lists, tables for Featured Snippets
- **featured-snippet**: Featured Snippet optimization; TOC supports snippet structure
- **serp-features**: SERP features; jump links in results
- **article-page-generator**: TOC common in long-form article pagesRelated Skills
status-page-generator
When the user wants to create, optimize, or structure a status page. Also use when the user mentions "status page," "status.yourdomain.com," "uptime," "service health," "incident page," or "system status." For incident comms, use public-relations.
signup-login-page-generator
When the user wants to create, optimize, or audit signup and login pages. Also use when the user mentions "signup page," "login page," "registration page," "auth page," "sign up form," "create account," "student discount at signup," or "auth subdomain." For indexing/auth URLs, use indexing.
feedback-page-generator
When the user wants to create, optimize, or audit a feedback or roadmap page. Also use when the user mentions "feedback page," "roadmap," "feature requests," "vote on features," "Canny," "UserVoice," or "product feedback." For sitewide page planning, use website-structure.
disclosure-page-generator
When the user wants to create, optimize, or audit an affiliate, sponsor, or paid partnership disclosure page. Also use when the user mentions "disclosure," "affiliate disclosure," "sponsored content," "FTC disclosure," or "paid partnership." For sitewide page planning, use website-structure.
changelog-page-generator
When the user wants to create, optimize, or structure a changelog or release notes page. Also use when the user mentions "changelog," "release notes," "what's new," "updates," "product updates," "version history," or "changelog.yourdomain.com." For sitewide page planning, use website-structure.
use-cases-page-generator
When the user wants to create, optimize, or audit use case pages. Also use when the user mentions "use cases," "use case page," "for [role]," "by persona," "by scenario," "by business goal," "ICP pages," or "audience-specific pages." For sitewide page planning, use website-structure.
startups-page-generator
When the user wants to create, optimize, or audit a startups, education, or special program page. Also use when the user mentions "startups program," "for startups," "education discount," "student plan," "for students," or "special pricing." For education discounts, use education-program.
solutions-page-generator
When the user wants to create, optimize, or audit solutions pages. Also use when the user mentions "solutions," "solutions page," "by industry," "industry solutions," "by company size," "SMB," "enterprise," "by outcome," "business outcomes," or "how we solve X." For sitewide page planning, use website-structure.
showcase-page-generator
When the user wants to create, optimize, or audit a showcase or gallery page for user-generated content. Also use when the user mentions "showcase," "gallery," "user work," "UGC," "creator showcase," "examples," or "made with [product]." For social proof components, use testimonials-generator.
services-page-generator
When the user wants to create, optimize, or audit a services page. Also use when the user mentions "services page," "what we offer," "service offerings," "consulting services," "service page," "offerings page," "service catalog," or "professional services." For sitewide page planning, use website-structure.
products-page-generator
When the user wants to create, optimize, or audit a product listing or category page. Also use when the user mentions "product page," "product listing," "shop," "e-commerce products," "product catalog," "product grid," "product cards," or "product overview." For category SEO, use category-page-generator.
pricing-page-generator
When the user wants to create, optimize, or audit pricing page content and structure. Also use when the user mentions "pricing page," "pricing table," "plans," "subscription," "pricing plans," "pricing tiers," "pricing comparison," "SaaS pricing," "enterprise pricing," "API pricing," "contact sales," "pricing in nav," "public pricing," "hide pricing," or "pricing objection handling." For pricing strategy, use pricing-strategy.