Use when creating a new section for the AI Workshop presentation. Guides through title slide setup, layout choices, and content gathering. Activates when user wants to add a new topic section to the slideshow.
This skill guides the creation of a new section for the AI Native Developer Workshop presentation.
src/sections/Before creating any files, ask the user these questions:
bluegreenpurpleorangegray - Overview/Introduction topicsIf the user provides a URL or wants help researching content:
Invoke the Slide Content Creator agent using:
@agent Slide Content Creator [URL or topic]
The Slide Content Creator will:
Wait for the agent's output before proceeding to implementation.
Every section MUST begin with a title slide. Use this template:
import { IconName } from 'lucide-react';
import { SlideType } from './types';
export const {sectionName}Slides: SlideType[] = [
{
title: "",
subtitle: "",
content: (
<div className="flex flex-col items-center justify-center h-full space-y-6">
<IconName className="w-16 h-16 md:w-20 md:h-20 text-{color}-500" />
<h1 className="text-5xl md:text-6xl font-bold text-{color}-900 text-center">
Section Name
</h1>
<p className="text-xl md:text-2xl text-gray-600 text-center max-w-2xl">
Brief tagline describing what this section covers
</p>
<div className="flex space-x-2 mt-4">
<div className="w-3 h-3 bg-{color}-300 rounded-full"></div>
<div className="w-3 h-3 bg-{color}-500 rounded-full"></div>
<div className="w-3 h-3 bg-{color}-300 rounded-full"></div>
</div>
</div>
)
},
// Content slides follow...
];
| Topic | Suggested Icons |
|---|---|
| LLMs/AI | Sparkles, Brain, Cpu |
| Models | Box, Layers |
| Framework | Target, Compass |
| Code/Copilot | Code, Bot |
| Instructions | ScrollText, FileText |
| Skills | Puzzle, Wrench |
| Spaces/Organization | Layout, FolderOpen |
| Windows/UI | Monitor, PanelLeft |
| Multi-Agent | Network, Users |
| Workflows | Repeat, RefreshCw |
| Context | Brain, Database |
| Security | Shield, Lock |
| Privacy | Eye, EyeOff |
| Testing | TestTube, CheckCircle |
When creating the section, complete ALL of these:
Create section file: src/sections/{sectionname}.tsx
export const {sectionName}Slides: SlideType[] = [...]Update index.ts: Add to src/sections/index.ts
export { {sectionName}Slides } from './{sectionname}';
Update main.tsx imports: Add to import statement
import { ..., {sectionName}Slides } from './sections';
Add to sections array in src/main.tsx:
{ name: 'Section Name', slides: {sectionName}Slides, color: '{color}', icon: IconName },
Add to slides spread in main.tsx:
const slides = [...otherSlides, ...{sectionName}Slides];
Import icon at top of main.tsx if not already imported
After the title slide, add content slides using these patterns:
Definition Slide (introducing concepts):
{
title: "Concept Name",
subtitle: "Clear context sentence",
content: (
<div className="flex flex-col space-y-6 max-w-3xl mx-auto">
<div className="bg-{color}-50 p-6 rounded-lg border-l-4 border-{color}-500">
<h3 className="text-2xl font-bold text-{color}-900 mb-4">What is [Concept]?</h3>
<p className="text-lg text-gray-700">Definition here.</p>
</div>
{/* Key points, takeaway */}
</div>
)
}
Grid Slide (multiple related items):
{
title: "Overview Title",
subtitle: "Context",
content: (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 max-w-3xl mx-auto">
{/* 2-4 cards */}
</div>
)
}
List Slide (step-by-step content):
{
title: "Process/Steps",
subtitle: "Context",
content: (
<div className="flex flex-col space-y-6 max-w-3xl mx-auto">
{/* Header box, bullet lists, takeaway */}
</div>
)
}
Before completing, verify:
title and subtitle stringslucide-reactmd: breakpoints where appropriate)User: "Create a new section about prompt engineering"
Response: "I'd like to help you create a new section about prompt engineering. A few questions first:
Color scheme: This seems like it fits green - helping users communicate effectively with AI. Does that work, or would you prefer a different color?
Source material: Do you have any URLs or documentation you'd like me to pull content from? I can use the Slide Content Creator agent to extract verified facts from sources.
Scope: What key topics should this section cover? (e.g., prompt structure, few-shot examples, chain-of-thought, etc.)
Once I have this info, I'll set up the title slide and content structure."