@troshab/slidev-theme-troshab 0.1.0

package/README.md

@@ -0,0 +1,168 @@
+# slidev-theme-troshab
+
+[![npm version](https://img.shields.io/npm/v/%40troshab%2Fslidev-theme-troshab)](https://www.npmjs.com/package/@troshab/slidev-theme-troshab)
+[![license](https://img.shields.io/badge/license-PolyForm%20Noncommercial-orange)](LICENSE)
+[![slidev](https://img.shields.io/badge/slidev-%3E%3D0.50-blue)](https://sli.dev)
+
+A minimal, universal [Slidev](https://sli.dev) theme built around one flexible layout and a library of 36 ready-to-use components. Supports both light (Alucard) and dark (Dracula) color schemes.
+
+## Install
+
+```md
+---
+theme: troshab
+---
+```
+
+## What makes it different
+
+**Single universal layout** - `layout: slide` with three modes covers every slide type. No need to memorize a dozen layout names.
+
+**Component library** - 10 primitives and 26 widgets drop into any slide as Vue components. Everything from KPI metrics and pricing tables to iMessage-style conversations and device mockups.
+
+**Design system** - 3-layer Dracula/Alucard palette (11 color families × 11 shades), IBM Plex Sans/Mono typography, and a motion system based on IBM Carbon. All tokens are CSS variables - components never hardcode colors.
+
+**v-click auto-registration** - interactive components (AnimatedCounter, Countdown, ImageCompare, Stepper, Conversation, StyledText spoilers) register their own click slots. No `clicks:` frontmatter, no `<v-click>` wrappers needed.
+
+**Accessibility** - WCAG AA contrast (target AAA), BDA dyslexia-friendly spacing (word-spacing 0.08em, letter-spacing 0.02em), keyboard focus styles, 5% safe-zone padding.
+
+**5 built-in audits** - contrast, Shiki tokens, chart palette, typography, integrity. All must exit 0 before release.
+
+---
+
+## Layout
+
+All slides use `layout: slide` with `mode: fullscreen | split | columns` (default: `columns`).
+
+```md
+---
+layout: slide
+mode: fullscreen
+---
+
+::bg::
+<Background :gradient="'section'" />
+
+::default::
+# Section Title
+```
+
+```md
+---
+layout: slide
+mode: split
+split: [5, 7]
+---
+
+::left-bg::
+<Background src="/photo.jpg" />
+
+::right::
+# Content here
+```
+
+```md
+---
+layout: slide
+cols: 2
+---
+
+# Title
+
+::col1::
+Left content
+
+::col2::
+Right content
+```
+
+---
+
+## Components
+
+### Primitives
+
+| Component | Description |
+|-----------|-------------|
+| `Background` | Bg-slot wrapper: color, gradient, image, overlay |
+| `StyledText` | Universal text: heading/block/inline, color, spoiler v-click |
+| `Image` | Content image with caption, border, sizing |
+| `Icon` | Phosphor icon with size and color |
+| `Metric` | KPI display with count-up animation |
+| `PersonCard` | Speaker/member card with avatar |
+| `Iframe` | External content embed |
+| `ColorSwatch` | Theme color display with resolved value |
+| `StyledList` | Themed list markers: check / arrow / star / number |
+| `CodeHighlight` | Syntax-highlighted code block (Shiki) |
+
+### Widgets
+
+| Component | Description |
+|-----------|-------------|
+| `Stepper` | Steps / timeline / progress with dots, numbers, or arrows |
+| `Callout` | Admonition: info, tip, warning, danger, note |
+| `Card` / `CardGrid` | Feature cards in responsive grid |
+| `QRCode` | Theme-aware SVG QR code |
+| `Tags` | Tag pills |
+| `Progress` | Presentation progress bar |
+| `SpeechBubble` | Speech and thought bubbles |
+| `Conversation` | iMessage-style chat with v-click reveal |
+| `DeviceMockup` | Device frames: iPhone, MacBook, browser, tablet |
+| `Countdown` | Animated timer with v-click trigger |
+| `AnimatedCounter` | Count-up number animation |
+| `Typewriter` | Text typing animation |
+| `Confetti` | Celebration particles (bg slot) |
+| `ImageCompare` | Before/after image slider with v-click |
+| `CodeDiff` | Code comparison: split or unified view |
+| `Testimonial` | Customer quote card with rating |
+| `QuoteBlock` | Large centered quote with decorative mark |
+| `Funnel` | Conversion funnel |
+| `Pyramid` | Hierarchical levels |
+| `PricingTable` | Pricing tier cards |
+| `MatrixGrid` | 2×2 quadrant grid |
+| `SwotGrid` | SWOT analysis (named MatrixGrid wrapper) |
+| `CaseStudy` | Multi-section case study card |
+| `Definition` | Term definition card |
+| `MermaidChart` | Mermaid diagram wrapper with auto-theming |
+
+---
+
+## Addons
+
+- **Asciinema** - terminal recordings: `<Asciinema src="/casts/demo.cast" autoplay />`
+- **FancyArrow** - hand-drawn arrows: `<FancyArrow x1="100" y1="100" x2="300" y2="200" />`
+- **PreloadImages** - automatic image preloading (configurable look-ahead)
+
+---
+
+## Development
+
+```bash
+npm run dev          # both themes in parallel (dark :30303, light :31313)
+npm run dev:dark     # dark only
+npm run dev:light    # light only
+```
+
+### Audits
+
+```bash
+npm run audit:all       # run all 5 audits
+npm run audit:contrast  # WCAG contrast ratios
+npm run audit:shiki     # Shiki token contrast + hue distinguishability
+npm run audit:charts    # chart palette grayscale spread
+npm run audit:typography
+npm run audit:integrity
+```
+
+### Visual export
+
+```bash
+npx slidev export example_white.md --format png --output ./slides-export/white
+npx slidev export example_dark.md --format png --output ./slides-export/black
+```
+
+---
+
+## License
+
+[PolyForm Noncommercial 1.0.0](LICENSE) - free for non-commercial use.

package/SKILL.md

@@ -0,0 +1,414 @@
+---
+name: slidev-troshab-design
+description: "Intelligent slide design advisor for slidev-theme-troshab. Classifies content and selects optimal layouts, components, and visual elements. Prevents text-heavy slides by recommending Metric, Stepper, MermaidChart, split layouts, and other visual components. Triggers on: create slides, design slide, improve slide, make presentation, slide layout."
+arg_description: "Slide content or topic to design (optional)"
+---
+
+# Step 1: Analyze Input
+
+For full component API (props, slots, examples), see `@components/{Name}.md` files. For layout props, see `@layouts/slide.md`.
+
+Determine the task type from user input:
+
+- **New slides** (user provides content, topic, or data to turn into slides) — go to Step 2.
+- **Improve existing slides** (user provides existing slide markdown or asks to review) — Read the existing slides, go to Step 6 to scan for anti-patterns, then go to Step 2.
+- **No content provided** — AskUserQuestion: "What content or topic should the slides cover?" Options: "Paste text/data", "Describe the topic", "Share existing slides to improve". Then go to Step 2.
+
+# Step 2: Classify Content
+
+For each slide's content, classify into one of 5 types. When content matches multiple types, pick the type with the most matching detection keywords.
+
+## 2a. Type 1: Quantitative
+
+**Detection:** numbers, percentages, KPIs, stats, metrics, "grew by", "increased to", currency values, comparisons with numbers.
+
+**Layout:** `columns` with `cols: 2-4` for multiple metrics. `fullscreen` for a single hero number.
+
+**Components:**
+- Single KPI: `<Metric :value="10000" label="Users" color="info" animated separator="," gradient />` in fullscreen
+- Multiple KPIs: 2-4 `<Metric>` in columns layout (one per column)
+- Trends over time: `<MermaidChart type="xychart">` (max 8 x-axis labels, no `title` directive)
+- Proportions: `<MermaidChart type="pie">` (max 5 segments)
+- Funnel data: `<Funnel :stages="[{label, value}]" />`
+- Progress toward goal: `<Progress :value="75" showPercentage />`
+
+## 2b. Type 2: Process / Structure
+
+**Detection:** steps, flow, sequence, "first...then...finally", hierarchy, layers, timeline, milestones, workflow, pipeline.
+
+**Layout:** `columns` for horizontal flows. `columns` with vertical Stepper for timelines. `split` for process + explanation.
+
+**Components:**
+- Sequential steps (3-8): `<Stepper :items="[...]" variant="numbers" mode="clicks" />` (reveals one by one)
+- Timeline/milestones: `<Stepper :items="[{label, date, description}]" variant="dots" direction="vertical" />`
+- Complex flow with branches: `<MermaidChart type="flowchart" direction="LR">` (max 8 nodes, 2-8 char labels)
+- API/interaction flow: `<MermaidChart type="sequence">` (max 4 participants, max 8 messages)
+- Hierarchy/layers: `<Pyramid :levels="[{label, description}]" />`
+
+## 2c. Type 3: Comparative
+
+**Detection:** before/after, pros/cons, options, alternatives, vs, differences, old/new, tradeoffs, pricing tiers.
+
+**Layout:** `split` for two-sided comparisons. `columns` with `cols: 2` for side-by-side. `columns` for grids.
+
+**Components:**
+- Code before/after: `<CodeDiff mode="split">` with two `<pre>` blocks
+- Image before/after: `<ImageCompare before="/a.png" after="/b.png" />`
+- Pros/cons: `split` mode with `<StyledList marker="check" color="success">` left and `<StyledList marker="arrow" color="danger">` right
+- SWOT analysis: `<SwotGrid :strengths="[...]" :weaknesses="[...]" :opportunities="[...]" :threats="[...]" />`
+- Impact/effort or 2x2 matrix: `<MatrixGrid :cells="[{title, items}]" />`
+- Pricing tiers: `<PricingTable :plans="[{name, price, features, highlighted}]" />`
+
+## 2d. Type 4: Narrative / People
+
+**Detection:** quotes, testimonials, stories, team members, speakers, conversations, Q&A, dialogue, case studies, experiences.
+
+**Layout:** `fullscreen` for quotes and hero testimonials. `columns` for team grids and case studies.
+
+**Components:**
+- Large quote: `<QuoteBlock author="Name" source="Context">Quote text</QuoteBlock>` in fullscreen
+- Customer testimonial: `<Testimonial quote="..." author="Name" role="Title" :rating="5" variant="featured" />`
+- Team grid: `<PersonCard name="Name" role="Role" avatar="/photo.jpg" />` in columns with `cols: 3-4`
+- Speaker intro: `<PersonCard name="Name" role="Role" avatar="/photo.jpg" horizontal />` in single column
+- Dialog/chat: `<Conversation :messages="[{from: 'Alice', text: '...'}]" mode="clicks" />`
+- Case study: `<CaseStudy :sections="[{title, content, color}]" />`
+
+## 2e. Type 5: Conceptual
+
+**Detection:** definitions, key ideas, statements, principles, announcements, focus points, terms, vocabulary, big reveals.
+
+**Layout:** `fullscreen` for impact statements and definitions. `columns` for explanations with examples.
+
+**Components:**
+- Term definition: `<Definition term="API" pronunciation="/ei.pi.ai/" partOfSpeech="noun">Description</Definition>`
+- Key statement: `<StyledText tag="h1" color="primary" align="center">Big Idea</StyledText>` in fullscreen
+- Important note: `<Callout type="info" title="Key Insight">Text</Callout>`
+- Spoiler/reveal: `<StyledText inline spoiler>Hidden answer</StyledText>` (auto v-click)
+- Announcement with flair: fullscreen with `<Background :gradient="'accent'" />` + `<StyledText tag="h1">`
+
+Go to Step 3.
+
+# Step 3: Select Layout
+
+Apply this decision tree for each slide:
+
+```
+Is it a single hero element (quote, KPI, statement, full-screen media)?
+  YES -> fullscreen
+
+Is it a two-sided comparison (image+text, before/after, code+explanation)?
+  YES -> split
+
+Everything else -> columns (default)
+  - 1 column: text + list, single component, definition
+  - 2 columns: comparison, feature pairs, code + output
+  - 3 columns: triple feature, team row, KPI trio
+  - 4 columns: dashboard, icon grid (rare - content gets cramped)
+```
+
+Go to Step 4.
+
+# Step 4: Select Components
+
+Using the classified type (Step 2) and selected layout (Step 3), pick components from the matching type's component list. Use the first listed component for each content pattern (default); use alternatives when content does not fit the primary recommendation.
+
+## 4a. Content Limits
+
+| Context | Limit |
+|---|---|
+| Full-width code block | 12-15 lines, 80 chars |
+| Two-column code block | 8-10 lines, 40 chars |
+| Mermaid flowchart nodes | 6-8 max, 2-8 char labels |
+| Mermaid xychart x-axis labels | 6-8 max, 3 chars each |
+| Mermaid sequence participants | 4 max, 2-6 chars each |
+| Mermaid pie segments | 5 max, 12 chars each |
+| Stepper items | 3-8 items |
+| Columns | 1-4 (4 gets cramped) |
+| Bullet points before using StyledList | 3+ items |
+
+## 4b. Semantic Colors
+
+Available everywhere components accept a `color` prop: `primary`, `secondary`, `tertiary`, `success`, `warning`, `danger`, `info`, `accent`, `soft`, `muted`.
+
+Gradient presets for `<Background>`: `"accent"` (colorful), `"subtle"` (neutral), `"section"` (section divider).
+
+## 4c. Component Quick Reference
+
+**Primitives** (full API in `@components/{Name}.md`):
+
+| Component | Use When |
+|---|---|
+| `Background` | Any bg slot: solid color, gradient, image, video |
+| `StyledText` | Colored/styled heading or text, spoiler reveals |
+| `Image` | Content image with caption, border, rounding |
+| `Icon` | Inline icon (Phosphor set, `ph-*` names) |
+| `Metric` | Single KPI / number display, optional count-up |
+| `PersonCard` | Person with avatar, name, role |
+| `Iframe` | Embed external page or interactive content |
+| `ColorSwatch` | Display theme color with resolved value |
+| `StyledList` | Styled bullet/number/check/arrow list markers |
+| `CodeHighlight` | Syntax-highlighted code with line numbers |
+
+**Widgets** (full API in `@components/{Name}.md`):
+
+| Component | Use When |
+|---|---|
+| `Stepper` | Steps, timeline, progress (dots/numbers/arrows) |
+| `Callout` | Admonition: info, tip, warning, danger, note |
+| `Card` / `CardGrid` | Feature cards in a grid |
+| `QRCode` | Link as scannable QR code |
+| `Tags` | Tag pills / labels |
+| `Progress` | Progress bar toward goal |
+| `SpeechBubble` | Speech or thought bubble |
+| `Conversation` | iMessage-style multi-message chat |
+| `DeviceMockup` | Screenshot in device frame (iPhone, MacBook, browser, tablet) |
+| `Countdown` | Animated countdown timer |
+| `AnimatedCounter` | Count-up number animation |
+| `Typewriter` | Typing animation effect |
+| `Confetti` | Celebration particles (bg slot) |
+| `ImageCompare` | Before/after image slider |
+| `CodeDiff` | Side-by-side or unified code diff |
+| `Testimonial` | Customer quote card with rating |
+| `QuoteBlock` | Large centered quote with author |
+| `Funnel` | Conversion funnel visualization |
+| `Pyramid` | Hierarchical level diagram |
+| `PricingTable` | Pricing tier comparison cards |
+| `MatrixGrid` | 2x2 quadrant grid |
+| `SwotGrid` | SWOT analysis (wraps MatrixGrid) |
+| `CaseStudy` | Multi-section case study with colored borders |
+| `Definition` | Term + pronunciation + definition |
+| `MermaidChart` | Wrapper for any Mermaid diagram type |
+
+Go to Step 5.
+
+# Step 5: Apply Deck Rules
+
+When creating or reviewing 3+ slides, apply these deck-level rules. For single slides, go to Step 6.
+
+**Repetition Limits:**
+- Max 2 consecutive slides with the same mode (fullscreen/split/columns)
+- Max 2 consecutive slides with the same primary component
+- If 3+ slides in a row are columns mode, vary `cols` count or introduce a split/fullscreen break
+
+**Section Rhythm:**
+- Insert section dividers (fullscreen + `<Background :gradient="'section'" />`) every 5-8 content slides
+- Alternate density: text-heavy slide -> visual/component slide -> text-heavy slide
+- End each section with a visual slide (chart, quote, or KPI) not a bullet list
+
+**Color Rotation:**
+Rotate semantic colors across consecutive slides: `primary` -> `success` -> `info` -> `accent` -> `warning`. Don't use the same color on 3+ consecutive slides.
+
+**Transition Variety:**
+- Content slides: `slide-left` (default, set once in first slide frontmatter)
+- Section dividers: `transition: fade` (override per slide)
+
+Go to Step 6.
+
+# Step 6: Check Anti-Patterns
+
+Scan each slide for these anti-patterns. If any are found, apply the fix.
+
+| Anti-Pattern | Fix |
+|---|---|
+| Plain markdown bullets for >3 items | `<StyledList marker="check/arrow/number">` |
+| Numbers written as text ("Revenue: $10M") | `<Metric :value="10000000" label="Revenue" prefix="$" animated />` |
+| Process described as bullet list | `<Stepper :items="[...]" mode="clicks" />` |
+| Raw `![](img)` for background | `<Background src="..." />` in `::bg::` slot |
+| Raw `![](img)` for content image | `<Image src="..." caption="..." />` |
+| Same `cols: 2` layout for 5+ slides | Alternate with fullscreen, split, or different col counts |
+| Hardcoded hex colors (`#ff0000`) | Semantic names: `primary`, `success`, `danger`, etc. |
+| Inline `style="..."` on elements | CSS classes or component props |
+| Long code block (>15 lines) | Split across slides or use `highlights` to focus |
+| Mermaid diagram with >8 nodes | Simplify labels, reduce nodes, or split into 2 diagrams |
+| Quote as plain markdown `>` | `<QuoteBlock>` for impact, `<Callout>` for notes |
+| Steps numbered manually (1. 2. 3.) | `<Stepper>` or `<StyledList marker="number">` |
+| Multiple paragraphs of prose | Split into slides, use `split` mode with visual, or extract key points |
+| `<Header>`, `<Subheader>`, `<Text>` | REMOVED. Use `<StyledText tag="h1/h2/p">` |
+| `<Timeline>`, `<Steps>`, `<ProcessFlow>` | REMOVED. Use `<Stepper>` |
+| `class: two-cols` or other CSS variants | REMOVED. Use `cols: 2` prop or `mode: split` |
+
+Go to Step 7.
+
+# Step 7: Output
+
+Output the slide markdown directly. Each slide uses this structure:
+
+```md
+---
+layout: slide
+mode: {fullscreen|split|columns}
+{additional props as needed}
+---
+
+{slot assignments and component markup}
+```
+
+When presenting recommendations before generating markdown, use this format:
+
+    **Slide N: {title}**
+    - Type: {Quantitative|Process|Comparative|Narrative|Conceptual}
+    - Layout: `{mode}` with `{key props}`
+    - Components: `<ComponentName>`, `<ComponentName>`
+    - Rationale: {1 sentence why this layout+components fit the content}
+
+## 7a. Before/After Examples
+
+### KPI Data
+
+**Before (text-heavy):**
+```md
+---
+layout: slide
+---
+
+# Q3 Results
+
+- Monthly active users: 2.4 million
+- Revenue growth: 47%
+- Customer satisfaction: 4.8/5
+- Uptime: 99.97%
+```
+
+**After (visual):**
+```md
+---
+layout: slide
+cols: 4
+---
+
+# Q3 Results
+
+::col1::
+<Metric :value="2400000" label="Active Users" color="primary" animated separator="," />
+
+::col2::
+<Metric value="47%" label="Revenue Growth" color="success" gradient />
+
+::col3::
+<Metric value="4.8/5" label="Satisfaction" color="info" />
+
+::col4::
+<Metric value="99.97%" label="Uptime" color="accent" />
+```
+
+### Process Steps
+
+**Before (bullet list):**
+```md
+---
+layout: slide
+---
+
+# Deployment Pipeline
+
+1. Developer pushes code to main branch
+2. CI runs automated tests
+3. Docker image is built and tagged
+4. Staging deployment and smoke tests
+5. Production rollout with canary release
+```
+
+**After (interactive stepper):**
+```md
+---
+layout: slide
+---
+
+# Deployment Pipeline
+
+<Stepper
+  :items="['Push to main', 'Run CI tests', 'Build Docker', 'Stage + smoke', 'Canary release']"
+  variant="arrows"
+  mode="clicks"
+  color="info"
+/>
+```
+
+### Pros/Cons Comparison
+
+**Before (single column):**
+```md
+---
+layout: slide
+---
+
+# Microservices vs Monolith
+
+**Pros of microservices:**
+- Independent scaling
+- Technology flexibility
+- Team autonomy
+
+**Cons of microservices:**
+- Network complexity
+- Data consistency challenges
+- Operational overhead
+```
+
+**After (split layout):**
+```md
+---
+layout: slide
+mode: split
+---
+
+::left-bg::
+<Background color="success" />
+
+::left::
+## Microservices
+
+<StyledList marker="check" color="success">
+
+- Independent scaling
+- Tech flexibility
+- Team autonomy
+
+</StyledList>
+
+::right-bg::
+<Background color="danger" />
+
+::right::
+## Monolith
+
+<StyledList marker="arrow" color="danger">
+
+- Simpler networking
+- Easier consistency
+- Lower ops overhead
+
+</StyledList>
+```
+
+### Quote with Attribution
+
+**Before (plain markdown):**
+```md
+---
+layout: slide
+---
+
+# Inspiration
+
+> "The best way to predict the future is to invent it."
+>
+> -- Alan Kay, 1971
+```
+
+**After (fullscreen quote):**
+```md
+---
+layout: slide
+mode: fullscreen
+transition: fade
+---
+
+::bg::
+<Background :gradient="'subtle'" />
+
+::default::
+<QuoteBlock author="Alan Kay" source="1971">
+The best way to predict the future is to invent it.
+</QuoteBlock>
+```

package/components/AnimatedCounter.vue

@@ -0,0 +1,35 @@
+<!--
+  AnimatedCounter — animated number counting up with easing.
+  Building block for Metric. Also usable standalone for custom animated numbers.
+
+  Implementation: ../components_base/AnimatedCounter.vue
+
+  Integrates with Slidev v-click system via `at` prop.
+  Resets when navigating back past the trigger click.
+  Resets and re-triggers on slide re-enter (slide activation detection).
+
+  Props:
+    value: number             — Target number (required)
+    from: number              — Starting number (default: 0)
+    duration: number          — Animation duration in ms (default: 2000)
+    prefix: string            — Text before number, e.g. "$"
+    suffix: string            — Text after number, e.g. "%"
+    decimals: number          — Decimal places (default: 0)
+    separator: string         — Thousands separator, e.g. ","
+    easing: string            — linear | easeOut | easeInOut (default: easeOut)
+    at: number                — V-click trigger: 0 = on slide enter, N = at click N
+
+  Exposed methods (via ref):
+    animate()     — Trigger animation manually
+    resetToStart() — Reset to `from` value
+
+  Usage:
+    <AnimatedCounter :value="1000" />
+    <AnimatedCounter :value="95" suffix="%" :at="1" />
+    <AnimatedCounter :value="50000" prefix="$" separator="," />
+    <AnimatedCounter :value="3.14" :decimals="2" :duration="2000" />
+-->
+<script>
+import AnimatedCounter from '../components_base/AnimatedCounter.vue'
+export default AnimatedCounter
+</script>