Skip to content

HOWTO.md

Latest commit

 

History

History
146 lines (98 loc) · 2.38 KB

HOWTO.md

File metadata and controls

146 lines (98 loc) · 2.38 KB

How To Use Repo Canvas

This is the practical operator guide for generating repo-aware marketing assets.

Prerequisites

  • Node.js 22+
  • npm
  • Playwright Chromium installed:
cd repo-canvas
npx playwright install chromium

Optional:

  • OPENAI_API_KEY for OpenAI supporting visuals
  • GEMINI_API_KEY for Gemini supporting visuals

1. Install Dependencies

cd repo-canvas
npm install

2. Initialize Files

npm run asset:init

This ensures:

  • asset.config.json
  • brand.json
  • product-brief.md
  • captures/
  • exports/
  • generated/

3. Point It At A Repo

Edit asset.config.json:

{
  "targetRepo": ".."
}

Set targetRepo to the software repo you want to market.

4. Inspect The Repo

npm run asset:inspect

Review:

  • product-brief.md
  • generated/repo-inspection.json

If the inferred messaging is weak, edit product-brief.md manually before generating assets.

5. Capture Real UI

Start the target app yourself if needed:

cd /path/to/target-repo
npm run dev

Then either set:

  • capture.baseUrl
  • or capture.devCommand

in asset.config.json.

Run:

cd /path/to/repo-canvas
npm run asset:capture

Review:

  • captures/
  • generated/capture-manifest.json

If the app is unavailable, placeholder capture cards are created. Those are safe fallbacks, not real product screenshots.

6. Generate Assets

Examples:

npm run asset:generate -- --type social-card
npm run asset:generate -- --type linkedin-ad
npm run asset:generate -- --type feature-card
npm run asset:generate -- --type screenshot-frame
npm run asset:generate -- --type launch-graphic

Outputs:

  • exports/*.png
  • exports/export-manifest.json

7. Export Inventory

npm run asset:export

8. Doctor Check

npm run asset:doctor

Use this when paths, Playwright, or API key setup looks wrong.

Safe Use Rules

  • Never treat generated backgrounds as product UI.
  • Never publish placeholder captures as if they were real screenshots.
  • Keep copy grounded in repo inspection or manual edits to product-brief.md.
  • Keep Remotion separate for video.

Agent Integrations

  • Claude Code skill: ~/.claude/skills/repo-canvas
  • Codex skill: ~/.codex/skills/repo-canvas
  • Gemini commands: ~/.gemini/commands/repo-canvas

Install or refresh them with:

./scripts/install-integrations.sh