Initial commit

skills/conference-talk-builder/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: conference-talk-builder
+description: Create conference talk outlines and iA Presenter markdown slides using the Story Circle narrative framework. Use when the user wants to structure a tech talk, create presentation slides, or needs help organizing talk ideas into a story-driven format.
+---
+
+# Conference Talk Builder
+
+This skill helps create compelling conference talk outlines and iA Presenter markdown slides using the Story Circle narrative framework.
+
+## Process
+
+Follow these steps in order when building a conference talk:
+
+### 1. Gather Information
+
+Ask the user for:
+
+- Talk title and topic
+- Target audience and their expected knowledge level
+- Main points they want to cover
+- Brain dump of everything they know about the topic
+- Problem they're solving or story they're telling
+- Any constraints (time limit, specific technologies, etc.)
+
+### 2. Read the Story Circle Framework
+
+Load `references/story-circle.md` to understand the eight-step narrative structure.
+
+The framework maps tech talks to:
+
+- Top half: Established practices and order
+- Bottom half: Disruption and experimentation
+
+### 3. Create the Outline
+
+Structure the talk using the eight Story Circle steps:
+
+1. Introduction - Current status quo
+2. Problem Statement - What needs solving
+3. Exploration - Initial attempts
+4. Experimentation - Deep investigation
+5. Solution - The breakthrough
+6. Challenges - Implementation difficulties
+7. Apply Knowledge - Integration into project
+8. Results & Insights - Lessons learned
+
+Map the user's content to these steps. Show this outline to the user and refine based on feedback.
+
+### 4. Generate iA Presenter Slides
+
+Read `references/ia-presenter-syntax.md` for markdown formatting rules.
+
+Create slides that:
+
+- Use `---` to separate slides
+- Add tabs (`⇥`) before content that should be visible on slides
+- Leave speaker notes without tabs (spoken text only)
+- Include comments with `//` for reminders
+- Format code blocks with proper syntax highlighting
+- Keep slides focused on one concept each
+
+Structure the slide deck:
+
+- Title slide
+- Introduction slide with your photo/bio
+- One or more slides per Story Circle step
+- Code examples broken across multiple slides for readability
+- Closing slide with contact info and resources
+
+### 5. Refine and Iterate
+
+After showing the slides:
+
+- Ask if sections need expansion or compression
+- Check if code examples need better formatting
+- Verify the story flow makes sense
+- Adjust based on user feedback
+
+## Key Principles
+
+**Tell a Story**: You don't need to be an expert. Focus on how you approached a problem and solved it.
+
+**Keep It Readable**: Break code across slides. Use syntax highlighting. Test on bad projectors (consider light themes).
+
+**Engage the Audience**: Use humor where appropriate. Ask questions. Make eye contact.
+
+**Make Follow-up Easy**: Include a memorable URL or QR code on the final slide linking to resources.
+
+## Bundled Resources
+
+### References
+
+- `references/story-circle.md` - Eight-step Story Circle framework with examples. Read this first to understand the narrative structure.
+- `references/ia-presenter-syntax.md` - Complete iA Presenter markdown syntax reference. Read this when generating slides.
+
+## Example Workflow
+
+User: "I want to create a talk about migrating from JavaScript to TypeScript"
+
+1. Gather their experience, main points, and target audience
+2. Read `story-circle.md`
+3. Map their content:
+   - Introduction: Current JS codebase
+   - Problem: Type safety issues and bugs
+   - Exploration: Research into TypeScript
+   - Experimentation: Pilot conversion on one module
+   - Solution: Incremental migration strategy
+   - Challenges: Third-party library types
+   - Apply Knowledge: Full codebase migration
+   - Results: 40% reduction in runtime errors
+4. Read `ia-presenter-syntax.md`
+5. Generate markdown slides with proper formatting
+6. Iterate based on feedback

skills/conference-talk-builder/references/ia-presenter-syntax.md

