@su-record/vibe 2.9.23 → 2.9.24

package/skills/brand-assets/SKILL.md

@@ -1,147 +1,147 @@
----
-name: brand-assets
-tier: standard
-description: "Auto-generate app icons (iOS/Android/PWA), favicons, and OG images from SPEC brand information using Gemini Image API. Use when the project needs visual brand assets, when user mentions 'icon', 'favicon', 'logo', or 'brand assets', or when a SPEC defines brand colors/identity but no assets exist yet. Outputs multiple sizes and formats ready for deployment. Not for complex illustration or marketing graphics — focused on app identity assets."
-triggers: [icon, favicon, brand, logo, app icon, branding, assets]
-priority: 65
----
-# Brand Assets Generation Skill
-
-Auto-generate app icons and favicons based on SPEC brand information.
-
-## When to Use
-
-- First-time project setup with `/vibe.run`
-- When SPEC contains brand/design information
-- When Gemini API key is configured
-
-## Prerequisites
-
-- Gemini API key configured (`vibe gemini key <key>`)
-- SPEC with brand context (app name, colors, style)
-
-## Generated Assets
-
-### Web
-- `favicon.ico` (16x16, 32x32, 48x48)
-- `favicon-16x16.png`
-- `favicon-32x32.png`
-- `apple-touch-icon.png` (180x180)
-- `android-chrome-192x192.png`
-- `android-chrome-512x512.png`
-
-### Mobile (if applicable)
-- iOS: `AppIcon.appiconset/` with all sizes
-- Android: `mipmap-*/` adaptive icons
-
-## SPEC Brand Section
-
-For best results, include brand info in your SPEC:
-
-```yaml
-<context>
-Brand:
-  - App Name: MyApp
-  - Primary Color: #2F6BFF
-  - Style: Modern, minimal, flat design
-  - Icon Concept: Abstract geometric shape representing connectivity
-</context>
-```
-
-## Generation Flow
-
-```
-SPEC Brand Info
-      |
-      v
-Extract: name, colors, style keywords
-      |
-      v
-Generate Prompt: "App icon for [name], [style], [colors]..."
-      |
-      v
-Gemini Image API (gemini-2.5-flash-image)
-      |
-      v
-Resize & Convert: All platform sizes
-      |
-      v
-Save to: public/ or assets/
-```
-
-## Auto-Trigger Conditions
-
-1. First `/vibe.run` execution (no existing icons)
-2. SPEC contains brand/design context
-3. Gemini API key is available
-4. `--generate-icons` flag passed
-
-## Skip Conditions
-
-- Icons already exist (unless `--regenerate-icons`)
-- No brand info in SPEC
-- Gemini API not configured
-
-## Prompt Template
-
-```
-Create a modern app icon for "[APP_NAME]".
-
-Style: [STYLE_KEYWORDS]
-Primary color: [PRIMARY_COLOR]
-Design: Minimalist, professional, suitable for mobile app
-Format: Square, clean edges, simple recognizable shape
-Background: Solid color or subtle gradient
-
-Requirements:
-- Works at small sizes (16x16 to 512x512)
-- No text or letters
-- Single focal element
-- High contrast for visibility
-```
-
-## Manual Usage
-
-```bash
-# [LLM_SCRIPT] = {{CORE_PATH}}/hooks/scripts/llm-orchestrate.js
-# Generate via llm-orchestrate (when Gemini configured)
-node "[LLM_SCRIPT]" gemini image "App icon for MyApp, primary color #2F6BFF, square format 1:1, simple recognizable design, works well at small sizes, no text or letters, solid or gradient background, modern minimalist" --output "./public/app-icon.png"
-```
-
-## Integration with /vibe.run
-
-During Phase 1 (Setup), if brand assets don't exist:
-
-1. Parse SPEC for brand context
-2. Generate icon via Gemini Image API
-3. Create all size variants
-4. Place in appropriate directories
-5. Update manifest files if needed
-
-## Fallback Strategy
-
-If Gemini Image fails:
-1. Generate text-based monogram icon (first letter)
-2. Use project primary color as background
-3. Create simple geometric placeholder
-
-## Output Structure
-
-```
-public/
-  favicon.ico
-  favicon-16x16.png
-  favicon-32x32.png
-  apple-touch-icon.png
-  android-chrome-192x192.png
-  android-chrome-512x512.png
-  site.webmanifest
-```
-
-## Done Criteria (K4)
-
-- [ ] All required sizes generated (16x16 through 512x512)
-- [ ] Icons work at small sizes (recognizable at 16x16)
-- [ ] No text/letters in icon (illegible at small sizes)
-- [ ] `site.webmanifest` updated with icon paths
-- [ ] Fallback generated if Gemini API unavailable
+---
+name: brand-assets
+tier: standard
+description: "Auto-generate app icons (iOS/Android/PWA), favicons, and OG images from SPEC brand information using Gemini Image API. Use when the project needs visual brand assets, when user mentions 'icon', 'favicon', 'logo', or 'brand assets', or when a SPEC defines brand colors/identity but no assets exist yet. Outputs multiple sizes and formats ready for deployment. Not for complex illustration or marketing graphics — focused on app identity assets."
+triggers: [icon, favicon, brand, logo, app icon, branding, assets]
+priority: 65
+---
+# Brand Assets Generation Skill
+
+Auto-generate app icons and favicons based on SPEC brand information.
+
+## When to Use
+
+- First-time project setup with `/vibe.run`
+- When SPEC contains brand/design information
+- When Gemini API key is configured
+
+## Prerequisites
+
+- Gemini API key configured (`vibe gemini key <key>`)
+- SPEC with brand context (app name, colors, style)
+
+## Generated Assets
+
+### Web
+- `favicon.ico` (16x16, 32x32, 48x48)
+- `favicon-16x16.png`
+- `favicon-32x32.png`
+- `apple-touch-icon.png` (180x180)
+- `android-chrome-192x192.png`
+- `android-chrome-512x512.png`
+
+### Mobile (if applicable)
+- iOS: `AppIcon.appiconset/` with all sizes
+- Android: `mipmap-*/` adaptive icons
+
+## SPEC Brand Section
+
+For best results, include brand info in your SPEC:
+
+```yaml
+<context>
+Brand:
+  - App Name: MyApp
+  - Primary Color: #2F6BFF
+  - Style: Modern, minimal, flat design
+  - Icon Concept: Abstract geometric shape representing connectivity
+</context>
+```
+
+## Generation Flow
+
+```
+SPEC Brand Info
+      |
+      v
+Extract: name, colors, style keywords
+      |
+      v
+Generate Prompt: "App icon for [name], [style], [colors]..."
+      |
+      v
+Gemini Image API (gemini-2.5-flash-image)
+      |
+      v
+Resize & Convert: All platform sizes
+      |
+      v
+Save to: public/ or assets/
+```
+
+## Auto-Trigger Conditions
+
+1. First `/vibe.run` execution (no existing icons)
+2. SPEC contains brand/design context
+3. Gemini API key is available
+4. `--generate-icons` flag passed
+
+## Skip Conditions
+
+- Icons already exist (unless `--regenerate-icons`)
+- No brand info in SPEC
+- Gemini API not configured
+
+## Prompt Template
+
+```
+Create a modern app icon for "[APP_NAME]".
+
+Style: [STYLE_KEYWORDS]
+Primary color: [PRIMARY_COLOR]
+Design: Minimalist, professional, suitable for mobile app
+Format: Square, clean edges, simple recognizable shape
+Background: Solid color or subtle gradient
+
+Requirements:
+- Works at small sizes (16x16 to 512x512)
+- No text or letters
+- Single focal element
+- High contrast for visibility
+```
+
+## Manual Usage
+
+```bash
+# [LLM_SCRIPT] = {{CORE_PATH}}/hooks/scripts/llm-orchestrate.js
+# Generate via llm-orchestrate (when Gemini configured)
+node "[LLM_SCRIPT]" gemini image "App icon for MyApp, primary color #2F6BFF, square format 1:1, simple recognizable design, works well at small sizes, no text or letters, solid or gradient background, modern minimalist" --output "./public/app-icon.png"
+```
+
+## Integration with /vibe.run
+
+During Phase 1 (Setup), if brand assets don't exist:
+
+1. Parse SPEC for brand context
+2. Generate icon via Gemini Image API
+3. Create all size variants
+4. Place in appropriate directories
+5. Update manifest files if needed
+
+## Fallback Strategy
+
+If Gemini Image fails:
+1. Generate text-based monogram icon (first letter)
+2. Use project primary color as background
+3. Create simple geometric placeholder
+
+## Output Structure
+
+```
+public/
+  favicon.ico
+  favicon-16x16.png
+  favicon-32x32.png
+  apple-touch-icon.png
+  android-chrome-192x192.png
+  android-chrome-512x512.png
+  site.webmanifest
+```
+
+## Done Criteria (K4)
+
+- [ ] All required sizes generated (16x16 through 512x512)
+- [ ] Icons work at small sizes (recognizable at 16x16)
+- [ ] No text/letters in icon (illegible at small sizes)
+- [ ] `site.webmanifest` updated with icon paths
+- [ ] Fallback generated if Gemini API unavailable

