@thanh01.pmt/presentation-kit 0.2.15 → 0.2.17

package/dist/skills/index.d.cts

@@ -0,0 +1,142 @@
+import { z } from 'zod';
+
+interface TemplateCatalogItem {
+    slug: string;
+    name: string;
+    tagline: string;
+    mood: string[];
+    occasion: string[];
+    tone: string[];
+    formality: 'low' | 'medium-low' | 'medium' | 'medium-high' | 'high';
+    density: 'low' | 'medium' | 'high';
+    scheme: 'light' | 'dark' | 'mixed';
+    best_for: string;
+    avoid_for: string;
+    slide_count: number;
+}
+interface StylePresetItem {
+    id: string;
+    name: string;
+    vibe: string;
+    scheme: 'light' | 'dark';
+    typography: {
+        display: string;
+        body: string;
+        mono?: string;
+    };
+    colors: {
+        bg: string;
+        text: string;
+        accent: string;
+        cardBg?: string;
+        border?: string;
+        textMuted?: string;
+    };
+    signatureElements: string[];
+}
+declare const TEMPLATES_CATALOG: TemplateCatalogItem[];
+declare const STYLE_PRESETS: StylePresetItem[];
+
+declare const VIEWPORT_BASE_CSS = "/* ===========================================\n   FIXED 16:9 STAGE: MANDATORY BASE STYLES\n   Slides are authored at 1920\u00D71080 and scaled as a whole.\n   =========================================== */\n\nhtml, body {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    overflow: hidden;\n    background: var(--stage-bg, #000);\n}\n\n.deck-viewport {\n    position: fixed;\n    inset: 0;\n    overflow: hidden;\n    background: var(--stage-bg, #000);\n}\n\n.deck-stage {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1920px;\n    height: 1080px;\n    overflow: hidden;\n    transform-origin: 0 0;\n    background: var(--slide-bg, #fff);\n}\n\n.slide {\n    position: absolute;\n    inset: 0;\n    width: 1920px;\n    height: 1080px;\n    overflow: hidden;\n    display: block;\n    visibility: hidden;\n    opacity: 0;\n    pointer-events: none;\n    background: var(--slide-bg, #fff);\n}\n\n.slide.active,\n.slide.visible {\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    z-index: 1;\n}\n\nimg, video, canvas, svg {\n    max-width: 100%;\n    max-height: 100%;\n}\n\n.reveal {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),\n                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.slide.visible .reveal,\n.slide.active .reveal {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.reveal:nth-child(1) { transition-delay: 0.08s; }\n.reveal:nth-child(2) { transition-delay: 0.16s; }\n.reveal:nth-child(3) { transition-delay: 0.24s; }\n.reveal:nth-child(4) { transition-delay: 0.32s; }\n.reveal:nth-child(5) { transition-delay: 0.40s; }\n\n@media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n        animation-duration: 0.01ms !important;\n        transition-duration: 0.1s !important;\n    }\n}\n";
+declare const FRONTEND_SLIDES_CORE_RULES = "\n# FRONTEND SLIDES SKILL & QUALITY INVARIANTS\n\n## 1. Core Principles (Non-Negotiable)\n1. **Zero Dependencies** \u2014 Single HTML presentation with inline scoped CSS and JS.\n2. **Fixed 16:9 Stage Canvas** \u2014 Every slide is strictly authored inside a fixed 1920\u00D71080 stage canvas (.deck-stage) scaled to the browser viewport. Never reflow slide content for different screen ratios.\n3. **No AI-Slop Design** \u2014 Never use generic purple gradients, clich\u00E9 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).\n4. **Staggered Reveals** \u2014 Use the .reveal class on key elements with transition delays for smooth, cinematic entrance animations.\n5. **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.\n\n## 2. Pacing & Pedagogical Structure\nA complete lesson deck MUST have 8 to 12 slides following the Chunky Micro-Cycle:\n1. **Cover (hero-cover):** Lesson title, topic badge, learning goal, author/date.\n2. **Agenda & Roadmap (two-columns-compare or timeline-steps):** Milestones and timing.\n3. **Core Mental Model (split-concept-code):** Definition, analogy, and runnable starter code.\n4. **Visual Architecture (three-cards-grid):** 3-pillar breakdown of mechanisms.\n5. **Syntax & Deep Dive (split-concept-code):** Concrete language syntax, gotchas, and annotated snippet.\n6. **Timeline Execution (timeline-steps):** Step-by-step pipeline or algorithmic flow.\n7. **Interactive Formative Check (checkpoint-quiz):** Multiple-choice diagnostic question with explanation.\n8. **Summary & Next Milestone (summary-takeaways):** 3-4 golden takeaways and preview of next lesson.\n";
+
+interface FrontendSlidesSkillOptions {
+    mood?: string;
+    stylePresetId?: string;
+    templateSlug?: string;
+    lessonId?: string;
+    lessonTitle?: string;
+    language?: string;
+}
+/**
+ * Retrieves the full list of 34 verified HTML templates.
+ */
+declare function getTemplatesCatalog(): TemplateCatalogItem[];
+/**
+ * Searches templates by mood, scheme, or keywords.
+ */
+declare function searchTemplates(filter?: string | {
+    mood?: string;
+    scheme?: 'light' | 'dark';
+    query?: string;
+}): TemplateCatalogItem[];
+/**
+ * Retrieves a style preset by its ID.
+ */
+declare function getStylePreset(id: string): StylePresetItem | undefined;
+/**
+ * Assembles a comprehensive, production-grade Vercel AI SDK system prompt
+ * integrating the entire Frontend-Slides Skill, fixed 16:9 stage rules,
+ * anti-slop guidelines, and slot contract.
+ */
+declare function getFrontendSlidesSkillPrompt(options?: FrontendSlidesSkillOptions): string;
+
+declare const querySlideTemplatesSchema: z.ZodObject<{
+    mood: z.ZodOptional<z.ZodString>;
+    scheme: z.ZodOptional<z.ZodEnum<["light", "dark"]>>;
+    query: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    scheme?: "dark" | "light" | undefined;
+    mood?: string | undefined;
+    query?: string | undefined;
+}, {
+    scheme?: "dark" | "light" | undefined;
+    mood?: string | undefined;
+    query?: string | undefined;
+}>;
+declare const getSlideStylePresetSchema: z.ZodObject<{
+    presetId: z.ZodEnum<["electric-studio", "blue-professional", "creative-voltage"]>;
+}, "strip", z.ZodTypeAny, {
+    presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+}, {
+    presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+}>;
+/**
+ * Tool definitions that can be directly passed to Vercel AI SDK's `tools` parameter.
+ */
+declare const frontendSlidesTools: {
+    querySlideTemplates: {
+        description: string;
+        parameters: z.ZodObject<{
+            mood: z.ZodOptional<z.ZodString>;
+            scheme: z.ZodOptional<z.ZodEnum<["light", "dark"]>>;
+            query: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            scheme?: "dark" | "light" | undefined;
+            mood?: string | undefined;
+            query?: string | undefined;
+        }, {
+            scheme?: "dark" | "light" | undefined;
+            mood?: string | undefined;
+            query?: string | undefined;
+        }>;
+        execute: (args: z.infer<typeof querySlideTemplatesSchema>) => Promise<{
+            count: number;
+            templates: {
+                slug: string;
+                name: string;
+                tagline: string;
+                mood: string[];
+                tone: string[];
+                scheme: "dark" | "light" | "mixed";
+                bestFor: string;
+                slideCount: number;
+            }[];
+        }>;
+    };
+    getSlideStylePreset: {
+        description: string;
+        parameters: z.ZodObject<{
+            presetId: z.ZodEnum<["electric-studio", "blue-professional", "creative-voltage"]>;
+        }, "strip", z.ZodTypeAny, {
+            presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+        }, {
+            presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+        }>;
+        execute: (args: z.infer<typeof getSlideStylePresetSchema>) => Promise<StylePresetItem | {
+            error: string;
+        }>;
+    };
+};
+
+export { FRONTEND_SLIDES_CORE_RULES, type FrontendSlidesSkillOptions, STYLE_PRESETS, type StylePresetItem, TEMPLATES_CATALOG, type TemplateCatalogItem, VIEWPORT_BASE_CSS, frontendSlidesTools, getFrontendSlidesSkillPrompt, getSlideStylePresetSchema, getStylePreset, getTemplatesCatalog, querySlideTemplatesSchema, searchTemplates };

