# Visual Research Skills — Open Source Launch Plan ## What We're Shipping An open-source GitHub repo containing 3 interconnected agent skills for competitive visual research: 1. **`creative-visual-research`** — Full research pipeline (discover, capture, extract, analyze, package) 2. **`visual-competitive-analysis`** — Page builder (13-section brand analysis pages with CE styleguide) 3. **`visual-benchmarking`** — Quality auditor (6-category scoring, T1/T2/T3 tier system, critique generation) Plus supporting scripts and assets that make the skills actually work. --- ## Phase 1: Prepare for Open Source ### 1a. Strip Internal References The skills currently reference: - CE-specific styleguide (colors, fonts, Typekit ID) - eToro client context - Internal file paths (`work/pitches/`, `public/etoro-competition/`) - Internal scripts (`scripts/images/compress-images.js`, `scripts/visual-qa/section-audit.py`, `scripts/images/extract-images.sh`) - Internal team references (Kittoro, Gerri, etc.) **Action:** Create generalized versions that: - Use a configurable style system instead of hardcoded CE colors - Replace client-specific references with `{{CLIENT}}` placeholders - Bundle the required scripts directly in the skill repo - Remove internal team references ### 1b. Package Required Scripts These scripts need to be included or recreated: - `extract-images.sh` — agency page image extraction - `compress-images.js` — image compression - `section-audit.py` — visual QA gate (Playwright + vision model) - `init-brand.sh` — scaffold a new brand research project (new) ### 1c. Create Foundation Skill Following Corey's pattern, create a **`visual-research-context`** foundation skill that: - Captures project config (client name, target industry, style preferences) - Defines the brand config schema - Every other skill reads it first ### 1d. Validate Against AgentSkills Spec - Frontmatter: only `name` + `description` - Description: comprehensive trigger phrases - SKILL.md body: under 500 lines - Split excess into `references/` files - No extraneous docs (no README.md inside skill folders) ### 1e. Add Autoresearch Capability Include binary evals for each skill: - `creative-visual-research`: "Did it find the agency? Did it extract 6+ images? Are all 13 sections populated?" - `visual-competitive-analysis`: "Does it pass the 7 QA criteria? Are all images T1-T3?" - `visual-benchmarking`: "Did it score all 4 dimensions? Did it identify gaps?" --- ## Phase 2: Repo Structure ``` visual-research-skills/ ├── README.md ← The money shot ├── LICENSE ← MIT ├── CONTRIBUTING.md ← PR guidelines ├── install.sh ← One-command setup │ ├── skills/ │ ├── visual-research-context/ ← Foundation (read by all others) │ │ └── SKILL.md │ │ │ ├── creative-visual-research/ ← Research pipeline │ │ ├── SKILL.md │ │ ├── scripts/ │ │ │ ├── extract-images.sh │ │ │ ├── init-brand.sh │ │ │ └── instagram-fetch.py │ │ └── references/ │ │ └── source-hierarchy.md │ │ │ ├── visual-competitive-analysis/ ← Page builder │ │ ├── SKILL.md │ │ ├── assets/ │ │ │ └── brand-page-template.html │ │ ├── scripts/ │ │ │ ├── section-audit.py │ │ │ └── compress-images.js │ │ └── references/ │ │ ├── style-system.md │ │ ├── image-integration.md │ │ └── index-page-structure.md │ │ │ └── visual-benchmarking/ ← Quality auditor │ ├── SKILL.md │ └── references/ │ ├── scoring-criteria.md │ └── enrichment-sources.md │ ├── examples/ ← Real output examples │ ├── cashapp/ ← Gold standard page │ ├── robinhood/ ← Gold standard page │ └── screenshots/ ← Screenshots for README │ └── evals/ ← Autoresearch binary evals ├── creative-visual-research.yaml ├── visual-competitive-analysis.yaml └── visual-benchmarking.yaml ``` --- ## Phase 3: README Design Following Corey's playbook: ### Hero Section - One-sentence pitch: "Agent skills for competitive visual research. Discover, capture, analyze, and build brand analysis pages — automatically." - Pipeline diagram (ASCII or image): ``` ┌─────────────────────────────────┐ │ visual-research-context │ │ (read by all skills first) │ └──────────────┬──────────────────┘ │ ┌──────────┼──────────┐ ▼ ▼ ▼ ┌────────┐ ┌────────┐ ┌────────┐ │Research│ │ Build │ │ QA │ │Pipeline│ │ Pages │ │ Audit │ ├────────┤ ├────────┤ ├────────┤ │creative│ │visual- │ │visual- │ │-visual-│ │competi-│ │bench- │ │research│ │tive- │ │marking │ │ │ │analysis│ │ │ └───┬────┘ └───┬────┘ └───┬────┘ │ │ │ └────┬─────┘ ┌────┘ ▼ ▼ ┌─────────────────────┐ │ Shipped Page 📄 │ └─────────────────────┘ ``` ### Live Examples Screenshots/links to actual pages built with these skills. This is the credibility signal. ### Quick Start ```bash # Clone into your skills directory git clone https://github.com/[org]/visual-research-skills ~/.claude/skills/visual-research # Or install via OpenClaw openclaw skills install visual-research ``` ### Compatibility "Works with Claude Code, OpenClaw, and any agent that supports the AgentSkills spec." ### How It Works Brief explanation of each skill with one-paragraph descriptions. ### Contributing "Found a way to improve a skill or have a new one? Open a PR." --- ## Phase 4: Launch Strategy ### Pre-Launch (1 week before) - [ ] Finalize all skills and test end-to-end - [ ] Create 2-3 example brand pages (use public brands) - [ ] Record a 60-second demo video showing the pipeline in action - [ ] Write the launch tweet + thread draft - [ ] Identify 10-15 people in the agent skills / marketing space to DM ### Launch Day 1. **Main tweet:** Screenshot of a finished brand page + "I open-sourced the agent skills we use to build visual competitive research pages. 3 skills, end-to-end pipeline. Free." + GitHub link 2. **Thread (5-7 tweets):** - Tweet 2: The pipeline diagram + "Here's how it works" - Tweet 3: creative-visual-research — "It finds agencies, extracts images from Prismic/Sanity APIs, downloads Instagram posts — all without auth" - Tweet 4: visual-competitive-analysis — "13-section brand pages with image tier system, slot manifests, and automated visual QA" - Tweet 5: visual-benchmarking — "6-category audit, T1/T2/T3 scoring, critique generation" - Tweet 6: Before/after — raw research dump vs finished page - Tweet 7: "Works with Claude Code, OpenClaw, any AgentSkills agent. MIT license. PRs welcome." 3. **DM the 10-15 people** — ask them to check it out, quote-tweet if they find it useful 4. **Post to:** r/ClaudeAI, r/LocalLLaMA, Hacker News, ClawHub ### Post-Launch (week 1) - [ ] Respond to every issue and PR quickly - [ ] Share user results/testimonials - [ ] Write a companion blog post: "How We Built a Visual Research Pipeline with Agent Skills" - [ ] Submit to ClawHub marketplace ### Viral Mechanics We're Borrowing from Corey 1. **Complete toolkit** — not a single skill, but an entire workflow 2. **Show real output** — live pages built with these skills 3. **Platform-agnostic** — works with multiple agents 4. **Contributions welcome** — community ownership 5. **Free with value ladder** — skills are free, consulting/services behind them 6. **Ride the wave** — launch while agent skills are still trending 7. **ASCII architecture diagram** — signals engineering depth --- ## Phase 5: Value Ladder (Optional) The open-source skills drive awareness. Behind them: - **CE consulting** — "Want us to run this for your brand? [link]" - **Custom skill creation** — "Need a specialized research pipeline? [link]" - **Example pages** — "See live examples at [staging URL]" --- ## Open Questions 1. **GitHub org name?** — curiousendeavor? ce-skills? visual-research? 2. **Include the styleguide or make it configurable?** — Corey hardcoded his opinions, which worked. We could ship CE style as default but make it swappable. 3. **How much of the script tooling to include?** — extract-images.sh, compress-images.js, section-audit.py all need cleanup for open source 4. **Do we include example output pages?** — Real CashApp/Robinhood pages show quality but might raise IP concerns 5. **Timing?** — Skills trend is hot right now. Ship fast or polish more?