@dzhechkov/keysarium 1.4.0 → 1.5.0

package/templates/.claude/skills/transcript-site-generator/references/component-catalog.md

@@ -0,0 +1,86 @@
+# Component Catalog Reference
+
+## HTML Sections (in index.html)
+
+Since this is a static site, "components" are HTML sections within the single `index.html` file. Each section below maps to a distinct HTML block.
+
+### Layout Components
+
+| Component | HTML Element | ID | Description |
+|-----------|-------------|-----|-------------|
+| Progress Bar | `<div>` | `progress-bar` | Fixed top bar showing scroll progress |
+| Header | `<header>` | - | Sticky header with title, stats, dark mode, search |
+| Sidebar TOC | `<nav>` | `sidebar` | Fixed sidebar with section links, scroll-spy active state |
+| Mobile Menu Button | `<button>` | `menu-toggle` | Hamburger button, visible only on `lg:hidden` |
+| Footer | `<footer>` | - | Author credits, video link, date |
+
+### Interactive Components
+
+| Component | HTML Element | ID | Trigger |
+|-----------|-------------|-----|---------|
+| Search Modal | `<div>` | `search-modal` | Click search button or Ctrl+K |
+| Search Input | `<input>` | `search-input` | Auto-focused when modal opens |
+| Search Results | `<div>` | `search-results` | Populated by app.js after 2+ chars |
+| Theme Toggle | `<button>` | `theme-toggle` | Toggles `dark` class on `<html>` |
+| Theme Icon | `<i>` | `theme-icon` | Swaps between `fa-moon` and `fa-sun` |
+| Back to Top | `<button>` | `back-to-top` | Appears after 500px scroll |
+| Copy Button | `<button>` | - (per section) | Copies section prose to clipboard |
+| YouTube Player | `<iframe>` | `yt-player` | Loaded on page, seeked via timestamp clicks |
+
+### Content Components
+
+| Component | HTML Element | ID Pattern | Description |
+|-----------|-------------|------------|-------------|
+| Transcript Section | `<section>` | `section-{slug}` | One per transcript section |
+| Section Title | `<h2>` | - | Includes optional timestamp link |
+| Timestamp Link | `<a>` | - | Calls `seekTo(seconds)` on click |
+| Speaker Badge | `<span>` | - | Colored badge with speaker name + role |
+| Prose Container | `<div class="prose">` | - | Contains rendered transcript paragraphs |
+| TOC Link | `<a class="toc-link">` | `data-section="{id}"` | Sidebar link, highlighted by scroll-spy |
+
+## JavaScript Modules (in app.js)
+
+All functionality is in a single `app.js` file, organized into numbered sections:
+
+| # | Module | Key APIs Used | Elements Referenced |
+|---|--------|--------------|---------------------|
+| 1 | Dark Mode | `localStorage`, `classList` | `#theme-toggle`, `#theme-icon`, `<html>` |
+| 2 | Mobile Nav | `classList.toggle` | `#menu-toggle`, `#sidebar` |
+| 3 | TOC Scroll-Spy | `IntersectionObserver` | `.toc-link`, `main section[id]` |
+| 4 | Progress Bar | `requestAnimationFrame`, `scrollY` | `#progress-bar` |
+| 5 | Back to Top | `scrollY`, `scrollTo` | `#back-to-top` |
+| 6 | Search Modal | `setTimeout` (debounce), DOM generation | `#search-btn/modal/input/results` |
+| 7 | Keyboard Shortcuts | `keydown` event | Ctrl+K, Escape |
+| 8 | Copy Quote | `navigator.clipboard.writeText` | `.copy-btn` per section |
+| 9 | YouTube Seek | YouTube IFrame Player API (`YT.Player`) + `postMessage` fallback | `#yt-player` |
+
+## CSS Classes (Tailwind)
+
+### Key Custom Classes
+
+| Class | Purpose | Where Used |
+|-------|---------|------------|
+| `toc-link` | TOC navigation link, targeted by scroll-spy | Sidebar `<a>` elements |
+| `copy-btn` | Copy button, icon swap on click | Section copy buttons |
+| `no-print` | Hidden in print media | Sidebar, buttons, progress bar |
+| `prose` | Tailwind typography styling | Transcript content container |
+| `scroll-mt-20` | Scroll margin for sticky header offset | Section elements |
+| `line-clamp-1` | Truncate title to single line | Header title |
+
+### Responsive Breakpoints
+
+| Breakpoint | Width | Layout Change |
+|-----------|-------|---------------|
+| Default | < 1024px | Sidebar hidden, hamburger menu shown |
+| `lg:` | >= 1024px | Sidebar visible, hamburger hidden |
+| `sm:` | >= 640px | Keyboard shortcut hints shown |
+
+### Dark Mode Classes Pattern
+
+Every visible element follows the pattern:
+```
+bg-white dark:bg-gray-900
+text-gray-900 dark:text-gray-100
+border-gray-200 dark:border-gray-700
+hover:bg-gray-100 dark:hover:bg-gray-800
+```