package/dist/skills/index.d.ts

@@ -0,0 +1,142 @@
+import { z } from 'zod';
+
+interface TemplateCatalogItem {
+    slug: string;
+    name: string;
+    tagline: string;
+    mood: string[];
+    occasion: string[];
+    tone: string[];
+    formality: 'low' | 'medium-low' | 'medium' | 'medium-high' | 'high';
+    density: 'low' | 'medium' | 'high';
+    scheme: 'light' | 'dark' | 'mixed';
+    best_for: string;
+    avoid_for: string;
+    slide_count: number;
+}
+interface StylePresetItem {
+    id: string;
+    name: string;
+    vibe: string;
+    scheme: 'light' | 'dark';
+    typography: {
+        display: string;
+        body: string;
+        mono?: string;
+    };
+    colors: {
+        bg: string;
+        text: string;
+        accent: string;
+        cardBg?: string;
+        border?: string;
+        textMuted?: string;
+    };
+    signatureElements: string[];
+}
+declare const TEMPLATES_CATALOG: TemplateCatalogItem[];
+declare const STYLE_PRESETS: StylePresetItem[];
+
+declare const VIEWPORT_BASE_CSS = "/* ===========================================\n   FIXED 16:9 STAGE: MANDATORY BASE STYLES\n   Slides are authored at 1920\u00D71080 and scaled as a whole.\n   =========================================== */\n\nhtml, body {\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    overflow: hidden;\n    background: var(--stage-bg, #000);\n}\n\n.deck-viewport {\n    position: fixed;\n    inset: 0;\n    overflow: hidden;\n    background: var(--stage-bg, #000);\n}\n\n.deck-stage {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 1920px;\n    height: 1080px;\n    overflow: hidden;\n    transform-origin: 0 0;\n    background: var(--slide-bg, #fff);\n}\n\n.slide {\n    position: absolute;\n    inset: 0;\n    width: 1920px;\n    height: 1080px;\n    overflow: hidden;\n    display: block;\n    visibility: hidden;\n    opacity: 0;\n    pointer-events: none;\n    background: var(--slide-bg, #fff);\n}\n\n.slide.active,\n.slide.visible {\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n    z-index: 1;\n}\n\nimg, video, canvas, svg {\n    max-width: 100%;\n    max-height: 100%;\n}\n\n.reveal {\n    opacity: 0;\n    transform: translateY(30px);\n    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),\n                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.slide.visible .reveal,\n.slide.active .reveal {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n.reveal:nth-child(1) { transition-delay: 0.08s; }\n.reveal:nth-child(2) { transition-delay: 0.16s; }\n.reveal:nth-child(3) { transition-delay: 0.24s; }\n.reveal:nth-child(4) { transition-delay: 0.32s; }\n.reveal:nth-child(5) { transition-delay: 0.40s; }\n\n@media (prefers-reduced-motion: reduce) {\n    *, *::before, *::after {\n        animation-duration: 0.01ms !important;\n        transition-duration: 0.1s !important;\n    }\n}\n";
+declare const FRONTEND_SLIDES_CORE_RULES = "\n# FRONTEND SLIDES SKILL & QUALITY INVARIANTS\n\n## 1. Core Principles (Non-Negotiable)\n1. **Zero Dependencies** \u2014 Single HTML presentation with inline scoped CSS and JS.\n2. **Fixed 16:9 Stage Canvas** \u2014 Every slide is strictly authored inside a fixed 1920\u00D71080 stage canvas (.deck-stage) scaled to the browser viewport. Never reflow slide content for different screen ratios.\n3. **No AI-Slop Design** \u2014 Never use generic purple gradients, clich\u00E9 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).\n4. **Staggered Reveals** \u2014 Use the .reveal class on key elements with transition delays for smooth, cinematic entrance animations.\n5. **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.\n\n## 2. Pacing & Pedagogical Structure\nA complete lesson deck MUST have 8 to 12 slides following the Chunky Micro-Cycle:\n1. **Cover (hero-cover):** Lesson title, topic badge, learning goal, author/date.\n2. **Agenda & Roadmap (two-columns-compare or timeline-steps):** Milestones and timing.\n3. **Core Mental Model (split-concept-code):** Definition, analogy, and runnable starter code.\n4. **Visual Architecture (three-cards-grid):** 3-pillar breakdown of mechanisms.\n5. **Syntax & Deep Dive (split-concept-code):** Concrete language syntax, gotchas, and annotated snippet.\n6. **Timeline Execution (timeline-steps):** Step-by-step pipeline or algorithmic flow.\n7. **Interactive Formative Check (checkpoint-quiz):** Multiple-choice diagnostic question with explanation.\n8. **Summary & Next Milestone (summary-takeaways):** 3-4 golden takeaways and preview of next lesson.\n";
+
+interface FrontendSlidesSkillOptions {
+    mood?: string;
+    stylePresetId?: string;
+    templateSlug?: string;
+    lessonId?: string;
+    lessonTitle?: string;
+    language?: string;
+}
+/**
+ * Retrieves the full list of 34 verified HTML templates.
+ */
+declare function getTemplatesCatalog(): TemplateCatalogItem[];
+/**
+ * Searches templates by mood, scheme, or keywords.
+ */
+declare function searchTemplates(filter?: string | {
+    mood?: string;
+    scheme?: 'light' | 'dark';
+    query?: string;
+}): TemplateCatalogItem[];
+/**
+ * Retrieves a style preset by its ID.
+ */
+declare function getStylePreset(id: string): StylePresetItem | undefined;
+/**
+ * Assembles a comprehensive, production-grade Vercel AI SDK system prompt
+ * integrating the entire Frontend-Slides Skill, fixed 16:9 stage rules,
+ * anti-slop guidelines, and slot contract.
+ */
+declare function getFrontendSlidesSkillPrompt(options?: FrontendSlidesSkillOptions): string;
+
+declare const querySlideTemplatesSchema: z.ZodObject<{
+    mood: z.ZodOptional<z.ZodString>;
+    scheme: z.ZodOptional<z.ZodEnum<["light", "dark"]>>;
+    query: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    scheme?: "dark" | "light" | undefined;
+    mood?: string | undefined;
+    query?: string | undefined;
+}, {
+    scheme?: "dark" | "light" | undefined;
+    mood?: string | undefined;
+    query?: string | undefined;
+}>;
+declare const getSlideStylePresetSchema: z.ZodObject<{
+    presetId: z.ZodEnum<["electric-studio", "blue-professional", "creative-voltage"]>;
+}, "strip", z.ZodTypeAny, {
+    presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+}, {
+    presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+}>;
+/**
+ * Tool definitions that can be directly passed to Vercel AI SDK's `tools` parameter.
+ */
+declare const frontendSlidesTools: {
+    querySlideTemplates: {
+        description: string;
+        parameters: z.ZodObject<{
+            mood: z.ZodOptional<z.ZodString>;
+            scheme: z.ZodOptional<z.ZodEnum<["light", "dark"]>>;
+            query: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            scheme?: "dark" | "light" | undefined;
+            mood?: string | undefined;
+            query?: string | undefined;
+        }, {
+            scheme?: "dark" | "light" | undefined;
+            mood?: string | undefined;
+            query?: string | undefined;
+        }>;
+        execute: (args: z.infer<typeof querySlideTemplatesSchema>) => Promise<{
+            count: number;
+            templates: {
+                slug: string;
+                name: string;
+                tagline: string;
+                mood: string[];
+                tone: string[];
+                scheme: "dark" | "light" | "mixed";
+                bestFor: string;
+                slideCount: number;
+            }[];
+        }>;
+    };
+    getSlideStylePreset: {
+        description: string;
+        parameters: z.ZodObject<{
+            presetId: z.ZodEnum<["electric-studio", "blue-professional", "creative-voltage"]>;
+        }, "strip", z.ZodTypeAny, {
+            presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+        }, {
+            presetId: "blue-professional" | "electric-studio" | "creative-voltage";
+        }>;
+        execute: (args: z.infer<typeof getSlideStylePresetSchema>) => Promise<StylePresetItem | {
+            error: string;
+        }>;
+    };
+};
+
+export { FRONTEND_SLIDES_CORE_RULES, type FrontendSlidesSkillOptions, STYLE_PRESETS, type StylePresetItem, TEMPLATES_CATALOG, type TemplateCatalogItem, VIEWPORT_BASE_CSS, frontendSlidesTools, getFrontendSlidesSkillPrompt, getSlideStylePresetSchema, getStylePreset, getTemplatesCatalog, querySlideTemplatesSchema, searchTemplates };

