codymaster 4.1.0

package/skills/cm-readit/ui-patterns.md

@@ -0,0 +1,362 @@
+# UI Patterns — Player Bars & Bottom Sheets
+
+> CSS and HTML patterns for audio player UI. Responsive, accessible, animated.
+
+---
+
+## Player Bar (Bottom-Fixed)
+
+### HTML Structure
+
+```html
+<div class="reader-bar">
+    <div class="reader-bar-inner">
+        <div class="reader-bar-info">
+            <span class="reader-bar-icon">🔊</span>
+            <span class="reader-bar-title">Article Title</span>
+        </div>
+        <div class="reader-bar-controls">
+            <button class="reader-bar-btn reader-btn-toggle" aria-label="Pause">
+                <!-- Pause/Play SVG icons -->
+            </button>
+            <button class="reader-bar-btn reader-btn-close" aria-label="Close">
+                <!-- Close SVG icon -->
+            </button>
+        </div>
+    </div>
+    <div class="reader-bar-progress">
+        <div class="reader-bar-progress-fill"></div>
+    </div>
+</div>
+```
+
+### CSS
+
+```css
+.reader-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    transform: translateY(100%);
+    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    /* safe-area for notched devices */
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.reader-bar.active {
+    transform: translateY(0);
+}
+
+.reader-bar-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
+}
+
+/* Dark mode variant */
+@media (prefers-color-scheme: dark) {
+    .reader-bar-inner {
+        background: rgba(30, 30, 30, 0.95);
+        border-top-color: rgba(255, 255, 255, 0.08);
+    }
+}
+
+.reader-bar-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.reader-bar-title {
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.reader-bar-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.reader-bar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    transition: background 0.15s ease;
+}
+
+.reader-bar-btn:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+/* Progress bar */
+.reader-bar-progress {
+    height: 3px;
+    background: rgba(0, 0, 0, 0.08);
+}
+
+.reader-bar-progress-fill {
+    height: 100%;
+    width: 0%;
+    background: #c9a84c; /* gold accent */
+    border-radius: 0 3px 3px 0;
+    transition: width 0.3s linear;
+}
+```
+
+### Body Padding (Prevent Content Overlap)
+
+```javascript
+// When showing bar
+document.body.style.paddingBottom = '72px';
+
+// When hiding bar
+document.body.style.paddingBottom = '';
+```
+
+---
+
+## Bottom Sheet
+
+### HTML Structure
+
+```html
+<div class="audio-sheet">
+    <div class="audio-sheet-inner">
+        <button class="audio-sheet-close" aria-label="Close">✕</button>
+        <div class="audio-sheet-icon">🎧</div>
+        <p class="audio-sheet-text">Want to hear a quick introduction?</p>
+        <div class="audio-sheet-actions">
+            <button class="btn btn-primary">🔊 Listen Now</button>
+            <button class="btn btn-outline">Later</button>
+        </div>
+    </div>
+</div>
+```
+
+### CSS
+
+```css
+.audio-sheet {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1100;
+    transform: translateY(100%);
+    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
+    pointer-events: none;
+}
+
+.audio-sheet.active {
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.audio-sheet-inner {
+    position: relative;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 24px 20px 20px;
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
+    text-align: center;
+}
+
+/* Drag handle indicator */
+.audio-sheet-inner::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 4px;
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+    margin: 0 auto 16px;
+}
+
+.audio-sheet-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.audio-sheet-icon {
+    font-size: 40px;
+    margin-bottom: 12px;
+    line-height: 1;
+}
+
+.audio-sheet-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 16px;
+    line-height: 1.5;
+}
+
+.audio-sheet-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+}
+
+.audio-sheet-actions .btn {
+    flex: 1;
+    max-width: 180px;
+}
+```
+
+### Swipe-to-Dismiss (Mobile)
+
+```javascript
+let startY = 0;
+
+sheet.addEventListener('touchstart', (e) => {
+    startY = e.touches[0].clientY;
+}, { passive: true });
+
+sheet.addEventListener('touchmove', (e) => {
+    const dy = e.touches[0].clientY - startY;
+    if (dy > 60) dismiss(sheet);
+}, { passive: true });
+```
+
+---
+
+## Animation Pattern
+
+### Enter (slide up)
+
+```javascript
+// Create element → append to DOM → next frame add active class
+document.body.appendChild(element);
+requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+        element.classList.add('active');
+    });
+});
+```
+
+**Double `requestAnimationFrame`:** Ensures the browser has painted the initial state (translateY 100%) before transitioning to the active state.
+
+### Exit (slide down)
+
+```javascript
+element.classList.remove('active');
+setTimeout(() => element.remove(), 400); // match transition duration
+```
+
+---
+
+## Trigger Button (Topbar)
+
+```css
+.topbar-audio-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+}
+
+.topbar-audio-btn:hover {
+    background: rgba(0, 0, 0, 0.06);
+}
+
+/* Active state when reading */
+.topbar-audio-btn.reading {
+    color: #2d5016; /* moss green or brand color */
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+```
+
+---
+
+## Responsive Considerations
+
+```css
+@media (max-width: 768px) {
+    .reader-bar-inner {
+        padding: 8px 12px;
+        gap: 8px;
+    }
+
+    .reader-bar-btn {
+        width: 36px;
+        height: 36px;
+    }
+
+    .reader-bar-title {
+        font-size: 13px;
+    }
+
+    .audio-sheet-inner {
+        padding: 20px 16px 16px;
+        border-radius: 16px 16px 0 0;
+    }
+
+    .audio-sheet-icon {
+        font-size: 32px;
+    }
+
+    .audio-sheet-text {
+        font-size: 14px;
+    }
+}
+```
+
+---
+
+## Accessibility
+
+- All buttons must have `aria-label`
+- Toggle button must update label between "Play" / "Pause"
+- Respect `prefers-reduced-motion`: skip animations
+- Ensure sufficient color contrast for controls
+- Player bar should not trap focus

