Builds interactive HTML presentation with 6 tabs (Overview, Requirements, Architecture/C4, Tech Spec, Roadmap, Guides). Creates presentation/README.md hub. L2 Worker under ln-100-documents-pipeline.
Paths: File paths (
shared/,references/,../ln-*) are relative to skills repo root. If not found at CWD, locate this SKILL.md directory and go up one level for repo root.
This skill creates an interactive, self-contained HTML presentation from existing project documentation. It transforms Markdown documents into a professional, navigable web presentation with diagrams, collapsible sections, and modern UI.
Transforms existing Markdown documentation into an interactive, self-contained HTML presentation with 6 tabs (Overview, Requirements, Architecture/C4, Tech Spec, Roadmap, Guides) and Mermaid diagram support.
This skill is a L2 WORKER invoked by ln-100-documents-pipeline orchestrator OR used standalone.
Use this skill when:
Part of workflow: ln-100-documents-pipeline → ln-110-project-docs-coordinator → ln-120-reference-docs-creator → ln-130-tasks-docs-creator → ln-140-test-docs-creator (optional) → ln-150-presentation-creator
Prerequisites: Existing documentation in docs/ directory with required files:
docs/project/requirements.md (REQUIRED)docs/project/architecture.md (REQUIRED)docs/project/tech_stack.md (REQUIRED)Optional files (enhance presentation but not blocking):
docs/project/api_spec.md, database_schema.md, design_guidelines.md, runbook.mddocs/reference/adrs/*.md (ADRs with Category: Strategic|Technical)docs/reference/guides/*.md (How-to guides)docs/tasks/kanban_board.md (Epic Story Counters for Roadmap)The skill follows a 7-phase workflow: READ DOCS → VALIDATE SOURCE EXISTS → VALIDATE SOURCE QUALITY → CREATE DIR → COPY TEMPLATES → INJECT CONTENT → BUILD HTML.
Phase 1: READ DOCS - Load all project documentation from docs/ Phase 2: VALIDATE SOURCE EXISTS - Check required files exist (requirements.md, architecture.md, tech_stack.md), warn if optional missing Phase 3: VALIDATE SOURCE QUALITY - Check diagrams, placeholders, content length (read-only validation) Phase 4: CREATE DIR - Create presentation/ directory + README.md navigation hub Phase 5: COPY TEMPLATES - Copy HTML/CSS/JS templates to assets/ Phase 6: INJECT CONTENT - Parse MD docs → replace placeholders in tab files → delete example blocks Phase 7: BUILD HTML - Assemble modular components into standalone presentation_final.html
MANDATORY READ: Load references/phases_detailed.md for detailed workflow of each phase.
Objective: Load all project documentation for transformation.
When to execute: Always (first phase)
Process:
Use docs/ as source:
docs/project/, docs/reference/, docs/tasks/ directoriesRead Core MD Documents:
project/requirements.md - Functional Requirementsproject/architecture.md - Architecture design, C4 diagramsproject/tech_stack.md - Technology versions, Docker configurationproject/api_spec.md - API endpoints, authentication (if exists)project/database_schema.md - Database schema, ER diagrams (if exists)project/design_guidelines.md - UI/UX design system (if exists)project/runbook.md - Operational procedures (if exists)Read ADRs (if exist):
reference/adrs/adr-001-*.md through adr-NNN-*.mdRead Guides (if exist):
reference/guides/*.md - How-to guides for Guides tabRead Kanban Board (if exists):
tasks/kanban_board.md - Epic Story Counters table for Roadmap progressExtract metadata:
Output: Loaded documentation data ready for validation and HTML generation
Objective: Verify that required source documentation exists before building presentation. Prevent building incomplete presentations.
When to execute: After Phase 1 (documentation loaded)
Process:
REQUIRED (must exist - block execution if missing):
docs/project/requirements.mddocs/project/architecture.mddocs/project/tech_stack.mdFor each required file:
pattern: "docs/project/{filename}"If ANY required file missing or empty:
❌ ERROR: Cannot build presentation - missing required documentation:
- docs/project/requirements.md [missing/empty]
- docs/project/architecture.md [missing/empty]
Suggestion: Run ln-111-project-docs-creator to create missing files.
STOP execution.
OPTIONAL (enhance presentation - warn if missing but continue):
docs/project/api_spec.md (for backend projects)docs/project/database_schema.md (for projects with database)docs/project/design_guidelines.md (for frontend projects)docs/project/runbook.md (for operational projects)For each optional file:
pattern: "docs/project/{filename}"If optional files missing:
⚠ WARN: Optional files missing: [list]
Presentation will have reduced content in some tabs.
Continue execution.
OPTIONAL directories:
docs/reference/adrs/ - check if any ADR files exist (adrs/*.md)docs/reference/guides/ - check if any guide files exist (guides/*.md)docs/tasks/kanban_board.md - check for Roadmap dataFor each directory:
ℹ Optional directory empty: {directory} - related tab will show placeholderLog summary:
✓ Source documentation validation completed:
Required files:
- ✅ requirements.md (found, 8.5 KB)
- ✅ architecture.md (found, 15.2 KB)
- ✅ tech_stack.md (found, 3.1 KB)
Optional files:
- ⚠️ api_spec.md (missing - Technical Spec tab will have reduced content)
- ✅ database_schema.md (found, 4.7 KB)
- ⚠️ design_guidelines.md (missing)
Optional directories:
- ✅ adrs/ (5 ADR files found)
- ⚠️ guides/ (empty - Guides tab will show placeholder)
- ✅ kanban_board.md (found - Roadmap will show progress)
Output: Validation passed (all required files exist) OR error (stop execution)
Objective: Verify source docs contain sufficient content. Warn about incomplete content but don't block execution.
When to execute: After Phase 2 (source files exist)
Checks performed (warnings only, non-blocking):
{{PLACEHOLDER}}, [Add your ...], TODO: patternsAuto-fix: None - ln-115 is read-only. Run ln-111-project-docs-creator to fix issues.
Output: Content quality report with warnings
📖 Detailed workflow: per phases_detailed.md §Phase 3
Objective: Setup presentation directory structure and navigation hub.
When to execute: After Phase 3 (source validation complete, warnings logged)
Process:
Create presentation directory:
mkdir -p docs/presentation/
Check if presentation/README.md exists:
pattern: "docs/presentation/README.md"✓ docs/presentation/README.md already exists (preserved)Create presentation/README.md from template:
references/presentation_readme_template.md → docs/presentation/README.md{{PROJECT_NAME}} — from requirements.md{{LAST_UPDATED}} — current date (YYYY-MM-DD)Notify user:
✓ Created docs/presentation/README.md (navigation hub)✓ docs/presentation/README.md already exists (preserved)Output: docs/presentation/README.md (created or existing)
Objective: Copy HTML/CSS/JS templates from skill references/ to presentation directory.
When to execute: After Phase 4 (presentation directory exists)
Process:
Check if assets exist:
pattern: "docs/presentation/assets/"docs/presentation/assets/ exists:
✓ Presentation assets already exist - preserving user customizationsCopy template files:
cp references/presentation_template.html → docs/presentation/assets/
cp references/styles.css → docs/presentation/assets/
cp references/scripts.js → docs/presentation/assets/
cp references/build-presentation.js → docs/presentation/assets/
cp -r references/tabs/ → docs/presentation/assets/tabs/
Verify copied structure:
docs/presentation/assets/
├── presentation_template.html # Base HTML5 + 6 tab navigation
├── styles.css # ~400-500 lines
├── scripts.js # Tab switching + Mermaid init
├── build-presentation.js # Node.js build script
└── tabs/
├── tab_overview.html # Landing page
├── tab_requirements.html # FRs + ADRs
├── tab_architecture.html # C4 diagrams
├── tab_technical_spec.html # API + Data + Deployment
├── tab_roadmap.html # Epic list
└── tab_guides.html # How-to guides
Output: Template files copied to docs/presentation/assets/ (or skipped if already exist)
Note: Templates contain placeholders ({{VARIABLE_NAME}}) that will be replaced in Phase 6.
Objective: Parse MD docs, inject into HTML templates, remove example blocks.
When to execute: After Phase 5 (templates exist in assets/)
Process:
{{PLACEHOLDER}} in 6 tab files with parsed content<!-- EXAMPLE START -->...<!-- EXAMPLE END --> blocks from all tabsTab placeholders: Overview (5), Requirements (4 + NFR ban), Architecture (5), Technical Spec (4), Roadmap (3), Guides (6)
Validation: No example markers, no hardcoded e-commerce data, only project-specific content
Output: Clean, project-specific tab files ready for build
📖 Placeholder reference & example transformation: per phases_detailed.md §Phase 6
Objective: Assemble modular components into standalone HTML file.
When to execute: After Phase 6 (content injected, examples deleted)
Process:
Check if presentation_final.html exists (Auto-rebuild for automation):
pattern: "docs/presentation/presentation_final.html"ℹ Rebuilding presentation_final.html (generated file, safe to rebuild)Creating presentation_final.htmlWhy auto-rebuild:
Navigate to presentation assets directory:
cd docs/presentation/assets/
Run build script:
node build-presentation.js
Build Script Process:
<style> tag<script> tag<div> containers../presentation_final.htmlValidate Output (only if file was built):
✓ Build completed successfullyNotify user:
✓ Rebuilt docs/presentation/presentation_final.html (~120-150 KB)✓ Created docs/presentation/presentation_final.html (~120-150 KB)Test in browser: Double-click to open, or use http-serverOutput: docs/presentation/presentation_final.html (self-contained, ~120-150 KB, no external dependencies except Mermaid.js CDN)
⚠️ Important Note:
presentation_final.html is a generated file built from modular source files in assets/.
presentation_final.html directly — changes will be lost on next rebuildassets/ directory (template, tabs, styles, scripts)cd assets/ && node build-presentation.jsdocs/
├── project/ # Source documentation (input)
│ ├── requirements.md
│ ├── architecture.md
│ ├── tech_stack.md
│ ├── api_spec.md (conditional)
│ ├── database_schema.md (conditional)
│ ├── design_guidelines.md (conditional)
│ └── runbook.md (conditional)
├── reference/ # Source documentation (input)
│ ├── adrs/
│ │ └── *.md (Category: Strategic | Technical)
│ └── guides/
│ └── *.md (optional)
├── tasks/ # Source documentation (input)
│ └── kanban_board.md (Epic Story Counters)
└── presentation/ # Output directory
├── README.md # Navigation hub
├── presentation_final.html # Final standalone HTML (~120-150 KB)
└── assets/ # Modular HTML structure
├── presentation_template.html # Base HTML5 + 6 tabs
├── styles.css # ~400-500 lines
├── scripts.js # Tab switching + Mermaid
├── build-presentation.js # Node.js build script
└── tabs/
├── tab_overview.html # Landing page
├── tab_requirements.html # FRs + ADRs
├── tab_architecture.html # C4 diagrams
├── tab_technical_spec.html # API + Data + Deployment
├── tab_roadmap.html # Epic list
└── tab_guides.html # How-to guides
Note: Presentation READS from docs/project/, docs/reference/, docs/tasks/ but OUTPUTS to docs/presentation/.
Idempotent operation: Preserves README.md, preserves assets/ (user customizations), auto-rebuilds presentation_final.html.
Key rules by phase:
Edit assets/styles.css (CSS variables for theming), assets/presentation_template.html (layout/tabs), or assets/tabs/*.html (tab content).
⚠️ After any customization: Always rebuild the presentation:
cd assets/
node build-presentation.js
Important: Never edit presentation_final.html directly — it's a generated file that gets overwritten on each build.
Orchestrator: ln-110-documents-pipeline | Standalone: Yes (rebuild/validate existing docs)
Required files: requirements.md, architecture.md, tech_stack.md (in docs/project/) Optional files: api_spec, database_schema, design_guidelines, runbook, adrs/.md, guides/.md, kanban_board.md
Dependencies: Node.js v18+, Modern browser, Internet (Mermaid CDN)
| Phase | Critical Checkpoints |
|---|---|
| 1. READ DOCS | ✅ All docs loaded from docs/project/, docs/reference/, docs/tasks/ ✅ Metadata extracted ✅ Mermaid blocks preserved |
| 2. VALIDATE EXISTS | ✅ Required files exist (requirements.md, architecture.md, tech_stack.md) ✅ ERROR if missing |
| 3. VALIDATE QUALITY | ✅ Diagrams checked ✅ Placeholders detected ✅ Content length checked ✅ WARN only (non-blocking) |
| 4. CREATE DIR | ✅ docs/presentation/ created ✅ README.md created/preserved |
| 5. COPY TEMPLATES | ✅ assets/ created with all templates OR preserved if exists |
| 6. INJECT CONTENT | ✅ All 6 tabs populated ✅ CRITICAL: Example blocks deleted ✅ No <!-- EXAMPLE --> markers ✅ No hardcoded e-commerce data |
| 7. BUILD HTML | ✅ node build-presentation.js executed ✅ presentation_final.html created (~120-150 KB) ✅ Tested in browser |
Output: docs/presentation/presentation_final.html + assets/ + README.md
<!-- EXAMPLE START -->...<!-- EXAMPLE END --> must be removed; no hardcoded e-commerce data in outputreferences/phases_detailed.mdreferences/presentation_readme_template.mdreferences/presentation_template.htmlreferences/styles.cssreferences/scripts.jsreferences/build-presentation.jsreferences/tabs/tab_overview.html, tab_requirements.html, tab_architecture.html, tab_technical_spec.html, tab_roadmap.html, tab_guides.htmlVersion: 8.0.0 Last Updated: 2025-12-12