package/dist/skills/index.js

@@ -0,0 +1,3 @@
+export { FRONTEND_SLIDES_CORE_RULES, STYLE_PRESETS, TEMPLATES_CATALOG, VIEWPORT_BASE_CSS, frontendSlidesTools, getFrontendSlidesSkillPrompt, getSlideStylePresetSchema, getStylePreset, getTemplatesCatalog, querySlideTemplatesSchema, searchTemplates } from '../chunk-BHJXQCVE.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/skills/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/{types-8AVYoEUn.d.cts → types-C3d04zzP.d.cts}

@@ -217,4 +217,4 @@ interface CompiledHtmlDeckResult {
     title: string;
 }
 
-export type { BuiltInTheme as B, CompiledHtmlDeckResult as C, HtmlThemeName as H, LayoutBoxConfig as L, MermaidBlock as M, SlideEngineConfig as S, ThemeTokens as T, SlideEngine as a, SlideLayoutData as b, HtmlDeckTheme as c, HtmlLayoutPresetId as d, HtmlSlidePreset as e, HtmlDeckData as f, HtmlCompileOptions as g, SlideTheme as h, SlideRenderOptions as i, SlideRenderResult as j, SlideRenderAsyncResult as k, HtmlSlotDefinition as l, HtmlSlideSlotData as m };
+export type { BuiltInTheme as B, CompiledHtmlDeckResult as C, HtmlLayoutPresetId as H, LayoutBoxConfig as L, MermaidBlock as M, SlideLayoutData as S, ThemeTokens as T, SlideRenderOptions as a, SlideRenderResult as b, SlideRenderAsyncResult as c, SlideTheme as d, HtmlDeckData as e, HtmlThemeName as f, HtmlSlideSlotData as g, SlideEngineConfig as h, SlideEngine as i, HtmlDeckTheme as j, HtmlSlidePreset as k, HtmlCompileOptions as l, HtmlSlotDefinition as m };