package/skills/cm-readit/voice-cro.md

@@ -0,0 +1,223 @@
+# Voice CRO — Conversion Rate Optimization via Audio
+
+> Use audio strategically to increase engagement and conversions. Trigger-based, per-page, config-driven.
+
+---
+
+## What is Voice CRO?
+
+Voice CRO uses pre-recorded audio (sales pitch, social proof, expertise showcase) to:
+1. **Interrupt scroll patterns** with a bottom sheet offer
+2. **Build trust** through human voice (more personal than text)
+3. **Guide users to CTA** after listening
+
+### Flow
+
+```
+User lands on page
+     │
+     ├─ Time trigger (e.g., 15s)  ─┐
+     │                              ├─ BOTH met → Show Bottom Sheet
+     └─ Scroll trigger (e.g., 25%) ─┘
+                                         │
+                                    "🔊 Nghe Ngay" or "Để Sau"
+                                         │
+                                    ┌─────┴─────┐
+                                    │           │
+                              Play Intro    Dismiss
+                              (30s MP3)    (sessionStorage)
+                                    │
+                               Intro Done
+                                    │
+                              "Nghe Tiếp?"
+                                    │
+                              ┌─────┴─────┐
+                              │           │
+                         Play Full    Show CTA
+                         (2min MP3)
+                              │
+                         Full Done
+                              │
+                         Show CTA + Thank You
+```
+
+---
+
+## Config Pattern
+
+```javascript
+const CONFIG = {
+    '/': {
+        delay: 20000,              // ms before time trigger
+        scroll: 0.30,              // scroll % threshold
+        audio: [
+            '/audio/homepage-intro.mp3',  // Part 1: short introduction
+            '/audio/homepage-full.mp3'    // Part 2: full pitch
+        ],
+        sheetIcon: '🎧',          // Bottom sheet emoji
+        sheetText: 'Bạn muốn nghe giới thiệu nhanh?',
+        ctaText: 'Đặt Lịch Ngay', // CTA button text
+        ctaHref: '#dat-lich'       // CTA link
+    },
+    '/product-page.html': {
+        delay: 15000,
+        scroll: 0.25,
+        audio: ['/audio/product-intro.mp3', '/audio/product-full.mp3'],
+        sheetIcon: '💆',
+        sheetText: 'Nghe tư vấn nhanh từ chuyên gia',
+        ctaText: 'Mua Ngay',
+        ctaHref: '#buy',
+        // Optional: interaction trigger
+        checkboxTrigger: {
+            selector: '.check-item input[type=checkbox]',
+            minChecked: 2
+        }
+    }
+};
+```
+
+### Config Fields
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `delay` | number | ✅ | Milliseconds before time trigger fires |
+| `scroll` | number | ✅ | Scroll percentage (0-1) threshold |
+| `audio` | string[] | ✅ | [intro.mp3, full.mp3] URLs |
+| `sheetIcon` | string | ✅ | Emoji for bottom sheet |
+| `sheetText` | string | ✅ | Bottom sheet message |
+| `ctaText` | string | ✅ | CTA button label |
+| `ctaHref` | string | ✅ | CTA link target |
+| `checkboxTrigger` | object | ❌ | Interaction-based trigger |
+
+---
+
+## Trigger System
+
+### Dual-Condition Trigger (Time + Scroll)
+
+```javascript
+function initTrigger(cfg) {
+    if (isDismissed()) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    let timeReady = false;
+    let scrollReady = false;
+    let triggered = false;
+
+    const tryTrigger = () => {
+        if (triggered) return;
+        if (timeReady && scrollReady) {
+            triggered = true;
+            showBottomSheet(cfg);
+        }
+    };
+
+    // Time trigger
+    setTimeout(() => { timeReady = true; tryTrigger(); }, cfg.delay);
+
+    // Scroll trigger
+    const onScroll = () => {
+        const pct = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
+        if (pct >= cfg.scroll) {
+            scrollReady = true;
+            window.removeEventListener('scroll', onScroll);
+            tryTrigger();
+        }
+    };
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll(); // check immediately
+}
+```
+
+### Interaction Trigger (Checkbox)
+
+```javascript
+if (cfg.checkboxTrigger) {
+    const checkboxes = document.querySelectorAll(cfg.checkboxTrigger.selector);
+    checkboxes.forEach(cb => {
+        cb.addEventListener('change', () => {
+            const checked = document.querySelectorAll(
+                cfg.checkboxTrigger.selector + ':checked'
+            ).length;
+            if (checked >= cfg.checkboxTrigger.minChecked) {
+                triggered = true;
+                showBottomSheet(cfg);
+            }
+        });
+    });
+}
+```
+
+---
+
+## Session Management
+
+```javascript
+const STATE_KEY = 'voiceCroDismissed';
+
+function isDismissed() {
+    try { return sessionStorage.getItem(STATE_KEY) === '1'; }
+    catch { return false; }
+}
+
+function setDismissed() {
+    try { sessionStorage.setItem(STATE_KEY, '1'); }
+    catch { /* noop */ }
+}
+```
+
+**Using `sessionStorage`:** Dismissed state resets when tab closes. User sees the offer again next session.
+**Using `localStorage`:** Persistent. Use if you want "show once per user" behavior.
+
+---
+
+## Analytics Tracking
+
+```javascript
+const STATS_KEY = 'voiceCroStats';
+
+function trackStat(event) {
+    try {
+        const stats = JSON.parse(localStorage.getItem(STATS_KEY) || '{}');
+        const page = window.location.pathname;
+        if (!stats[page]) stats[page] = {};
+        stats[page][event] = (stats[page][event] || 0) + 1;
+        stats[page].lastSeen = Date.now();
+        localStorage.setItem(STATS_KEY, JSON.stringify(stats));
+    } catch { /* noop */ }
+}
+
+// Track: 'shown', 'listen', 'listenFull', 'dismissed', 'ctaClick'
+```
+
+**For production:** Replace localStorage with server-side analytics (GA4 events, PostHog, etc.)
+
+---
+
+## Best Practices
+
+### Trigger Timing
+
+| Page Type | Recommended Delay | Recommended Scroll |
+|-----------|------------------|--------------------|
+| Homepage | 20-25s | 30% |
+| Service page | 12-18s | 20-30% |
+| Blog/article | 25-30s | 40% |
+| Course/product | 15-20s | 25% |
+| Checkout | ❌ Don't trigger | ❌ Don't trigger |
+
+### Audio Script Guidelines
+
+| Part | Duration | Content |
+|------|----------|---------|
+| **Intro** | 15-30s | Hook + value prop + "nghe thêm?" |
+| **Full** | 60-120s | Problem → Solution → Social proof → CTA |
+
+### Don'ts
+
+- ❌ Don't autoplay audio
+- ❌ Don't show on checkout/payment pages
+- ❌ Don't block page interaction while playing
+- ❌ Don't trigger if another audio system is active (TTS reader)
+- ❌ Don't trigger for `prefers-reduced-motion` users
+- ❌ Don't trigger more than once per session

