migrate: consolidate all skills and agents from ~/clawd

- Moved 4 skills: browser-testing, claude-multimedia, exa-search, gravl-research - Moved 14 agents: architect, backend-dev, browser-tester, coach, data, flight, frontend-dev, gravl-pm, gravl-researcher, nutritionist, research, reviewer, staging, update - Created symlinks from ~/clawd/skills and ~/clawd/agents back to hub - Single source of truth in claude-agents-skills repo
2026-03-01 09:56:30 +01:00
parent 72d0676416
commit 8cc0dcb167
38 changed files with 5356 additions and 0 deletions
@@ -0,0 +1,346 @@
+# 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.