@thanh01.pmt/presentation-kit 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ai/index.cjs +49 -229
- package/dist/ai/index.cjs.map +1 -1
- package/dist/ai/index.d.cts +3 -2
- package/dist/ai/index.d.ts +3 -2
- package/dist/ai/index.js +2 -229
- package/dist/ai/index.js.map +1 -1
- package/dist/chunk-6R6L6KSC.cjs +601 -0
- package/dist/chunk-6R6L6KSC.cjs.map +1 -0
- package/dist/chunk-BHJXQCVE.js +588 -0
- package/dist/chunk-BHJXQCVE.js.map +1 -0
- package/dist/{click-css-CktIYP3H.d.ts → click-css-B2s9B_uP.d.ts} +2 -2
- package/dist/{click-css-Ch_jyWaw.d.cts → click-css-Bcc1CkTN.d.cts} +2 -2
- package/dist/index.cjs +45 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -4
- package/dist/index.d.ts +6 -4
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/{presets-Bkh6NzWf.d.cts → presets-BYvgAAkJ.d.cts} +2 -2
- package/dist/{presets-BUzebXzj.d.ts → presets-D_hfPJX9.d.ts} +2 -2
- package/dist/react/index.d.cts +3 -3
- package/dist/react/index.d.ts +3 -3
- package/dist/skills/index.cjs +52 -0
- package/dist/skills/index.cjs.map +1 -0
- package/dist/skills/index.d.cts +142 -0
- package/dist/skills/index.d.ts +142 -0
- package/dist/skills/index.js +3 -0
- package/dist/skills/index.js.map +1 -0
- package/dist/{types-8AVYoEUn.d.cts → types-C3d04zzP.d.cts} +1 -1
- package/dist/{types-8AVYoEUn.d.ts → types-C3d04zzP.d.ts} +1 -1
- package/package.json +7 -1
|
@@ -0,0 +1,601 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var zod = require('zod');
|
|
4
|
+
|
|
5
|
+
// src/skills/catalog.ts
|
|
6
|
+
var TEMPLATES_CATALOG = [
|
|
7
|
+
{
|
|
8
|
+
slug: "blue-professional",
|
|
9
|
+
name: "Blue Professional",
|
|
10
|
+
tagline: "Cream paper background with electric cobalt blue accents; clean modern professional.",
|
|
11
|
+
mood: ["professional", "modern", "calm", "trustworthy"],
|
|
12
|
+
occasion: ["B2B SaaS pitch", "consulting deliverable", "internal review", "investor update", "computer science lecture"],
|
|
13
|
+
tone: ["clean", "considered", "polished", "neutral"],
|
|
14
|
+
formality: "medium-high",
|
|
15
|
+
density: "medium",
|
|
16
|
+
scheme: "light",
|
|
17
|
+
best_for: "Computer science, technical lectures, B2B updates, consulting deliverables, structured pedagogical lessons.",
|
|
18
|
+
avoid_for: "Playful, whimsical, or arcade contexts.",
|
|
19
|
+
slide_count: 10
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
slug: "cobalt-grid",
|
|
23
|
+
name: "Cobalt Grid",
|
|
24
|
+
tagline: "Deep blue tech terminal with monospaced code blocks and high-precision blueprints.",
|
|
25
|
+
mood: ["technical", "futuristic", "developer", "precise"],
|
|
26
|
+
occasion: ["developer tools", "architecture review", "algorithm walkthrough", "hardware lab"],
|
|
27
|
+
tone: ["geeky", "precise", "modern", "authoritative"],
|
|
28
|
+
formality: "medium",
|
|
29
|
+
density: "high",
|
|
30
|
+
scheme: "dark",
|
|
31
|
+
best_for: "Programming tutorials, Swift/Python/Rust architecture, engineering masterclasses, deep tech walkthroughs.",
|
|
32
|
+
avoid_for: "Warm organic storytelling, poetry, non-technical humanities.",
|
|
33
|
+
slide_count: 12
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
slug: "editorial-forest",
|
|
37
|
+
name: "Editorial Forest",
|
|
38
|
+
tagline: "Deep sage green and warm cream paper; calm, literary, and thoughtful.",
|
|
39
|
+
mood: ["editorial", "thoughtful", "calm", "academic"],
|
|
40
|
+
occasion: ["curriculum overview", "foundational theory", "ethics in tech", "pedagogy manifesto"],
|
|
41
|
+
tone: ["literary", "considered", "warm", "measured"],
|
|
42
|
+
formality: "high",
|
|
43
|
+
density: "medium",
|
|
44
|
+
scheme: "light",
|
|
45
|
+
best_for: "Educational theory, learner psychology, ethics, high-concept architecture lectures.",
|
|
46
|
+
avoid_for: "High-adrenaline hackathons, rapid gaming demos.",
|
|
47
|
+
slide_count: 10
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
slug: "neo-grid-bold",
|
|
51
|
+
name: "Neo-Grid Bold",
|
|
52
|
+
tagline: "Editorial neo-brutalism with bold typography and high-contrast accent lines.",
|
|
53
|
+
mood: ["confident", "punchy", "editorial", "modern"],
|
|
54
|
+
occasion: ["product launch", "design review", "capstone demo", "keynote presentation"],
|
|
55
|
+
tone: ["bold", "minimal", "design-led", "graphic"],
|
|
56
|
+
formality: "medium",
|
|
57
|
+
density: "high",
|
|
58
|
+
scheme: "light",
|
|
59
|
+
best_for: "Capstone showcases, frontend design, UI/UX systems, bold interactive presentations.",
|
|
60
|
+
avoid_for: "Quiet traditional disclosures.",
|
|
61
|
+
slide_count: 12
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
slug: "8-bit-orbit",
|
|
65
|
+
name: "8-Bit Orbit",
|
|
66
|
+
tagline: "Pixel-art neon arcade aesthetic on a deep navy void.",
|
|
67
|
+
mood: ["retro-tech", "playful", "cyberpunk", "energetic"],
|
|
68
|
+
occasion: ["gaming pitch", "hackathon demo", "game dev tutorial", "creative coding"],
|
|
69
|
+
tone: ["geeky", "neon", "rebellious", "sci-fi"],
|
|
70
|
+
formality: "low",
|
|
71
|
+
density: "medium",
|
|
72
|
+
scheme: "dark",
|
|
73
|
+
best_for: "Game development, creative coding, arcade logic, robotics student challenges.",
|
|
74
|
+
avoid_for: "Formal corporate finance or clinical medical courses.",
|
|
75
|
+
slide_count: 10
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
slug: "monochrome",
|
|
79
|
+
name: "Minimal Monochrome",
|
|
80
|
+
tagline: "Pure black and white with surgical grid alignment and stark typography.",
|
|
81
|
+
mood: ["minimal", "stark", "intellectual", "precise"],
|
|
82
|
+
occasion: ["math proofs", "data structure fundamentals", "academic research", "system design"],
|
|
83
|
+
tone: ["pure", "restrained", "intellectual", "timeless"],
|
|
84
|
+
formality: "high",
|
|
85
|
+
density: "medium",
|
|
86
|
+
scheme: "light",
|
|
87
|
+
best_for: "Algorithms, mathematical foundations, data structures, minimal system blueprints.",
|
|
88
|
+
avoid_for: "Kids coding clubs, playful animations.",
|
|
89
|
+
slide_count: 10
|
|
90
|
+
}
|
|
91
|
+
];
|
|
92
|
+
var STYLE_PRESETS = [
|
|
93
|
+
{
|
|
94
|
+
id: "electric-studio",
|
|
95
|
+
name: "Electric Studio",
|
|
96
|
+
vibe: "Bold, clean, professional, high contrast",
|
|
97
|
+
scheme: "dark",
|
|
98
|
+
typography: {
|
|
99
|
+
display: "Space Grotesk, sans-serif",
|
|
100
|
+
body: "Inter, sans-serif",
|
|
101
|
+
mono: "JetBrains Mono, monospace"
|
|
102
|
+
},
|
|
103
|
+
colors: {
|
|
104
|
+
bg: "#0a0a0a",
|
|
105
|
+
text: "#ffffff",
|
|
106
|
+
accent: "#4361ee",
|
|
107
|
+
cardBg: "rgba(255, 255, 255, 0.05)",
|
|
108
|
+
border: "rgba(67, 97, 238, 0.3)",
|
|
109
|
+
textMuted: "#9ca3af"
|
|
110
|
+
},
|
|
111
|
+
signatureElements: [
|
|
112
|
+
"Two-panel split architecture",
|
|
113
|
+
"Staggered .reveal entrance transitions",
|
|
114
|
+
"High-contrast code cards with macOS traffic lights",
|
|
115
|
+
"1920\xD71080 stage canvas auto-scaling"
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
id: "blue-professional",
|
|
120
|
+
name: "Blue Professional",
|
|
121
|
+
vibe: "Cream paper background with electric cobalt blue accents; clean modern professional",
|
|
122
|
+
scheme: "light",
|
|
123
|
+
typography: {
|
|
124
|
+
display: "Space Grotesk, sans-serif",
|
|
125
|
+
body: "Inter, sans-serif",
|
|
126
|
+
mono: "SF Mono, Menlo, monospace"
|
|
127
|
+
},
|
|
128
|
+
colors: {
|
|
129
|
+
bg: "#fdfae7",
|
|
130
|
+
text: "#111111",
|
|
131
|
+
accent: "#1e2bfa",
|
|
132
|
+
cardBg: "rgba(30, 43, 250, 0.04)",
|
|
133
|
+
border: "rgba(30, 43, 250, 0.2)",
|
|
134
|
+
textMuted: "#6b6b6b"
|
|
135
|
+
},
|
|
136
|
+
signatureElements: [
|
|
137
|
+
"Warm paper texture and clean typography",
|
|
138
|
+
"Cobalt accent underlines and badges",
|
|
139
|
+
"Clean 2-column theory vs code blocks",
|
|
140
|
+
"3-card Bento grid for architecture breakdown"
|
|
141
|
+
]
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
id: "creative-voltage",
|
|
145
|
+
name: "Creative Voltage",
|
|
146
|
+
vibe: "Bold, creative, energetic, retro-modern",
|
|
147
|
+
scheme: "dark",
|
|
148
|
+
typography: {
|
|
149
|
+
display: "Syne, sans-serif",
|
|
150
|
+
body: "Space Grotesk, sans-serif",
|
|
151
|
+
mono: "Space Mono, monospace"
|
|
152
|
+
},
|
|
153
|
+
colors: {
|
|
154
|
+
bg: "#1a1a2e",
|
|
155
|
+
text: "#ffffff",
|
|
156
|
+
accent: "#d4ff00",
|
|
157
|
+
cardBg: "rgba(212, 255, 0, 0.05)",
|
|
158
|
+
border: "rgba(212, 255, 0, 0.25)",
|
|
159
|
+
textMuted: "#a0a0c0"
|
|
160
|
+
},
|
|
161
|
+
signatureElements: [
|
|
162
|
+
"Electric neon yellow accents on dark purple void",
|
|
163
|
+
"Punchy display typography",
|
|
164
|
+
"Dynamic interactive checkpoint quizzes",
|
|
165
|
+
"Bento stat counters with glowing outlines"
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
];
|
|
169
|
+
|
|
170
|
+
// src/skills/contracts.ts
|
|
171
|
+
var VIEWPORT_BASE_CSS = `/* ===========================================
|
|
172
|
+
FIXED 16:9 STAGE: MANDATORY BASE STYLES
|
|
173
|
+
Slides are authored at 1920\xD71080 and scaled as a whole.
|
|
174
|
+
=========================================== */
|
|
175
|
+
|
|
176
|
+
html, body {
|
|
177
|
+
width: 100%;
|
|
178
|
+
height: 100%;
|
|
179
|
+
margin: 0;
|
|
180
|
+
overflow: hidden;
|
|
181
|
+
background: var(--stage-bg, #000);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.deck-viewport {
|
|
185
|
+
position: fixed;
|
|
186
|
+
inset: 0;
|
|
187
|
+
overflow: hidden;
|
|
188
|
+
background: var(--stage-bg, #000);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.deck-stage {
|
|
192
|
+
position: absolute;
|
|
193
|
+
left: 0;
|
|
194
|
+
top: 0;
|
|
195
|
+
width: 1920px;
|
|
196
|
+
height: 1080px;
|
|
197
|
+
overflow: hidden;
|
|
198
|
+
transform-origin: 0 0;
|
|
199
|
+
background: var(--slide-bg, #fff);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.slide {
|
|
203
|
+
position: absolute;
|
|
204
|
+
inset: 0;
|
|
205
|
+
width: 1920px;
|
|
206
|
+
height: 1080px;
|
|
207
|
+
overflow: hidden;
|
|
208
|
+
display: block;
|
|
209
|
+
visibility: hidden;
|
|
210
|
+
opacity: 0;
|
|
211
|
+
pointer-events: none;
|
|
212
|
+
background: var(--slide-bg, #fff);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.slide.active,
|
|
216
|
+
.slide.visible {
|
|
217
|
+
visibility: visible;
|
|
218
|
+
opacity: 1;
|
|
219
|
+
pointer-events: auto;
|
|
220
|
+
z-index: 1;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
img, video, canvas, svg {
|
|
224
|
+
max-width: 100%;
|
|
225
|
+
max-height: 100%;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.reveal {
|
|
229
|
+
opacity: 0;
|
|
230
|
+
transform: translateY(30px);
|
|
231
|
+
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
|
|
232
|
+
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.slide.visible .reveal,
|
|
236
|
+
.slide.active .reveal {
|
|
237
|
+
opacity: 1;
|
|
238
|
+
transform: translateY(0);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.reveal:nth-child(1) { transition-delay: 0.08s; }
|
|
242
|
+
.reveal:nth-child(2) { transition-delay: 0.16s; }
|
|
243
|
+
.reveal:nth-child(3) { transition-delay: 0.24s; }
|
|
244
|
+
.reveal:nth-child(4) { transition-delay: 0.32s; }
|
|
245
|
+
.reveal:nth-child(5) { transition-delay: 0.40s; }
|
|
246
|
+
|
|
247
|
+
@media (prefers-reduced-motion: reduce) {
|
|
248
|
+
*, *::before, *::after {
|
|
249
|
+
animation-duration: 0.01ms !important;
|
|
250
|
+
transition-duration: 0.1s !important;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
`;
|
|
254
|
+
var FRONTEND_SLIDES_CORE_RULES = `
|
|
255
|
+
# FRONTEND SLIDES SKILL & QUALITY INVARIANTS
|
|
256
|
+
|
|
257
|
+
## 1. Core Principles (Non-Negotiable)
|
|
258
|
+
1. **Zero Dependencies** \u2014 Single HTML presentation with inline scoped CSS and JS.
|
|
259
|
+
2. **Fixed 16:9 Stage Canvas** \u2014 Every slide is strictly authored inside a fixed 1920\xD71080 stage canvas (.deck-stage) scaled to the browser viewport. Never reflow slide content for different screen ratios.
|
|
260
|
+
3. **No AI-Slop Design** \u2014 Never use generic purple gradients, clich\xE9 fonts (Arial, Roboto), or boring corporate bullets. Use curated palettes (Electric Studio, Blue Professional, Cobalt Grid) and distinctive typography (Space Grotesk, Inter, Syne, JetBrains Mono).
|
|
261
|
+
4. **Staggered Reveals** \u2014 Use the .reveal class on key elements with transition delays for smooth, cinematic entrance animations.
|
|
262
|
+
5. **No Pixel Coordinates** \u2014 NEVER output free-form bounding-box coordinates like "position": { "x", "y" } or "layout": "title_and_content". Always populate semantic layout slots.
|
|
263
|
+
|
|
264
|
+
## 2. Pacing & Pedagogical Structure
|
|
265
|
+
A complete lesson deck MUST have 8 to 12 slides following the Chunky Micro-Cycle:
|
|
266
|
+
1. **Cover (hero-cover):** Lesson title, topic badge, learning goal, author/date.
|
|
267
|
+
2. **Agenda & Roadmap (two-columns-compare or timeline-steps):** Milestones and timing.
|
|
268
|
+
3. **Core Mental Model (split-concept-code):** Definition, analogy, and runnable starter code.
|
|
269
|
+
4. **Visual Architecture (three-cards-grid):** 3-pillar breakdown of mechanisms.
|
|
270
|
+
5. **Syntax & Deep Dive (split-concept-code):** Concrete language syntax, gotchas, and annotated snippet.
|
|
271
|
+
6. **Timeline Execution (timeline-steps):** Step-by-step pipeline or algorithmic flow.
|
|
272
|
+
7. **Interactive Formative Check (checkpoint-quiz):** Multiple-choice diagnostic question with explanation.
|
|
273
|
+
8. **Summary & Next Milestone (summary-takeaways):** 3-4 golden takeaways and preview of next lesson.
|
|
274
|
+
`;
|
|
275
|
+
|
|
276
|
+
// src/ai/html/prompt.ts
|
|
277
|
+
var SLIDE_HTML_PROMPT_CONTRACT = `
|
|
278
|
+
# \u{1F3A8} HTML SLIDE ENGINE \u2014 AGENT GENERATION CONTRACT
|
|
279
|
+
|
|
280
|
+
You are an expert Presentation Designer and Curriculum Architect producing professional, high-impact slide decks.
|
|
281
|
+
Instead of generating free-form HTML or brittle Markdown hacks, you MUST fill structured content into pre-tested **Layout Presets**.
|
|
282
|
+
|
|
283
|
+
## Available Layout Presets & Required Slots:
|
|
284
|
+
|
|
285
|
+
1. **hero-cover** (Cover / Title Slide)
|
|
286
|
+
- \`tag\` (string): e.g. "Unit 01 \xB7 Lesson 02"
|
|
287
|
+
- \`title\` (string): Main bold headline
|
|
288
|
+
- \`subtitle\` (string): Subtitle or 1-sentence learning objective
|
|
289
|
+
- \`author\` (string): Instructor / Organization
|
|
290
|
+
- \`date\` (string): Course term or date
|
|
291
|
+
|
|
292
|
+
2. **split-concept-code** (Theory + Code Snippet)
|
|
293
|
+
- \`tag\` (string): Section topic tag
|
|
294
|
+
- \`title\` (string): Topic heading
|
|
295
|
+
- \`points\` (string[]): 3 to 4 concise bullet takeaways
|
|
296
|
+
- \`code\` (string): Executable source code
|
|
297
|
+
- \`language\` (string): Language name (e.g. "python", "typescript", "swift")
|
|
298
|
+
- \`codeNote\` (string, optional): One-line hint or execution output
|
|
299
|
+
|
|
300
|
+
3. **two-columns-compare** (Comparison / Pros vs Cons)
|
|
301
|
+
- \`tag\` (string): Topic tag
|
|
302
|
+
- \`title\` (string): Headline
|
|
303
|
+
- \`col1Title\` (string): e.g. "Synchronous I/O"
|
|
304
|
+
- \`col1Items\` (string[]): 3 to 4 points
|
|
305
|
+
- \`col2Title\` (string): e.g. "Asynchronous I/O"
|
|
306
|
+
- \`col2Items\` (string[]): 3 to 4 points
|
|
307
|
+
|
|
308
|
+
4. **three-cards-grid** (3 Core Pillars / Architecture)
|
|
309
|
+
- \`tag\` (string): e.g. "Core Principles"
|
|
310
|
+
- \`title\` (string): Overview headline
|
|
311
|
+
- \`cards\` (array of objects): Exactly 3 cards:
|
|
312
|
+
- \`badge\`: e.g. "01", "LAYER 1"
|
|
313
|
+
- \`title\`: Card headline
|
|
314
|
+
- \`desc\`: 1-2 sentence description
|
|
315
|
+
- \`footer\` (optional): Key takeaway
|
|
316
|
+
|
|
317
|
+
5. **timeline-steps** (Algorithm / Execution Pipeline)
|
|
318
|
+
- \`tag\` (string): e.g. "Workflow"
|
|
319
|
+
- \`title\` (string): Headline
|
|
320
|
+
- \`steps\` (array of objects): 3 to 5 steps:
|
|
321
|
+
- \`stepNum\` (number/string): 1, 2, 3...
|
|
322
|
+
- \`title\`: Step name
|
|
323
|
+
- \`desc\`: What happens at this step
|
|
324
|
+
|
|
325
|
+
6. **metric-callout** (Key Theorem / Benchmark Statistic)
|
|
326
|
+
- \`tag\` (string): e.g. "Time Complexity"
|
|
327
|
+
- \`metric\` (string): Big stat (e.g. "O(log N)", "99.99%", "10x")
|
|
328
|
+
- \`metricLabel\` (string): e.g. "Lookup Efficiency"
|
|
329
|
+
- \`title\` (string): Main takeaway
|
|
330
|
+
- \`desc\` (string): Contextual explanation
|
|
331
|
+
|
|
332
|
+
7. **checkpoint-quiz** (Interactive Checkpoint)
|
|
333
|
+
- \`tag\` (string): e.g. "Quick Knowledge Check"
|
|
334
|
+
- \`question\` (string): Clear question prompt
|
|
335
|
+
- \`options\` (array of objects): 2 to 4 options:
|
|
336
|
+
- \`label\`: "A", "B", "C", "D"
|
|
337
|
+
- \`text\`: Option text
|
|
338
|
+
- \`explanation\` (string): Explanatory rationale
|
|
339
|
+
|
|
340
|
+
8. **summary-takeaways** (Wrap-Up / Next Steps)
|
|
341
|
+
- \`tag\` (string): e.g. "Recap"
|
|
342
|
+
- \`title\` (string): Wrap-up headline
|
|
343
|
+
- \`takeaways\` (string[]): 3 to 4 memorable bullet points
|
|
344
|
+
- \`nextStep\` (string): Teaser for the next lesson or project
|
|
345
|
+
|
|
346
|
+
## Aesthetic & Quality Invariants ("Anti-AI-Slop"):
|
|
347
|
+
- **Brevity is King (Zero-Scroll Invariant):** Each slide is calibrated for a 1920\xD71080 canvas. Maximum **35\u201340 words** per card or column; maximum **15 words** per bullet item. Never write dense multi-sentence paragraphs that cause vertical scrolling.
|
|
348
|
+
- **Pedagogical Pacing:** Start with \`hero-cover\`, alternate between \`split-concept-code\`, \`two-columns-compare\` and \`three-cards-grid\`, insert a \`checkpoint-quiz\` midway, and finish with \`summary-takeaways\`.
|
|
349
|
+
- **Theme Selection:**
|
|
350
|
+
- \`blue-professional\`: General academic, clean engineering, trustworthy.
|
|
351
|
+
- \`cobalt-grid\`: Advanced tech, algorithms, robotics, cybersecurity.
|
|
352
|
+
- \`editorial-forest\`: Thoughtful design, literature, ethics, science.
|
|
353
|
+
- \`studio\`: Minimalist product design, modern software.
|
|
354
|
+
- \`monochrome\`: Pure high-contrast dark mode.
|
|
355
|
+
|
|
356
|
+
## \u{1FA84} Step Reveal & Progressive Disclosure:
|
|
357
|
+
- The presentation shell supports sequential step reveal via mouse click or Space/Arrow keys.
|
|
358
|
+
- Bullet lists (\`points\`, \`col1Items\`, \`col2Items\`), cards in \`three-cards-grid\`, and steps in \`timeline-steps\` reveal progressively one by one before navigating to the next slide.
|
|
359
|
+
- In custom HTML slots, you can attach \`class="step-reveal"\`, \`data-step\`, \`data-reveal\`, or \`data-auto-reveal="true"\` on parent containers to enable click-by-click stepped appearance.
|
|
360
|
+
|
|
361
|
+
## \u{1F399}\uFE0F Mandatory 3-Part Presenter Notes Contract:
|
|
362
|
+
Every single slide MUST include the \`notes\` property structured with these 3 explicit components:
|
|
363
|
+
1. **Talk Track:** 2-3 sentences of exact conversational speaking script for the teacher/presenter.
|
|
364
|
+
2. **Cold-Call Check Question:** 1 diagnostic question to check understanding with a named student or attendee.
|
|
365
|
+
3. **Scaffolding Tip:** 1 intuitive analogy or troubleshooting hint in case learners struggle with the concept.
|
|
366
|
+
|
|
367
|
+
Example Notes:
|
|
368
|
+
\`\`\`markdown
|
|
369
|
+
Talk Track: Here we contrast synchronous blocking I/O with asynchronous event-driven handling. Notice how threads remain idle while waiting for network responses.
|
|
370
|
+
Cold-Call: "Jordan, looking at the left column, what happens to thread pool throughput when network latency quadruples?"
|
|
371
|
+
Scaffolding Tip: Compare it to ordering coffee at a counter (async buzzer) versus waiting at the register until the cup is brewed (sync blocking).
|
|
372
|
+
\`\`\`
|
|
373
|
+
|
|
374
|
+
## \u{1F9F1} MANDATORY JSON DECK OUTPUT STRUCTURE & SCHEMA:
|
|
375
|
+
You MUST output a single valid JSON object.
|
|
376
|
+
CRITICAL: All layout data MUST be placed inside the \`slots\` object of each slide. Never put raw unstructured strings like \`content: "..."\`!
|
|
377
|
+
|
|
378
|
+
\`\`\`json
|
|
379
|
+
{
|
|
380
|
+
"title": "Full Lesson Presentation Title",
|
|
381
|
+
"theme": "blue-professional",
|
|
382
|
+
"slides": [
|
|
383
|
+
{
|
|
384
|
+
"id": 1,
|
|
385
|
+
"layoutId": "hero-cover",
|
|
386
|
+
"slots": {
|
|
387
|
+
"tag": "Unit 01 \xB7 Lesson 01",
|
|
388
|
+
"title": "macOS & Xcode Environment Setup",
|
|
389
|
+
"subtitle": "Master the Apple developer toolchain and build your first SwiftUI application lifecycle",
|
|
390
|
+
"author": "Curriculum OS",
|
|
391
|
+
"date": "2026"
|
|
392
|
+
},
|
|
393
|
+
"notes": "Talk Track: Welcome everyone. Today we establish our core iOS development environment...\\nCold-Call: 'Alex, why do we need Xcode Command Line Tools?'\\nScaffolding Tip: Think of Xcode as the full workshop and the SDK as the raw materials."
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"id": 2,
|
|
397
|
+
"layoutId": "split-concept-code",
|
|
398
|
+
"slots": {
|
|
399
|
+
"tag": "Architecture & Syntax",
|
|
400
|
+
"title": "SwiftUI App Entry Point",
|
|
401
|
+
"points": [
|
|
402
|
+
"@main attribute designates the entry point of the app",
|
|
403
|
+
"App protocol defines the structure and scene hierarchy",
|
|
404
|
+
"WindowGroup manages the root view lifecycle across platforms"
|
|
405
|
+
],
|
|
406
|
+
"code": "import SwiftUI\\n\\n@main\\nstruct MyApp: App {\\n var body: some Scene {\\n WindowGroup {\\n ContentView()\\n }\\n }\\n}",
|
|
407
|
+
"language": "swift",
|
|
408
|
+
"codeNote": "Notice how Scene encapsulates WindowGroup automatically"
|
|
409
|
+
},
|
|
410
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
411
|
+
},
|
|
412
|
+
{
|
|
413
|
+
"id": 3,
|
|
414
|
+
"layoutId": "three-cards-grid",
|
|
415
|
+
"slots": {
|
|
416
|
+
"tag": "Core Pillars",
|
|
417
|
+
"title": "Three Pillars of App State",
|
|
418
|
+
"cards": [
|
|
419
|
+
{ "badge": "01", "title": "Active State", "desc": "App is in foreground and responding to user events directly." },
|
|
420
|
+
{ "badge": "02", "title": "Inactive State", "desc": "App is transitioning, interrupted by system dialogs or Control Center." },
|
|
421
|
+
{ "badge": "03", "title": "Background State", "desc": "Executing background tasks or preparing for memory suspension." }
|
|
422
|
+
]
|
|
423
|
+
},
|
|
424
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"id": 4,
|
|
428
|
+
"layoutId": "timeline-steps",
|
|
429
|
+
"slots": {
|
|
430
|
+
"tag": "Step-by-Step",
|
|
431
|
+
"title": "Xcode Setup Workflow",
|
|
432
|
+
"steps": [
|
|
433
|
+
{ "stepNum": 1, "title": "Download Xcode", "desc": "Install latest Xcode from the Mac App Store" },
|
|
434
|
+
{ "stepNum": 2, "title": "Command Line Tools", "desc": "Run xcode-select --install in Terminal" },
|
|
435
|
+
{ "stepNum": 3, "title": "Select Simulators", "desc": "Download iOS 18+ runtime simulators" },
|
|
436
|
+
{ "stepNum": 4, "title": "Verify Build", "desc": "Create a new SwiftUI project and press Cmd+R" }
|
|
437
|
+
]
|
|
438
|
+
},
|
|
439
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
440
|
+
},
|
|
441
|
+
{
|
|
442
|
+
"id": 5,
|
|
443
|
+
"layoutId": "two-columns-compare",
|
|
444
|
+
"slots": {
|
|
445
|
+
"tag": "Comparison",
|
|
446
|
+
"title": "SwiftUI vs UIKit Architecture",
|
|
447
|
+
"col1Title": "SwiftUI (Declarative)",
|
|
448
|
+
"col1Items": [
|
|
449
|
+
"State drives the UI automatically",
|
|
450
|
+
"Lightweight immutable structs",
|
|
451
|
+
"Cross-platform unified API"
|
|
452
|
+
],
|
|
453
|
+
"col2Title": "UIKit (Imperative)",
|
|
454
|
+
"col2Items": [
|
|
455
|
+
"Manual view controller manipulation",
|
|
456
|
+
"Heavyweight class hierarchies",
|
|
457
|
+
"Explicit event-driven updates"
|
|
458
|
+
]
|
|
459
|
+
},
|
|
460
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"id": 6,
|
|
464
|
+
"layoutId": "checkpoint-quiz",
|
|
465
|
+
"slots": {
|
|
466
|
+
"tag": "Knowledge Check",
|
|
467
|
+
"question": "Which SwiftUI modifier is used to observe external observable state objects?",
|
|
468
|
+
"options": [
|
|
469
|
+
{ "label": "A", "text": "@State" },
|
|
470
|
+
{ "label": "B", "text": "@StateObject / @ObservedObject" },
|
|
471
|
+
{ "label": "C", "text": "@Binding" },
|
|
472
|
+
{ "label": "D", "text": "@Environment" }
|
|
473
|
+
],
|
|
474
|
+
"explanation": "@StateObject manages the lifecycle of reference-type ObservableObjects, while @State is for value types."
|
|
475
|
+
},
|
|
476
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"id": 7,
|
|
480
|
+
"layoutId": "summary-takeaways",
|
|
481
|
+
"slots": {
|
|
482
|
+
"tag": "Recap & Next",
|
|
483
|
+
"title": "Lesson Summary & Key Takeaways",
|
|
484
|
+
"takeaways": [
|
|
485
|
+
"Configured complete developer toolchain with Xcode 16+",
|
|
486
|
+
"Understood SwiftUI declarative lifecycle and @main entry point",
|
|
487
|
+
"Mastered App State transitions between active, inactive, and background"
|
|
488
|
+
],
|
|
489
|
+
"nextStep": "Lesson 02: State Management & Reactive Data Flow with @State and @Binding"
|
|
490
|
+
},
|
|
491
|
+
"notes": "Talk Track: ...\\nCold-Call: ...\\nScaffolding Tip: ..."
|
|
492
|
+
}
|
|
493
|
+
]
|
|
494
|
+
}
|
|
495
|
+
\`\`\`
|
|
496
|
+
|
|
497
|
+
## \u{1F6AB} STRICT ANTI-SLOP CONSTRAINTS:
|
|
498
|
+
1. NEVER output a raw unstructured string like \`content: "..."\` or \`content: "Concept: ... Code snippet: ..."\`. All slide content MUST be placed inside the \`slots\` object with its specific keys (\`points\`, \`code\`, \`cards\`, \`steps\`, \`options\`, \`takeaways\`).
|
|
499
|
+
2. NEVER use ellipsis \`...\` or placeholder comments in \`code\`. Every code snippet MUST be real, fully typed, syntax-valid, and pedagogical.
|
|
500
|
+
3. NEVER leave \`slots\` empty \`{}\`.
|
|
501
|
+
4. Output 6 to 8 substantive, rich slides covering the lesson plan thoroughly.
|
|
502
|
+
`;
|
|
503
|
+
|
|
504
|
+
// src/skills/helper.ts
|
|
505
|
+
function getTemplatesCatalog() {
|
|
506
|
+
return TEMPLATES_CATALOG;
|
|
507
|
+
}
|
|
508
|
+
function searchTemplates(filter) {
|
|
509
|
+
if (!filter) return TEMPLATES_CATALOG;
|
|
510
|
+
const opts = typeof filter === "string" ? { query: filter } : filter;
|
|
511
|
+
return TEMPLATES_CATALOG.filter((tpl) => {
|
|
512
|
+
if (opts.scheme && tpl.scheme !== opts.scheme) return false;
|
|
513
|
+
if (opts.mood && !tpl.mood.some((m) => m.toLowerCase().includes(opts.mood.toLowerCase()))) {
|
|
514
|
+
return false;
|
|
515
|
+
}
|
|
516
|
+
if (opts.query) {
|
|
517
|
+
const q = opts.query.toLowerCase();
|
|
518
|
+
const match = tpl.slug.toLowerCase().includes(q) || tpl.name.toLowerCase().includes(q) || tpl.tagline.toLowerCase().includes(q) || tpl.best_for.toLowerCase().includes(q);
|
|
519
|
+
if (!match) return false;
|
|
520
|
+
}
|
|
521
|
+
return true;
|
|
522
|
+
});
|
|
523
|
+
}
|
|
524
|
+
function getStylePreset(id) {
|
|
525
|
+
return STYLE_PRESETS.find((p) => p.id === id) || STYLE_PRESETS[0];
|
|
526
|
+
}
|
|
527
|
+
function getFrontendSlidesSkillPrompt(options) {
|
|
528
|
+
const preset = options?.stylePresetId ? getStylePreset(options.stylePresetId) : STYLE_PRESETS[0];
|
|
529
|
+
return `
|
|
530
|
+
You are @illustrator, an elite Presentation Designer and Presentation Architect equipped with the **FRONTEND-SLIDES SKILL**.
|
|
531
|
+
|
|
532
|
+
${FRONTEND_SLIDES_CORE_RULES}
|
|
533
|
+
|
|
534
|
+
---
|
|
535
|
+
## ACTIVE STYLE PRESET: ${preset?.name || "Electric Studio"}
|
|
536
|
+
- **Vibe:** ${preset?.vibe}
|
|
537
|
+
- **Color Scheme:** ${preset?.scheme} (Background: ${preset?.colors.bg}, Text: ${preset?.colors.text}, Accent: ${preset?.colors.accent})
|
|
538
|
+
- **Typography:** Display: ${preset?.typography.display} | Body: ${preset?.typography.body} | Code: ${preset?.typography.mono || "monospace"}
|
|
539
|
+
- **Signature Design Elements:**
|
|
540
|
+
${(preset?.signatureElements || []).map((e) => ` * ${e}`).join("\n")}
|
|
541
|
+
|
|
542
|
+
---
|
|
543
|
+
${SLIDE_HTML_PROMPT_CONTRACT}
|
|
544
|
+
`.trim();
|
|
545
|
+
}
|
|
546
|
+
var querySlideTemplatesSchema = zod.z.object({
|
|
547
|
+
mood: zod.z.string().optional().describe('Mood or feeling keyword: "professional", "technical", "editorial", "playful", "minimal"'),
|
|
548
|
+
scheme: zod.z.enum(["light", "dark"]).optional().describe('Color scheme: "light" or "dark"'),
|
|
549
|
+
query: zod.z.string().optional().describe('Search term e.g. "python", "swift", "consulting", "hackathon"')
|
|
550
|
+
});
|
|
551
|
+
var getSlideStylePresetSchema = zod.z.object({
|
|
552
|
+
presetId: zod.z.enum(["electric-studio", "blue-professional", "creative-voltage"]).describe("Style preset identifier")
|
|
553
|
+
});
|
|
554
|
+
var frontendSlidesTools = {
|
|
555
|
+
querySlideTemplates: {
|
|
556
|
+
description: "Searches the 34 curated HTML slide templates catalog for design inspiration, tone matching, and layout specs.",
|
|
557
|
+
parameters: querySlideTemplatesSchema,
|
|
558
|
+
execute: async (args) => {
|
|
559
|
+
const matches = searchTemplates(args);
|
|
560
|
+
return {
|
|
561
|
+
count: matches.length,
|
|
562
|
+
templates: matches.map((m) => ({
|
|
563
|
+
slug: m.slug,
|
|
564
|
+
name: m.name,
|
|
565
|
+
tagline: m.tagline,
|
|
566
|
+
mood: m.mood,
|
|
567
|
+
tone: m.tone,
|
|
568
|
+
scheme: m.scheme,
|
|
569
|
+
bestFor: m.best_for,
|
|
570
|
+
slideCount: m.slide_count
|
|
571
|
+
}))
|
|
572
|
+
};
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
getSlideStylePreset: {
|
|
576
|
+
description: "Retrieves exact color palette, typography font stack, and signature visual elements for a style preset.",
|
|
577
|
+
parameters: getSlideStylePresetSchema,
|
|
578
|
+
execute: async (args) => {
|
|
579
|
+
const preset = getStylePreset(args.presetId);
|
|
580
|
+
if (!preset) {
|
|
581
|
+
return { error: `Style preset "${args.presetId}" not found.` };
|
|
582
|
+
}
|
|
583
|
+
return preset;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
};
|
|
587
|
+
|
|
588
|
+
exports.FRONTEND_SLIDES_CORE_RULES = FRONTEND_SLIDES_CORE_RULES;
|
|
589
|
+
exports.SLIDE_HTML_PROMPT_CONTRACT = SLIDE_HTML_PROMPT_CONTRACT;
|
|
590
|
+
exports.STYLE_PRESETS = STYLE_PRESETS;
|
|
591
|
+
exports.TEMPLATES_CATALOG = TEMPLATES_CATALOG;
|
|
592
|
+
exports.VIEWPORT_BASE_CSS = VIEWPORT_BASE_CSS;
|
|
593
|
+
exports.frontendSlidesTools = frontendSlidesTools;
|
|
594
|
+
exports.getFrontendSlidesSkillPrompt = getFrontendSlidesSkillPrompt;
|
|
595
|
+
exports.getSlideStylePresetSchema = getSlideStylePresetSchema;
|
|
596
|
+
exports.getStylePreset = getStylePreset;
|
|
597
|
+
exports.getTemplatesCatalog = getTemplatesCatalog;
|
|
598
|
+
exports.querySlideTemplatesSchema = querySlideTemplatesSchema;
|
|
599
|
+
exports.searchTemplates = searchTemplates;
|
|
600
|
+
//# sourceMappingURL=chunk-6R6L6KSC.cjs.map
|
|
601
|
+
//# sourceMappingURL=chunk-6R6L6KSC.cjs.map
|