zhongwei/gh-levnikolaevich-claude-code-skills-full-development-workflow-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:37:27 +08:00
commit 37774aa937
131 changed files with 31137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
skills/ln-115-presentation-creator/diagram.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ln-115-presentation-creator - State Diagram</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="../shared/css/diagram.css">
</head>
<body>
<div class="container">
<header>
<h1>🎨 ln-115-presentation-creator</h1>
<p class="subtitle">Interactive HTML Presentation Creator - State Diagram</p>
</header>
<div class="info-box">
<h3>📋 Workflow Overview</h3>
<ul>
<li><strong>Purpose:</strong> Build interactive HTML presentation from project documentation</li>
<li><strong>Output:</strong> Single HTML file with 6 tabs (Overview, Requirements, Architecture, Technical Spec, Roadmap, Guides)</li>
<li><strong>Technologies:</strong> Mermaid v11, table-based structure, English language</li>
<li><strong>Use after:</strong> ln-114-project-docs-creator or invoked automatically by ln-110-documents-pipeline (Phase 2.5)</li>
<li><strong>Validation:</strong> Phase 2 source docs existence + Phase 3 content quality validation (read-only)</li>
</ul>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color color-discovery"></div>
<span>Discovery/Validation</span>
</div>
<div class="legend-item">
<div class="legend-color color-processing"></div>
<span>Content Processing</span>
</div>
<div class="legend-item">
<div class="legend-color color-action"></div>
<span>Output Generation</span>
</div>
</div>
<div class="diagram-container">
<div class="mermaid">
graph TD
Start([Start: Build HTML Presentation]) --> Phase1[Phase 1: Read Source Documents<br/>Requirements, Architecture, Tech Spec, ADRs, Guides]
Phase1 --> Phase2[Phase 2: Validate Source Exists<br/>Check required/optional files]
Phase2 --> Phase3[Phase 3: Validate Content Quality<br/>Mermaid diagrams, placeholders, min length]
Phase3 --> Phase4[Phase 4: Create Presentation Directory<br/>docs/presentation/ + README.md]
Phase4 --> Phase5[Phase 5: Copy Templates to Project<br/>12 HTML/CSS/JS template files]
Phase5 --> Phase6[Phase 6: Content Injection<br/>Build 6 tabs + parse Mermaid + cleanup examples]
Phase6 --> Phase7[Phase 7: Build Final HTML<br/>Combine tabs + CSS + JS → presentation_final.html]
Phase7 --> End([End: ✓ Interactive presentation created])
%% Styling
classDef discovery fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
classDef processing fill:#FFF9C4,stroke:#F57C00,stroke-width:2px
classDef action fill:#C8E6C9,stroke:#388E3C,stroke-width:2px
class Phase1,Phase2,Phase3 discovery
class Phase4,Phase5,Phase6 processing
class Phase7 action
</div>
</div>
<div class="info-box">
<h3>🔑 Key Features</h3>
<ul>
<li><strong>6 Tabs:</strong> Overview (landing), Requirements (FRs/ADRs only; Non-Functional Requirements forbidden), Architecture (C4), Technical Spec (API/data), Roadmap (Kanban), Guides</li>
<li><strong>Diátaxis Framework:</strong> Structured documentation approach</li>
<li><strong>SCOPE Tags:</strong> Each tab has defined scope boundaries</li>
<li><strong>Template Ownership:</strong> All HTML/CSS/JS templates in references/ directory (12 files)</li>
<li><strong>Unified Workflow:</strong> READ+VALIDATE+CREATE with Phase 2/3 validation, renumbered phases (2-5 → 4-7)</li>
</ul>
</div>
<footer>
<p>Generated for ln-115-presentation-creator skill | Version 7.0.0</p>
<p>Diagram format: Mermaid.js | Last updated: 2025-11-18</p>
</footer>
</div>
<script>
mermaid.initialize({
startOnLoad: true,
theme: 'default',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis'
}
});
</script>
</body>
</html>