--- name: presentation_maker description: Enhanced Presentation Formatter Skill context: fork --- # Enhanced Presentation Formatter Skill ## Purpose Instantly transform raw inputs (meeting notes, research, summaries, specs, briefs, any markdown document) into polished, professional HTML presentations with rich visual hierarchy and color-coded content types. No questions asked - just format and deliver. ## When to Use User provides unstructured content or markdown document and wants it formatted for sharing, documentation, or presentation with enhanced visual appeal. ## Design System ### Visual Identity Premium, immersive aesthetic with multi-tone navy gradients, glassmorphism effects, color-coded content cards, and subtle glow accents. ### Color Palette | Element | Value | | ------------------- | ------------------------------------------------------------------------------------------ | | Background gradient | `linear-gradient(135deg, #0a1628 0%, #1a2744 25%, #0f2d4a 50%, #1a3a5c 75%, #0d1a2d 100%)` | | Primary text | `#ffffff` | | Secondary text | `rgba(255, 255, 255, 0.85)` | | Muted text | `rgba(255, 255, 255, 0.5)` | | Accent blue | `#60a5fa` | | Accent blue light | `#93c5fd` | | Success green | `#34d399` | | Warning amber | `#fbbf24` | | Error red | `#f87171` | | Special purple | `#a78bfa` | | Card background | `linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%)` | | Card border | `rgba(255, 255, 255, 0.08)` | ### Typography - **Font:** `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif` - **Title:** 2.75rem, 700 weight, gradient text fill, tight letter-spacing (-0.02em) - **Section headers:** 0.85rem, 600 weight, uppercase, letter-spacing (0.1em), accent color - **Card headers:** 1.15rem, 600 weight, color varies by card type - **Subheaders:** 1rem, 500 weight, light blue (#93c5fd) - **Body:** 1rem, 400 weight, 1.7 line-height ### Design Principles - Rounded corners (12px border-radius) - Gradient backgrounds on cards - Backdrop blur for glassmorphism effect - Top gradient line on cards for depth - Radial glow effects on header and dividers - Color-coded cards based on content type - Status/priority badges with gradient backgrounds - No emojis - use minimal symbols only (`→`, `•`) --- ## Card Type Selection Rules **Automatically select card type based on content:** | Card Type | Use When Content Contains | | ------------------------------- | ------------------------------------------------------------------------------------- | | `.card` (Blue) | General information, descriptions, explanations, default for most content | | `.feature-card` (Green) | Features, capabilities, benefits, strengths, positives, what's included, deliverables | | `.warning-card` (Amber) | Warnings, cautions, important notes, compliance, security, restrictions, limitations | | `.error-card` (Red) | Errors, critical issues, blockers, risks, what NOT to do, failures | | `.special-card` (Purple) | Future features, AI-related, advanced topics, "coming soon", roadmap items | | `.highlight-card` (Blue accent) | Key takeaways, summaries, executive summaries, conclusions, TL;DR | | `.role-card` (With badge) | People, roles, personas, team members, user types | **Keyword triggers for card selection:** - **Green (feature-card):** "feature", "capability", "benefit", "advantage", "strength", "include", "deliver", "provide", "offer", "support" - **Amber (warning-card):** "warning", "caution", "important", "note", "compliance", "security", "restrict", "limit", "require", "must" - **Red (error-card):** "error", "critical", "risk", "block", "fail", "don't", "never", "avoid", "issue", "problem" - **Purple (special-card):** "future", "coming soon", "roadmap", "AI", "planned", "phase 2", "later", "advanced", "vision" - **Role card:** "role", "user", "persona", "team", "member", "admin", "manager", "owner" --- ## Diagram Guidelines ### Mermaid.js Theme Configuration Always use dark theme with this configuration: ```javascript %%{init: { 'theme': 'dark', 'themeVariables': { 'primaryColor': '#1e3a5f', 'primaryTextColor': '#ffffff', 'primaryBorderColor': '#60a5fa', 'lineColor': '#60a5fa', 'secondaryColor': '#0f2744', 'tertiaryColor': '#162d50', 'background': '#0a1628', 'mainBkg': '#1e3a5f', 'secondBkg': '#0f2744', 'border1': '#3b82f6', 'border2': '#1e40af', 'arrowheadColor': '#60a5fa', 'fontFamily': 'Inter, sans-serif', 'fontSize': '14px', 'textColor': '#ffffff', 'nodeTextColor': '#ffffff' } }}%% ``` #### Mermaid Color Palette (use these only) | Purpose | Color | Use For | | ---------------- | --------- | ---------------------------- | | Primary nodes | `#1e3a5f` | Main elements, key steps | | Secondary nodes | `#0f2744` | Supporting elements | | Tertiary nodes | `#162d50` | Groupings, subprocesses | | Accent/highlight | `#3b82f6` | Important nodes, decisions | | Success states | `#059669` | Completed, approved, success | | Warning states | `#d97706` | Caution, pending | | Error states | `#dc2626` | Errors, blocked | | Borders/lines | `#60a5fa` | All connections | | Text | `#ffffff` | All labels | ### Chart.js Configuration Always use dark theme configuration: ```javascript const darkTheme = { backgroundColor: 'transparent', scales: { x: { grid: { color: 'rgba(255, 255, 255, 0.08)', borderColor: 'rgba(255, 255, 255, 0.15)' }, ticks: { color: 'rgba(255, 255, 255, 0.7)', font: { family: 'Inter' } }, }, y: { grid: { color: 'rgba(255, 255, 255, 0.08)', borderColor: 'rgba(255, 255, 255, 0.15)' }, ticks: { color: 'rgba(255, 255, 255, 0.7)', font: { family: 'Inter' } }, }, }, plugins: { legend: { labels: { color: 'rgba(255, 255, 255, 0.85)', font: { family: 'Inter', size: 12 } } }, tooltip: { backgroundColor: '#1e3a5f', titleColor: '#ffffff', bodyColor: 'rgba(255, 255, 255, 0.85)', borderColor: '#60a5fa', borderWidth: 1, }, }, } ``` #### Chart.js Color Palette ```javascript const chartColors = { primary: ['#60a5fa', '#3b82f6', '#1e40af', '#1e3a5f'], extended: ['#60a5fa', '#34d399', '#a78bfa', '#fbbf24', '#f87171'], backgrounds: [ 'rgba(96, 165, 250, 0.2)', 'rgba(52, 211, 153, 0.2)', 'rgba(167, 139, 250, 0.2)', 'rgba(251, 191, 36, 0.2)', ], borders: ['#60a5fa', '#34d399', '#a78bfa', '#fbbf24'], } ``` --- ## HTML Template ```html [Document Title]