package/templates/.claude/skills/transcript-site-generator/references/data-schemas.md

@@ -0,0 +1,123 @@
+# Data Schemas Reference
+
+## Section Schema
+
+Each transcript section is represented internally during generation:
+
+```typescript
+interface Section {
+  id: string;              // kebab-case slug, e.g. "early-career"
+  order: number;           // 1-based sequential
+  title: string;           // Display title, e.g. "2. Early Career"
+  shortTitle: string;      // 2-3 words for mobile TOC
+  timestamp: string | null;     // "HH:MM:SS" or "MM:SS" or null
+  timestampSeconds: number | null; // For YouTube seek, or null
+  content: string;         // Full text, paragraphs separated by \n\n
+  wordCount: number;       // Words in content
+  speakerName: string | null;   // e.g. "Boris Cherny"
+  speakerRole: string | null;   // "Host" | "Guest" | null
+}
+```
+
+### Section ID Rules
+
+- Derived from title, lowercase, kebab-case
+- Remove numbers and punctuation
+- Max 40 characters
+- Must be unique across all sections
+- Prefixed with `section-` in HTML (e.g., `id="section-early-career"`)
+
+### Content Formatting
+
+In the HTML rendering, content follows these rules:
+- Paragraphs → `<p>` tags inside a `.prose` container
+- `**bold**` → `<strong>`
+- `*italic*` → `<em>`
+- Inline code → `<code class="...">`
+- URLs → `<a href="..." target="_blank" class="text-primary-500 hover:underline">`
+- Line breaks within a paragraph → `<br />`
+- Special characters escaped: `<`, `>`, `&`, `"`
+
+## Metadata Schema
+
+```typescript
+interface Metadata {
+  title: string;            // Page title
+  description: string;      // Max 160 chars for SEO
+  author: string;
+  language: "ru" | "en";
+  date: string;             // ISO 8601 date
+
+  video: {
+    url: string;            // Full YouTube URL
+    videoId: string;        // 11-char YouTube ID
+    embedUrl: string;       // https://www.youtube.com/embed/{videoId}
+    duration: string;       // ISO 8601 duration (PT1H23M)
+    channelName: string;
+    publishDate: string;
+  } | null;
+
+  stats: {
+    totalWords: number;
+    estimatedReadMinutes: number; // totalWords / 200, rounded up
+    sectionCount: number;
+    speakerCount: number;
+  };
+
+  speakers: Array<{
+    name: string;
+    role: "Host" | "Guest" | "Speaker";
+  }>;
+
+  seo: {
+    ogTitle: string;
+    ogDescription: string;
+    ogType: "article" | "video.other";
+    ogImage: string | null;        // YouTube thumbnail or null
+    twitterCard: "summary_large_image";
+    jsonLdType: "Article" | "VideoObject";
+  };
+}
+```
+
+## VTT Subtitle Schema (Input)
+
+When parsing YouTube VTT files:
+
+```
+WEBVTT
+
+00:00:00.000 --> 00:00:05.500
+First line of subtitle text
+
+00:00:03.000 --> 00:00:08.000
+Second line (may overlap with first)
+
+00:00:08.000 --> 00:00:12.500
+Third line
+```
+
+### VTT Parsing Rules
+
+1. Skip `WEBVTT` header line and any `NOTE` or `STYLE` blocks
+2. Parse timestamp lines: `HH:MM:SS.mmm --> HH:MM:SS.mmm`
+3. Extract text lines between timestamp blocks
+4. Remove HTML tags (`<c>`, `</c>`, `<c.colorE5E5E5>`, etc.)
+5. Deduplicate: if two consecutive segments have >80% text overlap, keep only the later one
+6. Merge segments into paragraphs: group consecutive segments by speaker or 30-second gaps
+7. Round timestamps to nearest second for display
+
+## GitHub Pages Deploy Schema
+
+```yaml
+# .github/workflows/deploy.yml structure
+name: Deploy to GitHub Pages
+on: push (main) + workflow_dispatch
+permissions: contents:read, pages:write, id-token:write
+jobs.deploy:
+  steps:
+    - checkout
+    - configure-pages
+    - upload-pages-artifact (path: 'docs')
+    - deploy-pages
+```

