Stats
Actions
Tags
From 9x16-pak-kw
Expert knowledge for creating PAKs (Packaged Asset Kits) using the 9x16 semantic vocabulary. Use when creating presentations, decks, media packages, or any visual content via the 9x16 MCP tools.
How this skill is triggered — by the user, by Claude, or both
Slash command
/9x16-pak-kw:pak-creationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
A PAK (Packaged Asset Kit) is an interactive, narrated 9x16 portrait media package. NOT a slide deck. NOT PowerPoint. It's a self-contained web experience with voice narration, video export, charts, and mobile-first design.
A PAK (Packaged Asset Kit) is an interactive, narrated 9x16 portrait media package. NOT a slide deck. NOT PowerPoint. It's a self-contained web experience with voice narration, video export, charts, and mobile-first design.
type: "video" with direct MP4) are spliced in at full quality — no screenshot.Before building from scratch, check if a catalog fits. Call list_catalogs to see 10 pre-built structures:
| Catalog ID | Category | Best For |
|---|---|---|
| quarterly-report | business | Executive performance summaries |
| product-launch | marketing | New product announcements |
| company-pitch | business | Investor/partner pitches |
| case-study | marketing | Client success stories |
| sales-proposal | business | Client-facing proposals |
| project-update | business | Stakeholder status reports |
| training-module | education | Educational content |
| event-recap | creative | Post-event summaries |
| brand-overview | marketing | Company story + values |
| data-dashboard | business | Analytics-heavy reports |
Catalog workflow:
list_catalogs — browse available structuresget_catalog with catalog_id — get the full deck JSON with placeholder contentcreate_presentationCatalogs save time and ensure diverse slide types. The structure is already optimized — you just swap content.
Tag name = CSS target = narration target = MCP data key = API schema field.
When you set slide_title in the JSON, it becomes a <slide-title> HTML element, styled by CSS, narrated by voice.js, and exported in video. One vocabulary, one pipeline.
{"type": "hero", "icon": "🧬", "slide_title": "Company Name", "slide_subtitle": "Tagline or Context"}
{"type": "stats", "slide_label": "Key Metrics", "slide_title": "Q4 at a Glance", "stats": [{"value": "$847M", "label": "Revenue"}, {"value": "34%", "label": "YoY Growth"}], "slide_callout": "Strongest quarter in company history."}
{"type": "chart", "slide_label": "Revenue", "slide_title": "Quarterly Trend", "chart": {"type": "bar", "data": {"labels": ["Q1","Q2","Q3","Q4"], "datasets": [{"label": "Revenue ($M)", "data": [580,640,720,847]}]}}, "chart_title": "Revenue by Quarter", "chart_caption": "Q4 driven by product launch."}
{"type": "bullets", "slide_label": "Pipeline", "slide_title": "Highlights", "slide_body": "Three programs advanced:", "bullets": ["Item one", "Item two", "Item three"]}
{"type": "numbers", "slide_label": "Timeline", "slide_title": "What's Next", "numbers": ["Q1: Launch in Japan", "Q2: Phase III data", "Q3: EU expansion"]}
{"type": "comparison", "slide_label": "Impact", "slide_title": "Before & After", "compare": [{"label": "Old Way", "text": "Manual, slow, 45% error rate", "variant": "old"}, {"label": "New Way", "text": "Automated, fast, 2% error rate", "variant": "new"}, {"label": "Result", "text": "47% cost reduction", "variant": "winner"}]}
{"type": "table", "slide_label": "Financials", "slide_title": "Summary", "table": {"headers": ["Metric","Q4","Q3","Change"], "rows": [["Revenue","$847M","$720M","+18%"],["Margin","78%","74%","+4pts"]]}}
{"type": "testimonial", "slide_label": "Feedback", "slide_title": "What Clients Say", "testimonials": [{"text": "Transformed our workflow.", "name": "Dr. Sarah Chen", "role": "Chief of Endocrinology"}]}
{"type": "quote", "slide_label": "Leadership", "slide_title": "CEO Message", "slide_quote": "Patient-centered design and commercial success aren't opposing forces.", "slide_source": "— Maria Torres, CEO"}
{"type": "features", "slide_label": "Roadmap", "slide_title": "2026 Priorities", "features": [{"icon": "🚀", "title": "Expand", "text": "Launch in 6 new markets"}, {"icon": "🔬", "title": "Innovate", "text": "3 new products"}]}
{"type": "cta", "slide_label": "Close", "slide_title": "Thank You", "slide_body": "Contact us at [email protected]", "cta_heading": "Company Name", "cta_text": "Transforming the Industry", "cta_button": "Learn More →"}
{"type": "code", "slide_label": "API", "slide_title": "Quick Start", "code_content": "curl -X POST https://api.example.com/v1/create", "code_label": "bash", "code_caption": "Create a new resource with a single API call."}
{"type": "video", "video_url": "https://example.com/clip.mp4"}
Video slides take over the full viewport (TikTok-style). Direct MP4 URLs are spliced into exported video at full quality — no screenshot fallback. TTS narration is skipped for video slides. YouTube/Vimeo URLs are NOT supported on video type — use them on other slide types where they render as embedded iframes.
{"type": "media", "slide_label": "Demo", "slide_title": "Product in Action", "image_url": "https://example.com/screenshot.png", "image_caption": "Dashboard view showing real-time analytics"}
For video embeds (YouTube/Vimeo):
{"type": "body", "slide_label": "Demo", "slide_title": "Watch the Demo", "video_url": "https://youtube.com/watch?v=abc123", "video_caption": "3-minute product walkthrough"}
logo_url — brand logo. Centered on hero slides, top-left on content slides. Use PNG with transparency.image_url — inline image with frame. Works on any slide type. Add image_caption for description.bg_image — full background image for any slide.image_url instead of icon for logo/image cards.12 presets available via list_themes. Set in the JSON:
{"theme": {"preset": "pharma-clean"}}
Override individual values:
{"theme": {"preset": "corporate-dark", "accent": "#e85d04"}}
| Use Case | Preset | Why |
|---|---|---|
| Pharma/Healthcare | pharma-clean | Clinical white + teal, professional |
| Corporate/Finance | corporate-dark | Navy + blue, authoritative |
| Internal Demo | default | Dark + orange, energetic |
| Client-Facing | corporate-light | White + blue, clean |
| Creative/Marketing | sunset or midnight | Bold colors, memorable |
| Data-Heavy | monochrome | Zero distraction, data focus |
Before creating a PAK, verify:
slide_label + slide_title (except video type)chart_title + chart_captionslide_callout used on data slides for key takeawayslogo_url uses PNG with transparency for best resultsview_url with the userapprove_deckapprove_deck triggers background video pre-caching (narration + encode)| Tool | Purpose |
|---|---|
list_catalogs | Browse 10 pre-built deck structures |
get_catalog | Get full deck JSON for a catalog (replace content, submit) |
list_templates | List legacy HTML templates (62+) |
list_themes | Browse 12 theme presets |
get_template | Get schema for a legacy template |
get_example_deck | Complete 12-slide reference with ALL slide types |
create_presentation | Create a PAK from JSON data |
export_slides | Export slides as PNGs |
export_pdf | Export as PDF |
export_video | Export as narrated 9:16 video (async) |
check_video_status | Poll video generation progress |
approve_deck | Finalize PAK + trigger video pre-cache |
npx claudepluginhub kw-smith/9x16 --plugin 9x16-pak-kwProvides the Slides framework's component library, design tokens, theme rules, storytelling formats, and tone/diversity guidelines for generating on-brand HTML slide decks.
Builds chrome-free, single-file HTML decks on a fixed 1440x810 canvas (scale-to-fit, PDF-like) for pitch, sales, launch, keynote, and all-hands presentations. Includes type-agnostic infrastructure and thin type packs.