setup-portal

Sterne0

Forks0

Aktualisiert16. Juli 2026 um 06:33

Lokales Creative-Portal installieren — zeigt alle Creatives aus einem beliebigen (Drive-/OneDrive-)Ordner als chronologische Timeline mit Lightbox und Filter im Browser. Nutzen bei "Portal installieren", "Portal aufsetzen", "Creatives-Portal", "setup portal", "Portal einrichten", "Bilder-Timeline aus Drive-Ordner". Kein Hosting, kein Account: Astro-App läuft lokal, Daten kommen aus dem gesyncten Ordner.

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Quelle

RankM8

RankM8/marketing-engine

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·SOC 15-1254

Datei-Explorer

14 Dateien

SKILL.md

readonly

name

setup-portal

description

setup-portal — lokales Creative-Portal aus einem Ordner

Installiert das mitgelieferte Portal-Template (template/ in diesem Skill-Ordner) als lokale Astro-App. Datenquelle ist ein beliebiger lokaler Ordner — typischerweise der per Google Drive / OneDrive gesyncte Creatives-Ordner des Kunden. Das Portal indexiert ihn per Catch-All (jedes Bild, auch aus neuen Unterordnern) und zeigt eine Timeline mit Lightbox, Quellen-Filter und Pfad-Kopieren-Button.

Ablauf (Schritt für Schritt, mit dem User abstimmen)

Preflight:
- node --version (>= 18) und python3 --version prüfen. Fehlt Node: auf https://nodejs.org verweisen (LTS-Installer) und NACH der Installation weitermachen — nicht mit Fehlern weiterlaufen.
- Den User nach dem Quellordner fragen (der lokal gesynchte Creatives-Ordner). Prüfen, dass er existiert und Bilder enthält. Bei Google Drive liegt er unter ~/Library/CloudStorage/GoogleDrive-<account>/… (macOS) bzw. G:\ (Windows) — Voraussetzung ist die installierte Drive-/OneDrive-Desktop-App.
Installieren: Zielordner mit dem User klären (Default: ~/creative-portal), dann das komplette template/-Verzeichnis dorthin kopieren und npm install ausführen.
Konfigurieren: portal.config.json.example nach portal.config.json kopieren und titel + quelle (absoluter Pfad des Quellordners) eintragen.
Starten: npm run start (indexiert + startet Dev-Server auf Port 4340) und dem User http://localhost:4340 öffnen. Für Dauerbetrieb zusätzlich npm run watch in einem zweiten Terminal — indexiert alle 30 s neu, neue Drive-Syncs erscheinen automatisch.
Verifizieren: Seite im Browser prüfen (Bildanzahl > 0, Lightbox öffnet). Erst dann als fertig melden.

Technische Details

scripts/gen-creatives.py liest portal.config.json, kopiert Bilder flach nach public/creatives/_gen/ und schreibt src/data/creatives.ts. Verwaiste Kopien werden entfernt — der Quellordner ist die einzige Wahrheit.
Zeitstempel: Liegt im Quell-Root eine manifest.json ({"<dateiname>": {"generiert": <epoch>}}), gewinnt sie über die Datei-mtime — wichtig, weil Drive-Sync mtimes verfälschen kann. Die Produktionsseite (z. B. handoff-sync) sollte dieses Manifest mitliefern.
Unterstützte Formate: png/jpg/jpeg/webp. Versteckte Dateien/Ordner werden ignoriert.
Das Portal ist reine Ansicht — es verändert den Quellordner nie.

Abgrenzung

Creatives GENERIEREN: Skill codex-create-creative (bzw. create-product-image für Pay-per-Use). Dieses Portal zeigt nur an.
Für das interne RankM8-Arbeitsportal (Analytics, Research, Winning-Ads) ist dieses Template bewusst NICHT gedacht — es ist die schlanke Übergabe-Ansicht für Kunden/Teams.

Mehr aus diesem Repository

gleiches Repository

codex-create-creative

RankM8/marketing-engine

Ad-Creatives und Produktbilder ÜBER CODEX generieren (natives image_gen__imagegen via whisperm8-Subagents) — kostenlos im Codex-Flat-Plan, Standard-Pfad wenn Codex verfügbar ist. Nutzen bei "Creative erstellen", "Bild generieren", "Produktbild", "Ad bauen", "Personen-Creative", "Bild reviewen/QA". Deckt Zwei-Schritt-Pipeline (Basis + Design-Pass), strukturierte JSON-Prompts, Produkttreue-QA, Doppel-Review und Job-Orchestrierung ab. Für Pay-per-Use ohne Codex stattdessen create-product-image (OpenRouter/fal).

2026-07-160

marktplatz-scrape

RankM8/marketing-engine

This skill should be used when the user asks to "scrape Galaxus", "scrape a marketplace", "get competitor prices", "Konkurrenzpreise holen", "Marktplatz scrapen", "Preisvergleich erstellen", or wants to map who sells a product category and at what price. Scrapes competitor products and prices from Swiss online marketplaces via Apify's rag-web-browser with browser rendering — the robust path when dedicated GraphQL scrapers break. Returns structured product data (brand, name, CHF price, link). Requires APIFY_TOKEN.

