@hienlh/ppm 0.9.81 → 0.9.83

package/.opencode/skills/slides/SKILL.md

@@ -1,42 +0,0 @@
----
-name: ckm:slides
-description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
-argument-hint: "[topic] [slide-count]"
-metadata:
-  author: claudekit
-  version: "1.0.0"
----
-
-# Slides
-
-Strategic HTML presentation design with data visualization.
-
-<args>$ARGUMENTS</args>
-
-## When to Use
-
-- Marketing presentations and pitch decks
-- Data-driven slides with Chart.js
-- Strategic slide design with layout patterns
-- Copywriting-optimized presentation content
-
-## Subcommands
-
-| Subcommand | Description | Reference |
-|------------|-------------|-----------|
-| `create` | Create strategic presentation slides | `references/create.md` |
-
-## References (Knowledge Base)
-
-| Topic | File |
-|-------|------|
-| Layout Patterns | `references/layout-patterns.md` |
-| HTML Template | `references/html-template.md` |
-| Copywriting Formulas | `references/copywriting-formulas.md` |
-| Slide Strategies | `references/slide-strategies.md` |
-
-## Routing
-
-1. Parse subcommand from `$ARGUMENTS` (first word)
-2. Load corresponding `references/{subcommand}.md`
-3. Execute with remaining arguments

package/.opencode/skills/slides/references/copywriting-formulas.md

@@ -1,84 +0,0 @@
-# Copywriting Formulas
-
-25 formulas for persuasive slide copy.
-
-## Core Formulas
-
-### PAS (Problem-Agitate-Solution)
-**Use:** Problem slides, pain points
-**Components:** Problem → Agitate → Solution
-**Template:** "[Pain point]? Every [time frame], [consequence]. [Solution] fixes this."
-
-### AIDA (Attention-Interest-Desire-Action)
-**Use:** CTAs, closing slides
-**Components:** Attention → Interest → Desire → Action
-**Template:** "[Bold statement]. [Benefit detail]. [Social proof]. [CTA]."
-
-### FAB (Features-Advantages-Benefits)
-**Use:** Feature slides, product showcases
-**Components:** Feature → Advantage → Benefit
-**Template:** "[Feature] lets you [advantage], so you can [benefit]."
-
-### Cost of Inaction
-**Use:** Agitation slides, urgency
-**Components:** Status Quo → Loss → Time Decay
-**Template:** "Without [solution], you're losing [amount] every [timeframe]."
-
-### Before-After-Bridge
-**Use:** Transformation slides, case studies
-**Components:** Before → After → Bridge
-**Template:** "[Pain point before]. [Desired state after]. [Your solution] is the bridge."
-
-## Formula-to-Slide Mapping
-
-| Slide Type | Primary Formula | Emotion |
-|------------|-----------------|---------|
-| Title/Hook | AIDA, Hook | curiosity |
-| Problem | PAS, Agitate | frustration |
-| Cost/Risk | Cost of Inaction | fear |
-| Solution | FAB, BAB | hope |
-| Features | FAB | confidence |
-| Traction | Proof Stack | trust |
-| Social Proof | Testimonial | trust |
-| Pricing | Value Stack | confidence |
-| CTA | AIDA, Urgency | urgency |
-
-## Headline Patterns
-
-### Power Words
-- "Stop [bad thing]"
-- "Get [desired result] in [timeframe]"
-- "The [adjective] way to [action]"
-- "Why [audience] choose [product]"
-- "[Number] ways to [achieve goal]"
-
-### Contrast Patterns
-- "[Old way] is dead. Meet [new way]."
-- "Don't [bad action]. Instead, [good action]."
-- "From [pain point] to [benefit]."
-
-### Social Proof Patterns
-- "[Number]+ [users/companies] trust [product]"
-- "Join [notable company] and [notable company]"
-- "As seen in [publication]"
-
-## Search Commands
-
-```bash
-# Find formula for slide type
-python .opencode/skills/design-system/scripts/search-slides.py "problem agitation" -d copy
-
-# Get emotion-appropriate formula
-python .opencode/skills/design-system/scripts/search-slides.py "urgency cta" -d copy
-```
-
-## Quick Reference
-
-| Need | Use Formula |
-|------|------------|
-| Create urgency | Cost of Inaction, Scarcity |
-| Build trust | Social Proof, Testimonial |
-| Show value | FAB, Value Stack |
-| Drive action | AIDA, CTA |
-| Tell story | BAB, Story Arc |
-| Present data | Proof Stack |