[Document Title]

[Subtitle or Context]

Key Takeaways
Section Title

Card Title

Content goes here...

``` --- ## Section Components ### Key Takeaways (always include if applicable) ```html
Key Takeaways
``` ### Standard Card (Blue) ```html

Card Title

Content here...

``` ### Feature Card (Green) ```html

Feature Name

Description...

``` ### Warning Card (Amber) ```html

Important Note

Description...

``` ### Error Card (Red) ```html

Risk / Issue

Description...

``` ### Special Card (Purple) ```html

Future Feature

Description...

``` ### Role Card with Badge ```html
Role Type

Role Name

Description...

``` ### Alert Card (Red left border) ```html
Critical

Critical information...

``` ### Stats Row ```html
47
Metric
``` ### Flow Steps ```html
1

Step Title

Step description

``` ### Technical Requirements Box ```html
Technical Requirements
``` ### Data Table ```html
Column 1 Column 2
Data Data
``` ### Timeline ```html
1

Phase Name

Description

``` ### Action Items ```html
@Owner Task description
``` ### Quote ```html
"Important statement..." - Person Name
``` ### Badges ```html P0 P1 P2 Success Warning Error ``` ### Grids ```html
...
...
...
``` --- ## Workflow 1. **Receive raw content** (markdown, notes, any document) 2. **Auto-analyze:** - Identify document type (meeting, research, spec, summary, etc.) - Extract key points, decisions, conclusions for Key Takeaways - Identify numeric data for stat cards - Find action items, owners, deadlines - Locate quotes or notable statements - Detect tables, lists, hierarchical content 3. **Auto-structure:** - Title from main topic or # heading - Subtitle from date, version, or context - Key Takeaways from conclusions/decisions - Group related content into sections - **Auto-select card types based on content keywords** 4. **Generate HTML** using appropriate components 5. **Add diagrams** if data warrants visualization (use dark theme) 6. **Output** clean, immersive presentation --- ## Content Transformation Rules ### Meeting Notes - **Title:** "[Topic] - Meeting Summary" - **Key Takeaways:** Decisions made, action items summary - **Sections:** Discussion topics grouped - **Components:** Action items with owners, timeline for next steps, quotes for notable statements - **Card types:** Use warning-card for blockers, feature-card for agreements ### Research/Analysis - **Title:** "[Subject] Analysis" - **Key Takeaways:** Main findings, recommendations - **Sections:** Findings by category - **Components:** Stats row for metrics, tables for comparisons, charts for trends - **Card types:** Use feature-card for opportunities, warning-card for risks, error-card for threats ### Project Summaries - **Title:** "[Project Name] Overview" - **Key Takeaways:** Current status, key milestones - **Sections:** By workstream, phase, or team - **Components:** Timeline for milestones, stats for progress, role-cards for team - **Card types:** Use feature-card for completed items, warning-card for at-risk items ### Technical Specs / Documentation - **Title:** "[Feature/System] Specification" - **Key Takeaways:** Core requirements, scope - **Sections:** Components, integrations, requirements - **Components:** Flow steps for processes, tech-req boxes, tables for schemas/endpoints - **Card types:** Use feature-card for features, warning-card for constraints, special-card for future work ### Product/Feature Lists - **Title:** "[Product] Features" - **Key Takeaways:** Core value proposition - **Sections:** By feature category or user type - **Components:** Role-cards for user types, feature-cards for capabilities - **Card types:** Use feature-card for features, warning-card for limitations, special-card for roadmap ### Status Reports - **Title:** "[Project] Status Report" - **Key Takeaways:** Overall status, blockers - **Sections:** By workstream or milestone - **Components:** Stats for metrics, timeline for schedule, action items - **Card types:** Use feature-card for green items, warning-card for yellow, error-card for red --- ## DO's - Auto-format without asking questions - Include Benmore logo - Extract key takeaways from content - **Auto-select card types based on content keywords** - Use gradient backgrounds and glow effects - Use stat cards with bottom accent bars for numbers - Use flow steps for sequential processes - Include tech-req boxes for technical content - Use badges for priorities and status - Preserve ALL information from the original document - Break walls of text into logical sections ## DON'Ts - Don't ask questions - just format - Don't use emojis - Don't use colors outside the palette - Don't add content not in the original - Don't skip the key takeaways section - Don't make walls of text - break into sections - Don't use rainbow colors in diagrams - Don't use more than 5 colors in any visualization - Don't use the wrong card type for content (follow keyword rules) ## Output Single HTML file with: - Inter font from Google Fonts - Multi-tone navy gradient background (fixed) - Glassmorphism card effects - **Color-coded content cards (auto-selected)** - Gradient stat cards with accent bars - Flow step components for processes - Technical requirements boxes - Priority badges - Radial glow effects - Dark-themed diagrams and charts - All content organized and formatted - Print styles included - Mobile responsive