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):**

```bash
# 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):**
```bash
openclaw skills  # Shows nano-banana-pro ✓ ready
```

## Använda från Claude Code

### 1. Generera bilder med Nano Banana Pro

```javascript
// 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

```javascript
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

```javascript
// 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)

```javascript
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)

```javascript
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

```javascript
// 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

```javascript
// 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

```javascript
// 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

```bash
# 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

```bash
# 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

```bash
# .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

```bash
# 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

```javascript
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

```javascript
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

```bash
#!/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](/home/linuxbrew/.linuxbrew/lib/node_modules/openclaw/skills/nano-banana-pro/SKILL.md)
- [Gemini 3 Pro Image API](https://cloud.google.com/vertex-ai/docs/generative-ai/image/generate-images)
- [Google Veo Video API (Vertex AI)](https://cloud.google.com/vertex-ai/docs/generative-ai/video/generate-videos)
- [Google Cloud Setup](https://cloud.google.com/docs/authentication/application-default-credentials)
- [Design-system best practices](https://design.gravl.app)

## 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.