gh-levnikolaevich-claude-code-skills-full-development-workflow-skills/skills/ln-115-presentation-creator/references/presentation_readme_template.md

{{PROJECT_NAME}} - Presentation

SCOPE: Navigation hub for project presentation (HTML presentation access, customization guide, build instructions ONLY). DO NOT add here: Project documentation → docs/project/, Architecture details → docs/project/architecture.md, Technical specs → docs/project/tech_stack.md

---

Purpose

This directory contains the interactive HTML presentation for {{PROJECT_NAME}}, generated from project documentation (requirements, architecture, technical specifications).

Use this when:

• Presenting project overview to stakeholders
• Onboarding new team members
• Sharing project architecture visually
• Creating project demos

---

Quick Navigation

Main Presentation:

• presentation_final.html - Open this in your browser

Modular Structure:

• assets/presentation_template.html - Base template
• assets/styles.css - Styling
• assets/scripts.js - Tab switching logic
• assets/tabs/ - Individual tab content (tab_overview.html, tab_requirements.html, tab_architecture.html, tab_technical_spec.html, tab_roadmap.html, tab_guides.html)
• assets/build-presentation.js - Build script

⚠️ IMPORTANT: presentation_final.html is a GENERATED file

• DO NOT edit presentation_final.html directly - changes will be overwritten on next build
• ALL changes must be made in source files (tabs/*.html, styles.css, scripts.js, presentation_template.html)
• Rebuild after source changes: node docs/presentation/assets/build-presentation.js

---

Customization Guide

Editing Content

1. Edit individual tabs in assets/tabs/:

   • tab_overview.html - Project overview and key information
   • tab_requirements.html - Functional requirements and acceptance criteria
   • tab_architecture.html - System architecture and C4 diagrams
   • tab_technical_spec.html - Technology stack, API, database (or specialized tabs)
   • tab_roadmap.html - Project roadmap and milestones
   • tab_guides.html - Quick guides and best practices

2. Update styles in assets/css/custom.css:

   • Modify colors, fonts, spacing
   • Customize section backgrounds
   • Adjust diagram styles

3. Modify behavior in assets/js/custom.js:

   • Add custom interactions
   • Implement navigation helpers
   • Integrate analytics

Presentation Update Workflow

⚠️ CRITICAL RULE: NEVER edit presentation_final.html directly (it's a generated file)

Follow this workflow for ALL presentation updates:

1. Identify what to change:

   • Content update → Edit assets/tabs/tab_*.html (6 files)
   • Styling update → Edit assets/styles.css
   • Behavior update → Edit assets/scripts.js
   • Layout update → Edit assets/presentation_template.html

2. Make changes ONLY in source files:

   • Tab content: assets/tabs/tab_overview.html, tab_requirements.html, tab_architecture.html, tab_technical_spec.html, tab_roadmap.html, tab_guides.html
   • Styling: assets/styles.css
   • JavaScript: assets/scripts.js
   • Template: assets/presentation_template.html

3. Rebuild presentation:

   cd docs/presentation
   node assets/build-presentation.js
   

4. Verify changes:

   • Open presentation_final.html in browser
   • Check all tabs load correctly
   • Verify diagrams render properly
   • Test navigation between tabs

5. Commit BOTH:

   • Source files (assets/tabs/, assets/*.{css,js,html})
   • Regenerated presentation_final.html

Why this matters: presentation_final.html is auto-generated by combining all source files. Direct edits will be lost on next rebuild.

---

Build Instructions

Prerequisites:

• Project documentation in docs/project/ (requirements.md, architecture.md, tech_stack.md, etc.)

Build Process:

1. Run skill: ln-115-presentation-creator
2. Skill reads documentation from docs/project/
3. Generates HTML tabs in assets/tabs/
4. Combines tabs into presentation_final.html
5. Creates this README for navigation

Rebuild Triggers:

• Updated project documentation
• New architecture diagrams
• Changed requirements or roadmap
• Added new guides

---

Maintenance

Last Updated: {{LAST_UPDATED}}

Update Triggers:

• Documentation updates in docs/project/
• New C4 diagrams or Mermaid charts
• Roadmap or milestone changes
• Design system updates

Verification:

• presentation_final.html opens without errors
• All tabs load correctly (Overview, Requirements, Architecture, etc.)
• Mermaid diagrams render properly
• Navigation between tabs works
• All links to documentation are valid

---

Related Documentation

• Project Documentation - Source for presentation content
• Architecture Diagrams - C4 Model diagrams
• Requirements - Functional requirements

---

Template Version: 1.0.0 Last Updated: {{LAST_UPDATED}}