package/templates/.claude/skills/transcript-site-generator/references/tech-stack.md

@@ -0,0 +1,132 @@
+# Tech Stack Reference
+
+## Static Site Architecture (Default)
+
+The transcript site is a pure static site with zero build step. This architecture was chosen for maximum simplicity and instant deployment.
+
+### Core Stack
+
+| Technology | Version | Role | Delivery |
+|-----------|---------|------|----------|
+| HTML5 | - | Page structure, semantic markup | Inline |
+| Tailwind CSS | 3.x (CDN) | Utility-first styling, dark mode, responsive | CDN: `cdn.tailwindcss.com` |
+| Vanilla JavaScript | ES2020+ | All interactivity | `docs/static/app.js` |
+| Font Awesome | 6.5.x | Icons (moon, sun, search, copy, bars, arrow-up, youtube) | CDN: `cdnjs.cloudflare.com` |
+
+### Why Static (Not React/Vite)?
+
+| Criterion | Static HTML | React + Vite SPA |
+|-----------|------------|-------------------|
+| Build step | None | Required (npm install + npm run build) |
+| Deploy complexity | Push `docs/` | Build + deploy `dist/` |
+| Dependencies | 0 | 15+ npm packages |
+| Load time | Instant (single file) | Initial bundle load |
+| Maintenance | Zero | Dependency updates |
+| GitHub Pages setup | Trivial (serve docs/) | Needs workflow |
+| File count | 3 files | 30+ files |
+| Searchability | Full HTML content | JavaScript-rendered |
+| SEO | Native | Requires SSR/prerender |
+
+**Bottom line:** For a read-only transcript site, static HTML is superior in every dimension.
+
+### CDN Links (Development Default)
+
+> **Note:** `cdn.tailwindcss.com` is the Tailwind Play CDN intended for development and prototyping.
+> It works well for transcript sites (read-only, low-traffic), but is NOT recommended by the
+> Tailwind team for high-traffic production use. For production hardening, see the self-hosted
+> alternative below.
+
+```html
+<!-- Tailwind CSS (Play CDN — development/prototyping) -->
+<script src="https://cdn.tailwindcss.com"></script>
+
+<!-- Font Awesome (with SRI hash) -->
+<link rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+  integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+  crossorigin="anonymous" referrerpolicy="no-referrer" />
+```
+
+### Self-Hosted Tailwind Alternative (Production)
+
+For high-traffic or offline-capable deployments, replace the Play CDN with a pre-built CSS file:
+
+```bash
+# Install Tailwind CLI (one-time, no npm project needed)
+curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
+chmod +x tailwindcss-linux-x64
+
+# Generate minified CSS from index.html
+./tailwindcss-linux-x64 -i /dev/null -o docs/static/tailwind.min.css --content docs/index.html --minify
+```
+
+Then in `index.html`, replace the CDN script with:
+```html
+<link rel="stylesheet" href="static/tailwind.min.css" />
+```
+
+The user can request this mode via: "use self-hosted Tailwind" or "make it work offline".
+
+### Tailwind Configuration
+
+```javascript
+tailwind.config = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc',
+          400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca',
+          800: '#3730a3', 900: '#312e81', 950: '#1e1b4b'
+        }
+      }
+    }
+  }
+}
+```
+
+### Browser Support
+
+- Chrome 80+, Firefox 78+, Safari 14+, Edge 80+
+- `IntersectionObserver`: supported in all modern browsers
+- `navigator.clipboard.writeText`: requires HTTPS (works on GitHub Pages)
+- `backdrop-filter: blur()`: Safari 14+, Chrome 76+
+
+### YouTube Integration
+
+- Embed via `<iframe>` with `enablejsapi=1` parameter
+- Timestamp seeking via YouTube IFrame Player API (`YT.Player` + `seekTo()`)
+- Fallback: `postMessage` to iframe if IFrame API hasn't loaded yet
+- Thumbnail URL pattern: `https://img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg`
+
+### CDN Availability Note
+
+The site depends on external CDNs (Tailwind CSS, Font Awesome). If CDNs are unavailable (corporate firewalls, offline):
+- Content remains fully readable (semantic HTML)
+- Layout will be unstyled but functional
+- Icons will not display (consider adding `aria-label` on icon-only buttons as fallback)
+
+### Optional: yt-dlp
+
+For extracting transcripts from YouTube videos:
+```bash
+pip install yt-dlp
+
+# Extract subtitles
+yt-dlp --write-auto-sub --sub-lang ru,en --skip-download --sub-format vtt -o "transcript" "<URL>"
+
+# Get video metadata
+yt-dlp --print title --print channel --print duration --skip-download "<URL>"
+```
+
+### Output File Sizes (Typical)
+
+| File | Size | Content |
+|------|------|---------|
+| `docs/index.html` | 50-150 KB | All HTML + inline content |
+| `docs/static/app.js` | 10-12 KB | All JavaScript |
+| `docs/static/style.css` | 0.5 KB | Print styles + overrides |
+| **Total** | **60-165 KB** | **Before CDN resources** |
+
+CDN resources are cached by the browser after first load.

