slidev-workshop-design

name	slidev-workshop-design
description	Design and edit Slidev workshop decks for business analyst audiences: typography, layout, colors, speaker notes, exercise slides, timers, and PDF-friendly styling. Use when creating or polishing slides.md, workshop decks, facilitator materials, or visual consistency for BA training sessions.

Slidev Workshop Design — BA / SDD sessions

Guidance for this repo's SDD-for-BAs workshop deck and similar facilitator-led sessions.

Audience

• Business analysts, product owners, hybrid BA/PM roles
• Mixed technical comfort — avoid dev jargon unless explaining handoff
• Expect exercises, not lecture-only

Visual system (this project)

Token	Value	Use
Primary	#1e5f74	Headings, tags, theme
Accent	#e9a319	Timers, callouts
Surface	#f8fafc	Card backgrounds
Font sans	Inter	Body
Font mono	JetBrains Mono	IDs, prompts

Custom classes in style.css:

• .sdd-tag — pill labels (framework names, warnings)
• .sdd-card — bordered content blocks
• .sdd-timer — exercise duration badges
• .sdd-grid-3 — three-column comparisons

Slide density rules

• Max ~6 bullets per slide; prefer tables or cards for comparisons
• One idea per slide in Part 1–3; exercises may have instruction + timer on same slide
• Use layout: two-cols for compare/contrast (frameworks, weak vs strong prompts)
• Use layout: section for part dividers
• Use layout: cover only for open + close; keep background in same frontmatter block

Speaker notes

• Format: HTML comment after slide content (<!-- ... -->)
• Include: facilitation cue, question to room, timing hint, link to workshop/ file
• Do not put YAML (zoom:) after --> — breaks Slidev segment parsing

Exercise slides checklist

Each exercise intro slide should have:

1. Title — Exercise N + verb (Rewrite, Customize, Expand)
2. Timer — <div class="sdd-timer">NN minutes</div>
3. Task — numbered steps, max 4
4. Material path — `workshop/...`
5. Debrief slide — separate slide with facilitator prompts

Diagrams

• Prefer Mermaid for flows (setup/mermaid.ts uses base theme matching brand colors)
• Keep diagrams ≤ 8 nodes for readability
• For framework compare, tables beat diagrams

Transitions & motion

• Global: transition: slide-left in headmatter
• Avoid heavy animation on dense table slides (PDF export captures final state)

PDF export compatibility

• Read .cursor/skills/slidev-pdf-export/SKILL.md before changing style.css print behavior
• Scope overflow rules to html:not(.print)
• Test export after adding dense slides or custom CSS

Content tone

• Lead with business outcomes and decision quality
• Frame Spec Kit / OpenSpec / BMAD as packaging options, not religions
• Call out anti-patterns (over-spec, pseudo-architecture) on equal footing with benefits

File conventions

File	Role
slides.md	Presenter deck
workshop/README.md	Facilitator run sheet
workshop/walkthrough-script.md	Part 4 reference-project tour, facilitator-only
workshop/participant-followalong.md	Tab-order guide for the room
workshop/pair-activity-proposal.md	Part 5 worksheet
workshop/reflection-prompts.md	Checkpoint prompts
workshop/legacy/	Previous (vague-pause) workshop, kept for reference

When adding slides, update timing in workshop/README.md if block durations change.

Current deck shape (post-2026-05 rewrite)

• 7 parts: Why · Discipline · Frameworks · Live walkthrough · BA superpowers · Limits · Wrap
• ~62 slides
• Centerpiece is Part 4 — a 40-minute guided tour of a real SDD project (Weather Explorer, OpenSpec-based)
• The "exercise" portion is the walkthrough plus a 15-minute pair activity drafting one proposal.md
• Reference project lives at c:/Projects/dou/2026-dou-day-workshop-project/

Adding a new section

1. Section divider slide (layout: section)
2. 3–6 content slides (.sdd-card grids + tables preferred over walls of text)
3. If hands-on: timer (.sdd-timer) + facilitation cues in HTML comments
4. Update workshop/README.md 120-minute run sheet
5. If touring a new artifact: add a stop to workshop/walkthrough-script.md