product-sourcing-capture/docs/superpowers/plans/2026-06-14-brand-share-assets.md

Brand And Share Assets Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add a category-neutral product logo, favicon, extension icons, and WeChat-friendly social sharing metadata and image.

Architecture: Keep deterministic brand sources as SVG files under public/assets, derive raster formats with ImageMagick, and dynamically render absolute Open Graph URLs when serving HTML. Reuse the same logo across the landing page, authenticated shell, startup state, and extension.

Tech Stack: HTML, CSS, SVG, PNG/ICO, Node.js HTTP server, Node test runner, ImageMagick.

---

Task 1: Add metadata regression coverage

Files:

• Modify: tests/server.test.js

• Add a server test that requests / and verifies title, description, favicon, Open Graph fields, absolute share image URL, and share image availability.

• Run npm test -- tests/server.test.js and verify the new test fails before implementation.

Task 2: Create brand assets

Files:

• Create: public/assets/brand-mark.svg

• Create: public/assets/brand-lockup.svg

• Create: public/assets/share-card.svg

• Create: public/assets/share-card.png

• Create: public/favicon.ico

• Create: extension/icons/icon16.png

• Create: extension/icons/icon32.png

• Create: extension/icons/icon48.png

• Create: extension/icons/icon128.png

• Build the vector logo and share card from the approved jade, paper, brass, and cinnabar visual system.

• Rasterize the share image, favicon, and extension icon sizes with ImageMagick.

• Inspect dimensions and file formats.

Task 3: Connect metadata and brand UI

Files:

• Modify: public/index.html

• Modify: public/styles.css

• Modify: src/server.js

• Modify: extension/manifest.json

• Modify: extension/popup.html

• Modify: extension/popup.css

• Add SEO, Open Graph, Twitter Card, favicon, and application icon metadata.

• Replace text-only brand marks with the reusable SVG mark.

• Render HTML share-origin placeholders to absolute URLs in the server.

• Add extension icons and generic product naming.

Task 4: Verify

• Run npm test.
• Run syntax checks for server, frontend, and extension JavaScript.
• Start the server and verify metadata/assets over HTTP.
• Inspect the rendered homepage and share image.