2026-07-160

create-product-image

RankM8/marketing-engine

This skill should be used when the user asks to "create a product ad", "generate ad creatives", "make a Meta ad image", "Produktbild generieren", "Ad-Creative erstellen", "Werbebild bauen", "swap the background of a product photo", or wants ad images where the real product must be reproduced faithfully. Covers the BACKGROUND-SWAP method for true product fidelity, brand text/price/discount overlays, feature callouts, logo placement, and native 1:1 / 4:5 / 9:16 framing. Routes to OpenAI gpt-image via OpenRouter (default) or fal.ai.

2026-07-150

apify-deep-research

RankM8/marketing-engine

This skill should be used specifically when real scraped marketplace data must be combined and cross-validated with web research — "validate the pricing research with real Galaxus data", "combine scrape and research", "Wettbewerbsanalyse mit echten Marktplatzpreisen", "Scrape-Daten gegen die Recherche prüfen". Combines Apify primary-data scraping (hard numbers: real products and prices) with the deep-research web workflow (cited, adversarially verified findings) into one consolidated report, resolving contradictions in favour of the scrape. For research from a product URL or name without a marketplace scrape, use produkt-research instead. Requires APIFY_TOKEN and the separate deep-research skill.

2026-07-090

produkt-research

RankM8/marketing-engine

This skill should be used when the user asks to "research this product", "Produkt recherchieren", "soll ich dieses Produkt sourcen", "Recherche-Ordner anlegen", or wants a research folder built from nothing more than a product URL or name — web sources only, no scraped marketplace data. Builds a complete, versioned research folder (deep-research report, competitor table, marketing brief, sourcing note, sources) and maintains an index. When real scraped marketplace prices must be cross-validated against the web, use apify-deep-research instead. Orchestrates the separate deep-research skill rather than researching on its own.

2026-07-090

research-to-creative

RankM8/marketing-engine

This skill should be used when an existing research report or marketing brief should become testable ads — "make ads from this research", "turn the research into creatives", "Ads aus der Recherche bauen", "Hooks in Ad-Copy übersetzen". Requires verified findings as input. Derives hooks and angles, writes Swiss-German Meta-compliant copy, then generates creatives via create-product-image and bundles everything into an ad briefing. For image generation alone, without a research brief, use create-product-image directly.

2026-07-090

name

setup-portal

description

setup-portal — lokales Creative-Portal aus einem Ordner

Ablauf (Schritt für Schritt, mit dem User abstimmen)

Preflight:
- node --version (>= 18) und python3 --version prüfen. Fehlt Node: auf https://nodejs.org verweisen (LTS-Installer) und NACH der Installation weitermachen — nicht mit Fehlern weiterlaufen.
- Den User nach dem Quellordner fragen (der lokal gesynchte Creatives-Ordner). Prüfen, dass er existiert und Bilder enthält. Bei Google Drive liegt er unter ~/Library/CloudStorage/GoogleDrive-<account>/… (macOS) bzw. G:\ (Windows) — Voraussetzung ist die installierte Drive-/OneDrive-Desktop-App.
Installieren: Zielordner mit dem User klären (Default: ~/creative-portal), dann das komplette template/-Verzeichnis dorthin kopieren und npm install ausführen.
Konfigurieren: portal.config.json.example nach portal.config.json kopieren und titel + quelle (absoluter Pfad des Quellordners) eintragen.
Starten: npm run start (indexiert + startet Dev-Server auf Port 4340) und dem User http://localhost:4340 öffnen. Für Dauerbetrieb zusätzlich npm run watch in einem zweiten Terminal — indexiert alle 30 s neu, neue Drive-Syncs erscheinen automatisch.
Verifizieren: Seite im Browser prüfen (Bildanzahl > 0, Lightbox öffnet). Erst dann als fertig melden.

Technische Details

scripts/gen-creatives.py liest portal.config.json, kopiert Bilder flach nach public/creatives/_gen/ und schreibt src/data/creatives.ts. Verwaiste Kopien werden entfernt — der Quellordner ist die einzige Wahrheit.
Zeitstempel: Liegt im Quell-Root eine manifest.json ({"<dateiname>": {"generiert": <epoch>}}), gewinnt sie über die Datei-mtime — wichtig, weil Drive-Sync mtimes verfälschen kann. Die Produktionsseite (z. B. handoff-sync) sollte dieses Manifest mitliefern.
Unterstützte Formate: png/jpg/jpeg/webp. Versteckte Dateien/Ordner werden ignoriert.
Das Portal ist reine Ansicht — es verändert den Quellordner nie.

Abgrenzung

Creatives GENERIEREN: Skill codex-create-creative (bzw. create-product-image für Pay-per-Use). Dieses Portal zeigt nur an.
Für das interne RankM8-Arbeitsportal (Analytics, Research, Winning-Ads) ist dieses Template bewusst NICHT gedacht — es ist die schlanke Übergabe-Ansicht für Kunden/Teams.