skills.rest
Swear4
Swear4COMMUNITY
Explore all skills by this author →
GitHub

doc-viewer

Inject interactive documentation pages into Next.js, React, Vue, and Angular apps.

Updated Aug 23, 2026
Search Tags:#documentation#markdown#routing#localization#frontmatter#in-app docs
One-click install
npx skills add https://github.com/Swear4/agent_rules --skill doc-viewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: doc-viewer
Source: https://github.com/Swear4/agent_rules/tree/main/agent-universal/skills/doc-viewer
Command: npx skills add https://github.com/Swear4/agent_rules --skill doc-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Doc Viewer injects an interactive documentation page into the target application after the Documentation KB pipeline, rendering .fr.md and .en.md files with language switch, a sidebar, and cross-linked article references.

Core Features & Use Cases

  • Language-aware in-app documentation rendering for Next.js App Router, Next.js Pages Router, React+Vite, Vue+Vite, and Angular projects.
  • Side navigation, language toggle, and cross-linking to provide a cohesive reading experience across FR and EN content.
  • Automated placement under public/content and a dedicated /docs route within the app, with fallback UI for projects lacking a navbar.
  • Phase-driven workflow compatibility: after the KB pipeline, the doc-viewer consumes generated docs to display them in-app.

Quick Start

Install and configure the Doc Viewer to inject an in-app docs page after the KB pipeline.

Frequently Asked Questions about doc-viewer

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

FAQPage Schema
How do I render markdown documentation files inside my Next.js or Angular app?▼

In-app documentation rendering is automated by injecting a dedicated /docs route that consumes generated .fr.md and .en.md files, displaying them with a sidebar and language toggle. It supports Next.js App Router, Pages Router, React+Vite, Vue+Vite, and Angular projects.

How do I add a language switch for localized markdown content in my web application?▼

A language switch is handled through language-persistent navigation, routing localized markdown files to public/content/fr/ and public/content/en/ directories. This ensures users maintain their selected language while browsing cross-linked articles.

Can I use this in-app docs viewer with a Vue+Vite project that lacks a navbar?▼

Yes, the in-app docs viewer works with Vue+Vite and provides a fallback UI for projects lacking a navbar. It automatically places content under public/content and configures a dedicated /docs route within the application.

What is the best way to display cross-linked markdown articles with side navigation?▼

Displaying cross-linked markdown articles with side navigation is handled by injecting an interactive documentation page post-KB pipeline. It provides a cohesive reading experience by automatically mapping cross-link references between localized content files.

Do I need a Knowledge Base pipeline before injecting interactive documentation into my app?▼

Yes, a Knowledge Base pipeline is required beforehand because the doc viewer consumes generated docs from that phase. The workflow applies after the KB pipeline to render the final interactive documentation page in-app.

Related Skills

Explore More Content & Communication Skills→
kimgeakimgea

obsidian-bases

Create and edit Obsidian Bases (.base files) with YAML-defined views, filters, and formulas.

Community
Advanced
jangtrinhjangtrinh

ck:deploy

Detect hosting platforms from repository docs and deploy projects automatically.

Community
Intermediate
The-InterdependencyThe-Interdependency

msdmd

Declare structured metadata in Markdown files for parsing and analysis.

Official
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

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

Community
Intermediate