package/dist/{types-8AVYoEUn.d.ts → types-C3d04zzP.d.ts}

@@ -217,4 +217,4 @@ interface CompiledHtmlDeckResult {
     title: string;
 }
 
-export type { BuiltInTheme as B, CompiledHtmlDeckResult as C, HtmlThemeName as H, LayoutBoxConfig as L, MermaidBlock as M, SlideEngineConfig as S, ThemeTokens as T, SlideEngine as a, SlideLayoutData as b, HtmlDeckTheme as c, HtmlLayoutPresetId as d, HtmlSlidePreset as e, HtmlDeckData as f, HtmlCompileOptions as g, SlideTheme as h, SlideRenderOptions as i, SlideRenderResult as j, SlideRenderAsyncResult as k, HtmlSlotDefinition as l, HtmlSlideSlotData as m };
+export type { BuiltInTheme as B, CompiledHtmlDeckResult as C, HtmlLayoutPresetId as H, LayoutBoxConfig as L, MermaidBlock as M, SlideLayoutData as S, ThemeTokens as T, SlideRenderOptions as a, SlideRenderResult as b, SlideRenderAsyncResult as c, SlideTheme as d, HtmlDeckData as e, HtmlThemeName as f, HtmlSlideSlotData as g, SlideEngineConfig as h, SlideEngine as i, HtmlDeckTheme as j, HtmlSlidePreset as k, HtmlCompileOptions as l, HtmlSlotDefinition as m };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thanh01.pmt/presentation-kit",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "description": "Standalone client-side slide rendering engine with Marp, Shiki syntax highlighting, Mermaid diagrams, custom themes, and AI slide authoring tools.",
   "author": "Thanh Pham <https://github.com/thanh01pmt>",
   "license": "MIT",
@@ -26,6 +26,12 @@
       "import": "./dist/ai/index.js",
       "require": "./dist/ai/index.cjs",
       "default": "./dist/ai/index.js"
+    },
+    "./skills": {
+      "types": "./dist/skills/index.d.ts",
+      "import": "./dist/skills/index.js",
+      "require": "./dist/skills/index.cjs",
+      "default": "./dist/skills/index.js"
     }
   },
   "peerDependencies": {