package/.opencode/skills/slides/references/create.md

@@ -1,4 +0,0 @@
-Invoke `slides` skill to create persuasive HTML slides using design tokens, Chart.js, and the slide knowledge database.
-
-## Task
-<task>$ARGUMENTS</task>

package/.opencode/skills/slides/references/html-template.md

@@ -1,295 +0,0 @@
-# HTML Slide Template
-
-Complete HTML structure with navigation, tokens, and Chart.js integration.
-
-## Base Structure
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Presentation Title</title>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
-    <style>
-        /* Paste embed-tokens.cjs output here */
-        :root {
-            --color-primary: #FF6B6B;
-            --color-background: #0D0D0D;
-            /* ... more tokens */
-        }
-
-        /* Base slide styles */
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
-            background: var(--color-background);
-            color: #fff;
-            font-family: var(--typography-font-body, 'Inter', sans-serif);
-            overflow: hidden;
-        }
-
-        /* 16:9 Aspect Ratio Container (desktop) */
-        .slide-deck {
-            position: relative;
-            width: 100vw;
-            height: 100vh;
-            overflow: hidden;
-        }
-
-        @media (min-width: 769px) {
-            .slide-deck {
-                /* Lock to 16:9 — letterbox if viewport ratio differs */
-                max-width: calc(100vh * 16 / 9);
-                max-height: calc(100vw * 9 / 16);
-                margin: auto;
-                position: absolute;
-                inset: 0;
-            }
-        }
-
-        .slide {
-            position: absolute;
-            width: 100%; height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            padding: 60px;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.4s;
-            background: var(--color-background);
-            overflow: hidden; /* Prevent content overflow */
-        }
-
-        .slide.active { opacity: 1; visibility: visible; }
-
-        /* Slide inner wrapper — constrains content within safe area */
-        .slide-content {
-            width: 100%;
-            max-width: 100%;
-            max-height: 100%;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            gap: 16px;
-        }
-
-        /* Typography */
-        h1, h2 { font-family: var(--typography-font-heading, 'Space Grotesk', sans-serif); }
-        .slide-title {
-            font-size: clamp(32px, 6vw, 80px);
-            background: var(--primitive-gradient-primary, linear-gradient(135deg, #FF6B6B, #FF8E53));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            line-height: 1.1;
-        }
-
-        /* ===== RESPONSIVE BREAKPOINTS ===== */
-
-        /* Tablet (portrait) */
-        @media (max-width: 768px) {
-            .slide { padding: 32px 24px; }
-            .slide-title { font-size: clamp(28px, 5vw, 48px); }
-            h2 { font-size: clamp(20px, 4vw, 32px); }
-            p, li { font-size: clamp(14px, 2.5vw, 18px); }
-        }
-
-        /* Mobile */
-        @media (max-width: 480px) {
-            .slide { padding: 24px 16px; }
-            .slide-title { font-size: clamp(22px, 6vw, 36px); }
-            h2 { font-size: clamp(18px, 4.5vw, 28px); }
-            p, li { font-size: clamp(12px, 3vw, 16px); }
-            .nav-controls { bottom: 16px; gap: 12px; }
-            .nav-btn { width: 32px; height: 32px; font-size: 14px; }
-        }
-
-        /* Navigation */
-        .progress-bar {
-            position: fixed;
-            top: 0; left: 0;
-            height: 3px;
-            background: var(--color-primary);
-            transition: width 0.3s;
-            z-index: 1000;
-        }
-        .nav-controls {
-            position: fixed;
-            bottom: 30px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            align-items: center;
-            gap: 20px;
-            z-index: 1000;
-        }
-        .nav-btn {
-            background: rgba(255,255,255,0.1);
-            border: none;
-            color: #fff;
-            width: 40px; height: 40px;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 18px;
-        }
-        .nav-btn:hover { background: rgba(255,255,255,0.2); }
-        .slide-counter { color: rgba(255,255,255,0.6); font-size: 14px; }
-    </style>
-</head>
-<body>
-    <!-- Progress Bar -->
-    <div class="progress-bar" id="progressBar"></div>
-
-    <!-- Slide Deck Container (16:9 on desktop) -->
-    <div class="slide-deck">
-
-    <!-- Slides -->
-    <div class="slide active">
-        <div class="slide-content">
-            <h1 class="slide-title">Title Slide</h1>
-            <p>Subtitle or tagline</p>
-        </div>
-    </div>
-
-    <!-- More slides... (always wrap content in .slide-content) -->
-
-    </div><!-- /.slide-deck -->
-
-    <!-- Navigation -->
-    <div class="nav-controls">
-        <button class="nav-btn" onclick="prevSlide()">←</button>
-        <span class="slide-counter"><span id="current">1</span> / <span id="total">9</span></span>
-        <button class="nav-btn" onclick="nextSlide()">→</button>
-    </div>
-
-    <script>
-        let current = 1;
-        const total = document.querySelectorAll('.slide').length;
-        document.getElementById('total').textContent = total;
-
-        function showSlide(n) {
-            if (n < 1) n = 1;
-            if (n > total) n = total;
-            current = n;
-            document.querySelectorAll('.slide').forEach((s, i) => {
-                s.classList.toggle('active', i === n - 1);
-            });
-            document.getElementById('current').textContent = n;
-            document.getElementById('progressBar').style.width = (n / total * 100) + '%';
-        }
-
-        function nextSlide() { showSlide(current + 1); }
-        function prevSlide() { showSlide(current - 1); }
-
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); nextSlide(); }
-            if (e.key === 'ArrowLeft') { e.preventDefault(); prevSlide(); }
-        });
-
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.nav-controls')) nextSlide();
-        });
-
-        showSlide(1);
-    </script>
-</body>
-</html>
-```
-
-## Chart.js Integration
-
-```html
-<div class="chart-container" style="width: min(80%, 600px); height: clamp(200px, 40vh, 350px);">
-    <canvas id="revenueChart"></canvas>
-</div>
-
-<script>
-new Chart(document.getElementById('revenueChart'), {
-    type: 'line', // or 'bar', 'doughnut', 'radar'
-    data: {
-        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
-        datasets: [{
-            label: 'MRR ($K)',
-            data: [5, 12, 28, 45],
-            borderColor: '#FF6B6B',
-            backgroundColor: 'rgba(255, 107, 107, 0.1)',
-            borderWidth: 3,
-            fill: true,
-            tension: 0.4
-        }]
-    },
-    options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: { legend: { display: false } },
-        scales: {
-            x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } },
-            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#B8B8D0' } }
-        }
-    }
-});
-</script>
-```
-
-## Animation Classes
-
-```css
-/* Fade Up */
-.animate-fade-up {
-    animation: fadeUp 0.6s ease-out forwards;
-    opacity: 0;
-}
-@keyframes fadeUp {
-    from { opacity: 0; transform: translateY(30px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* Count Animation */
-.animate-count { animation: countUp 1s ease-out forwards; }
-
-/* Scale */
-.animate-scale {
-    animation: scaleIn 0.5s ease-out forwards;
-}
-@keyframes scaleIn {
-    from { opacity: 0; transform: scale(0.9); }
-    to { opacity: 1; transform: scale(1); }
-}
-
-/* Stagger Children */
-.animate-stagger > * {
-    opacity: 0;
-    animation: fadeUp 0.5s ease-out forwards;
-}
-.animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
-.animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
-.animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
-.animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
-```
-
-## Background Images
-
-```html
-<div class="slide slide-with-bg" style="background-image: url('https://images.pexels.com/...')">
-    <div class="overlay" style="background: linear-gradient(135deg, rgba(13,13,13,0.9), rgba(13,13,13,0.7))"></div>
-    <div class="content" style="position: relative; z-index: 1;">
-        <!-- Slide content -->
-    </div>
-</div>
-```
-
-## CSS Variables Reference
-
-| Variable | Usage |
-|----------|-------|
-| `--color-primary` | Brand primary (CTA, highlights) |
-| `--color-background` | Slide background |
-| `--color-secondary` | Secondary elements |
-| `--primitive-gradient-primary` | Title gradients |
-| `--typography-font-heading` | Headlines |
-| `--typography-font-body` | Body text |

package/.opencode/skills/slides/references/layout-patterns.md

@@ -1,137 +0,0 @@
-# Layout Patterns
-
-25 slide layouts with CSS structures and animation classes.
-
-## Layout Selection by Use Case
-
-| Layout | Use Case | Animation |
-|--------|----------|-----------|
-| Title Slide | Opening/first impression | `animate-fade-up` |
-| Problem Statement | Establish pain point | `animate-stagger` |
-| Solution Overview | Introduce solution | `animate-scale` |
-| Feature Grid | Show capabilities (3-6 cards) | `animate-stagger` |
-| Metrics Dashboard | Display KPIs (3-4 metrics) | `animate-stagger-scale` |
-| Comparison Table | Compare options | `animate-fade-up` |
-| Timeline Flow | Show progression | `animate-stagger` |
-| Team Grid | Introduce people | `animate-stagger` |
-| Quote Testimonial | Customer endorsement | `animate-fade-up` |
-| Two Column Split | Compare/contrast | `animate-fade-up` |
-| Big Number Hero | Single powerful metric | `animate-count` |
-| Product Screenshot | Show product UI | `animate-scale` |
-| Pricing Cards | Present tiers | `animate-stagger` |
-| CTA Closing | Drive action | `animate-pulse` |
-
-## CSS Structures
-
-### Title Slide
-```css
-.slide-title {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-```
-
-### Two Column Split
-```css
-.slide-split {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 48px;
-    align-items: center;
-}
-@media (max-width: 768px) {
-    .slide-split { grid-template-columns: 1fr; gap: 24px; }
-}
-```
-
-### Feature Grid (3 columns)
-```css
-.slide-features {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 24px;
-}
-@media (max-width: 768px) {
-    .slide-features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
-}
-@media (max-width: 480px) {
-    .slide-features { grid-template-columns: 1fr; }
-}
-```
-
-### Metrics Dashboard (4 columns)
-```css
-.slide-metrics {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
-}
-@media (max-width: 768px) {
-    .slide-metrics { grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 480px) {
-    .slide-metrics { grid-template-columns: 1fr; }
-}
-```
-
-## Component Variants
-
-### Card Styles
-| Style | CSS Class | Use For |
-|-------|-----------|---------|
-| Icon Left | `.card-icon-left` | Features with icons |
-| Accent Bar | `.card-accent-bar` | Highlighted features |
-| Metric Card | `.card-metric` | Numbers/stats |
-| Avatar Card | `.card-avatar` | Team members |
-| Pricing Card | `.card-pricing` | Price tiers |
-
-### Metric Styles
-| Style | Effect |
-|-------|--------|
-| `gradient-number` | Gradient text on numbers |
-| `oversized` | Extra large (120px+) |
-| `sparkline` | Small inline chart |
-| `funnel-numbers` | Conversion stages |
-
-## Visual Treatments
-
-| Treatment | When to Use |
-|-----------|-------------|
-| `gradient-glow` | Title slides, CTAs |
-| `subtle-border` | Problem statements |
-| `icon-top` | Feature grids |
-| `screenshot-shadow` | Product screenshots |
-| `popular-highlight` | Pricing (scale 1.05) |
-| `bg-overlay` | Background images |
-| `contrast-pair` | Before/after |
-| `logo-grayscale` | Client logos |
-
-## Search Commands
-
-```bash
-# Find layout for specific use
-python .opencode/skills/design-system/scripts/search-slides.py "metrics dashboard" -d layout
-
-# Contextual recommendation
-python .opencode/skills/design-system/scripts/search-slides.py "traction slide" \
-  --context --position 4 --total 10
-```
-
-## Layout Decision Flow
-
-```
-1. What's the slide goal?
-   └─> Search layout-logic.csv
-
-2. What emotion should it trigger?
-   └─> Search color-logic.csv
-
-3. What's the content type?
-   └─> Search typography.csv
-
-4. Should it break pattern?
-   └─> Check position (1/3, 2/3) → Use full-bleed
-```

package/.opencode/skills/slides/references/slide-strategies.md

@@ -1,94 +0,0 @@
-# Slide Strategies
-
-15 proven deck structures with emotion arcs.
-
-## Strategy Selection
-
-| Strategy | Slides | Goal | Audience |
-|----------|--------|------|----------|
-| YC Seed Deck | 10-12 | Raise seed funding | VCs |
-| Guy Kawasaki | 10 | Pitch in 20 min | Investors |
-| Series A | 12-15 | Raise Series A | Growth VCs |
-| Product Demo | 5-8 | Demonstrate value | Prospects |
-| Sales Pitch | 7-10 | Close deal | Qualified leads |
-| Nancy Duarte Sparkline | Varies | Transform perspective | Any |
-| Problem-Solution-Benefit | 3-5 | Quick persuasion | Time-pressed |
-| QBR | 10-15 | Update stakeholders | Leadership |
-| Team All-Hands | 8-12 | Align team | Employees |
-| Conference Talk | 15-25 | Thought leadership | Attendees |
-| Workshop | 20-40 | Teach skills | Learners |
-| Case Study | 8-12 | Prove value | Prospects |
-| Competitive Analysis | 6-10 | Strategic decisions | Internal |
-| Board Meeting | 15-20 | Update board | Directors |
-| Webinar | 20-30 | Generate leads | Registrants |
-
-## Common Structures
-
-### YC Seed Deck (10 slides)
-1. Title/Hook
-2. Problem
-3. Solution
-4. Traction
-5. Market
-6. Product
-7. Business Model
-8. Team
-9. Financials
-10. The Ask
-
-**Emotion arc:** curiosity→frustration→hope→confidence→trust→urgency
-
-### Sales Pitch (9 slides)
-1. Personalized Hook
-2. Their Problem
-3. Cost of Inaction
-4. Your Solution
-5. Proof/Case Studies
-6. Differentiators
-7. Pricing/ROI
-8. Objection Handling
-9. CTA + Next Steps
-
-**Emotion arc:** connection→frustration→fear→hope→trust→confidence→urgency
-
-### Product Demo (6 slides)
-1. Hook/Problem
-2. Solution Overview
-3. Live Demo/Screenshots
-4. Key Features
-5. Benefits/Pricing
-6. CTA
-
-**Emotion arc:** curiosity→frustration→hope→confidence→urgency
-
-## Duarte Sparkline Pattern
-
-Alternate between "What Is" (current pain) and "What Could Be" (better future):
-
-```
-What Is → What Could Be → What Is → What Could Be → New Bliss
-(pain)     (hope)         (pain)     (hope)         (resolution)
-```
-
-Pattern breaks at 1/3 and 2/3 positions create engagement peaks.
-
-## Search Commands
-
-```bash
-# Find strategy by goal
-python .opencode/skills/design-system/scripts/search-slides.py "investor pitch" -d strategy
-
-# Get emotion arc
-python .opencode/skills/design-system/scripts/search-slides.py "series a funding" -d strategy --json
-```
-
-## Matching Strategy to Context
-
-| Context | Recommended Strategy |
-|---------|---------------------|
-| Raising money | YC Seed, Series A, Guy Kawasaki |
-| Selling product | Sales Pitch, Product Demo |
-| Internal update | QBR, All-Hands, Board Meeting |
-| Public speaking | Conference Talk, Workshop |
-| Proving value | Case Study, Competitive Analysis |
-| Lead generation | Webinar |