package/skills/cm-safe-deploy/SKILL.md

@@ -0,0 +1,120 @@
+---
+name: cm-safe-deploy
+description: Use when setting up deployment infrastructure for any project - establishes multi-gate deploy pipeline with test gates, build verification, frontend safety checks, version bump, changelog generation, and rollback strategy before code reaches production
+---
+
+# Safe Deploy Pipeline v2
+
+> **Role: Release Engineer** — You manage the 9-gate pipeline from secret hygiene to changelog. No shortcuts.
+
+## The Iron Law
+
+**NO DEPLOY WITHOUT PASSING ALL GATES. GATES ARE SEQUENTIAL. EACH MUST PASS BEFORE THE NEXT.**
+
+## When to Use
+
+- Setting up a new project's deployment infrastructure
+- Project has no test gate before deploy
+- After a production incident caused by untested code
+- Adding CI/CD to an existing project
+
+## The 9-Gate Pipeline
+
+```
+Gate 0: Secret Hygiene → Gate 1: Syntax → Gate 2: Test Suite → Gate 3: i18n Parity →
+Gate 4: Build → Gate 5: Dist Verify → Gate 6: Deploy + Smoke → Gate 7: Version Bump → Gate 8: Changelog
+```
+
+Each gate MUST pass. On failure → STOP, fix, retry from failed gate.
+
+---
+
+### Gate 0: Secret Hygiene (<0.5s)
+
+Check wrangler config for secret values (SERVICE_KEY, ANON_KEY, DB_PASSWORD). Verify `.gitignore` has `.env` + `.dev.vars`. Verify no secret files tracked by git. Calls `cm-secret-shield` Layer 4.
+
+**Rule:** `SERVICE_KEY`/`ANON_KEY` → Cloudflare Secrets (`wrangler secret put`), NEVER in `wrangler.jsonc`. Local dev secrets → `.dev.vars` (gitignored).
+
+### Gate 1: Syntax Validation (<1s)
+
+| Stack | Command |
+|-------|---------|
+| Vanilla JS | `node -c path/to/app.js` |
+| TypeScript | `npx tsc --noEmit` |
+| Python | `python -m py_compile app.py` |
+
+Gives exact line number of error instantly, before the slower test suite.
+
+### Gate 2: Test Suite
+
+Must include: frontend safety, backend API, business logic, i18n sync, integration tests. Run via `npm run test:gate` (`vitest run --reporter=verbose`). 0 failures → proceed.
+
+### Gate 3: i18n Parity Check
+
+All language files must have identical key counts and no null/empty values. Skip if project has no i18n.
+
+### Gate 4: Build Verification
+
+`npm run build` must succeed. Catches: import failures, tree-shaking errors, missing env vars, bundle size issues.
+
+### Gate 5: Dist Asset Verification
+
+Verify critical files exist in `dist/`: worker entry, frontend JS/CSS, translation files, critical assets.
+
+### Gate 6: Deploy + Smoke Test
+
+Deploy command by platform: Cloudflare (`wrangler pages deploy`), Vercel (`vercel --prod`), Netlify (`netlify deploy --prod`). Post-deploy: `curl` deployed URL, must return HTTP 200.
+
+### Gate 7: Version Bump (POST-DEPLOY)
+
+Detect bump type from commits: `fix:`/`bug:` → patch, `feat:`/`improve:` → minor. Update `package.json` version, commit.
+
+### Gate 8: Changelog Generation (POST-DEPLOY)
+
+Collect commits since last tag, categorize into **🚀 Improvements** and **🐛 Bug Fixes**. Write to `CHANGELOG.md`, git tag release.
+**CRITICAL:** The `CHANGELOG.md` file dynamically powers the public `/docs/changelog` page. You MUST ensure this gate passes and updates the changelog accurately so the documentation site reflects the latest version history.
+
+---
+
+## Composing the Deploy Script
+
+```json
+{
+  "scripts": {
+    "deploy": "node -c src/app.js && npm run test:gate && npm run build && YOUR_DEPLOY_COMMAND && npm run release:version && npm run release:changelog"
+  }
+}
+```
+
+Chain with `&&` — any gate failure stops the chain.
+
+## Rollback Protocol
+
+| Severity | Action |
+|----------|--------|
+| White screen | `git revert HEAD && npm run deploy` |
+| Broken translations | `git checkout HEAD~1 -- i18n/*.json && npm run deploy` |
+| API error | `git revert HEAD && npm run deploy` |
+| Cloudflare | `wrangler pages deployment rollback <id>` |
+
+## Post-Release Memory (cm-continuity)
+
+**On SUCCESS:** Update CONTINUITY.md: "Released v[version] — all 9 gates passed"
+**On FAILURE:** Write to `learnings.json`: gate, error, root cause, prevention. Update CONTINUITY.md blockers.
+
+## Template Files (load on-demand with view_file)
+
+| Template | Use When |
+|----------|----------|
+| `templates/deploy.sh` | Setting up the full 9-gate deploy script |
+
+## Integration
+
+| Skill | When |
+|-------|------|
+| `cm-quality-gate` | Gate 2 frontend tests |
+| `cm-secret-shield` | Gate 0 deep scanning |
+| `cm-safe-i18n` | i18n-specific gates |
+| `cm-identity-guard` | Gate 0 verifies deploy identity |
+| `cm-continuity` | Post-release memory |
+| `cm-dockit` | Gate 8 changelog → docs |