@open-assets/open-assets 0.1.11 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-assets/open-assets",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "Dev server and export tool for app screenshots, icons, and logos. Like Storybook for marketing assets.",
   "type": "module",
   "bin": {
@@ -38,6 +38,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "assets": "node bin/open-assets.mjs render --force -o ./public/img",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest",
+    "release": "./scripts/release.sh"
+  },
   "homepage": "https://openassets.dev",
   "dependencies": {
     "commander": "^13.0.0",
@@ -45,6 +50,6 @@
     "puppeteer": "^24.37.5"
   },
   "devDependencies": {
-    "@open-assets/open-assets": "^0.1.10"
+    "jest": "^30.3.0"
   }
 }

package/public/viewer.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Open Assets</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/icon/32/icon.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/icon/16/icon.png" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
     <style>
@@ -12,6 +14,7 @@
 
       .toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(10,10,10,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
       .toolbar-left { display: flex; align-items: center; gap: 12px; }
+      .toolbar-left img.toolbar-icon { width: 20px; height: 20px; border-radius: 4px; }
       .toolbar-left h1 { font-size: 14px; font-weight: 700; color: #fff; }
       .segmented { display: flex; background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px; gap: 1px; }
       .seg-btn { padding: 4px 14px; border-radius: 5px; border: none; background: transparent; color: #888; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; text-decoration: none; }
@@ -82,6 +85,7 @@
   <body>
     <div class="toolbar">
       <div class="toolbar-left">
+        <img class="toolbar-icon" src="/img/icon/32/icon.png" alt="" />
         <h1 id="app-title">Loading...</h1>
         <div class="segmented" id="tab-bar"></div>
       </div>
@@ -174,7 +178,7 @@
       }
 
       function flatSizes(col) {
-        return (col.exportSizes || []).flatMap(g => g.sizes || []);
+        return col.export || [];
       }
 
       // ---- Build collection tab bar ----
@@ -250,69 +254,68 @@
         const sh = col.sourceSize.height;
         const hasMultipleTemplates = col.templates.length > 1;
 
-        // Outputs (e.g., Xcode)
-        if (col.outputs) {
-          for (let i = 0; i < col.outputs.length; i++) {
-            const output = col.outputs[i];
-            if (output.type === 'xcode') {
-              const sectionLabel = document.createElement('div');
-              sectionLabel.className = 'section-label';
-              sectionLabel.textContent = 'Xcode';
-              exportDropdown.appendChild(sectionLabel);
-
-              const btn = document.createElement('button');
-              btn.innerHTML = 'Export to Xcode <span class="dim">.appiconset</span>';
-              btn.addEventListener('click', () => runOutput(col.id, i));
-              exportDropdown.appendChild(btn);
-
-              exportDropdown.appendChild(document.createElement('hr'));
-            } else if (output.type === 'copy-source') {
-              const sectionLabel = document.createElement('div');
-              sectionLabel.className = 'section-label';
-              sectionLabel.textContent = output.format.toUpperCase();
-              exportDropdown.appendChild(sectionLabel);
-
-              // SVG download for each template
-              for (const template of col.templates) {
-                if (template.src.endsWith('.' + output.format)) {
-                  const btn = document.createElement('button');
-                  const displayName = hasMultipleTemplates ? template.label : `Download ${output.format.toUpperCase()}`;
-                  btn.innerHTML = `${displayName} <span class="dim">${output.format}</span>`;
-                  btn.addEventListener('click', () => downloadSource(template));
-                  exportDropdown.appendChild(btn);
-                }
-              }
+        // Outputs (e.g., Xcode, copy-source) — export entries with a type field
+        const allExports = col.export || [];
+        const outputs = allExports.filter(e => e.type);
+        for (let i = 0; i < outputs.length; i++) {
+          const output = outputs[i];
+          if (output.type === 'xcode') {
+            const sectionLabel = document.createElement('div');
+            sectionLabel.className = 'section-label';
+            sectionLabel.textContent = 'Xcode';
+            exportDropdown.appendChild(sectionLabel);
 
-              exportDropdown.appendChild(document.createElement('hr'));
-            }
-          }
-        }
+            const btn = document.createElement('button');
+            btn.innerHTML = 'Export to Xcode <span class="dim">.appiconset</span>';
+            btn.addEventListener('click', () => runOutput(col.id, i));
+            exportDropdown.appendChild(btn);
 
-        // Export sizes grouped by platform
-        for (const group of col.exportSizes || []) {
-          if (group.platform) {
+            exportDropdown.appendChild(document.createElement('hr'));
+          } else if (output.type === 'copy-source') {
             const sectionLabel = document.createElement('div');
             sectionLabel.className = 'section-label';
-            sectionLabel.textContent = group.platform;
+            sectionLabel.textContent = output.format.toUpperCase();
             exportDropdown.appendChild(sectionLabel);
-          }
 
-          for (const size of group.sizes || []) {
-            const btn = document.createElement('button');
-            btn.innerHTML = `${size.label} <span class="dim">${size.width} &times; ${size.height}</span>`;
-            btn.addEventListener('click', () => {
-              if (hasMultipleTemplates) {
-                exportZip(size.width, size.height, sw, sh, size.name);
-              } else {
-                exportSinglePNG(col.templates[0], size.width, size.height, sw, sh, size.name);
+            // SVG download for each template
+            for (const template of col.templates) {
+              if (template.src.endsWith('.' + output.format)) {
+                const btn = document.createElement('button');
+                const displayName = hasMultipleTemplates ? template.label : `Download ${output.format.toUpperCase()}`;
+                btn.innerHTML = `${displayName} <span class="dim">${output.format}</span>`;
+                btn.addEventListener('click', () => downloadSource(template));
+                exportDropdown.appendChild(btn);
               }
-            });
-            exportDropdown.appendChild(btn);
+            }
+
+            exportDropdown.appendChild(document.createElement('hr'));
           }
         }
 
+        // Export sizes (entries without a type field)
+        const sizes = allExports.filter(e => !e.type);
+        if (sizes.length > 0) {
+          const sectionLabel = document.createElement('div');
+          sectionLabel.className = 'section-label';
+          sectionLabel.textContent = 'Sizes';
+          exportDropdown.appendChild(sectionLabel);
+        }
+
+        for (const entry of sizes) {
+          const btn = document.createElement('button');
+          btn.innerHTML = `${entry.label} <span class="dim">${entry.size.width} &times; ${entry.size.height}</span>`;
+          btn.addEventListener('click', () => {
+            if (hasMultipleTemplates) {
+              exportZip(entry.size.width, entry.size.height, sw, sh, entry.name);
+            } else {
+              exportSinglePNG(col.templates[0], entry.size.width, entry.size.height, sw, sh, entry.name);
+            }
+          });
+          exportDropdown.appendChild(btn);
+        }
+
         // Custom size
-        if (col.exportSizes && flatSizes(col).length > 0 || col.customExport) {
+        if (col.export && col.export.length > 0 || col.customExport) {
           exportDropdown.appendChild(document.createElement('hr'));
 
           const customLabel = document.createElement('div');
@@ -320,8 +323,8 @@
           customLabel.textContent = 'Custom Size';
           exportDropdown.appendChild(customLabel);
 
-          const defaultW = col.customExport?.defaultWidth || flatSizes(col)[0]?.width || sw;
-          const defaultH = col.customExport?.defaultHeight || flatSizes(col)[0]?.height || sh;
+          const defaultW = col.customExport?.defaultWidth || flatSizes(col)[0]?.size?.width || sw;
+          const defaultH = col.customExport?.defaultHeight || flatSizes(col)[0]?.size?.height || sh;
 
           // Check if square (icon-like) for simplified input
           const isSquare = sw === sh;
@@ -446,7 +449,7 @@
 
       // ---- Init ----
       async function init() {
-        const res = await fetch('manifest.json');
+        const res = await fetch('assets.json');
         manifest = await res.json();
 
         // Set title

package/skills/open-assets/SKILL.md

@@ -15,15 +15,13 @@ open-assets is a dev server and export tool for app marketing assets — screens
 open-assets dev
 
 # Or with Tailwind
-concurrently "npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --watch" "open-assets dev"
+concurrently "npx @tailwindcss/cli -i assets/styles.css -o dist/styles.css --watch" "open-assets dev"
 
 # Headless render
 open-assets render --collection screenshots --size iphone-6.9
-open-assets render --collection icon --all
-open-assets render --all
-open-assets render --template 01-hero --all
-open-assets render --platform "App Store"
-open-assets render --force  # ignore cache, re-render everything
+open-assets render --collection icon --force
+open-assets render --force
+open-assets render --template 01-hero --force
 ```
 
 ## Concepts
@@ -33,20 +31,19 @@ open-assets render --force  # ignore cache, re-render everything
 | **Collection** | A named group of related assets sharing the same source size and export sizes. One tab in the dev UI. |
 | **Template** | A single source file (HTML or SVG) that produces one image per export size. |
 | **Export Size** | A named output dimension that templates are rendered at (e.g., "iPhone 6.9" → 1320×2868). |
-| **Platform** | Optional grouping label for related export sizes (e.g., "App Store", "Play Store"). |
 | **Source Size** | The dimensions the HTML template is authored at. Puppeteer scales from source → export size. |
 | **Output** | An optional post-render action (e.g., write to Xcode `.appiconset`, copy SVG source). |
 
-## manifest.json
+## assets.json
 
-The `manifest.json` at the project root defines all asset collections. All collections follow the same unified schema — no `type` field needed.
+The `assets.json` at the project root defines all asset collections. All collections follow the same unified schema — no `type` field needed.
 
 ```json
 {
   "version": 1,
   "name": "App Display Name",
   "publicDir": "public",
-  "command": "npx open-assets render --all",
+  "command": "npx open-assets render --force",
   "collections": [
     {
       "id": "unique-id",
@@ -54,17 +51,11 @@ The `manifest.json` at the project root defines all asset collections. All colle
       "sourceSize": { "width": 440, "height": 956 },
       "borderRadius": 4,
       "templates": [
-        { "src": "src/screenshots/01-hero.html", "name": "01-hero", "label": "Hero" }
+        { "src": "assets/screenshots/01-hero.html", "name": "01-hero", "label": "Hero" }
       ],
-      "exportSizes": [
-        {
-          "platform": "App Store",
-          "sizes": [
-            { "name": "iphone-6.9", "label": "iPhone 6.9\"", "width": 1320, "height": 2868 }
-          ]
-        }
+      "export": [
+        { "name": "iphone-6.9", "label": "iPhone 6.9\"", "size": { "width": 1320, "height": 2868 } }
       ],
-      "outputs": [],
       "customExport": { "defaultWidth": 1320, "defaultHeight": 2868 }
     }
   ]
@@ -80,12 +71,13 @@ The `manifest.json` at the project root defines all asset collections. All colle
 | `sourceSize` | object | `{ width, height }` — dimensions templates are authored at |
 | `borderRadius` | number | Border radius for preview frames (px) |
 | `templates` | array | Source files: `{ src, name, label }` |
-| `exportSizes` | array | Size groups: `{ platform?, sizes: [{ name, label, width, height }] }` |
-| `outputs` | array | Post-render actions (optional) |
+| `export` | array | Export sizes and output actions. Entries with a `type` field are post-render actions |
 | `customExport` | object | Custom size defaults for UI (optional) |
 
 ### Output Types
 
+Export entries with a `type` field are post-render actions (run with `--force`):
+
 | Type | Config | Description |
 |------|--------|-------------|
 | `xcode` | `{ "type": "xcode", "path": "..." }` | Render icon and write to Xcode asset catalog |
@@ -101,17 +93,12 @@ The `manifest.json` at the project root defines all asset collections. All colle
   "sourceSize": { "width": 440, "height": 956 },
   "borderRadius": 4,
   "templates": [
-    { "src": "src/screenshots/01-hero.html", "name": "01-hero", "label": "Hero" },
-    { "src": "src/screenshots/02-features.html", "name": "02-features", "label": "Features" }
+    { "src": "assets/screenshots/01-hero.html", "name": "01-hero", "label": "Hero" },
+    { "src": "assets/screenshots/02-features.html", "name": "02-features", "label": "Features" }
   ],
-  "exportSizes": [
-    {
-      "platform": "App Store",
-      "sizes": [
-        { "name": "iphone-6.9", "label": "iPhone 6.9\"", "width": 1320, "height": 2868 },
-        { "name": "iphone-6.7", "label": "iPhone 6.7\"", "width": 1290, "height": 2796 }
-      ]
-    }
+  "export": [
+    { "name": "iphone-6.9", "label": "iPhone 6.9\"", "size": { "width": 1320, "height": 2868 } },
+    { "name": "iphone-6.7", "label": "iPhone 6.7\"", "size": { "width": 1290, "height": 2796 } }
   ]
 }
 ```
@@ -124,18 +111,13 @@ The `manifest.json` at the project root defines all asset collections. All colle
   "sourceSize": { "width": 1024, "height": 1024 },
   "borderRadius": 224,
   "templates": [
-    { "src": "src/icon.html", "name": "icon", "label": "App Icon" }
+    { "src": "assets/icon.html", "name": "icon", "label": "App Icon" }
   ],
-  "exportSizes": [
-    {
-      "platform": "Apple",
-      "sizes": [
-        { "name": "1024", "label": "1024px", "width": 1024, "height": 1024 },
-        { "name": "180", "label": "180px", "width": 180, "height": 180 }
-      ]
-    }
-  ],
-  "outputs": [{ "type": "xcode", "path": "../MyApp/Assets.xcassets/AppIcon.appiconset" }]
+  "export": [
+    { "name": "1024", "label": "1024px", "size": { "width": 1024, "height": 1024 } },
+    { "name": "180", "label": "180px", "size": { "width": 180, "height": 180 } },
+    { "type": "xcode", "path": "../MyApp/Assets.xcassets/AppIcon.appiconset" }
+  ]
 }
 ```
 
@@ -147,11 +129,11 @@ The `manifest.json` at the project root defines all asset collections. All colle
   "sourceSize": { "width": 1024, "height": 1024 },
   "borderRadius": 224,
   "templates": [
-    { "src": "src/icons/concept-a.html", "name": "concept-a", "label": "Concept A" },
-    { "src": "src/icons/concept-b.html", "name": "concept-b", "label": "Concept B" }
+    { "src": "assets/icons/concept-a.html", "name": "concept-a", "label": "Concept A" },
+    { "src": "assets/icons/concept-b.html", "name": "concept-b", "label": "Concept B" }
   ],
-  "exportSizes": [
-    { "sizes": [{ "name": "1024", "label": "1024px", "width": 1024, "height": 1024 }] }
+  "export": [
+    { "name": "1024", "label": "1024px", "size": { "width": 1024, "height": 1024 } }
   ]
 }
 ```
@@ -163,16 +145,14 @@ The `manifest.json` at the project root defines all asset collections. All colle
   "label": "Logo",
   "sourceSize": { "width": 940, "height": 940 },
   "templates": [
-    { "src": "src/logo.svg", "name": "logo", "label": "Logo" },
-    { "src": "src/logo-dark.svg", "name": "logo-dark", "label": "Dark" }
+    { "src": "assets/logo.svg", "name": "logo", "label": "Logo" },
+    { "src": "assets/logo-dark.svg", "name": "logo-dark", "label": "Dark" }
   ],
-  "exportSizes": [
-    { "sizes": [
-      { "name": "1024", "label": "1024px", "width": 1024, "height": 1024 },
-      { "name": "512", "label": "512px", "width": 512, "height": 512 }
-    ] }
-  ],
-  "outputs": [{ "type": "copy-source", "format": "svg" }]
+  "export": [
+    { "name": "1024", "label": "1024px", "size": { "width": 1024, "height": 1024 } },
+    { "name": "512", "label": "512px", "size": { "width": 512, "height": 512 } },
+    { "type": "copy-source", "format": "svg" }
+  ]
 }
 ```
 
@@ -183,35 +163,96 @@ The `manifest.json` at the project root defines all asset collections. All colle
   "label": "Social Cards",
   "sourceSize": { "width": 1200, "height": 630 },
   "templates": [
-    { "src": "src/og/default.html", "name": "default", "label": "Default OG" }
+    { "src": "assets/og/default.html", "name": "default", "label": "Default OG" }
   ],
-  "exportSizes": [
-    { "sizes": [{ "name": "og", "label": "OG Image", "width": 1200, "height": 630 }] }
+  "export": [
+    { "name": "og", "label": "OG Image", "size": { "width": 1200, "height": 630 } }
   ]
 }
 ```
 
 ## CLI Reference
 
+### All commands
+
+| Command | Description |
+|---------|-------------|
+| `open-assets dev [dir]` | Start dev server with live preview and export UI |
+| `open-assets render [dir]` | Render assets headlessly via CLI |
+| `open-assets list [dir]` | List all collections and templates in the config |
+| `open-assets validate [dir]` | Validate assets.json and check referenced files exist. Use `--fix` to interactively remove missing templates |
+| `open-assets init [dir]` | Scaffold a new assets.json and example assets |
+| `open-assets add collection [dir]` | Add a new collection (from presets or custom) |
+| `open-assets add template [dir]` | Add a new template to an existing collection |
+| `open-assets add size [dir]` | Add an export size to a collection |
+| `open-assets skills [dir]` | Install Claude Code skills into a project |
+
 ### render command flags
 
 | Flag | Description |
 |------|-------------|
 | `--collection <id>` | Render only the collection with this ID |
 | `--template <name>` | Render only the template with this name |
-| `--size <name>` | Use a named export size from manifest |
-| `--platform <name>` | Render only sizes for this platform |
-| `--all` | Export at every size defined in the manifest |
-| `--force` | Re-render all assets even if unchanged |
+| `--size <name>` | Use a named export size from config |
+| `-f, --force` | Export at every size and re-render all (ignores cache) |
 | `-o, --output <dir>` | Output directory (default: `./exports`) |
 | `--json` | Output results as JSON |
 | `-q, --quiet` | Suppress progress logs |
 
 Flags compose naturally:
 - `--collection screenshots --template 01-hero --size iphone-6.9` → single template, single size
-- `--collection screenshots --template 01-hero --all` → one template, all sizes
+- `--collection screenshots --template 01-hero --force` → one template, all sizes
 - `--collection screenshots --size iphone-6.9` → all templates, one size
-- `--collection screenshots --platform "App Store"` → all templates, all App Store sizes
+
+### add commands
+
+Interactive commands for managing the config without editing JSON by hand. All support `--config <path>` for custom config filenames.
+
+#### `open-assets add collection`
+
+Add a new asset collection. Choose from presets or configure custom dimensions and format.
+
+**Presets:**
+| Preset | Source Size | Format |
+|--------|-----------|--------|
+| App Store Screenshots | 440x956 | HTML |
+| App Icon | 1024x1024 | HTML |
+| Logo | 800x800 | SVG |
+| Wordmark | 1200x400 | SVG |
+| Feature Graphic (Google Play) | 1024x500 | HTML |
+| OG Image / Social | 1200x630 | HTML |
+| Custom | user-defined | HTML or SVG |
+
+Creates a starter template file and adds the collection to `assets.json` with appropriate export sizes.
+
+```bash
+open-assets add collection              # interactive preset picker
+open-assets add collection ./my-assets  # in a specific directory
+```
+
+#### `open-assets add template`
+
+Add a new template (HTML or SVG) to an existing collection. Prompts for which collection, template name/label, and format. Creates the source file in the same directory as the collection's existing templates.
+
+```bash
+open-assets add template                # interactive
+```
+
+#### `open-assets add size`
+
+Add an export size to a collection. Choose from common device/platform presets or enter custom dimensions.
+
+**Size presets include:**
+- iPhone 6.9", 6.7", 6.5", 6.1"
+- iPad 13", 12.9"
+- Google Play Phone, 7" Tablet
+- Mac App Store Retina
+- OG Image, Twitter Card, Product Hunt Gallery
+- Custom dimensions
+
+```bash
+open-assets add size                    # interactive
+```
 
 ### Output structure
 
@@ -237,9 +278,11 @@ exports/
 
 ## Creating New Screenshot HTML Files
 
-Each screenshot is a standalone HTML file at fixed dimensions. Key rules:
+Each screenshot is a standalone HTML file at fixed dimensions. You can create them manually or use `open-assets add template` to scaffold one.
 
-1. Set `width` and `height` on the body to match `sourceSize` in the manifest
+Key rules:
+
+1. Set `width` and `height` on the body to match `sourceSize` in the config
 2. Set `overflow: hidden` on the body
 3. Reference compiled Tailwind CSS via `<link rel="stylesheet" href="../dist/styles.css" />`
 4. All paths are relative to the project root
@@ -263,11 +306,13 @@ Example template:
 </html>
 ```
 
-After creating the file, add it to the `templates` array in the relevant collection in `manifest.json`.
+After creating the file manually, add it to the `templates` array in the relevant collection in `assets.json`. Or use `open-assets add template` to do both steps at once.
 
 ## Adding a New Collection
 
-Add a new object to the `collections` array in `manifest.json`. Each collection needs a unique `id`, a `sourceSize`, `templates`, and `exportSizes`.
+Use `open-assets add collection` to interactively add a collection from presets or with custom dimensions and format (HTML/SVG). This creates the starter template file and updates `assets.json` automatically.
+
+Alternatively, add a new object to the `collections` array in `assets.json` manually. Each collection needs a unique `id`, a `sourceSize`, `templates`, and `export`.
 
 ## Common Export Sizes
 
@@ -284,9 +329,9 @@ Add a new object to the `collections` array in `manifest.json`. Each collection
 | Web | OG Image | 1200 | 630 |
 | Mac App Store | Retina | 2880 | 1800 |
 
-## Incremental Builds (manifest.lock)
+## Incremental Builds (assets.lock)
 
-The `render` command maintains a `manifest.lock` file with SHA256 checksums of source files. On subsequent renders, unchanged assets are skipped automatically. Use `--force` to re-render everything.
+The `render` command maintains a `assets.lock` file with SHA256 checksums of source files. On subsequent renders, unchanged assets are skipped automatically. Use `--force` to re-render everything.
 
 Note: only source HTML/SVG files are checksummed. Changes to referenced assets (images in publicDir, compiled CSS) will not trigger re-renders — use `--force` when those change.
 
@@ -294,15 +339,15 @@ Note: only source HTML/SVG files are checksummed. Changes to referenced assets (
 
 ```
 project/
-  manifest.json
-  manifest.lock          # Auto-generated, add to .gitignore
+  assets.json
+  assets.lock          # Auto-generated cache (commit this)
   public/                # Shared assets (images, logos, icons, photos)
     logo-round.png
     social/
       youtube.svg
     screenshots/         # Real app screenshots for use in templates
       01.png
-  src/
+  assets/
     styles.css           # Tailwind input
     icon.html            # App icon template
     icons/               # Icon concept explorations
@@ -490,8 +535,8 @@ colored background on the key word. Add the app rating below the logo. Make the
 background food photo bleed off the bottom-right edge for visual impact.
 ```
 
-**Adding a new platform:**
+**Adding a new export size:**
 ```
-Add Play Store screenshot sizes to the manifest. Use 1080x2400 as the export size
-under a "Play Store" platform group. The screenshots can share the same templates.
+Add Play Store screenshot sizes to the config. Use 1080x2400 as the export size.
+The screenshots can share the same templates.
 ```