fluxa-agent-payment/create-ppt-with-nano-banana
skills/create-ppt-with-nano-banana/SKILL.md
Create PowerPoint presentations with AI-generated images. Use when user wants to create a presentation, make slides, build a pptx, or needs AI images for slides using x402 payments.
development
Updated Apr 5, 2026
$ install --global
skillsauthnpx skillsauth add fluxa-agent-payment/skills create-ppt-with-nano-bananaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 2:00 AM8.6s17 files scanned
SKILL.md
- name:
- create-ppt-with-nano-banana
- description:
- Create PowerPoint presentations with AI-generated images. Use when user wants to create a presentation, make slides, build a pptx, or needs AI images for slides using x402 payments.
Create PowerPoint Presentation with Nano Banana (x402)
Create visually appealing PowerPoint presentations by converting styled HTML slides to PPTX format using Playwright and PptxGenJS, with AI-generated images via the Nano Banana API using x402 payments.
Overview
This skill converts HTML slides to PowerPoint with:
- Precise positioning and styling
- Dark theme with modern color palette
- Support for shapes, text, images, and diagrams
- Automatic validation of slide dimensions and content placement
- AI-generated images (optional) using Nano Banana API with x402 micropayments (0.1 USDC per image)
Behavior
When this skill is triggered:
- Get presentation topic from the user if not specified
- Ask if they want AI-generated images using
AskUserQuestion:- "Do you want to generate AI images with Nano Banana? (0.1 USDC per image via x402)"
- Options: "Yes, generate images" / "No, use solid colors only"
- If AI images requested:
- Make x402 payment: see
./fluxa-wallet/x402-payment.md - Call Nano Banana API with X-Payment header
- Download and save images to slides directory
- Make x402 payment: see
- Create HTML slides using templates
- Build PPTX using html2pptx.js
- Open the presentation for the user
Agent Config
The FluxA Wallet agent JWT is stored at:
~/.fluxa-ai-wallet-mcp/.agent-config.json
This config contains the agent_id, token, and JWT needed for x402 payment authorization.
AI Image Generation via x402
When you need to generate images for slides, use the Nano Banana API with x402 payment.
API Details
- Endpoint:
https://proxy-monetize.fluxapay.xyz/nano-banana/gen-image - Method: POST
- Price: 0.1 USDC per image (Base network)
- Payment: x402 protocol with FluxA Wallet
Request Format
{
"contents": [{
"parts": [{"text": "Your image generation prompt here"}]
}]
}
Response Format
The API returns a Gemini-style response with the image either as:
- Inline base64:
response.candidates[0].content.parts[1].inlineData.data - URL reference:
response.candidates[0].content.parts[1].inlineData.url
Example Flow
- Get payment signature from FluxA Wallet API
- Call Nano Banana API with X-Payment header
- Extract image from response (base64 or URL)
- Save image to slides directory
- Reference image in HTML slide
Image Prompt Templates
Slide Background:
Create an abstract futuristic background image for a presentation slide.
Theme: [TOPIC]
Style: Dark theme with #0f0f1a background color.
Elements: Abstract flowing digital elements, subtle geometric patterns, particles of light.
Color accents: Use hints of #667eea, #00d4ff, and #764ba2.
Mood: Professional, modern technology, clean and elegant.
The image should be subtle enough to work as a background with text overlaid on top.
Dimensions: Wide format suitable for a 16:9 presentation slide.
No text, logos, or words in the image.
Icon/Illustration:
Create a minimalist icon representing: [CONCEPT].
Style: Clean, professional, suitable for a business presentation.
Background: Transparent or dark (#0f0f1a).
Colors: Use blues (#667eea, #00d4ff) and purples (#764ba2) on dark background.
Size: Square format, simple and recognizable.
No text in the image.
HTML Slide Requirements
Dimensions (16:9 format)
body {
margin: 0;
padding: 0;
width: 720pt;
height: 405pt;
}
Critical Rules
- Text must be wrapped - All text MUST be in
<p>,<h1>-<h6>,<ul>, or<ol>tags - Borders on divs only - Backgrounds, borders, shadows only work on
<div>elements - No CSS gradients - Use solid colors or pre-rendered PNG images
- Bottom margin - Keep text at least 36pt (0.5") from bottom edge
- Safe fonts only - Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, Tahoma
Using Generated Images in Slides
<body>
<!-- Background image with opacity -->
<img class="background-image" src="background.png"
style="position:absolute; top:0; left:0; width:720pt; height:405pt; opacity:0.6;" />
<!-- Content on top -->
<div class="content">
<h1 class="title">Your Title</h1>
</div>
</body>
Color Palette
/* Dark Theme */
--bg-primary: #0f0f1a;
--bg-card: rgba(255, 255, 255, 0.05);
/* Accents */
--accent-blue: #667eea;
--accent-cyan: #00d4ff;
--accent-purple: #764ba2;
/* Text */
--text-white: #ffffff;
--text-light: #d0d0d0;
--text-muted: #a0a0b0;
Available Templates
title.html- Title slide with tagline, title, subtitle, and descriptionbullets.html- Bullet point list (5 items)two-columns.html- Side-by-side comparison with headerscards-2x2.html- 2x2 card grid layoutcards-3x2.html- 3x2 card grid layout (6 cards)stats.html- Large metrics display (3 stats)section.html- Section divider with numberarchitecture.html- Layered architecture diagram (4 layers)features.html- Feature list with accent bars (6 features)flow.html- Step-by-step process flow (4 steps with arrows)
Usage
# Install dependencies
npm install pptxgenjs playwright sharp
# Create slides directory with HTML files
mkdir slides
# Generate presentation
node scripts/create-pptx.js
# Open result (macOS)
open output.pptx
Files
scripts/html2pptx.js- Core HTML-to-PPTX converterscripts/create-pptx.js- Build scripttemplates/*.html- Slide templatesSKILL.md- This documentation
Related Skills
fluxa-agent-payment/fluxa-agent-wallet
tools
VerifiedTrustedCommunity
FluxA Agent Wallet integration via CLI. Enables agents to make x402 payments for paid APIs, send USDC payouts to any wallet, and create payment links to receive payments. Use when the user asks about crypto payments, x402, USDC transfers, payment links, or interacting with the FluxA Agent Wallet.
SKILL.mdUpdated Apr 5, 2026
fluxa-agent-payment/video-presentation-maker
development
VerifiedTrustedCommunity
AI-powered high-quality PPT image and video generation with intelligent transitions and interactive playback. Pay-per-use model, no API key configuration required.
SKILL.mdUpdated Apr 5, 2026
fluxa-agent-payment/trading-plan-generator
testing
VerifiedTrustedCommunity
Generate comprehensive trading plans with risk management, position sizing, entry/exit strategies, and performance tracking to trade with discipline and consistency.
SKILL.mdUpdated Apr 5, 2026
fluxa-agent-payment/technical-walkthrough-diagram
development
VerifiedTrustedCommunity
When a user requests a technical diagram, automatically fetch and organize key information from user-specified documentation, GitHub repositories, or URLs, generate a “how-it-works” diagram, and produce a post explaining how the project works (suitable for a Twitter thread or a blog).
SKILL.mdUpdated Apr 5, 2026