skills.rest
toddlevy
toddlevyCOMMUNITY
Explore all skills by this author →
GitHub

tl-docs-viewer-create

Create an embeddable documentation viewer with Markdown, Mermaid diagrams, and a TOC.

Updated Feb 14, 2026
Search Tags:#architecture#markdown#frontend#react#mermaid#admin-ui#docs-viewer
One-click install
npx skills add https://github.com/toddlevy/tl-agent-skills --skill tl-docs-viewer-create
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tl-docs-viewer-create
Source: https://github.com/toddlevy/tl-agent-skills/tree/main/skills/tl-docs-viewer-create
Command: npx skills add https://github.com/toddlevy/tl-agent-skills --skill tl-docs-viewer-create

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables adding an in-app documentation viewer to admin interfaces, reducing context-switching and keeping docs close to workflows.

Core Features & Use Cases

  • Three-column layout: Tree navigation, content area, and a persistent On This Page TOC for fast navigation.
  • Markdown + Mermaid support: Render documentation with syntax highlighting and inline diagrams for clearer docs.
  • Discovery & customization: Auto-discover admin patterns, support multiple frontend stacks, and configurable libraries via AskQuestion flows.

Quick Start

Create a docs viewer UI in your admin app by wiring the server endpoints and UI components.

Frequently Asked Questions about tl-docs-viewer-create

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a markdown documentation viewer inside a React admin dashboard?▼

You can build an in-app docs viewer for admin dashboards by wiring server endpoints to fetch a documentation tree and page content. It uses a three-column layout with tree navigation, a content area, and a persistent On This Page TOC.

How do I render Mermaid diagrams inside an in-app documentation viewer?▼

To render Mermaid diagrams inside an in-app documentation viewer, configure the Markdown renderer to support inline diagrams and syntax highlighting. The viewer integrates Mermaid support alongside standard Markdown formatting for clearer technical documentation.

What server endpoints are needed for a docs viewer with folder navigation?▼

A docs viewer with folder navigation requires endpoints like GET /admin/docs/tree to fetch the directory structure and GET /admin/docs/content/* to retrieve page content. These endpoints power the DocTree navigation and content rendering.

Can I customize the data fetching and markdown rendering libraries for an admin UI docs viewer?▼

Yes, the admin UI docs viewer allows configurable library choices for Markdown rendering, data fetching, and Mermaid diagrams via AskQuestion flows. This supports multiple frontend stacks and adapts to your preferred technology choices.

Does the admin dashboard documentation viewer support accessibility and theming?▼

Yes, the admin dashboard documentation viewer supports accessibility-conscious styling with theme support. It provides a structured three-column layout that maintains navigation context while rendering accessible Markdown and Mermaid content.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

tailadmin-nextjs

Provide a Next.js 16 admin dashboard template with 30+ components.

Official
Intermediate
aayushsharma141aayushsharma141

admin-dashboard

Extend admin dashboards with new tabs, metrics, and monitoring features.

Community
Advanced
CleanExpoCleanExpo
1

Markdown Processor

Parses, transforms, and renders Markdown/MDX with remark, rehype, and Shiki.

Community
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate