claude-agents-skills/skills/claude-multimedia/SKILL.md

Claude Multimedia Skill

Generera bilder (Gemini 3 Pro Image/Nano Banana Pro) och videor (Veo) direkt från Claude Code.

Installation

Google Cloud Setup (för Veo videogenerering):

# 1. Installera Google Cloud CLI
curl https://sdk.cloud.google.com | bash
exec -l $SHELL
gcloud init

# 2. Login
gcloud auth application-default login

# 3. Enable APIs
gcloud services enable videogeneration.googleapis.com
gcloud services enable aiplatform.googleapis.com

# 4. Set projekt
export GOOGLE_CLOUD_PROJECT=$(gcloud config get-value project)
export GOOGLE_APPLICATION_CREDENTIALS=~/.config/gcloud/application_default_credentials.json

Nano Banana Pro (redan installerat):

openclaw skills  # Shows nano-banana-pro ✓ ready

Använda från Claude Code

1. Generera bilder med Nano Banana Pro

// Image generation via CLI
const { execSync } = require('child_process');

// Enkelt sätt
function generateImage(prompt, filename) {
  const cmd = `nano-banana-pro generate "${prompt}" --output ${filename}`;
  execSync(cmd);
  return filename;
}

// Exempel
const imageFile = generateImage(
  'Beautiful Gravl app dashboard with dark theme, animated stat cards, gradient background',
  'gravl-dashboard.png'
);
console.log('Image created:', imageFile);

2. Generera videor med Veo

function generateVideo(prompt, filename, duration = 5) {
  const cmd = `veo generate "${prompt}" --output ${filename} --duration ${duration}`;
  execSync(cmd);
  return filename;
}

// Exempel: Animerad workout-demo
const videoFile = generateVideo(
  'User doing a workout in Gravl app: clicking exercises, adding sets, using rest timer',
  'gravl-workout-demo.mp4',
  10
);

3. Batch-generering

// Batch av bilder för Gravl design-system
const designs = [
  { name: 'login-page', prompt: 'Gravl login page with logo, email/password inputs, gradient background' },
  { name: 'dashboard', prompt: 'Gravl dashboard with stat cards, calendar, upcoming workouts' },
  { name: 'workout', prompt: 'Gravl workout page with exercise cards, rest timer, complete button' }
];

designs.forEach(({ name, prompt }) => {
  generateImage(prompt, `designs/${name}.png`);
});

API-stil (om CLI inte fungerar)

Via gemini API (Nano Banana Pro)

const Anthropic = require('@anthropic-ai/sdk');

async function generateImageViaAPI(prompt) {
  const client = new Anthropic();
  
  const message = await client.messages.create({
    model: "google/gemini-3-pro-vision",
    max_tokens: 1024,
    messages: [
      {
        role: "user",
        content: [
          {
            type: "text",
            text: `Generate an image of: ${prompt}`
          }
        ]
      }
    ]
  });
  
  return message.content[0];
}

// Använd det
const image = await generateImageViaAPI('Gravl app with dark theme and orange accents');

Via Google Veo API (Vertex AI)

const { VideoGenerationServiceClient } = require('@google-cloud/videogeneration');

async function generateVideoWithGoogleVeo(prompt, duration = 10) {
  const client = new VideoGenerationServiceClient({
    projectId: process.env.GOOGLE_CLOUD_PROJECT,
    keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS
  });
  
  const request = {
    parent: `projects/${process.env.GOOGLE_CLOUD_PROJECT}/locations/us-central1`,
    videoGenerationConfig: {
      prompt: prompt,
      duration: `${duration}s`,
      resolution: '1080p'
    }
  };
  
  const operation = await client.generateVideo(request);
  const [response] = await operation.promise();
  
  return response.videoUri;
}

// Använd det
const videoUri = await generateVideoWithGoogleVeo(
  'Gravl fitness app demo: user logs workout with sets and reps, uses rest timer',
  10
);

Graviering-use-cases

1. Design-system bilder

// Gravl design-system gallery
const components = [
  { type: 'button', prompt: 'Gravl button component in orange (#ff6b35), dark background' },
  { type: 'card', prompt: 'Gravl stat card component with gradient, animation effect' },
  { type: 'input', prompt: 'Gravl input field with focus state, validation states' }
];

for (const { type, prompt } of components) {
  generateImage(prompt, `design-system/${type}.png`);
}

2. Marketing-videor

// Workout demo-video
generateVideo(
  'Gravl fitness app demo: user opens app, selects workout, logs exercise with sets/reps, waits for rest timer, completes workout, sees progress stats',
  'gravl-demo.mp4',
  15
);

// Feature showcase
generateVideo(
  'Gravl phase-3 features: beautiful login screen with logo, dashboard with animated stat cards, workout page with rest timer countdown',
  'gravl-features-showcase.mp4',
  20
);

3. Landing-page assets

// Hero image för gravl.com
generateImage(
  'Hero image for fitness app: user in gym with phone showing Gravl app, dark modern aesthetic, orange and blue accents, 1920x1080',
  'hero-image.png'
);

// Features section
generateImage(
  'Illustration of workout logging: hand touching phone screen, exercise cards, strength progression',
  'feature-logging.png'
);

generateImage(
  'Illustration of rest timer: clock animation, countdown, energy/recovery visualization',
  'feature-timer.png'
);

Integration med PM/Staging

Använd från gravl-pm

# PM spawnar en rendering-agent
sessions_spawn:
  agentId: claude-code
  task: "Använd claude-multimedia skill för att:
         1. Generera 3 design-system bilder för Gravl
         2. Skapa en 10-sekunders demo-video av workout-flödet
         
         Använd nano-banana-pro för bilder, veo för video.
         Spara till /workspace/gravl/marketing/
         Rapportera filer när klart."
  timeoutSeconds: 300

Innan staging-merge

# Skapa automatiska marketing-assets
exec pty:true workdir:/workspace/gravl command:"claude 'Använd claude-multimedia för:
- 5 design-system component-bilder
- 1 workout demo-video (15s)
- 1 feature showcase-video (20s)
Spara till marketing/assets/'"

Konfiguration

Environment variables

# .env
export GOOGLE_APPLICATION_CREDENTIALS=~/.config/gcloud/application_default_credentials.json
export GOOGLE_CLOUD_PROJECT="your-project-id"
export GRAVL_MARKETING_DIR="/workspace/gravl/marketing"

npx-kommando

# Lägg till i package.json scripts
"scripts": {
  "generate:images": "node scripts/generate-images.js",
  "generate:videos": "node scripts/generate-videos.js",
  "generate:all": "npm run generate:images && npm run generate:videos"
}

Advanced: Prompt-templates

Design-system prompt template

const designSystemPrompt = (component, style) => `
Gravl fitness app ${component} component.
Style: ${style}
Design: Dark theme (#0a0a0f), Orange accent (#ff6b35), 
Modern minimalist, Mobile-first, 
High contrast, Professional
Resolution: 1280x720px
`;

// Använd det
generateImage(designSystemPrompt('stat-card', 'animated'), 'stat-card.png');

Video prompt template

const videoPrompt = (scenario, duration) => `
Gravl fitness app: ${scenario}
Style: Modern, smooth animations, dark theme with orange accents
Duration: ${duration}s
Quality: 1080p cinematic
Music: subtle, motivational
`;

// Använd det
generateVideo(
  videoPrompt('user completes workout and sees achievement celebration', 10),
  'celebration-demo.mp4'
);

Batch-verktygScript

#!/bin/bash
# scripts/generate-all-assets.sh

mkdir -p marketing/images
mkdir -p marketing/videos

# Generera design-system
echo "Generating design-system images..."
node scripts/generate-images.js

# Generera videos
echo "Generating demo videos..."
node scripts/generate-videos.js

# Zip allt
cd marketing
zip -r gravl-assets.zip images/ videos/
echo "✅ Assets packaged: gravl-assets.zip"

Felsökning

Problem	Lösning
Command not found: nano-banana-pro	openclaw clawhub install nano-banana-pro
GEMINI_API_KEY not set	export GEMINI_API_KEY=your-key
VEO rate limit	Använd queue/batch-mode, vänta mellan requests
Timeout på video-gen	Öka timeoutSeconds i PM-spawning (30+ min för long videos)

Resurser

• Nano Banana Pro Skill
• Gemini 3 Pro Image API
• Google Veo Video API (Vertex AI)
• Google Cloud Setup
• Design-system best practices

Tips

1. Cache images — Spara genererade bilder för att undvika duplikat-API-calls
2. Use templates — Standardisera prompts för konsistent stil
3. Batch processing — Köra flera genereringar i parallell
4. Version tracking — Lagra assets i git-lfs för stora filer
5. Approval flow — Spara till staging-folder, kolla innan prod

---

Skapad för Gravl project med focus på marketing-assets och design-system visualisering.