codymaster 5.2.0 → 7.0.1

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

@@ -1,362 +0,0 @@
-# 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

@@ -1,223 +0,0 @@
-# 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