--- name: brand-review-light description: "Build a brand competitive analysis deliverable: research phase (image sourcing + curation), brief page (mosaic card format, ~13 sections), and full deep-dive page (long-scroll analysis). Use when asked to analyze a competitor brand, build a brand brief, create a competition page, do a brand review, or research a brand for a client project. Works for any brand, any client — portable across projects. Triggers on: \"brand brief\", \"competitor brief\", \"brand review light\", \"competition page\", \"brief.html\", \"analyze [Brand]\", \"research [Brand] for [Client]\"." --- # Brand Review Light Three-phase pipeline to produce a complete brand competitive analysis: research → brief page → full deep-dive page. Phases can run independently but most requests need all three. ## Phase 1 — Research Read `references/discovery-sources.md` for the full ordered source list. Read `skills/creative-visual-research/SKILL.md` for capture mechanics (Instagram API, Prismic extraction, Playwright, etc.). **DISCOVER before CAPTURE — mandatory two-step:** **Step 1 — DISCOVER (searches + fetches only, no downloads):** - Hit every source in `references/discovery-sources.md` Tiers 1–5 in order - Build a source table: agency, URL, content description, estimated image count - Present source list to human — get confirmation before downloading anything **Step 2 — CAPTURE (only after human approval):** - Download from approved sources in priority order - Apply quality bar (see `references/image-rules.md`) - Compress: `node scripts/images/compress-images.js [assets-dir]` **Curation gate**: Human reviews the captured image set and approves assignments before build starts. Never build from unapproved images. ## Phase 2 — Brief Page (brief.html) **Template**: Copy `assets/brief-template.html`. Link `assets/brief-page.css`. Set CSS vars on ``: ```css --brand-primary: #[hex]; --brand-dark: #[hex]; --bg: #[hex]; ``` **Non-negotiable rules:** - Hero: full-bleed image + gradient overlay + text at bottom. Never split hero. - Mosaic: 2 independent flex cols (`align-items: flex-start`), intentional heights, captions below on white. - Social: labeled buttons only (`→ Go to Instagram`). Never `` wrapping ``. - `border-radius: 0` everywhere — no exceptions. Images with baked-in rounded corners must be replaced. - Never use the same image twice on one page. Read `references/sections.md` for per-section image type and content requirements. ## Phase 3 — Full Deep-Dive Page (index.html) Reference existing full pages at `/public/etoro-competition/[brand]/index.html` for structure. Same image rules apply. Full pages use `competition-page.css` (shared) + per-brand CSS vars. ## Phase 2a — Image Manifest (mandatory before build starts) Before any section assignment, every image in the library must be analyzed and documented in a manifest. **No image may be assigned to a section without first appearing in the manifest.** The manifest is a table written to `[working-dir]/image-manifest.md`: | Filename | What it shows | Face visible? | Focal point location | Top-200px readable? | Best section fit | |----------|--------------|--------------|---------------------|--------------------|--------------------| | buck-vi-01.png | Character design lineup, 6 illustrated figures | No | Center | Yes — figures visible | §09 Personality | **Rules for building the manifest:** - Use the `image` tool on every file in the library (batch 5–6 at a time) - For every image, answer: what does it show? Is a human face visible? Where is the focal point (top/center/bottom)? Does the top 200px show a recognizable subject? - Mark any image with focal point in the **bottom half** as ⚠️ — it requires `object-position: bottom` or replacement - Mark any image wider than 2:1 aspect ratio as ⚠️ — it may crop badly at card height - Mark any image taller than 3:1 aspect ratio as ⚠️ — use `.m-img.natural` only if compositionally justified **Section assignment comes AFTER the manifest is complete.** Choose the best image for each section from the manifest. Never assign an image to a section without knowing what it actually shows. **Why this exists:** Assigning images by filename guesswork produces cards showing apartment buildings on Audience sections, film monitors on Assessment sections, and billboard frames from behind on competitive analysis sections. The manifest prevents this. --- ## Phase 2b — Editorial Review (mandatory before reporting done) After the mechanical build is complete, an editorial review MUST happen before reporting the page as done. This is not optional. **Who runs it:** Anton (the critic agent), or a human reviewer. **How to invoke Anton:** Spawn a subagent with this brief: > "You are Anton. Critique the brand brief at [URL]. Read the HTML, audit the image library, check every link, evaluate each section's image against the editorial criteria in `skills/brand-review-light/references/sections.md`. Flag every CRITICAL, MAJOR, and MINOR issue. Check motion opportunities. Check typography fit. Write your critique to [working-dir]/anton-critique.md." **Anton must check — run these in order:** **MECHANICAL CHECKS (grep/code — zero tolerance):** 1. `[Client]` placeholder — grep HTML for literal `[Client]`. Must return zero results. 2. Client identity leaks — grep all `href` values. No project-specific paths (e.g. `../../etoro-portal/`) exposed in nav or footer. 3. **Duplicate images** — run: `grep -oP 'src="assets/[^"]*"' brief.html | sort | uniq -d`. Any duplicate src = immediate fail. Same image must never appear in two section card positions. 4. **`.m-img.natural` on screenshots** — run: `grep -n "natural"`. Any `.m-img.natural` applied to a full-page website screenshot (homepage, product, app UI) will render 3000–6000px tall. Must use `.m-img` with fixed height + `object-position:top` instead. **VISUAL CROP CHECKS (requires actually looking at each card image):** 5. **Portrait/human images** — for every card image showing a person: does `object-fit:cover` at the card's rendered height show a face and recognizable context, or just a chest/torso/shirt? Rule: if the subject's face is not in the top 50% of the image, add `object-position: top` or replace the image. A card showing only someone's chest or collar is a failure regardless of how good the source image is. 6. **Illustration crops** — for every card using an illustration or campaign image: does the card crop show a recognizable brand moment, or an abstract fragment? Complex multi-element illustrations that crop to unrecognizable shapes must use `object-position` tuned to the most readable zone, or be replaced with an image that reads clearly at the card's height. 7. **`.m-img.natural` on illustrations** — `.natural` class is only appropriate for images with inherent compositional integrity (posters, packshots, type specimens). Never use `.natural` on a multi-element illustration that extends beyond 600px tall. **EDITORIAL CHECKS:** 8. Every image: is it the strongest available for this section? Check what's in the library that *wasn't* used — the best images are often skipped. 9. Motion opportunities: are there video/animation assets that should replace a static card? 10. Typography: does the page feel like the brand, or like a generic brief template? 11. Visual richness: scroll the entire page — does it feel alive? Would a human stop at every card? 12. Strategic call: sharp and specific, or generic filler? 13. Social links: every platform has a correct, live href. No empty hrefs. **Build agent must fix Anton's CRITICAL and MAJOR issues before reporting done.** MINOR issues can be noted but don't block delivery. **Rule:** Never report a brief as "done" or send a URL to the human without Anton's review having happened first. --- ## QA Checklist (run before reporting done) - [ ] No image used twice on the page - [ ] No rounded corners on any image (file or CSS) - [ ] Hero = single image, gradient overlay, text at bottom - [ ] Every card has image or explicit fallback class (no blank white boxes) - [ ] §04–05 expanded: all 3 sub-sections present (Logo + Color + Type) - [ ] Brand in Practice: 12+ images, zero duplication from section cards - [ ] Social card: each platform has real post OR "No active presence" text - [ ] All interactive elements inside card toggles have `onclick="event.stopPropagation()"`