package/skills/brand-assets/rubrics/asset-checklist.md

@@ -1,98 +1,98 @@
-# Required Brand Assets Checklist
-
-Complete this checklist before shipping. Each missing item is a gap in brand completeness.
-
----
-
-## Tier 1 — Blocking (must exist before launch)
-
-### Favicon & App Icons
-
-- [ ] `favicon.ico` — 16×16, 32×32, 48×48 combined
-- [ ] `favicon-16x16.png`
-- [ ] `favicon-32x32.png`
-- [ ] `apple-touch-icon.png` — 180×180
-- [ ] `android-chrome-192x192.png`
-- [ ] `android-chrome-512x512.png`
-- [ ] `site.webmanifest` — references all icon paths, correct `name` and `theme_color`
-
-### Logo
-
-- [ ] Primary logo (SVG) — color version
-- [ ] Primary logo (SVG) — white/reversed version for dark backgrounds
-- [ ] Icon-only version (SVG) — usable at 32px minimum
-
----
-
-## Tier 2 — Important (should exist before public launch)
-
-### Open Graph / Social Sharing
-
-- [ ] `og-image.png` — 1200×630px, includes logo and product name
-- [ ] `twitter-image.png` — 1200×600px or reuse OG image
-- [ ] OG meta tags in `<head>`: `og:title`, `og:description`, `og:image`, `og:url`
-- [ ] Twitter card meta tags: `twitter:card`, `twitter:image`
-
-### iOS / PWA
-
-- [ ] `apple-touch-icon.png` correctly linked in `<head>`
-- [ ] `maskable_icon.png` — 512×512, safe zone within inner 80% (for Android adaptive icons)
-- [ ] PWA manifest includes `purpose: "any maskable"` entry
-- [ ] `theme-color` meta tag set to brand primary color
-
----
-
-## Tier 3 — Complete (production-quality brand presence)
-
-### Email Assets
-
-- [ ] Email header logo — 300×80px max, hosted URL (not local path)
-- [ ] Email footer logo — monochrome version
-
-### Documentation / Marketing
-
-- [ ] Logo usage guidelines documented
-- [ ] Color codes documented (HEX, RGB, HSL)
-- [ ] Font names and weights documented
-- [ ] Do/don't logo usage examples
-
----
-
-## Quality Checks
-
-### Icon Quality
-
-- [ ] Icon is recognizable at 16×16 (no fine details lost)
-- [ ] No text or letters in icon (illegible at small sizes)
-- [ ] Single focal element (not a scene or complex composition)
-- [ ] Works on both white and dark backgrounds
-- [ ] Consistent visual weight with similar products in the app's ecosystem
-
-### File Formats
-
-- [ ] SVG files are clean (no Figma/Illustrator junk metadata)
-- [ ] PNG files are optimized (use `pngcrush` or equivalent)
-- [ ] ICO file contains all three sizes (16, 32, 48)
-- [ ] All files referenced in manifest actually exist
-
-### Colors in Assets
-
-- [ ] Icon colors match brand color palette exactly (no approximations)
-- [ ] OG image background uses brand color, not generic gray
-- [ ] Logo SVG uses `currentColor` or hardcoded brand values (never browser defaults)
-
----
-
-## Asset Inventory
-
-| Asset | File Path | Size | Format | Status |
-|-------|-----------|------|--------|--------|
-| Primary logo | {{LOGO_PATH}} | — | SVG | {{STATUS}} |
-| Logo white | {{LOGO_WHITE_PATH}} | — | SVG | {{STATUS}} |
-| App icon | {{ICON_PATH}} | 512×512 | PNG | {{STATUS}} |
-| Favicon bundle | `public/favicon.ico` | 16/32/48 | ICO | {{STATUS}} |
-| Apple touch | `public/apple-touch-icon.png` | 180×180 | PNG | {{STATUS}} |
-| Android 192 | `public/android-chrome-192x192.png` | 192×192 | PNG | {{STATUS}} |
-| Android 512 | `public/android-chrome-512x512.png` | 512×512 | PNG | {{STATUS}} |
-| OG image | `public/og-image.png` | 1200×630 | PNG | {{STATUS}} |
-| Maskable icon | `public/maskable-icon.png` | 512×512 | PNG | {{STATUS}} |
+# Required Brand Assets Checklist
+
+Complete this checklist before shipping. Each missing item is a gap in brand completeness.
+
+---
+
+## Tier 1 — Blocking (must exist before launch)
+
+### Favicon & App Icons
+
+- [ ] `favicon.ico` — 16×16, 32×32, 48×48 combined
+- [ ] `favicon-16x16.png`
+- [ ] `favicon-32x32.png`
+- [ ] `apple-touch-icon.png` — 180×180
+- [ ] `android-chrome-192x192.png`
+- [ ] `android-chrome-512x512.png`
+- [ ] `site.webmanifest` — references all icon paths, correct `name` and `theme_color`
+
+### Logo
+
+- [ ] Primary logo (SVG) — color version
+- [ ] Primary logo (SVG) — white/reversed version for dark backgrounds
+- [ ] Icon-only version (SVG) — usable at 32px minimum
+
+---
+
+## Tier 2 — Important (should exist before public launch)
+
+### Open Graph / Social Sharing
+
+- [ ] `og-image.png` — 1200×630px, includes logo and product name
+- [ ] `twitter-image.png` — 1200×600px or reuse OG image
+- [ ] OG meta tags in `<head>`: `og:title`, `og:description`, `og:image`, `og:url`
+- [ ] Twitter card meta tags: `twitter:card`, `twitter:image`
+
+### iOS / PWA
+
+- [ ] `apple-touch-icon.png` correctly linked in `<head>`
+- [ ] `maskable_icon.png` — 512×512, safe zone within inner 80% (for Android adaptive icons)
+- [ ] PWA manifest includes `purpose: "any maskable"` entry
+- [ ] `theme-color` meta tag set to brand primary color
+
+---
+
+## Tier 3 — Complete (production-quality brand presence)
+
+### Email Assets
+
+- [ ] Email header logo — 300×80px max, hosted URL (not local path)
+- [ ] Email footer logo — monochrome version
+
+### Documentation / Marketing
+
+- [ ] Logo usage guidelines documented
+- [ ] Color codes documented (HEX, RGB, HSL)
+- [ ] Font names and weights documented
+- [ ] Do/don't logo usage examples
+
+---
+
+## Quality Checks
+
+### Icon Quality
+
+- [ ] Icon is recognizable at 16×16 (no fine details lost)
+- [ ] No text or letters in icon (illegible at small sizes)
+- [ ] Single focal element (not a scene or complex composition)
+- [ ] Works on both white and dark backgrounds
+- [ ] Consistent visual weight with similar products in the app's ecosystem
+
+### File Formats
+
+- [ ] SVG files are clean (no Figma/Illustrator junk metadata)
+- [ ] PNG files are optimized (use `pngcrush` or equivalent)
+- [ ] ICO file contains all three sizes (16, 32, 48)
+- [ ] All files referenced in manifest actually exist
+
+### Colors in Assets
+
+- [ ] Icon colors match brand color palette exactly (no approximations)
+- [ ] OG image background uses brand color, not generic gray
+- [ ] Logo SVG uses `currentColor` or hardcoded brand values (never browser defaults)
+
+---
+
+## Asset Inventory
+
+| Asset | File Path | Size | Format | Status |
+|-------|-----------|------|--------|--------|
+| Primary logo | {{LOGO_PATH}} | — | SVG | {{STATUS}} |
+| Logo white | {{LOGO_WHITE_PATH}} | — | SVG | {{STATUS}} |
+| App icon | {{ICON_PATH}} | 512×512 | PNG | {{STATUS}} |
+| Favicon bundle | `public/favicon.ico` | 16/32/48 | ICO | {{STATUS}} |
+| Apple touch | `public/apple-touch-icon.png` | 180×180 | PNG | {{STATUS}} |
+| Android 192 | `public/android-chrome-192x192.png` | 192×192 | PNG | {{STATUS}} |
+| Android 512 | `public/android-chrome-512x512.png` | 512×512 | PNG | {{STATUS}} |
+| OG image | `public/og-image.png` | 1200×630 | PNG | {{STATUS}} |
+| Maskable icon | `public/maskable-icon.png` | 512×512 | PNG | {{STATUS}} |