@@ -0,0 +1,269 @@
+# iA Presenter Markdown Syntax
+
+Quick reference for creating slides in iA Presenter.
+
+## CRITICAL: Tabbing Rules
+
+**MUST be tabbed to appear on slides:**
+
+- Regular paragraphs
+- Lists (bullets, numbered, tasks)
+- Block quotes
+- Definition lists
+- Tables
+- Images
+
+**NO TAB needed (appear on slides automatically):**
+
+- Headers (`#`, `##`, `###`, etc.)
+- Horizontal rules (`---`)
+- Fenced code blocks (` ``` `)
+- Math blocks (`$$`)
+
+**Never appears on slides:**
+
+- Comments (`//`)
+
+## Slide Structure
+
+### Create New Slides
+
+```markdown
+---
+```
+
+Use horizontal rules to split slides. No tab needed.
+
+### Headings
+
+```markdown
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+```
+
+Headers appear on slides automatically. No tab needed.
+
+## Text on Slides
+
+Regular paragraphs MUST be tabbed to appear on slides:
+
+```markdown
+⇥This text will appear on the slide.
+⇥
+⇥This is another paragraph on the slide.
+```
+
+Without tabs, text is spoken only (speaker notes):
+
+```markdown
+This text is only for the speaker to read.
+```
+
+## Text Formatting
+
+Inside tabbed paragraphs:
+
+```markdown
+⇥**bold text**
+⇥*italic text*
+⇥~~strikethrough~~
+⇥==highlighted text==
+```
+
+Superscript and subscript:
+
+```markdown
+⇥100m^2
+⇥y^(a+b)^
+⇥x~z
+```
+
+## Lists
+
+Lists MUST be tabbed to appear on slides:
+
+```markdown
+⇥- Item one
+⇥- Item two
+⇥- Item three
+```
+
+Numbered lists:
+
+```markdown
+⇥1. First item
+⇥2. Second item
+⇥3. Third item
+```
+
+Task lists:
+
+```markdown
+⇥- [ ] Unchecked task
+⇥- [x] Completed task
+```
+
+Nested lists:
+
+```markdown
+⇥- Main item
+⇥ - Nested item
+⇥ - Another nested item
+```
+
+## Block Quotes
+
+Block quotes MUST be tabbed:
+
+```markdown
+⇥> This quote appears on the slide
+```
+
+## Definition Lists
+
+Definition lists MUST be tabbed:
+
+```markdown
+⇥Term
+⇥: Definition of the term
+⇥: Another definition
+```
+
+## Code
+
+### Inline Code
+
+```markdown
+⇥Use `keyword` for inline code within a paragraph
+```
+
+### Code Blocks
+
+Fenced code blocks appear on slides automatically. NO TAB needed:
+
+````markdown
+```typescript
+function hello() {
+  console.log('Hello');
+}
+```
+````
+
+Language tags are optional but recommended for syntax highlighting.
+
+## Images
+
+Images MUST be tabbed and added to Media Manager first:
+
+```markdown
+⇥![Alt text](filename.png)
+```
+
+Note: Encode spaces as `%20`. Omit leading slash.
+
+## Tables
+
+Tables MUST be tabbed:
+
+```markdown
+⇥| Name | Price | Tax |
+⇥|:--|--:|--:|
+⇥| Widget | 10$ | 1$ |
+⇥| Gift | 0$ ||
+```
+
+Alignment:
+
+- Left: `:--`
+- Right: `--:`
+- Center: `:-:`
+
+## Math
+
+Math blocks appear on slides automatically. NO TAB needed:
+
+Inline math (needs surrounding text tabbed):
+
+```markdown
+⇥An example of math $x+y^2$ within text.
+```
+
+Block math:
+
+```markdown
+$$
+\displaystyle \frac{1}{x}
+$$
+```
+
+## Comments
+
+Comments are only visible in the editor:
+
+```markdown
+// This is a speaker note or reminder
+```
+
+## Links and Footnotes
+
+Links within tabbed content:
+
+```markdown
+⇥Visit [this site](https://example.com) for more info.
+```
+
+Footnotes:
+
+```markdown
+⇥Text with footnote[^1].
+[^1]: Footnote content.
+```
+
+Citations:
+
+```markdown
+⇥Statement with source[p. 23][#Doe:2006].
+[#Doe:2006]: Author. _Title_. Publisher, Year.
+```
+
+## Complete Slide Example
+
+````markdown
+# Slide Title
+
+// This is a speaker note - not visible on slide
+
+⇥This paragraph appears on the slide because it's tabbed.
+
+⇥Key points:
+⇥- First point
+⇥- Second point
+⇥- Third point
+
+```typescript
+// Code blocks don't need tabs
+function example() {
+  return 'This appears on slide automatically';
+}
+```
+````
+
+---
+
+## Next Slide
+
+⇥More content here...
+
+```
+
+## Best Practices
+
+1. Tab all regular content (paragraphs, lists, quotes, tables, images)
+2. Don't tab headers, code blocks, or math blocks
+3. Use comments for speaker notes
+4. Break complex code across multiple slides
+5. Test that all visible content is properly tabbed
+```

skills/conference-talk-builder/references/story-circle.md

@@ -0,0 +1,107 @@
+# Tech Talk Story Circle Framework
+
+The Story Circle is an eight-step framework adapted from Dan Harmon's storytelling technique. It structures tech talks to create engaging narratives.
+
+## The Eight Steps
+
+### 1. Introduction (You)
+
+**Top half - Order**
+
+Introduce yourself and the current status quo of your project.
+
+- Set the scene with the existing workflow or technology stack
+- Establish the baseline before disruption
+- Make the audience understand the familiar ground
+
+### 2. Problem Statement (Need)
+
+**Top half - Order**
+
+Identify and explain the problem you're trying to solve.
+
+- Clearly articulate what's not working
+- Help the audience feel the pain point
+- Create the motivation for change
+
+### 3. Exploration (Go)
+
+**Crossing to bottom half - Chaos**
+
+Describe the steps taken to address the problem.
+
+- What did you try?
+- What worked?
+- What didn't work?
+- Show the journey into the unknown
+
+### 4. Experimentation (Search)
+
+**Bottom half - Chaos**
+
+Detail the process of digging into the actual problem.
+
+- What did you learn?
+- What experiments did you run?
+- What discoveries did you make?
+- Share the messy middle of problem-solving
+
+### 5. Solution (Find)
+
+**Bottom half - Chaos**
+
+Explain how you found the solution or made progress.
+
+- Present the breakthrough moment
+- Show what finally clicked
+- Explain the technical approach that worked
+
+### 6. Challenges (Take)
+
+**Bottom half - Chaos**
+
+Discuss the actual implementation of the project.
+
+- Emphasize the disruption to the status quo
+- Share the difficulties and tradeoffs
+- Be honest about the cost of change
+
+### 7. Apply Knowledge (Return)
+
+**Crossing to top half - Order**
+
+Describe the results and how the solution was integrated.
+
+- Show how you brought the solution back to your project
+- Demonstrate the practical application
+- Return to the familiar with new tools
+
+### 8. Results & Insights (Change)
+
+**Top half - Order**
+
+Conclude with lessons learned and how things changed.
+
+- Share metrics or outcomes
+- Explain what changed in your workflow or perspective
+- Leave the audience with actionable insights
+
+## Structure Notes
+
+**Top half (steps 1, 2, 7, 8)**: Represents established practices and order
+**Bottom half (steps 3, 4, 5, 6)**: Represents disruption and experimentation
+
+The character (you) starts in the top half, enters the bottom half to experiment and disrupt, then returns to the top half with new knowledge, changing the status quo.
+
+## Example
+
+From "Unleashing the TypeScript Compiler":
+
+1. Status quo of a TypeScript/React project using Material-UI
+2. Challenges faced with the project
+3. Solutions tried to work around issues
+4. Exploring the TypeScript compiler and codemods
+5. Using new knowledge to solve problems
+6. Challenges implementing the solution for every scenario
+7. Applying knowledge to the project
+8. Results and changed team perspective on codemods