package/templates/CLAUDE.md

@@ -8,6 +8,7 @@
 
 ```
 /casarium [текст кейса]            — Полный пайплайн (7 фаз)
+/casarium --ai-factory [текст]      — Пайплайн + маппинг на Cloud.ru AI Factory (все фазы)
 /new-research [название]            — Создать новое исследование
 /parallel-research кейс1 | кейс2   — Запустить несколько параллельно
 /harvest [путь или "all"]           — Извлечь знания после проекта
@@ -28,6 +29,8 @@
 
 /feature-adr [описание фичи]       — Adaptive Feature Development (9 шагов, S/M/L/XL)
 
+/analyst-manual [тема/задача]       — Стратегический анализ с checkpoint'ами (explore → research → solve)
+
 /bto [путь или описание]           — Build-Test-Optimize полный цикл
 /bto-build [описание]              — Генерация нового скилла/команды
 /bto-benchmark [путь]              — Детерминистический бенчмаркинг артефакта
@@ -45,7 +48,7 @@ product-keysarium-2026/
 ├── TOOLKIT_HARVEST.md              ← Трекер знаний для извлечения
 ├── .claude/
 │   ├── commands/                   ← Slash-команды (пайплайн)
-│   │   ├── casarium.md             ← /casarium — полный пайплайн
+│   │   ├── casarium.md             ← /casarium — полный пайплайн (+ --ai-factory флаг)
 │   │   ├── new-research.md         ← /new-research — новое исследование
 │   │   ├── parallel-research.md    ← /parallel-research — параллельные кейсы
 │   │   ├── discovery.md            ← /discovery — Phase 0
@@ -75,6 +78,7 @@ product-keysarium-2026/
 │   │   ├── phase-3-solve.shard.md
 │   │   ├── phase-4-architecture.shard.md
 │   │   ├── phase-5-presentation.shard.md
+│   │   ├── phase-ai-factory.shard.md  ← AI Factory mode (только при --ai-factory)
 │   │   ├── bto-evaluation.shard.md
 │   │   └── feature-adr.shard.md
 │   └── skills/                     ← Навыки (building blocks)
@@ -86,7 +90,9 @@ product-keysarium-2026/
 │       ├── problem-solver-enhanced/  ← Решение проблем (TRIZ + Game Theory)
 │       ├── reverse-engineering-unicorn/ ← Reverse engineering компаний
 │       ├── feature-adr/            ← Adaptive feature development (9 steps, S/M/L/XL)
-│       └── knowledge-extractor/   ← Knowledge harvesting (5 agents, 7 categories, 8 gates)
+│       ├── knowledge-extractor/   ← Knowledge harvesting (5 agents, 7 categories, 8 gates)
+│       ├── analyst-manual-full/  ← Композитный аналитик (explore + research + solve, manual checkpoints)
+│       └── ai-factory-mapper/    ← Маппинг сценариев на Cloud.ru Evolution AI Factory (v1.0)
 ├── lib/                            ← Библиотечные модули
 │   ├── background-workers.md       ← Протокол фоновых воркеров
 │   ├── memory-protocol.md          ← Протокол memory_query / memory_store
@@ -164,6 +170,7 @@ DISCOVERY → EXPLORE  → RESEARCH → CJM PROTO    → SOLVE    → ARCHITECTU
 8. **Governance shards** — каждая фаза загружает свой shard из `.claude/shards/`
 9. **Model routing** — haiku для Layer 0-1, sonnet для research/judges, opus для creative work
 10. **Trust tiers** — скиллы классифицированы (Tier 0-3), повышение через `/bto-test`
+11. **`--ai-factory` флаг полностью аддитивен** — без флага поведение идентично предыдущим версиям; с флагом — маппинг на Cloud.ru AI Factory интегрируется во все фазы через `phase-ai-factory.shard.md`
 
 ## Governance System