# Asset Deliver > Package generated prompts or assets into a polished interactive HTML page with tabbed navigation, one-click copy buttons, and visual polish. Use to deliver prompt sets, asset galleries, or comparison views as a premium shareable artifact. - Skill: `joshuashepherd/asset-deliver` (Agent Skill) - Install (CLI): `npx skillmds@latest add joshuashepherd/asset-deliver` - Raw SKILL.md: https://api.skillmd.com/api/skills/joshuashepherd/asset-deliver/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: JoshuaShepherd (https://skillmd.com/u/joshuashepherd) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/joshuashepherd/asset-deliver --- Package and deliver asset prompts or images as an interactive HTML page: $ARGUMENTS $ARGUMENTS should include: - The content to package (prompts, images, or both) - Optionally: page title and heading - Optionally: output file path - Optionally: style theme (dark/light/brand) - Empty — ask the user what to package ## Before Starting 1. Read `src/lib/config/tenant.config.ts` for brand name (used in footer/branding) 2. Read `src/app/globals.css` for brand color tokens (if using brand theme) 3. Gather all content to include — prompts, image paths, metadata ## Page Types ### 1. Prompt Delivery Page Tabbed interface showing 2-4 prompts with one-click copy buttons. - Use case: scroll-stop prompt sets, multi-variant prompts, A/B test prompts ### 2. Asset Gallery Page Grid/carousel of generated images with metadata, download buttons, and comparison tools. - Use case: reviewing asset-series output, sharing mood boards with stakeholders ### 3. Before/After Comparison Page Side-by-side or slider comparison of original and edited images. - Use case: showing edit refinements, brand-check before/after ### 4. Asset Package Page Combined prompts + generated images + metadata in a single deliverable. - Use case: complete scroll-stop package (prompts + generated frames + video prompt) ## Execution ### Step 1 — Gather Content Collect all content to include: - Prompt texts (escape HTML entities: `<` → `<`, `>` → `>`, `&` → `&`) - Image file paths (convert to base64 for embedding, or use relative paths) - Metadata (object name, settings used, generation date) ### Step 2 — Choose Theme #### Dark Theme (Default — VoltFlow style) ```css --bg: #02040a; --surface: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.08); --text: #e4e4e7; --text-muted: #71717a; --accent: #BFF549; --accent-hover: #d4ff7a; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Archivo', sans-serif; --font-mono: 'JetBrains Mono', monospace; ``` #### Brand Theme (Alan Hirsch warm) ```css --bg: #1a1512; --surface: rgba(250, 245, 228, 0.04); --border: rgba(250, 245, 228, 0.1); --text: #FAF5E4; --text-muted: #8B8680; --accent: #D4A84B; --accent-hover: #E5BE6A; --font-heading: 'Playfair Display', serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; ``` #### Light Theme ```css --bg: #FAFAF8; --surface: #FFFFFF; --border: #E5E5E3; --text: #1a1a1a; --text-muted: #6B6B6B; --accent: #C75B39; --accent-hover: #D4714F; ``` ### Step 3 — Build the HTML Write a self-contained HTML file with: ```html {{PAGE_TITLE}}

{{HEADING_LINE1}}
{{HEADING_LINE2}}

{{SUBTITLE}}

{{TABS_HTML}}
{{CARDS_HTML}} {{IMAGES_HTML}}
Generated with Nano Banana 2 — {{BRAND_NAME}} — {{DATE}}
``` ### Step 4 — Populate the Template Replace placeholders: | Placeholder | Source | |-------------|--------| | `{{PAGE_TITLE}}` | Object name or concept | | `{{HEADING_LINE1}}` | First word(s) of heading | | `{{HEADING_LINE2}}` | Second word(s) — displayed faded | | `{{SUBTITLE}}` | Brief description | | `{{THEME_VARIABLES}}` | CSS variables from chosen theme | | `{{TABS_HTML}}` | Generated tab buttons | | `{{CARDS_HTML}}` | Generated prompt cards | | `{{IMAGES_HTML}}` | Image grid (if images included) | | `{{BRAND_NAME}}` | From tenant config | | `{{DATE}}` | Current date | For each prompt/tab: ```html
{{PROMPT_TEXT_ESCAPED}}
``` ### Step 5 — Write & Open ```bash # Write the file # (use the Write tool to create the HTML file) # Open in browser (macOS) open prompts.html ``` Default output path: `prompts.html` in the working directory. Custom path via argument: `/asset-deliver --output public/prompts/scroll-stop-smoothie.html` ## Output Format ``` ## Delivery Page Created ### File: prompts.html ### Theme: Dark (VoltFlow) ### Content: - Tab A: Assembled Shot prompt - Tab B: Deconstructed Shot prompt - Tab C: Video Transition prompt ### Features - ✅ Tabbed navigation (A/B/C) - ✅ One-click copy with confetti - ✅ Keyboard shortcuts (1/2/3) - ✅ Mobile responsive - ✅ Self-contained (no external dependencies except Google Fonts) ### Opened in browser ✅ ``` ## Integration with Other Skills | Workflow | Skills Chain | |----------|-------------| | Scroll-stop content | `/asset-product-shot` → `/asset-exploded-view` → `/asset-video-prompt` → `/asset-deliver` | | Course asset review | `/asset-series` → `/asset-brand-check` → `/asset-deliver` (gallery) | | Prompt sharing | `/asset-generate` → `/asset-deliver` (prompts + images) | | Edit comparison | `/asset-edit` → `/asset-deliver` (before/after) |