Kostja Zhang

---
name: testimonials-generator
description: When the user wants to add, optimize, or design customer testimonials, reviews, or case study sections. Also use when the user mentions "testimonials," "reviews," "customer quotes," "social proof," "case studies," "testimonial section," "customer reviews," "review schema," "testimonial design," or "social proof section." For case studies page, use customer-stories-page-generator.
metadata:
  version: 1.0.1
---

# Components: Testimonials

Guides testimonial design and placement for conversion. 92% of consumers read reviews before buying; testimonials can increase conversion by up to 67%.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for customer personas and industries.

Identify:
1. **Content type**: Text quotes, video, case studies
2. **Placement**: Product pages, pricing, hero, dedicated page
3. **Audience**: B2B vs B2C; industry/role relevance

## Content Formats

| Format | Effectiveness | Best For |
|--------|---------------|----------|
| **Video** | Highest; 77% say it influences buying | Key landing pages |
| **Text + photo** | Versatile; easy to implement | Product, pricing |
| **Case study** | Deep credibility; specific outcomes | B2B, high-value |
| **Star ratings** | Quick trust signal | E-commerce |

Video: 95% message retention vs 10% for text.

## Best Practices

### Content

- **Specific results**: "Increased revenue by 40%" over generic praise
- **Real photos and names**; avoid stock images
- **Variety**: Different customer types, industries, use cases
- **Current**: Update regularly; remove outdated testimonials

### Placement

- Product pages, pricing sections, near CTAs
- Filter by industry/role so prospects see relevant stories
- Organize by integration or outcome for specificity

### Credibility Signals

- Company logos, job titles
- Verified reviews (badges, links)
- Links to customer profiles or live stores when possible
- Before/after narratives for emotional connection

## Design Guidelines

- Clean layouts; readable typography
- Engaging visuals; avoid clutter
- Mobile-optimized; fast loading
- Carousel for multiple testimonials; see **carousel** for design and accessibility

## SEO

- Testimonial content can include keywords naturally
- Structured data (Review, AggregateRating) for rich snippets

## Accessibility

- Provide alt text for photos
- For carousel design and accessibility (keyboard nav, user control), see **carousel**

## Output Format

- **Format recommendations** (text, video, case study)
- **Placement** suggestions
- **Content** guidelines (specificity, credibility)
- **Design** checklist

## Related Skills

- **carousel**: Carousel layout for multiple testimonials; design and accessibility
- **landing-page-generator**: Testimonials as step 2 (earn trust) in landing page flow
- **trust-badges-generator**: Complementary trust signals; logos and badges
- **hero-generator**: Testimonials in hero for social proof
- **cta-generator**: Place testimonials near CTAs; boost conversion
- **pricing-page-generator**: Testimonials on pricing pages

---
name: popup-generator
description: When the user wants to add, optimize, or audit popups or modals for lead capture or offers. Also use when the user mentions "popup," "modal," "lightbox," "overlay," "exit-intent," "popup form," "modal design," "lead popup," "popup timing," or "popup triggers." For CRO, use conversion-optimization.
metadata:
  version: 1.0.1
---

# Components: Popup / Modal

Guides popup and modal design for conversion. Well-designed popups can achieve up to 25% conversion; poorly timed or intrusive ones hurt UX and SEO. Google penalizes intrusive mobile popups.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for offers and audience.

Identify:
1. **Goal**: Newsletter, discount, lead magnet, demo
2. **Trigger**: Time delay, scroll %, exit intent, click
3. **Mobile**: Critical; smaller screens = easier to interrupt

## Best Practices

### Timing and Context

- **Avoid**: Popup on page load; users hate it
- **Prefer**: After engagement (scroll 25-50%, time on page, exit intent)
- **Personalize**: Returning visitors, cart abandoners, discount users
- **Value-first**: Offer genuine value; act as "helpful teammate" not spam

### Design

- **Short copy**: Clear headline, one benefit, single CTA
- **Visual hierarchy**: Guide attention to CTA; don't distract
- **Easy exit**: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
- **Brand consistency**: Build instant comfort

### Mobile

- **Size**: Fit screen; thumb-friendly close
- **Lightweight**: Avoid heavy assets; affects LCP
- **SEO**: Google penalizes intrusive interstitials; avoid full-page takeover on mobile

### Avoid

- Dark patterns (fake close, hidden options)
- Too early or too frequent
- Multiple popups in one session
- Blocking content without clear value

## Triggers

| Trigger | Use |
|---------|-----|
| **Time delay** | 5-15s typical; after some engagement |
| **Scroll %** | 25-50% read; user invested |
| **Exit intent** | Mouse leaving viewport; last chance |
| **Click** | User-initiated; least intrusive |

## Output Format

- **Offer** and copy
- **Trigger** (timing, scroll, exit intent)
- **Design** (size, CTA, exit)
- **Mobile** checklist

## Related Skills

- **signup-login-page-generator**: Full account signup → dedicated page preferred; popup for lightweight capture
- **landing-page-generator**: Lead capture popups on landing pages; popup as alternative to full-page form
- **newsletter-signup-generator**: Popup often contains signup form
- **cta-generator**: Popup CTA design
- **top-banner-generator**: Alternative to popup; less intrusive for announcements
- **sidebar-generator**: Alternative for CTAs; in-content often converts better
- **brand-visual-generator**: Popup styling

---
name: newsletter-signup-generator
description: When the user wants to design, optimize, or audit newsletter signup forms. Also use when the user mentions "newsletter," "email signup," "subscribe form," "email capture," "lead magnet," "newsletter form," "email opt-in," "subscribe CTA," "newsletter signup," or "email list building." For email strategy, use email-marketing.
metadata:
  version: 1.0.1
---

# Components: Newsletter Signup

Guides newsletter signup form design for list growth. Email subscribers spend 138% more than non-subscribers; top popups convert at 23%+.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for audience and value proposition.

Identify:
1. **Placement**: Header, footer, popup, inline, sidebar
2. **Incentive**: What subscribers receive
3. **Platform**: Web, mobile, both

## Form Design

### Minimal Fields

- **Email only** when possible; highest conversion
- Add name only if needed for personalization
- Wrong number of fields significantly impacts conversion

### Value Proposition

- Clear: what subscribers receive, how often
- Transparent: avoid disappointing subscribers
- Incentive: lead magnet, discount, exclusive content

### Visual Design

- Clearly clickable submit button
- Mobile-first; responsive layout
- Appropriate input types (e.g., `type="email"` for mobile keyboards)
- Trust marks or security indicators

## Placement

| Placement | Best For | Pros | Cons |
|-----------|----------|------|------|
| **Header** | High visibility | Always visible | Limited space |
| **Footer** | Secondary capture | Non-intrusive | Lower visibility |
| **Footer bar** | Persistent | Sticky | Can annoy |
| **Popup** | High intent | High conversion | Intrusive |
| **Inline** | Content pages | Contextual | Depends on scroll |

- Avoid hiding forms behind unclicked buttons/links
- Don't place competing forms nearby

## Accessibility

| Requirement | Practice |
|-------------|----------|
| **Labels** | `<label>` for each input; `for`/`id` association |
| **Placeholders** | Don't replace labels; supplement only |
| **Error messages** | Clear, associated with field |
| **Keyboard** | Full tab order; submit via Enter |
| **Touch targets** | ≥44×44px for submit button |

## Technical

- **Validation**: Client-side; server-side required
- **Privacy**: Link to privacy policy; GDPR/CCPA compliance
- **Double opt-in**: When required by jurisdiction or best practice

## Output Format

- **Form structure** (fields, copy)
- **Placement** recommendation
- **Value proposition** suggestions
- **Accessibility** checklist

## Related Skills

- **signup-login-page-generator**: Full account signup; form design principles apply
- **landing-page-generator**: Lead capture landing page contains signup form; LP exchanges value for email
- **email-marketing**: Full email marketing strategy; EDM, newsletter, deliverability, content types
- **footer-generator**: Footer often hosts signup forms
- **cta-generator**: Submit button is a CTA
- **trust-badges-generator**: Trust marks near form

---
name: cta-generator
description: When the user wants to design, optimize, or audit call-to-action (CTA) buttons. Also use when the user mentions "CTA," "call to action," "button design," "conversion button," "primary action," "CTA copy," "button text," "CTA placement," "conversion CTA," or "action button." For landing pages, use landing-page-generator.
metadata:
  version: 1.1.1
---

# Components: Call-to-Action (CTA)

Guides CTA button design for conversion. A well-designed CTA can increase conversion by 25–10%.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for conversion goals.

Identify:
1. **Context**: Hero, form, pricing, product page
2. **User stage**: Awareness, consideration, decision
3. **Primary action**: Sign up, buy, trial, download

## Design Principles

### Visual Clarity

- **Look like buttons**: Background, border, corner radius, shadow
- **Stand out**: Contrasting color; clear hierarchy
- **Size**: ≥48×48px for touch; minimum 48px wide

### Hierarchy

- **Primary CTA**: One per section; impossible to miss
- **Secondary CTA**: Lower priority; visually distinct
- **Avoid**: Multiple competing CTAs causing choice overload

### Color & Shape

- **Color**: High contrast; red/orange for urgency
- **Shape**: Rounded = friendly; angled = dynamic
- **Accessibility**: →.5:1 contrast for text

## Copy Best Practices

- **Action-oriented**: "Buy," "Sign up," "Subscribe," "Get started"
- **Loss aversion**: "Claim Your Discount Before It's Gone" vs "Get 10% Off"; see **discount-marketing-strategy** for discount campaign design
- **Clear, no ambiguity**: User knows exactly what happens
- **Scarcity/urgency**: When appropriate; avoid overuse

## Placement

- **Above the fold** for primary actions
- **After value proposition**; build value before CTA
- **Near trust signals** (testimonials, badges)
- **Sticky/fixed** for long pages (use sparingly)

## Technical

- **Semantic HTML**: `<button>` or `<a>` with `role="button"` when needed
- **Visible focus state** for keyboard users
- **Loading state** for async actions: disable button during async operations; show spinner or loading text; prevent double-submit
- **cursor-pointer**: Add `cursor-pointer` to all clickable CTAs; default cursor on interactive elements is poor UX
- **aria-label**: Use `aria-label` for icon-only buttons (e.g., close, search); screen readers need descriptive labels
- **Hover stability**: Use color/opacity transitions (150–300ms); avoid scale transforms that shift layout

## Testing

- A/B test: color, copy, placement, size
- Measure: click-through rate, conversion rate

## Output Format

- **CTA copy** suggestions
- **Design** notes (color, size, hierarchy)
- **Placement** recommendations
- **Accessibility** checklist (cursor-pointer, aria-label, focus, loading state)

## Related Skills

- **hero-generator**: Hero typically contains primary CTA
- **landing-page-generator**: CTA is step 5 of landing page flow; single-goal pages
- **testimonials-generator**: Testimonials near CTAs boost conversion
- **trust-badges-generator**: Badges near CTAs increase trust
- **pricing-page-generator**: CTA on pricing pages (e.g., "Start free trial")

---
name: tab-accordion
description: When the user wants to add or optimize tab or accordion components for content organization. Also use when the user mentions "tab component," "accordion," "expandable content," "collapsible sections," "tabbed content," "FAQ accordion," "how-to tabs," "horizontal tabs," "vertical accordion," "content in tabs," "hidden content SEO," "details summary," or "disclosure widget." For FAQ content, use faq-page-generator.
metadata:
  version: 1.1.1
---

# Components: Tab & Accordion

Guides tab and accordion implementation for organizing content without excessive vertical space. Two layout patterns: **vertical accordion** (FAQ-style, stacked) and **horizontal tabs** (how-to style, side-by-side). Both improve UX by reducing scroll; SEO impact depends on implementation and content placement.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Layout Patterns

| Pattern | Layout | Best for | Example |
|---------|--------|----------|---------|
| **Vertical accordion** | Stacked; expand/collapse one at a time | FAQ, Q&A, long lists, objection handling | "How do I return?" → answer below |
| **Horizontal tabs** | Side-by-side labels; one panel visible | How-to steps, product specs, pricing tiers, comparisons | "Step 1 \| Step 2 \| Step 3" |

**Mobile**: Vertical accordion works well on small screens (natural scroll). Horizontal tabs can feel cramped—consider accordion, dropdown, or full-width tab bar that scrolls.

## SEO: Is It Friendly?

**Google's position**: Google indexes and ranks content inside tabs and accordions fully; hidden content receives full weight (confirmed since 2016 mobile-first indexing). Gary Illyes: "we index the content, its weight is fully considered for ranking."

**Practical nuance**: Some tests show always-visible content outperforms hidden content in rankings. Reserve tabs/accordions for **secondary** content; place primary, keyword-critical content in visible areas.

| Content type | Placement |
|--------------|-----------|
| **Primary / ranking-focused** | Visible above fold; not hidden |
| **Secondary / supporting** | Tabs, accordions acceptable |
| **FAQ answers** | Accordion OK; first item expanded by default; see **faq-page-generator** |

### Indexing Requirements

**Content must be in the DOM on page load.** Google does not simulate user clicks; it cannot "click" tabs to discover content.

| Implementation | Indexed? |
|----------------|----------|
| All tab content in HTML at load | ✅ Yes |
| Content loaded via AJAX on tab click | ❌ No |

**Recommendation**: Server-render all tab content in the initial HTML; use CSS/JS only to show/hide. Prefer `<details>`/`<summary>` or equivalent server-rendered markup. See **rendering-strategies** for SSR, SSG, CSR and crawler visibility.

### Horizontal Tabs: More Tabs, More Content?

**Technically**: Yes—if all content is in the DOM at load, more tabs = more indexable content. Mobile-first indexing gives full weight to tabbed content in HTML.

**Strategically**: Not always. **Signal dilution** occurs when many tabs = many different topics on one page. Google may struggle to understand which query the page should rank for; topical authority and keyword focus get spread thin.

| Scenario | Use tabs? | Alternative |
|----------|-----------|-------------|
| **Same topic** (How-to Step 1/2/3; product specs: dimensions, materials, shipping) | ✅ Yes | — |
| **Different topics** (Service A, Service B, Portfolio, Blog) | ❌ No | Separate URLs per topic; see **content-strategy** for pillar/cluster |

**When many horizontal tabs work**: All tabs semantically related to one query (e.g., one how-to, one product). **When to use separate pages**: Each tab is a distinct topic deserving its own URL, crawl, and ranking opportunity.

## Implementation

### Native HTML (Recommended)

Use `<details>` and `<summary>`—no JavaScript required; accessible; crawlable.

```html
<details open>
  <summary>First question (expanded by default)</summary>
  <p>Answer content here.</p>
</details>
<details>
  <summary>Second question</summary>
  <p>Answer content here.</p>
</details>
```

- **First tab/accordion**: Add `open` attribute so it's expanded by default
- **`<summary>`**: Must be first child of `<details>`; acts as toggle
- **Progressive enhancement**: Style with CSS; add JS only if needed (e.g., close others when one opens)

### JavaScript-Dependent Tabs

If using JS-only tabs: **ensure all tab content is in the DOM at page load**, not loaded via AJAX on click. Google does not simulate tab clicks. Prefer `<details>`/`<summary>` or server-rendered HTML. See **rendering-strategies**.

### Avoid

- Content loaded only after user click (AJAX, lazy-loaded via fetch)—crawlers will not index it
- `display: none` or `visibility: hidden` for primary content—Google may treat differently
- Many tabs with unrelated topics on one page—causes signal dilution; use separate URLs instead

## Content Best Practices

| Practice | Purpose |
|----------|---------|
| **First item expanded** | Ensures primary content visible on load; better for SEO and UX |
| **Descriptive headers** | `<summary>` / tab labels should clearly describe content; include keywords naturally |
| **Logical structure** | H2/H3 for sections; supports snippet extraction; see **featured-snippet** |
| **Answer-first** | For FAQ: 40–60 words direct answer; then detail; see **faq-page-generator** |

## Use Cases

| Use case | Format | Layout | Notes |
|----------|--------|--------|-------|
| **FAQ** | Accordion | Vertical | FAQPage schema; first Q expanded; see **faq-page-generator** |
| **How-to steps** | Tabs | Horizontal | Step 1, Step 2, Step 3; sequential flow |
| **Product specs** | Tabs | Horizontal | Dimensions, materials, shipping—secondary to hero |
| **Long guides** | Accordion | Vertical | Collapsible sections; see **toc-generator** |
| **Pricing tiers** | Tabs | Horizontal | Compare plans; primary CTA visible |
| **Objection handling** | Accordion | Vertical | "What about X?"—supporting conversion |

## Schema & Rich Results

- **FAQ (vertical accordion)**: FAQPage JSON-LD; schema must match on-page content exactly; see **schema-markup**, **faq-page-generator**
- **How-to (horizontal tabs)**: HowTo schema for step-by-step content; see **schema-markup**, **featured-snippet**
- **Other tabs**: No specific schema; ensure semantic HTML (headings, structure)

## UX & Accessibility

- **Visual indicator**: Arrow, plus/minus, or chevron to show expand/collapse state
- **Keyboard**: `<details>`/`<summary>` natively keyboard-accessible
- **Core Web Vitals**: Avoid layout shift (CLS) when expanding; reserve space or animate smoothly
- **Mobile**: Touch targets ≥44×44px; vertical accordion often better than horizontal tabs on small screens (tabs can be cramped; accordion scrolls naturally)

## Pre-Implementation Checklist

- [ ] All tab/accordion content in DOM at page load (no AJAX on click)
- [ ] Primary ranking content visible, not hidden
- [ ] First tab/accordion expanded by default
- [ ] Using `<details>`/`<summary>` or equivalent server-rendered HTML
- [ ] Headers descriptive; keywords natural
- [ ] Tabs share one topic (avoid signal dilution); if different topics, consider separate pages
- [ ] For FAQ: FAQPage schema matches content

## Related Skills

- **faq-page-generator**: FAQ structure, answer length, schema; accordion is common FAQ UI
- **featured-snippet**: Answer-first, H2/H3; content in accordions can be extracted
- **schema-markup**: FAQPage for FAQ accordions; HowTo for step-by-step tabs
- **content-strategy**: Pillar/cluster architecture; when to use separate pages vs tabs
- **toc-generator**: Collapsible TOC; similar disclosure pattern
- **content-optimization**: Word count, structure, multimedia in expandable sections
- **rendering-strategies**: SSR, SSG, CSR; content in initial HTML for crawlers

---
name: logo-generator
description: When the user wants to optimize logo placement, linking, or branding on a website. Also use when the user mentions "logo," "brand logo," "header logo," "logo placement," "AI logo design," "logo link," "logo alt text," "logo sizing," "favicon logo," or "logo usage." For full brand visuals, use brand-visual-generator.
metadata:
  version: 1.0.1
---

# Components: Logo

Guides logo placement and implementation for brand recall and navigation. Logo placement affects user orientation and conversion.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for brand guidelines and visual identity.

**Brand guidelines source**: Logo usage rules (clear space, minimum sizes, variants) come from **branding** (strategy), **brand-visual-generator** (visual specs), or media kit. Ensure alignment before implementation.

Identify:
1. **Context**: Header, footer, standalone
2. **Platform**: Web, mobile, both
3. **Brand guidelines**: Size, clear space, variants (from brand-visual-generator or media kit)

## Placement Best Practices

### Optimal: Top-Left

- **Brand recall**: Users are 89% more likely to remember logos in top-left vs. right
- **Left-aligned**: ~39% brand recall vs. 21% for right-aligned
- **Navigation anchor**: Users expect logo to link to homepage; left placement is intuitive
- **Scan pattern**: Aligns with left-to-right reading flow

### Avoid

- **Centered logos**: Users navigating home from centered logos are ~6x more likely to fail
- **Right-aligned**: Violates conventions; harms brand recognition

### When Center May Work

- Minimal headers with few elements
- Brand-heavy landing pages where logo is focal point
- Ensure logo still links to homepage and is clearly clickable

## Implementation

### Linking

- **Always link to homepage** from logo
- Use `<a href="/">` wrapping logo image
- Expected behavior; don't break convention

### Image

- Use appropriate format (SVG preferred for scalability)
- Provide `alt` text: company/product name, not "logo"
- Example: `alt="Acme Inc."` not `alt="Logo"`

### Size & Clear Space

- **Minimum size**: Document in brand guide; prevent illegibility at small sizes (favicon, mobile header).
- **Clear space**: Minimum space around logo; no text or graphics within this zone. Defined in brand-visual-generator.
- **Responsive**: Ensure readability on mobile; test at 375px, 768px, 1024px.
- **Variants**: Primary, secondary, monogram; light/dark backgrounds per brand guidelines.

## AI Product Logo Design (Optional)

For AI/SaaS products, [Alignify AI Logo Guide](https://alignify.co/insights/ai-logo-design) offers industry-specific guidance.

### Design Trends

*Examples are illustrative; no endorsement implied.*

| Style | Use Case | Examples |
|-------|----------|----------|
| **Hexagon** | Technical platforms, enterprise AI | Common in AI logos (e.g. OpenAI) |
| **Rotation/swirl** | Generative AI, creative tools | E.g. DeepMind, Stability AI |
| **Minimalist robot** | Assistants, chatbots | E.g. Jasper, Replika |
| **Emoji/symbol** | Consumer, friendly AI | E.g. Hugging Face, Zoom AI |

### Design Process

1. **Positioning**: B2B (professional, trustworthy) vs B2C (friendly, approachable)
2. **Core element**: Choose hexagon, rotation, robot, or emoji per product type
3. **Color**: Tech blue, blue-to-purple gradients, monochrome; consider dark mode
4. **Test sizes**: Favicon, mobile, header; ensure recognition at small sizes
5. **Trademark check**: Avoid conflicts with existing marks

### Avoid

- Overly complex; modern AI logos favor minimalism
- Too similar to competitors; balance industry recognition with uniqueness
- Overly technical symbols for B2C; use friendlier designs
- Ignoring mobile display; test at multiple sizes
- Frequent rebranding; choose a long-term design

## SEO

- Alt text supports accessibility and image SEO
- Logo link contributes to internal linking (homepage)

## Accessibility

| Requirement | Practice |
|-------------|----------|
| **Alt text** | Descriptive; company name |
| **Contrast** | Logo visible against background |
| **Focus** | Link receives visible focus state |
| **Touch targets** | Adequate size on mobile (>=44x44px) |

## Output Format

- **Placement** recommendation
- **Implementation** notes (HTML, alt, link)
- **Accessibility** checklist
- **AI products** (optional): Design trend and archetype suggestions per positioning

## Related Skills

- **branding**: Brand strategy; logo rules defined in brand guidelines
- **navigation-menu-generator**: Logo typically sits in header with nav
- **hero-generator**: Logo appears in hero context on landing pages
- **media-kit-page-generator**: Logo assets, brand guidelines, usage rules
- **favicon-generator**: Favicon derived from logo; consistent brand in browser tabs
- **brand-visual-generator**: Typography, colors, spacing; logo clear space and variants

---
name: hero-generator
description: When the user wants to design, optimize, or audit hero sections (above-the-fold main visual area). Also use when the user mentions "hero," "hero section," "hero area," "above the fold," "above the fold content," "landing hero," "main banner," "banner section," "first fold," "hero section design," "hero conversion," "split layout hero," "centered hero," or "hero alignment." For homepage, use homepage-generator.
metadata:
  version: 1.2.1
---

# Components: Hero Section

Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for value proposition, audience, and Section 12 (Visual Identity).

Identify:
1. **Page type**: Homepage, landing, product, pricing
2. **Primary goal**: Signup, trial, purchase, learn more
3. **Platform**: Web, mobile, both

## Core Components (Four Essentials)

- **Headline (H1)**: 6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds.
- **Subheading**: Clear, concise explanation reinforcing why the product/service is valuable.
- **Primary CTA**: Single, prominent action button visible without scrolling. One per hero to avoid choice overload.
- **Visual**: High-quality image, video, or animation that amplifies the message.

### Optional but Effective

- **Trust cues**: 1–3 elements (reviews, logos, statistics)
- **Secondary CTA**: For users not ready for primary action

## Layout Types

Hero is a **Spotlight layout**—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal.

| Layout | Structure | Best for |
|--------|-----------|----------|
| **Split (50/50)** | Text left, visual right (or vice versa); equal weight | Product, SaaS; clear value + demo |
| **Split (75/25)** | Text dominant; smaller image column | Copy-heavy; trust-first |
| **Split (25/75 "Signpost")** | Small image beside primary content | Minimal visual; emphasis on headline |
| **Centered** | Text + CTA centered; visual full-width or stacked | Brand, landing; single CTA |
| **Full-width image** | Image background; overlay text | Emotional; lifestyle, brand |

**Responsive**: Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens.

## Alignment

| Axis | Options | Use |
|------|---------|-----|
| **Horizontal** | Left, center, right | Left align for text-heavy; center for minimal |
| **Vertical** | Top, center, bottom | Center for full-viewport hero; top for short hero |

## Best Practices

### 3-Second Rule

The hero must answer three questions within 3 seconds: **What is this?** **Why should I care?** **What should I do next?** ~80% of users never scroll beyond the hero; make an immediate impact.

### Messaging

- No guessing required; message must be instantly clear.
- Single primary CTA to avoid choice overload.
- Action-oriented, benefit-focused copy.
- **Emotional intent first**: Evoke emotion (trust, excitement, confidence) before users read the headline. Avoid generic phrases ("Welcome to Our Website") or overly clever wordplay.

### Visuals

- Fast-loading; avoid heavy assets that delay LCP
- Brand-aligned; use typography and colors from brand-visual-generator
- Support the message; don't distract
- **Frontend aesthetics**: For motion (staggered reveals, hover), spatial composition, and backgrounds—see **brand-visual-generator** Frontend Aesthetics

### Technical

- Mobile-first design
- Lightweight for quick loading
- Ensure LCP (Largest Contentful Paint) optimization

## SEO Considerations

- Headline often contains `<h1>`; include primary keyword
- Hero content in initial HTML; avoid JS-only rendering. See **rendering-strategies**
- **Image optimization**: Alt text, format (WebP), LCP, responsive—see **image-optimization**

## UX Guidelines

### Hierarchy

- Headline > Subheading > CTA
- Visual should complement, not compete with, text

### Accessibility

| Requirement | Practice |
|-------------|----------|
| **Contrast** | Text over images: >=4.5:1; use overlay if needed |
| **Touch targets** | CTA >=44x44px |
| **Keyboard** | CTA keyboard-accessible; visible focus indicator |
| **Screen readers** | Proper heading order; image alt text; `aria-label` for icon-only buttons |
| **Reduced motion** | Respect `prefers-reduced-motion` for animations |
| **Interaction** | CTA has `cursor-pointer`; hover uses color/opacity (not scale) to avoid layout shift |

## Testing

- A/B test headline, CTA copy, and visuals
- Measure bounce rate, conversion rate, time to first interaction

## Output Format

- **Hero structure** (headline, subheading, CTA, visual)
- **Copy suggestions**
- **Technical** checklist (LCP, accessibility, image optimization)
- **Testing** recommendations

## Related Skills

- **card**: Hero vs card—hero is single above-fold; cards are repeated units in grid
- **grid**: Hero is one section; content below often uses grid (products, features)
- **cta-generator**: Hero typically contains primary CTA
- **trust-badges-generator**: Trust cues in hero
- **logo-generator**: Logo appears in hero context
- **brand-visual-generator**: Typography, colors, spacing for hero design
- **homepage-generator**: Hero is central to homepage design
- **landing-page-generator**: Hero is step 1 of landing page flow; campaign pages
- **image-optimization**: Hero image optimization (alt, WebP, LCP, responsive)
- **rendering-strategies**: Content in initial HTML; SSR/SSG for hero

---
name: favicon-generator
description: When the user wants to implement, optimize, or audit favicon and app icons. Also use when the user mentions "favicon," "app icon," "browser icon," "touch icon," "PWA icon," "favicon sizes," "apple-touch-icon," "favicon.ico," "site icon," or "tab icon." For visual system, use brand-visual-generator.
metadata:
  version: 1.0.1
---

# Components: Favicon

Guides favicon and app icon implementation for brand consistency across browser tabs, bookmarks, mobile home screens, and **Google Search results**. Favicons help users identify sites; missing or incorrect icons hurt trust.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for brand and visual identity.

Identify:
1. **Tech stack**: Next.js, WordPress, static HTML, etc.
2. **PWA**: Is the site a PWA or planning to be?
3. **Existing assets**: Logo, icon files

## Required Sizes

| Size | Use |
|------|-----|
| **16x16** | Browser tabs, standard displays |
| **32x32** | Retina/HiDPI browser tabs |
| **180x180** | Apple Touch Icon (iOS home screen); no transparency |
| **192x192** | Android Chrome home screen, PWA launcher |
| **512x512** | PWA splash screens, adaptive icons |

**Optional**: 48x48, 96x96, 120x120, 152x152, 167x167, 256x256 for broader coverage.

## Formats

| Format | Use |
|--------|-----|
| **SVG** | Modern browsers; scalable; supports dark mode via media queries; lightweight |
| **PNG** | High-DPI; explicit sizes; easy to generate; required for Apple Touch Icon |
| **ICO** | Legacy; bundles multiple sizes; fallback for older browsers |

**Recommended**: Provide SVG + PNG fallbacks. Never skip Apple Touch Icon (180x180); iOS shows a generic screenshot without it.

## Google Search (SERP Display)

See **serp-features** for SERP feature types and optimization.

Favicons can appear in Google Search results next to your site's listings. [Google Search Central](https://developers.google.com/search/docs/appearance/favicon-in-search) requirements:

| Requirement | Guideline |
|-------------|-----------|
| **Placement** | Add `<link rel="icon" href="/path/to/favicon.ico">` to **homepage** header |
| **One per hostname** | One favicon per hostname; `example.com` and `code.example.com` are separate; `example.com/sub-site` shares the same favicon |
| **Crawlability** | Googlebot-Image must crawl favicon; Googlebot must crawl homepage; do not block either in robots.txt |
| **Shape** | Square (1:1 aspect ratio); minimum 8x8px; **preferably >48x48px** for quality across platforms |
| **Stable URL** | Do not change favicon URL frequently |
| **Appropriate** | No inappropriate content (pornography, hate symbols); Google may replace with default icon |
| **Timing** | Crawling can take days to weeks; use Search Console URL Inspection to request indexing |

**Supported rel values**: `icon`, `shortcut icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`. **href** can be relative (`/favicon.ico`) or absolute; favicon can be hosted on CDN.

## Implementation

### HTML Link Tags

```html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```

### Next.js

Place in `/app`: `favicon.ico`, `icon.png`, `apple-icon.png`. Next.js auto-generates tags.

### PWA Manifest

Include `icons` array in `manifest.json` with 192x192 and 512x512 for maskable icons.

## Best Practices

- **Simplicity**: At 16x16, complex details are illegible; use simplified logo mark; design for brand recognition in SERPs
- **Consistency**: Favicon should match logo/brand (logo-generator, brand-visual-generator)
- **Cache**: Use long cache; version for updates (e.g. `/favicon.ico?v=2`)
- **Tools**: RealFaviconGenerator, favicon.io, or favicons npm package for automation
- **Test**: Check across browsers, dark mode, and Search Console (favicon may take days to weeks to appear)

## Output Format

- **Size** checklist (16, 32, 180, 192, 512; >48x48 for Google Search)
- **Format** recommendations (SVG, PNG, ICO)
- **Implementation** notes per tech stack (homepage header placement)
- **Google Search** checklist (crawlability, stable URL, appropriate content)
- **Manifest** (if PWA)

## Related Skills

- **logo-generator**: Favicon typically derived from logo; consistent branding
- **media-kit-page-generator**: Media kit should include favicon or link to brand assets
- **brand-visual-generator**: Visual identity; favicon aligns with brand colors and mark
- **indexing**: Favicon requires crawlable homepage; URL Inspection for indexing

---
name: brand-visual-generator
description: When the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.
license: MIT
metadata:
  version: 1.4.0
---

# Components: Brand Visual Identity

Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions.

**Keywords**: visual identity, design tokens, color palette, typography, CSS variables, slide deck, brand guidelines, frontend aesthetics, accessibility

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read Section 12 (Visual Identity) for colors, typography, spacing. See **branding** for brand strategy and visual identity strategy layer.

Identify:
1. **Scope**: New brand, audit, or component design
2. **Touchpoints**: Web, print, social, product UI, **slides** (PowerPoint, Google Slides, Keynote), **documents** (Word, Google Docs, PDF reports)
3. **Existing assets**: Logo, style guide, design files

## Best Practices

### Typography

- **Two-font system**: One display font for headlines, one body font for text. Contrast + harmony: different enough for distinct roles, similar enough to feel cohesive.
- **Body font**: Prioritize legibility—large x-height, open counters. For neutral/safe: Source Sans 3, Lora, IBM Plex Sans. **For distinctiveness**: avoid overused AI fonts (Inter, Roboto, Arial, system fonts); prefer characterful choices that elevate the brand. See **Frontend Aesthetics**.
- **Headline font**: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure.
- **Type scale**: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block.
- **Pairing rule**: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families.
- **Sizes**: Hero, section, subheading, body, caption; responsive scaling. Line length max 120 chars; generous line-height.

### Color Palette

- **Structure**: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors.
- **Industry mapping**: Finance → blue, gray, navy (stability); Luxury → rose gold, burgundy, black (exclusivity); Tech → teal, neon accents, charcoal (innovation); Wellness → lavender, peach, mint (calm); Sustainability → sage green, earthy tones.
- **Reproduction**: HEX, RGB, CMYK for print and digital. For **programmatic slides** (e.g. python-pptx), map brand HEX to RGB tuples `(R, G, B)` for fills and text; keep a single source of truth table (HEX + RGB) in the deliverable.
- **Accessibility**: Contrast >=4.5:1 for normal text, >=3:1 for large text (18px+ or 14px+ bold). Don't rely on color alone for information.

### Spacing

- **Margins**: Horizontal (e.g. 120px), vertical section padding
- **Grid**: Consistent spacing scale (8px base common)
- **Logo clear space**: Minimum space around logo; document in brand guide

### Logo Usage

- **Variants**: Primary, secondary, monogram; light/dark backgrounds
- **Minimum size**: Prevent illegibility
- **Don't**: Stretch, recolor, add effects without approval

### Anti-Patterns (Avoid)

- **Aesthetics over functionality**: Don't sacrifice usability for visual appeal.
- **Unclear CTAs**: Limit primary CTA to one per section; visually differentiate primary vs secondary.
- **Inconsistent elements**: Pixelated icons, mismatched spacing/typography/color reduce trust.
- **Poor text hierarchy**: Disordered, cluttered text confuses users.
- **Overusing effects**: Drop shadows, pop-ups, crowded UI distract from content.
- **Chasing trends blindly**: Adopt trends only when they fit project needs.
- **Ignoring performance**: Heavy assets and complex layouts hurt load times.
- **Generic AI aesthetics**: Inter, Roboto, Arial, Space Grotesk, and system fonts contribute to cookie-cutter design; avoid clichéd schemes (e.g., purple gradients on white). Prefer distinctive choices when brand differentiation matters.
- **Emoji as icons**: Use SVG icons (Heroicons, Lucide, Simple Icons)—never emojis (🎨 🚀 ⚙️) as UI icons; emojis look unprofessional and inconsistent.
- **Unstable hover states**: Use color/opacity transitions on hover; avoid scale transforms that shift layout or cause content jump.

### Accessibility Checklist

- **Contrast**: Normal text >=4.5:1; large text >=3:1; interactive elements >=3:1.
- **Focus**: Visible focus indicator (>=2px solid, 3:1 contrast); logical Tab order; no keyboard traps.
- **Color**: Never use color alone to convey information; add text or icons for states (error, success).
- **Keyboard**: All interactive elements reachable via Tab, Enter, Spacebar.
- **Reduced motion**: Respect `prefers-reduced-motion` for animations.

## Frontend Aesthetics

Guides distinctive, production-grade frontend implementation. Components (hero, CTA, footer, etc.) and pages (landing, home, features) should reference these principles for visual differentiation. **Intentionality over intensity**: bold maximalism and refined minimalism both work when executed with precision.

### Typography

- **Avoid generic AI fonts**: Inter, Roboto, Arial, system fonts, Space Grotesk. These create cookie-cutter aesthetics.
- **Distinctive pairing**: One display font (headlines, personality) + one refined body font (readability). Choose characterful, unexpected fonts that elevate the interface.
- **Consistency**: Use CSS variables; limit to 3–4 type styles per block.

### Motion

- **High-impact moments**: One well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions.
- **Prioritize**: CSS-only for HTML; Motion library for React when available. Scroll-triggering and hover states that surprise.
- **Accessibility**: Always respect `prefers-reduced-motion`; provide reduced or no-motion alternatives.

### Spatial Composition

- **Unexpected layouts**: Asymmetry, overlap, diagonal flow, grid-breaking elements.
- **Balance**: Generous negative space OR controlled density—choose intentionally.
- **Hierarchy**: Clear visual flow; avoid predictable, evenly-distributed layouts.

### Backgrounds & Visual Details

- **Atmosphere over flat**: Create depth rather than defaulting to solid colors.
- **Techniques**: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
- **Context**: Match effects to overall aesthetic; don't distract from content.

### Never

- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (e.g., purple gradients on white)
- Predictable layouts and cookie-cutter component patterns
- Design that lacks context-specific character
- Emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)

## AI Brand Aesthetics (Optional)

For AI/SaaS products, consider these visual trends and brand archetypes; adopt, ignore, or counter consciously to avoid sameness.

### Visual Trends

| Trend | Signal |
|-------|--------|
| **Off-white / beige** | Trust, restraint, premium without gloss |
| **Organic gradients** | Distinctiveness; add grain, texture |
| **Digital impressionism** | Mood over literal; suggestive, not descriptive |
| **Lomo / imperfect** | Exploratory, human creativity |
| **Contemporary realism** | Precision, reliability, mastery |
| **Sketch / scribble** | Human thought, exploration over certainty |
| **Non-brand academia** | Authority; work speaks for itself |
| **Technical illustrations** | Rigor, engineering depth |
| **Quirky cuteness** | Approachability; counter doomsday narratives |
| **Morphing objects** | Emergence, systems that learn |
| **Futuristic surrealism** | Gateway to new worlds |
| **Outer space** | Exploration, unknown |
| **ASCII / pixels** | Retro, playful, technical |
| **Generative art** | Algorithmic, living system |

### Brand Archetypes

| Archetype | Tone | Visual |
|-----------|------|--------|
| **Likeable Leaders** | Seriousness, stability, trust | Muted greys, warm beiges; impressionistic |
| **Gentle Humanists** | People before tech | Hand-drawn, everyday moments, nature |
| **Nerdy Idealists** | Engineering culture | Unpolished, quirky, non-branded |
| **Bold Builders** | Groundbreaking, transformative | Dark palettes, space references |
| **Utopian Dreamers** | What becomes possible | Retrofuturistic, surreal worlds |

## Product Marketing Context (Section 12)

When creating or updating `.cursor/project-context.md`, add:

```markdown
## 12. Visual Identity (Optional)

**Colors**: Primary #XXX, secondary #XXX; backgrounds #XXX
**Typography**: Headings (font, weight, color); Body (font, weight, color)
**Sizes**: Hero Xpt, section Xpt, body Xpt
**Spacing**: Margins Xpx; section padding Xpx
**Layout**: Viewport, top bar, footer heights if fixed
```

## Slides & Documents (Non-Web)

When the user asks for **deck or document** branding—not only websites:

- **Slide master**: Background color from token; title font = display/heading token; body = body token; default title/body sizes aligned to type scale from **branding** / Section 12.
- **Theme colors**: Map primary, secondary, background, text, and one accent to the presentation app's theme (PowerPoint *Design → Variants*, Google Slides *Theme*, Keynote *Document* settings) so shapes and charts inherit palette.
- **Charts & shapes**: Cycle accents in a fixed order (e.g. primary → secondary → tertiary) instead of random colors; keeps decks on-brand.
- **Documents**: Same fonts and heading hierarchy as web where possible; specify paragraph style names (Title, Heading 1–3, Normal) with point sizes and colors.

Strategy and narrative layers remain in **branding**; this section is **visual execution** for office/slide tools.

## Brand Guidelines Structure (Single Source of Truth)

Ensure consistency across touchpoints. Include:

- **Logo**: Usage rules, clear space, minimum sizes, variants (light/dark)
- **Colors**: Primary, secondary, CTA, background, text (HEX, RGB, CMYK)
- **Typography**: Font families, hierarchy, sizing, spacing
- **Imagery**: Photography tone, subject matter, visual mood
- **Iconography**: Style, stroke weight, usage rules

## Output Format

- **Typography** spec (fonts, weights, sizes, colors)
- **Color** palette (HEX, usage rules, industry mapping)
- **Spacing** scale
- **Logo** clear space and variants
- **Frontend aesthetics** (optional): Motion, spatial composition, backgrounds—for distinctive implementation
- **Anti-patterns** and accessibility checklist
- **AI products** (optional): Visual trend and archetype alignment
- **Context template** for project-context Section 12
- **Slides/documents** (when requested): theme mapping + master typography + chart accent order

## Related Skills

- **branding**: Brand strategy; visual identity strategy; this skill implements typography, colors, spacing
- **logo-generator**: Logo placement, clear space; brand visual defines logo rules
- **favicon-generator**: Favicon aligns with brand mark and colors
- **media-kit-page-generator**: Media kit hosts brand guidelines document; links to logo, favicon
- **hero-generator**: Hero uses brand typography, colors, spacing
- **404-page-generator**: Error pages maintain brand consistency

---
name: referral-program
description: When the user wants to plan, implement, or optimize referral program strategy. Also use when the user mentions "referral program," "referral marketing," "user referral," "refer-a-friend," "word-of-mouth growth," "referral rewards," "referral tracking," "referral code," "referral incentives," or "viral loop." For referral landing copy, use landing-page-generator.
metadata:
  version: 1.0.1
---

# Channels: Referral

Guides referral program strategy for AI/SaaS products. Leverage existing users to drive growth; 3%-5% conversion vs 1%-2% for ads; CAC 50%-70% lower; referred users LTV 30%-50% higher, retention 20%-30% higher. Referral is necessity in overseas markets, not alternative.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and value proposition.

Identify:
1. **Product type**: SaaS, AI tool, subscription
2. **User base**: Size, engagement, retention
3. **Goal**: Signups, purchases, or both

## Referral vs. Affiliate vs. Influencer

| Dimension | Referral | Affiliate | Influencer |
|-----------|----------|-----------|------------|
| **Who** | Existing users | Professional promoters | KOLs |
| **Incentive** | Discounts, credits | Commission | Fees, product |
| **Barrier** | Low (all users) | Medium | High |
| **Conversion** | 3%-5% | Varies | Varies |

**Referral vs affiliate**: Referral needs no landing page or application; integrated in dashboard. Affiliate requires landing page and approval.

## Reward Models

| Model | Use |
|-------|-----|
| **Two-way** | Both referrer and referee get rewards; highest participation |
| **One-way** | Only referrer rewarded; cost control |
| **Tiered** | Rewards increase with referral count (e.g. $10 for 1-5, $15 for 6-10, $20 for 11+); incentivizes volume |

**Benchmark**: Rewards typically 10%-30% of product price; ~11% off or ~$21 value; weak incentives = low participation. Triggers: signup, purchase, activation, or sustained use.

## Mechanism Types

| Type | Use |
|------|-----|
| **Link-based** | Unique referral link; easy to implement; accurate tracking; share via email, social, SMS; works for web and app |
| **Code-based** | Referral code (e.g. FRIEND20); memorable; offline events; mobile-friendly input |
| **Social referral** | Share buttons (Facebook, X, LinkedIn); viral spread; friend trust; young users |

## Tracking & Attribution

| Method | Use |
|-------|-----|
| **Cookie** | Web apps; 30-90 day window |
| **URL params** | All platforms; persistent in link |
| **Referral code** | Mobile, offline; manual entry |
| **Account association** | Long-term tracking; subscription products |

**Attribution window**: 30-90 days typical; 180 days for subscription. First-touch attribution to avoid double-counting.

## Fraud Prevention

| Risk | Action |
|------|--------|
| **Self-referral** | Detect same device, payment, IP |
| **Fake accounts** | Validate email, payment; monitor patterns |
| **Bulk/automation** | Rate limits; anomaly detection |
| **Per-user cap** | e.g. Max 10 referrals per user |

Use tool anti-fraud features; audit referrals regularly.

## Design Framework

1. **Reward structure**: Type (cash, discount, credits, free service); amount (10%-30% of price); trigger; cap
2. **Tracking**: Choose method; set attribution window; first-touch rule
3. **UX**: One-click share; clear rules; dashboard with referral data; notify on success
4. **Fraud prevention**: See above
5. **Monitor & optimize**: Referral rate, conversion, CAC, LTV; A/B test rewards and flow

## Best Practices

- **Run multiple programs**: Target different audiences, stages, goals
- **Tiered rewards**: Motivate top performers; progressive incentives
- **Friction-free sharing**: Mobile-friendly; one-click share
- **Time-boxed incentives**: "Refer this week for $15 off" creates urgency
- **Placement**: Web, email, app, in-product touchpoints; dashboard integration primary

## Implementation

| Approach | Use |
|----------|-----|
| **Self-build** | Full control; low cost; URL params or cookie + reward logic + fraud checks; open-source (e.g. RefRef) for faster start |
| **Third-party** | Fast launch; Cello, Viral Loops, ReferralCandy (e-commerce), Impact (enterprise); monthly fee |

**Placement**: Most programs integrate in product dashboard; no landing page or application needed. Optional landing page for value prop, rewards, and case studies.

**Startup cost**: Typically hundreds for tools + dev.

## Tools

| Tool | Use |
|------|-----|
| **Cello** | SaaS; AI-driven automation |
| **Viral Loops** | Referral + waitlist + contests |
| **ReferralCandy** | Shopify, e-commerce |
| **Impact** | Enterprise; unified platform |
| **RefRef** | Open-source; self-hosted |

## KPIs

Referral rate, conversion, CAC, LTV of referred users, referred-user retention.

## Output Format

- **Reward model** and mechanism type (link/code/social)
- **Tracking** approach and attribution window
- **Placement** (dashboard vs landing page)
- **Fraud prevention** measures
- **Tool** selection (self-build vs third-party)
- **KPI** framework

## Related Skills

- **discount-marketing-strategy**: Referral rewards (discounts, credits); 10–30% benchmark; campaign design
- **affiliate-marketing**: Different audience; can run both
- **influencer-marketing**: Brand building vs. user-driven growth
- **directory-submission**: Directory submission for discovery; referral for user-driven growth
- **analytics-tracking**: Referral link tracking, UTM

---
name: public-relations
description: When the user wants to plan PR, write a press release, or manage media relations. Also use when the user mentions "public relations," "PR," "press release," "media relations," "news release," "journalist," "media coverage," "product announcement," or "earned media."
metadata:
  version: 1.0.0
---

# Channels: Public Relations

Guides PR and press release strategy. Journalists use ~3% of releases they receive; proper structure is critical. Use this skill when writing press releases, planning product announcements, or building media relations.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read Sections 2 (Positioning), 3 (Value Proposition), 8 (Brand & Voice).

Identify:
1. **News angle**: Product launch, funding, partnership, milestone
2. **Audience**: Trade press, mainstream, bloggers
3. **Timing**: Embargo or immediate

## Press Release Structure

| Section | Guideline |
|---------|-----------|
| **Header** | Logo; contact (name, title, email, phone); "FOR IMMEDIATE RELEASE" or embargo |
| **Headline** | Under 100 chars; strong action verbs; "Why should I care?" |
| **Subheadline** | Optional; additional context |
| **Dateline** | City, state, date |
| **Lead** | 50–75 words; all 5 W's (Who, What, When, Where, Why) |
| **Body** | 1–2 paragraphs; inverted pyramid; most newsworthy first |
| **Quote** | Executive/stakeholder; perspective, not fact repetition |
| **Boilerplate** | 2–3 sentence company description |
| **Media contact** | Name, email, phone |

## Lead Paragraph

Journalist should understand the full story from the lead alone. Specific details, not vague language ("important update" → what changed and impact).

## Quote Quality

- Add perspective or emotion
- Avoid generic corporate-speak
- Don't repeat facts already stated

## Writing Style

- AP style
- Short paragraphs (one idea each)
- Clear language for easy journalist adaptation
- Data and context to support claims

## Output Format

- **Headline** and subheadline
- **Lead** paragraph
- **Body** copy
- **Quote** suggestion
- **Boilerplate**

## Related Skills

- **media-kit-page-generator**: Media kit for press (assets)
- **press-coverage-page-generator**: Aggregation of coverage; outcome of PR; "As Seen In"
- **branding**: Brand voice for PR copy
- **cold-start-strategy**: Product Hunt, launch channels
- **product-launch**: GTM; PR as launch channel

---
name: influencer-marketing
description: When the user wants to plan, implement, or optimize influencer marketing strategy. Also use when the user mentions "influencer marketing," "KOL," "creator partnership," "brand ambassador," "sponsored content," "influencer campaign," "micro-influencer," "influencer outreach," "creator collaboration," or "influencer deal."
metadata:
  version: 1.0.0
---

# Channels: Influencer

Guides influencer marketing strategy for AI/SaaS products. Focus on trust and brand exposure; 2–3x higher conversion and 40%–50% lower CAC than traditional ads. 92% of consumers trust influencers over celebrities.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and brand voice.

Identify:
1. **Goal**: Brand awareness, trust, or direct conversion
2. **Platform**: Instagram, TikTok, YouTube, LinkedIn
3. **Target**: Nano (1K–10K), micro (10K–100K), mid-tier (100K–1M), macro (1M+)

## Influencer vs. Affiliate vs. Creator

| Dimension | Influencer | Affiliate | Creator Program |
|-----------|------------|-----------|-----------------|
| **Goal** | Brand exposure, trust | Direct sales | Content co-creation |
| **Incentive** | Paid, product exchange | Commission | Credits, free use |
| **Content** | Influencer original | Links sufficient | Must use product |
| **Relationship** | Short or long-term | Transactional | Long-term |

## Influencer Types by Platform

| Platform | Best For | Audience |
|----------|----------|----------|
| **Instagram** | Visual, lifestyle | 25–34 |
| **TikTok** | Viral, short-form | Under 24 |
| **YouTube** | Reviews, tutorials | 18–24 |
| **LinkedIn** | B2B, professional | Professionals |

## Discovery & Screening

- **Platform search**: Search by brand/industry terms; check competitors
- **Tools**: Stormy.ai, Upfluence, Passionfroot
- **Form**: Application form on site for interested creators

**Screening**: Engagement rate > follower count; avoid fake followers; content style match.

## Cooperation Models

| Model | Use |
|-------|-----|
| **Product exchange** | Low cost; testing; requires influencer interest |
| **Commission (affiliate)** | Lower risk; CPS; hybrid with flat fee common |
| **Paid promotion** | Direct payment; quick exposure |
| **Long-term partnership** | Brand ambassador; sustained relationship |

## Content Strategy

- **Forms**: Shoutout, review, favorites, tutorial, placement
- **Creative freedom**: Avoid overly scripted; authenticity drives trust
- **Cross-platform**: Repurpose for website, ads, email
- **Publishing**: Multiple drops; align with target market hours

## Best Practices

- **Payment**: PayPal; prepay + final payment after publish
- **Contract**: Clear dates, review process, deliverables
- **Content review**: Brand guidance without over-control
- **Disclosure**: FTC/ASA compliant; disclose paid partnerships

## Output Format

- **Platform** and tier selection
- **Discovery** approach
- **Cooperation** model
- **Content** brief
- **Tracking** plan

## Related Skills

- **affiliate-marketing**: Influencers can be affiliates (hybrid model)
- **creator-program**: Long-term creator partnerships
- **employee-generated-content**: Internal employee content; influencer is external
- **affiliate-page-generator**: Commission structure if hybrid

---
name: education-program
description: When the user wants to plan, implement, or optimize student and education discount programs. Also use when the user mentions "student discount," "education discount," "student plan," "for students," ".edu discount," "academic pricing," "student verification," "SheerID," "UNiDAYS," or "education program."
metadata:
  version: 1.0.0
---

# Channels: Education Program

Guides student and education discount programs as an acquisition channel. Targets students and educators; common for SaaS, dev tools, and productivity apps. ~65% of students who use professional tools in school continue using them in their first jobs—education discounts are long-term customer acquisition, not just revenue loss.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and pricing.

Identify:
1. **Product type**: SaaS, dev tool, design tool, productivity
2. **Student fit**: Is your ICP or future ICP student-aged?
3. **Discount structure**: First-time vs renewal; % or fixed
4. **Verification**: .edu, student ID, third-party (SheerID, UNiDAYS)

## Education Program vs Other Channels

| Dimension | Education Program | Startups Program | Referral |
|-----------|-------------------|------------------|----------|
| **Audience** | Students, educators | Founders, early-stage | Existing users |
| **Incentive** | Discount, free tier | Discount, credits | Discount, credits |
| **Verification** | .edu, student ID, SheerID/UNiDAYS | Revenue, team size | None (user-driven) |
| **LTV focus** | Future customers; 65% continue post-grad | Early adopters | Referred users |

## Discount Structures

| Type | Typical Range | Use |
|------|---------------|-----|
| **First-time / registration** | 30–50% off | Apply at signup; drives conversion |
| **Ongoing / renewal** | 15–25% off | Retain students; lower than first-time |
| **Free tier** | Full access free | JetBrains, GitHub Education; highest adoption |
| **Flat academic rate** | Simplified pricing | Easier for students to understand |

**Example**: 30% off on registration day; 15% off on renewal. Align with **discount-marketing-strategy** for financial guardrails (LTV:CAC, qualification criteria).

## Verification

| Method | Use |
|--------|-----|
| **.edu email** | Instant; low friction; US-centric |
| **Student ID upload** | Manual review; global; document must show name, institution, expiry |
| **SheerID** | Third-party; 200K+ data sources; verify → promo code at checkout |
| **UNiDAYS** | Third-party; 98%+ automated; 800+ brands; marketplace reach |

**When to verify**: At registration (recommended when discount applies at signup) or at checkout. Registration-time verification = single decision point; user claims discount where they convert.

## Placement Priority

| Priority | Location | Purpose |
|----------|----------|---------|
| **P0** | Registration / signup flow | User claims discount here; must show when discount applies at signup |
| **P1** | Pricing page | Student tier or "Student discount" block; keeps single decision point |
| **P1** | Homepage banner or CTA | "Students: 30% off today, 15% off ongoing"; top-banner-generator |
| **P2** | Standalone page /student-discount | Optional; for "student discount" SEO or paid ad landing page |

**Principle**: When discount applies at registration, core placement is registration flow. Pricing page and homepage support discovery. Standalone page only if needed for SEO or ads—avoid duplication when persona pages (e.g. "for students") already exist.

## Page Strategy

| Approach | When |
|----------|------|
| **Embed in pricing** | Student as tier or block; link to full pricing; no separate page |
| **Registration only** | Discount claimed at signup; pricing page shows "Student discount available—verify at signup" |
| **Standalone /student-discount** | "Student discount" search intent; paid ad landing; persona page would duplicate |

See **startups-page-generator** for page structure when a standalone education page is needed; **pricing-page-generator** for Special programs section.

## Implementation Flow

1. **Define discount**: First-time %, renewal %; align with **pricing-strategy**, **discount-marketing-strategy**
2. **Choose verification**: .edu (instant) vs SheerID/UNiDAYS (broader, automated)
3. **Placement**: Registration (P0); pricing page (P1); homepage banner (P1); standalone page (P2 if needed)
4. **Graduation transition**: Plan how students convert to full price when eligibility ends
5. **Track**: Student signups, conversion rate, LTV of student cohort

## Best Practices

- **Low friction**: .edu = instant; ID upload = clear requirements; third-party = one-click verify
- **Abuse prevention**: Revoke if ineligible; annual re-verification; limit per person
- **Messaging**: "We've been there"; "Grow with us"; social proof ("X students use [Product]")
- **Graduation**: Email before expiry; offer transition discount to full plan

## Output Format

- **Discount structure** (first-time, renewal)
- **Verification** method
- **Placement** (registration, pricing, homepage, standalone)
- **Page strategy** (embed vs standalone)
- **Related** skills for execution (pricing-page, startups-page, top-banner, discount-marketing)

## Related Skills

- **discount-marketing-strategy**: Discount structure, financial guardrails; education is a campaign type
- **pricing-strategy**: Base price; education discount applies on top
- **pricing-page-generator**: Special programs section; Student tier or block; placement P1
- **startups-page-generator**: Standalone education page when needed; same structure for startups + education
- **top-banner-generator**: Homepage banner "Students: X% off"; placement P1
- **landing-page-generator**: /student-discount landing page when used for SEO or ads
- **signup-login-page-generator**: Signup is P0 for student discount; discount block, verification at registration
- **use-cases-page-generator**: "For students" use case; avoid duplicate "for students" page

---
name: affiliate-marketing
description: When the user wants to plan, implement, or optimize affiliate marketing strategy. Also use when the user mentions "affiliate marketing," "affiliate program strategy," "CPS model," "affiliate recruitment," "commission structure," "affiliate partners," "affiliate network," "affiliate tracking," "affiliate commission," or "partner marketing."
metadata:
  version: 1.0.0
---

# Channels: Affiliate

Guides affiliate marketing strategy for AI/SaaS products. Affiliate marketing uses a CPS (Cost Per Sale) model—pay only when sales occur. ROI typically 5:1 to 10:1; CAC 40%–50% lower than paid ads.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and positioning.

Identify:
1. **Product type**: SaaS, AI tool, subscription
2. **Commission model**: Pay-per-sale, pay-per-lead, pay-per-click
3. **Target affiliates**: Content creators, publishers, coupon sites

## Commission Models

| Model | Use | Typical Rate |
|-------|-----|--------------|
| **Pay-per-sale** | Most common; pay on conversion | 10%–20% |
| **Pay-per-lead** | Lead gen (signup, form fill) | $5–50/lead |
| **Pay-per-click** | Rare; risk of abuse | $0.01–10.50/click |

For SaaS: Prefer pay-per-sale or pay-per-lead. Recurring commissions for subscriptions.

## Key Terms

| Term | Definition |
|------|------------|
| **Cookie duration** | Attribution window (typically 30–90 days) |
| **Recurring commission** | Ongoing % from subscription renewals |
| **Sub-affiliate** | Affiliates who recruit other affiliates |
| **Performance bonus** | Extra reward when affiliate hits sales targets |
| **Attribution** | Linking sale to correct affiliate |

## Promotion Channels

- **Content creators**: Bloggers, YouTubers, podcasters, social influencers
- **Publishers**: Media, niche sites, email newsletters
- **Coupon/cashback**: Price-sensitive users; see **discount-marketing-strategy** for code strategy
- **Professional affiliates**: Agencies managing multiple programs
- **Communities**: Facebook Groups, Discord, Reddit, forums
- **Existing customers**: Word-of-mouth via referral rewards

## Setup Options

*Product and website examples are illustrative only. No affiliation, partnership, or endorsement implied.*

| Approach | Use |
|----------|-----|
| **Self-build** | Forms (e.g. Google Forms); quick, low budget |
| **Third-party** | Affiliate tracking platforms (e.g. Rewardful, Tapfiliate) for AI/SaaS |

Submit program to affiliate program directories after launch for discoverability.

## Recruitment Strategies

1. **Dedicated landing page**: Clear commission, payout terms, cookie duration, signup flow; link in nav/footer.
2. **Partner personas**: Define 5+ personas (bloggers, YouTubers, newsletter owners, community admins); list audience fit and motivations.
3. **Target high-influence types**: SEO content owners ranking for your keywords; reviewers/listicle sites; media buyers.
4. **Reverse research**: Find affiliates promoting competitors; they may promote you too.
5. **Unconventional outreach**: Competitor backlink analysis; creative outreach beyond cold email and networks.

Expect a small fraction of partners to drive most sales—quality over vanity metrics.

## Implementation Flow

1. **Assess product fit**: Target audience size, product complexity, commission margin, tracking feasibility. SaaS subscriptions suit recurring commissions.
2. **Design commission structure**: 20%–40% typical; cookie 60–90 days; payment cycle (e.g., 15th of month); minimum payout (e.g., $50).
3. **Create marketing materials**: Banners, social posts, email templates; landing page with commission details and signup flow.
4. **Recruit partners**: Publish to affiliate program directories; outreach to creators and influencers.
5. **Monitor and optimize**: Track conversion rate, ROI, AOV; review affiliate performance; detect fraud.

## Pitfalls and Prevention

| Risk | Prevention |
|------|------------|
| **Affiliate fraud** | Fake clicks, self-referrals, fake conversions. Use platform fraud tools; vet affiliates; avoid auto-approve. |
| **Brand bidding** | Affiliates bid on your brand terms in Google Ads; you pay commission for traffic you already own. Prohibit in terms; monitor paid search; use brand monitoring tools. See **paid-ads-strategy** for paid ads context. |
| **Program terms** | Cookie length, performance bonus, sub-affiliate rules, payment threshold—set clearly in terms before launch. |

## Best Practices

- **rel=sponsored**: Tag affiliate links per Google guidelines
- **Transparent disclosure**: Disclose affiliate relationships
- **Recruit authentic affiliates**: Align with brand; avoid low-quality networks
- **Diversify partners**: Multiple affiliates reduce risk
- **SEO for affiliate content**: Affiliate content drives organic traffic

## Output Format

- **Commission model** recommendation
- **Channel** strategy
- **Recruitment** approach
- **Tool** selection
- **Checklist** for launch

## Related Skills

- **paid-ads-strategy**: Paid ads context; brand bidding monitoring; when affiliates bid on brand terms
- **discount-marketing-strategy**: Affiliate-specific promo codes; coupon sites; code strategy
- **affiliate-page-generator**: Landing page for affiliate signup; apply landing-page-generator principles
- **landing-page-generator**: Generic landing page structure, CTA, conversion; applies to affiliate signup pages
- **influencer-marketing**: Often paired; influencers can be affiliates
- **referral-program**: User-driven referral vs. affiliate-driven
- **directory-submission**: Directory submission complements affiliate; both drive backlinks and traffic
- **community-forum**: Communities (Discord, Reddit, forums) as affiliate recruitment channel

---
name: employee-generated-content
description: When the user wants to plan, implement, or optimize employee-generated content (EGC) or employee advocacy. Also use when the user mentions "EGC," "employee advocacy," "employee content," "internal brand ambassadors," "employee social media," "employee advocacy program," "staff advocacy," "LinkedIn employee posts," or "brand ambassador program."
metadata:
  version: 1.0.0
---

# Channels: EGC (Employee-Generated Content)

Guides EGC and employee advocacy strategy for AI/SaaS products. EGC is content created by employees (social posts, videos, blogs, testimonials) that reflects authentic workplace and product insights. Employee-shared content generates ~8x more engagement than brand posts; LinkedIn employee posts reach ~561% more than brand content.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and brand voice.

Identify:
1. **Goal**: Brand trust, thought leadership, recruitment, or conversion
2. **Platform**: LinkedIn (B2B primary), X, Instagram, TikTok
3. **Employee base**: Size, roles, existing social presence

## EGC vs. UGC vs. Creator Program

| Dimension | EGC | UGC | Creator Program |
|-----------|-----|-----|-----------------|
| **Source** | Employees | Customers | External creators |
| **Trust** | Company experts (66% vs 47% for ads) | Peer reviews | Influencer reach |
| **Cost** | Low; leverage workforce | Incentives, curation | Credits, payment |
| **Best for** | B2B, SaaS, professional services | Social proof, reviews | Content scale, tutorials |

## Why EGC Works

- **Algorithm favor**: Social platforms prioritize personal accounts over brand pages
- **Authenticity**: 92% trust recommendations from individuals over branded content; 81% need to trust before buying
- **B2B fit**: LinkedIn is primary; employees share industry expertise and product insights
- **Results**: 27% engagement increase, 19% sales increase in first year; 24% higher conversion vs traditional content

## Content Formats

| Format | Use | Platform |
|-------|-----|----------|
| **Day-in-the-life** | Culture, behind-the-scenes | LinkedIn, TikTok, Instagram |
| **Industry insights** | Thought leadership, expertise | LinkedIn |
| **Short-form video** | Quick tips, demos | TikTok, LinkedIn, Instagram |
| **Testimonials** | Product experience | Website, case studies |
| **Serialized content** | Consistent presence | Personal + brand accounts |

## Implementation Best Practices

**Do not force participation.** Recognize and nurture organic content from employees already sharing about work. Volunteer participation outperforms mandated programs.

| Practice | Purpose |
|----------|---------|
| **Tiered framework** | Map employees by engagement (nano, micro, macro); treat like internal influencer tiers |
| **Brief templates** | Content objectives, brand voice, mandatory disclosures (FTC/ASA) |
| **Advocacy platforms** | Sociabble, EveryoneSocial for brief distribution and tracking |
| **Incentives** | Leaderboards, recognition; avoid heavy-handed quotas |
| **Training** | Improve quality and consistency; keep approval simple |
| **Centralized hub** | Branded hashtags, content library, approval workflow |

## B2B / SaaS Specifics

- **LinkedIn first**: Algorithm favors personal posts; employees as thought leaders
- **Cost-effective**: Leverage existing workforce vs hiring external creators
- **Diverse perspectives**: Sales, support, dev create varied content for different segments
- **Recruitment**: 79% of job seekers check social before applying; EGC attracts 58% more top talent, 20% retention boost

## Output Format

- **Platform** and content format selection
- **Employee** identification and tier approach
- **Content** strategy and brief template
- **Governance** (approval, disclosure, brand guidelines)
- **Measurement** plan (engagement, reach, conversions)

## Related Skills

- **influencer-marketing**: External influencers; EGC is internal
- **creator-program**: External creators; EGC is employee-driven
- **linkedin-posts**: Primary EGC platform for B2B
- **integrated-marketing**: EGC as part of PESO shared/earned media
- **traffic-analysis**: UTM tagging for employee-shared links

---
name: email-marketing
description: When the user wants to plan email marketing, EDM, newsletter strategy, or email deliverability. Also use when the user mentions "email marketing," "EDM," "newsletter," "SPF," "DKIM," "DMARC," "email deliverability," "email content strategy," "email campaigns," "newsletter strategy," "email automation," or "cold email."
metadata:
  version: 1.0.0
---

# Channels: Email Marketing

Guides email marketing strategy for AI/SaaS products. Email ROI ~$36 per dollar spent; open/click rates typically higher than social. Covers EDM vs Newsletter, five content types, deliverability (SPF/DKIM/DMARC), and SEO synergy via article delivery.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for audience and content strategy. See **content-marketing** for content types and formats across channels.

Identify:
1. **Goal**: Retention, conversion, brand reach, or SEO synergy
2. **Content mix**: Onboarding, campaign, announcement, features, newsletter
3. **List size**: Bulk sender rules (5,000+/day) require Gmail/Yahoo compliance

## EDM vs Newsletter

| Type | Purpose | Use |
|------|---------|-----|
| **EDM** | Direct marketing; conversion-focused | Promotions, campaigns, announcements; bulk sends |
| **Newsletter** | Ongoing value; relationship | Industry insights, curated articles; regular cadence |

**Combine both**: EDM for push; Newsletter for nurture. Cover different stages and goals.

## Five Content Types

| Type | Use |
|------|-----|
| **Onboarding** | Welcome + first-use guidance; 5-7 day sequence; behavior-triggered; drive "Aha!" moment |
| **Campaign** | Promotions, limited-time; conversion or participation |
| **Announcement** | Product launch, major update; one-time important notice |
| **Features update** | New features, improvements; help users adopt |
| **Blog/Newsletter** | Curated articles, industry insights; sustained touch |

## User Best Practices

| Practice | Guideline |
|----------|-----------|
| **Personalization** | Segment by behavior, source, stage; boosts open/click |
| **Timing** | New users: dense; existing: controlled pace; behavior-triggered > calendar-only |
| **Welcome series** | Send soon after signup; 5-7 emails over days; guide first key action |
| **Unsubscribe** | One-click required (Gmail/Yahoo); honor within 48h; clear entry |
| **Complaint rate** | Keep below 0.3%; list hygiene critical |

## Content Best Practices

| Practice | Guideline |
|----------|-----------|
| **Subject** | One clear topic per email; avoid pure promo |
| **Value first** | Useful info before promotion |
| **CTA** | Single primary CTA; clear next step |
| **Mobile** | 50%+ read on mobile; responsive layout, tappable links |

## Deliverability & Domain Config

**Subdomain**: Use subdomain (e.g. mail.example.com) for marketing; keep transactional (support@, etc.) on main domain. Isolate risk.

### SPF, DKIM, DMARC

| Protocol | Purpose |
|----------|---------|
| **SPF** | Authorizes mail servers for domain |
| **DKIM** | Cryptographic signature; verifies sender |
| **DMARC** | Policy for unauthenticated mail; start p=none, then quarantine, then reject over 60-90 days |

**Order**: SPF first, then DKIM, then DMARC. Gmail/Yahoo require all three for bulk senders (5,000+/day) since Feb 2024.

**Advanced**: TLS-RPT, MTA-STS, BIMI (brand logo). **Postmaster Tools**: Monitor deliverability, spam rate, auth status.

## Delivery Strategy: Articles + SEO Synergy

| Article Type | Use |
|--------------|-----|
| **Retention** | Deep content for existing users; improve retention |
| **ToFu** | Top of funnel; awareness (trends, concepts, problem framing) |
| **MoFu** | Middle of funnel; consideration (comparisons, reviews, best practices) |

**Dual value**: (1) Better email engagement (open, click, stickiness); (2) Drive traffic to article pages from non-search channel; signals to Google that users value content; supports SEO.

**Measurement**: GA4 email source traffic to article pages; GSC rank/click changes.

## Planning Framework

1. **Content mix**: Allocate onboarding, campaign, announcement, features, newsletter
2. **Select articles**: Pick retention, ToFu, MoFu from blog; prioritize SEO target pages
3. **Cadence**: Stable frequency (weekly/biweekly/monthly); avoid over-sending
4. **Monitor**: Open rate, click rate; GA4 email contribution to article traffic; GSC

## Frequency

| Guideline | Note |
|-----------|------|
| **Baseline** | 1 high-value email/week for most brands |
| **Peak times** | Tue-Thu, 8-11am or 2-4pm (recipient timezone) |
| **Segmentation** | New vs loyal need different cadence |
| **Quality** | Relevant, behavior-triggered > calendar volume |

**Data**: ~36% send 1-3/month; ~30% weekly; daily risks high unsubscribe.

## Output Format

- **Content mix** (five types)
- **EDM vs Newsletter** balance
- **Deliverability** (subdomain, SPF/DKIM/DMARC)
- **Article delivery** (Retention, ToFu, MoFu, SEO targets)
- **Cadence** and frequency
- **KPI** (open, click, GA4 email traffic, GSC)

## Related Skills

- **content-marketing**: Content types, formats; email as channel in repurposing matrix
- **newsletter-signup-generator**: Signup form design
- **traffic-analysis**: Email source attribution, UTM
- **analytics-tracking**: Email click tracking
- **content-strategy**: Article selection for email delivery
- **integrated-marketing**: Email as owned media channel

---
name: distribution-channels
description: When the user wants to plan product distribution via marketplaces, app stores, or third-party platforms. Also use when the user mentions "distribution channels," "marketplace listing," "app store listing," "Figma plugin," "Chrome extension marketplace," "AWS Marketplace," "Shopify app," "GPTs store," "app distribution," or "third-party marketplace."
metadata:
  version: 1.1.0
---

# Channels: Distribution Channels

Guides product distribution via third-party marketplaces and app stores. Distinct from **directory-submission** (curated lists, Product Hunt, Taaft)—marketplaces are storefronts where customers discover and purchase apps, plugins, or integrations. Hyperscaler marketplaces (AWS, Azure, GCP) alone are projected to process $85B+ in software sales by 2028.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Channel Types

| Type | Definition | Examples |
|------|------------|----------|
| **Direct** | Company sells via own assets | Website, eCommerce, sales team |
| **Indirect** | Third parties sell on your behalf | Marketplaces, app stores, resellers |

**Marketplaces** = Digital storefronts where customers discover and buy; often pre-approved budgets (cloud spend), consolidated billing, faster procurement.

## Marketplace Categories

| Category | Platforms | Product fit |
|----------|-----------|-------------|
| **Design & collaboration** | Figma Community, Canva Apps, Adobe Exchange | Design tools, templates |
| **Browser extensions** | Chrome Web Store, Firefox Add-ons | Extensions, dev tools |
| **Cloud & enterprise** | AWS Marketplace, Google Cloud Marketplace, Azure Marketplace | SaaS, data, infra |
| **Mobile** | App Store, Google Play, Microsoft Store | Mobile apps, cross-platform |
| **Vertical** | Shopify App Store, Slack App Directory, Salesforce AppExchange, Zoom Marketplace | E-commerce, collaboration, CRM |
| **Developer** | GitHub Marketplace, WordPress Plugins | Dev tools, integrations |
| **AI** | GPTs (OpenAI), emerging AI app stores | AI apps, agents |
| **Social commerce** | Pinterest Product Pins | E-commerce, design tools, templates; Product Schema or Pinterest Catalog |

**Pinterest Product Pins**: Configure product links; shopping tags; link to site. Requires Product Schema or Pinterest Catalog. See **pinterest-posts**.

## Listing Optimization

| Practice | Guideline |
|----------|-----------|
| **Reduce procurement friction** | Vendor Insights, standard contracts; streamline enterprise buying |
| **Pricing models** | Free trials, pay-as-you-go, private offers for enterprise |
| **Trust signals** | Verified reviews, partner badges, clear taxonomy |
| **Discoverability** | Optimize for marketplace search; clear descriptions, tags |
| **Co-sell** | Partner with platform field teams when available |

**Listing as asset**: Your marketplace page is both storefront and onboarding tool; prospects validate, customers discover integrations.

## Platform Selection by Product Type

| Product type | Prioritize |
|--------------|------------|
| Design / collaboration | Figma, Canva, Adobe |
| Browser extension | Chrome, Firefox |
| Cloud / enterprise SaaS | AWS, GCP, Azure |
| Mobile app | App Store, Google Play, Microsoft Store |
| E-commerce | Shopify |
| Collaboration | Slack, Zoom |
| Developer tools | GitHub, WordPress |
| AI application | GPTs, emerging AI stores |
| E-commerce / templates | Pinterest Product Pins |

## Related Skills

- **directory-submission**: Curated lists (Taaft, Product Hunt, G2)—different from marketplaces; both are distribution
- **integrations-page-generator**: Integrations page content; marketplace listing drives discovery
- **cold-start-strategy**: Distribution as cold-start channel
- **localization-strategy**: Regional marketplaces by locale

---
name: product-hunt-launch
description: When the user wants to launch on Product Hunt, prepare a Product Hunt submission, or plan a Product Hunt launch. Also use when the user mentions "Product Hunt," "launch on Product Hunt," "PH launch," "Product Hunt submission," "hunter," "Product of the Day," "upvotes," or "Product Hunt first comment."
metadata:
  version: 1.0.0
---

# Channels: Product Hunt Launch

Guides preparing and executing a Product Hunt launch. Product Hunt is a community-driven product discovery platform; only ~10% of submissions get featured on the homepage. Best for SaaS, developer tools, AI/ML products, and productivity software. Physical products and service businesses have limited success.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Read project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, use Sections 1–4, 5, 6, 8, 9 for submission content.

Identify:
1. **Product type**: SaaS, AI tool, app, Chrome extension
2. **Launch readiness**: Landing page, screenshots, tagline, first comment
3. **Hunter**: Self-hunt or Top Hunter (optional but helps)

## 30-Day Preparation Plan

| Phase | Days | Actions |
|-------|------|---------|
| **Teaser** | 30–21 | Build "notify me" page; decide self-hunt vs hunter; engage in community |
| **Supporters** | 20–11 | Build list of 200+ (makers, industry contacts, followers, users) |
| **Assets** | 10–3 | Finalize tagline (≤60 chars), gallery images (1270×760), demo video (<2 min), maker comment, 3–5 topic tags; build awareness on X/LinkedIn 2–4 weeks before |
| **Launch day** | 2–1 | Clear calendar for 16+ hours; Product Hunt runs midnight–midnight Pacific |

## Product Hunt Fields

| Field | Spec |
|-------|------|
| **Tagline** | ≤60 chars; no emojis unless part of product name; catchy, benefit-focused |
| **Gallery** | 1270×760 px recommended; readable, show product value |
| **Demo video** | <2 minutes; optional but recommended |
| **First comment** | Post immediately; story-driven, not feature list; significantly impacts engagement |
| **Topic tags** | 3–5 relevant; match Product Hunt taxonomy |

## Launch Day Strategy

| Practice | Guideline |
|----------|-----------|
| **Timing** | Tuesday–Thursday; 12:01am Pacific works best |
| **Narrative** | Create story (problem → solution), not feature list |
| **Engagement** | Reply to every comment; thank supporters; answer questions |
| **Avoid** | Begging for upvotes (risk of shadowban) |

**Principle**: Product Hunt is a visibility amplifier and credibility boost—not primarily a customer acquisition channel.

## Realistic Expectations

| Outcome | Upvotes | Placement |
|---------|---------|-----------|
| Poor | 50–100 | — |
| Average | 200–400 | Top 10 |
| Good | 500–800 | Top 5 |
| Great | 800+ | Product of the Day |

## Beyond Listing

| Offering | Use When |
|----------|----------|
| **Product Hunt Daily** | Newsletter feature; high-intent audience |
| **Social promotion** | PH shares on X, LinkedIn; launch-day amplification |
| **Featured placement** | Paid promotion options |

## Post-Launch

- Continue engaging with new users
- Thank-you emails to supporters
- Ask for feedback
- See **directory-submission** for other directories; **cold-start-strategy** for full launch plan

## Output Format

- **Readiness checklist** (tagline, gallery, first comment, topic tags)
- **First comment** draft (story-driven)
- **Tagline** options (≤60 chars)
- **30-day timeline** (if planning ahead)

## Related Skills

- **directory-submission**: Taaft, G2, curated lists; Product Hunt is one directory—see for multi-platform submission
- **cold-start-strategy**: Full launch plan; Product Hunt as channel
- **indie-hacker-strategy**: Indie hacker Product Hunt, first 100 users
- **media-kit-page-generator**: Press kit, screenshots for launch
- **analytics-tracking**: UTM for Product Hunt traffic attribution

---
name: directory-submission
description: When the user wants to submit a product to directories, launch platforms, curated lists, or app stores. Reads project-context.md when present and generates ready-to-paste submission content per platform. Also use when the user mentions "directory submission," "get listed," "app store listing," "submit to directories," "curated list," "best tools list," "Taaft," "Product Hunt," "directory ads," "newsletter feature," "directory campaign," "product info for directory," "tailor description per platform," "Shopify App Store," "Chrome Web Store," "submit to directory," "launch on Product Hunt," "navigation site," or "product directory."
metadata:
  version: 1.1.0
---

# Channels: Directory Submission

Guides submitting products, tools, or apps to directories and launch platforms.

**On each invocation**: On **first use** in the conversation, output the complete response (Introduction, Importance, Methods, Collaboration Channels, Rules, Avoid, Action). On **subsequent use** or when the user asks to skip (e.g., "just do it", "skip intro", "I already know"), go directly to Action.

Directory submission is a core channel for cold start—see **cold-start-strategy** for full launch planning. Directories offer more than listings: free/paid listings, ad placements, newsletter features, social promotion, and marketing campaigns. Platform types: AI tools (e.g. Taaft), product launch (e.g. Product Hunt), review platforms (e.g. G2), app stores, niche directories.

## Why Directory Submission Matters

*Platform examples are illustrative only. No affiliation, partnership, or endorsement implied.*

| Benefit | Description |
|---------|--------------|
| **Backlinks** | Quality directories pass link equity; improve domain authority and rankings. Focus on high-authority directories (DA 50+); avoid low-quality link farms. |
| **Real traffic & conversion** | Referral traffic from directories converts. ~42% of businesses report increased referral traffic after submission; referral conversion ~1.8% (B2C), 1.1% (B2B), 1.3% (SaaS). Use UTM to track; proper attribution can improve measured conversion by ~23%. |
| **Social proof for brand search** | When users search your brand name, directory listings (e.g. Product Hunt, G2, Taaft) often dominate SERP. Third-party presence signals legitimacy; consumers check 5-7 sources before deciding. Verified badges and consistent NAP across directories boost trust. See **serp-features** for SERP feature types. |

## Current Best Practices

**Quality over quantity.** Mass submission to hundreds of low-quality directories can harm rankings; strategic placement in 10-15 high-quality directories typically yields 15-25% improvement in indexing speed and branded search visibility.

| Practice | Why |
|----------|-----|
| **Prioritize DA/DR 50+** | High-authority directories pass link equity; low-quality link farms risk penalties |
| **Editorial review preferred** | Human-curated directories (vs. automated) carry more weight; Google's Helpful Content Update favors editorially-curated listings |
| **Niche over generic** | Industry-specific directories deliver faster results (30-60 days) and better topical relevance than generic sites (60-120 days) |
| **NAP consistency** | Name, Address, Phone identical across all listings--critical for local SEO |
| **Track submissions** | Document where you submitted, approval status, canonical topics |

**Budget reference**: Small businesses $300-500/mo; enterprises $1,500-3,000/mo for comprehensive programs. Results typically 30-60 days from high-authority directories.

## Initial Assessment

**Read project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it. Use sections 1-4, 5, 6, 8, 9 to generate submission content directly--no need to ask the user for info already in the context.

| Context section | Maps to directory fields |
|-----------------|---------------------------|
| 1. Product Overview | Name, one-line, category, pricing model |
| 2. Positioning Statement | Tagline, long description |
| 3. Value Proposition | Key messages, proof points -> Pros |
| 4. Target Audience | Description tone, use cases |
| 5. Existing Website | URL, key pages |
| 6. Keywords | Tags, negative keywords, Primary Task |
| 8. Brand & Voice | Tone, avoid terms, preferred wording — see **branding** for full brand strategy |
| 9. Product Documentation | Features, capabilities -> Other features |

**When context exists**: Generate ready-to-paste submission copy (tagline, short/long description, pros/cons, tags) tailored per platform. Output copy the user can paste into Taaft, Product Hunt, etc.

**When context is missing**: Gather from user's site; **search the web** for pricing, features, competitors, reviews, and any gaps. Then generate.

Identify:
1. **Product type**: AI tool, SaaS, app, Chrome extension, Shopify app
2. **Target directories**: AI tools, product launch, app stores, niche
3. **Readiness**: Landing page, screenshots, description, media kit

## Product / Website Info Required

**Source**: Project context (preferred) or user's site. Each directory needs different fields; prepare a base set, then adapt per platform.

### Standard Fields (Most Directories)

| Field | Typical Spec | Notes |
|-------|--------------|-------|
| **Product name** | 60-80 chars | Consistent spelling across all listings |
| **URL** | Working product/landing page | No redirect chains |
| **Tagline / one-liner** | <=60 chars (Taaft: max 12 words) | Catchy, benefit-focused |
| **Short description** | 150-300 chars | Used by many directories |
| **Long description** | 400-600 chars | For platforms that allow more |
| **Category / Task** | Platform-specific | Match taxonomy (Taaft: Primary + Secondary Tasks) |
| **Keywords / Tags** | 5-10 terms, comma-separated | Natural, no stuffing |
| **Contact** | Email, optional NAP | For verification |
| **Company name** | Legal entity | Some directories require |
| **Promo code** | If applicable | Product Hunt, deal platforms |
| **Other URLs** | Blog, Affiliate Program, FAQ | Optional but useful |
| **API availability** | Yes/No | AI/SaaS directories |
| **Demo video** | URL or file | Many platforms support |

**Platform-specific**: Taaft requires many more fields (icon, main image, demo video, features, models, built-with tools, modalities, pricing, legal URLs, pros/cons, socials, tracking links)--see Taaft section.

### Prepare Asset Tiers

Create multiple versions so you can match each directory's format without rewriting from scratch:

- **One-liner** (<=60 chars): Elevator pitch; "Remote Project Manager Pro" beats "Project Tool"
- **Short** (150-300 chars): Core value + one differentiator
- **Long** (400-600 chars): Problem -> solution story; features + benefits

### Rich Content Base (Build First, Use Everywhere)

Even if a directory form does not require it, build a full reference so you can tailor per platform and for SEO/GEO. **Search the web** when info is missing.

| Section | Content | Use For |
|---------|---------|---------|
| **Definition** | What the product is; category; one-sentence positioning | Intro text, GEO-friendly summaries |
| **Importance** | Why it matters for the target audience; key differentiator | Long descriptions, first comments |
| **Features** | Core capabilities; technical specs; integrations | Taaft, G2, comparison sites |
| **Use cases** | Who uses it; workflows; outcomes | Taaft tasks, niche directories |
| **Solutions** | Problems solved; before/after | Product Hunt, curated lists |
| **Competitors** | Alternatives (e.g. Competitor A, B); how this differs | Comparison sites, G2 |
| **Pricing** | Plans, credits, free tier | G2, Capterra, budget-focused lists |
| **Rules / Avoid** | What to emphasize; what to avoid per platform | Quality control |

### Multiple Versions for Differentiation (SEO & GEO)

**Do not submit identical copy to every directory.** Duplicate content hurts SEO and reduces GEO citation diversity. Generate **at least 2-3 distinct versions** per field (tagline, short, long) so:

- Different directories show different angles
- AI tools and search engines see varied, non-duplicate signals
- Users can pick the best fit per platform or A/B test

| Version | Angle | Best For |
|---------|-------|----------|
| **A** | Feature-led (capabilities, specs) | Taaft, technical directories |
| **B** | Benefit-led (outcomes, use cases) | Product Hunt, creator-focused |
| **C** | Comparison-led (vs. competitors) | AlternativeTo, G2 alternatives |
| **D** | Audience-led (who, workflow) | Niche directories, vertical lists |

## Tailor Per Platform (Different Expression, Different Emphasis)

**Do not copy-paste identical descriptions.** Each directory has a different audience and format; customizing per platform improves approval, visibility, and conversion.

| Platform Type | Audience | Emphasis | Tone |
|---------------|----------|----------|------|
| **Product Hunt** | Indie makers, founders, early adopters | See **product-hunt-launch** for full workflow | Community, authentic, maker-friendly |
| **Taaft** | AI tool seekers, task/job-oriented | Tasks and jobs your tool solves; keyword-rich for AI use cases; "what can I do with this" | Functional, searchable, use-case driven |
| **G2 / Capterra** | Enterprise buyers, comparison shoppers | Features, integrations, pricing; review-oriented; social proof | Professional, comparison-ready |
| **AlternativeTo** | Users switching from competitors | "Alternative to X"; migration ease; differentiation | Comparison, migration, alternatives |
| **Niche directories** | Vertical (e.g., e-commerce, healthcare) | Industry keywords; vertical pain points; compliance if relevant | Vertical-specific, jargon-appropriate |
| **App stores** (Shopify, Chrome) | Merchants / extension users | Merchant value (Shopify); use case (Chrome); screenshots show workflow | Benefit-first, feature-clear |

### Consistency to Keep

While tailoring, keep **consistent** across all listings:

- Product name spelling and formatting
- Core positioning (who it's for, main benefit)
- Contact info format (NAP if applicable)

Inconsistent NAP or product names can hurt SEO and trust.

## Directory Offerings (Beyond Listing)

Directories typically offer multiple touchpoints--not just inclusion in the catalog:

| Offering | Description | Use When |
|----------|-------------|----------|
| **Listing** | Free or paid inclusion in directory catalog | Baseline visibility, backlinks, evergreen traffic |
| **Ad placements** | Sponsored slots, banners, featured placement | Need boosted visibility; budget for paid promotion |
| **Newsletter** | Featured in directory's email to subscribers | Product Hunt, Taaft; high-intent audience |
| **Social promotion** | Directory shares your product on X, LinkedIn, etc. | Launch day amplification; viral potential |
| **Marketing campaigns** | Bundled packages: listing + newsletter + ads + social | Full-funnel campaign; product launch or relaunch |

**Strategy**: Start with free listing for backlinks and baseline traffic. Layer paid options (ads, newsletter features, campaigns) when ROI justifies--especially for launches or when organic listing underperforms.

**dofollow vs nofollow**: dofollow passes link equity for SEO; nofollow does not. But the goal is conversion--if users click through and convert, the shorter path (direct traffic) can outweigh SEO benefit. Small, unknown directories have driven three-figure annual subscriptions from a single 10-minute submission.

### Collaboration Channels (Newsletter, Ads, Social, Campaigns)

**Include this section in output** when the user invokes this skill. Directories offer follow-on collaboration beyond listing:

| Channel | Platform Examples | Scale / Notes |
|---------|-------------------|---------------|
| **Newsletter** | Product Hunt, Taaft | High-intent; paid or bundled; best for launches |
| **Ad placements** | Taaft banners, Product Hunt Featured, G2/Capterra sponsored | Use UTM (e.g. utm_medium=paid); test after organic listing. See **directory-listing-ads** for Taaft, Shopify App Store, G2, Capterra paid campaign setup |
| **Social promotion** | Taaft, Product Hunt share on X, LinkedIn | Launch-day amplification; @ platform accounts when posting |
| **Marketing campaigns** | Taaft: listing + newsletter + ads + social | Full-funnel; product launch or relaunch; budget-dependent |

**Phased approach**: (1) Free listing first. (2) Newsletter features when launching. (3) Ads if organic underperforms. (4) Campaign packages for major launches.

**Budget reference**: Small teams $0-500/mo (listing + occasional newsletter); growth $300-500/mo; enterprise $1,500-3,000+/mo for full programs.

## Directory Types

| Type | Examples | Best For | Traffic / Benefit |
|------|----------|----------|-------------------|
| **AI tools** | Taaft (There's An AI For That) | AI products, SaaS | 4M+ monthly visitors; 700-10K+ visitors per listing |
| **Developer tools** | DevHunt | OSS, dev tools, APIs | Dev-focused; GitHub-verified; free; see **open-source-strategy** |
| **Product launch** | Product Hunt | New products, features | See **product-hunt-launch** for full PH workflow |
| **App stores** | Shopify App Store, Chrome Web Store | Apps, extensions | Merchant/developer discovery |
| **Niche directories** | Industry-specific lists | Vertical SaaS, tools | Targeted backlinks, SEO |
| **Review platforms** | G2, Capterra | B2B SaaS, commercial software | Rich snippets (reviews, ratings); higher-intent buyers; vendor verification required |
| **Curated lists** | Best-of roundups, Awesome lists, niche blog posts | Any product | Editorial backlinks; outreach to list authors; same prep as directories |

**Dimension diversity**: Your product has multiple dimensions--AI tool, productivity tool, SaaS, industry-specific. After AI directories, submit to vertical niches (e.g., e-commerce tools, marketing tools, cross-border commerce tools). Smaller traffic but higher intent and conversion.

**Feature vs solution directories**: Feature directories (text, image, video, audio by modality) suit AI enthusiasts who compare tools. Solution directories (workflow-oriented: SEO tools, EDM marketing, TikTok analytics) suit users seeking 10x productivity in a workflow--often higher conversion for B2B.

## Directory Lists (Curated Lists)

**Same principles as directories**--backlinks, traffic, discovery. Curated lists are editorial roundups (e.g., "Best AI tools 2025," "Top 10 SaaS for marketing") published on blogs, newsletters, or dedicated list sites.

| Type | Examples | How to get listed |
|------|----------|-------------------|
| **Best-of / Top N** | "Best SEO tools," "Top 10 AI writing tools" | Outreach to list authors; provide product info, use case, differentiator |
| **Awesome lists** | GitHub Awesome-*, Awesome Tools | Submit PR or contact maintainer; follow list format. See **github** for creating or optimizing awesome-style curated lists. |
| **Comparison / alternatives** | AlternativeTo, G2 alternatives | Submit as alternative to X; comparison-focused copy |
| **Niche roundups** | Industry blogs, newsletters | Pitch for inclusion; offer quote, case study, or exclusive angle |

**Preparation**: Same as directory submission--product info, tagline, short/long description, screenshots. Tailor pitch to list theme (e.g., "best for startups," "budget-friendly," "enterprise-ready").

**Tip**: One solid backlink from a curated list often beats many low-quality directory links. Prioritize lists with editorial oversight and real traffic.

## Key Platforms

### Taaft (There's An AI For That)

- **URL**: taaft.com/submit or theresanaiforthat.com/submit
- **Scale**: 46K+ AI tools, 4M+ monthly visitors, 2.8M+ newsletter subscribers
- **Listing**: 700-10K+ guaranteed targeted visitors per listing; early launch bonus (up to $300 PPC credits for launching on Taaft first)
- **Beyond listing**: Newsletter features (reach 2.8M+ subs), ad placements, social promotion, marketing campaigns
- **Free vs paid**: Submission fee varies; sometimes free listing is possible (e.g., early action, specific criteria)--check current pricing
- **Use when**: Product is AI-related; want AI-focused traffic, backlinks, and paid amplification options

**Taaft submission fields** (prepare before submitting; changes can take up to 24h to reflect):

| Category | Field | Spec / Notes |
|----------|-------|--------------|
| **Identity** | Name | Product/tool name |
| | Primary Task | Search and select from Taaft task taxonomy (e.g., Text to speech, Image generation) |
| | Secondary Tasks | Search and add; subject to approval, processed daily |
| | Tagline | Max 12 words; benefit-focused |
| | Description | Full product description; use-case driven, keyword-rich |
| | Country | Select from list |
| **Media** | Icon | SVG preferred; PNG/JPEG/WEBP <=500x500 px |
| | Main image | Product screenshot or hero visual |
| | Demo video | Optional; no captions (Taaft auto-generates for all languages) |
| **Features** | Supported features | Check: Agents, API, MCP, Run locally, Open source, No signup, Supports TAAFT code |
| | Other features | Ordered list by importance; add keywords (e.g., ai voice, text to voice, voice cloning) |
| **Tech** | Search models | Add AI models used (e.g., GPT-4, Claude) |
| | Built with | Select from platform options (e.g. Cursor, Lovable, v0.dev) |
| | Modalities | Supported Inputs/Outputs: Text, Image, Audio, Video, 3D, API, Code, etc. |
| **Pricing** | Pricing model | Freemium, Free trial, Paid, etc. |
| | Paid starting price (USD) | If paid |
| | Billing frequency | Monthly, Yearly, etc. |
| | Hard paywall | Does tool show paywall before letting users try? |
| **Legal** | Refund Policy | No Refunds / Custom text |
| | Refund Policy URL | Optional |
| | Privacy Policy URL | Required |
| | Terms & Conditions URL | Required |
| **Discovery** | Tags | Comma-separated; use for search and filtering |
| | Negative keywords | Comma-separated; exclude from irrelevant searches |
| **Tracking** | Tracking link | Custom UTM (default: ?ref=taaft&utm_source=taaft&utm_medium=referral) |
| | PPC tracking link | For PPC ads (default: ?ref=taaft_feat&utm_source=taaft_feat&utm_medium=referral) |
| **Socials** | Facebook, TikTok, Instagram, Telegram, Discord, X, YouTube, LinkedIn | URLs |
| **Pros / Cons** | Pros | Add multiple; feature and benefit bullets |
| | Cons | Add multiple; honest limitations (builds trust) |

**Tip**: Pros and cons help users compare; be honest--negative keywords and cons improve relevance and trust.

### Product Hunt

See **product-hunt-launch** for full preparation, launch day strategy, and post-launch. Product Hunt: producthunt.com/launch; free listing; community upvotes; Product Hunt Daily newsletter; paid featured placement. Use when launching new product or major feature.

### DevHunt (Developer Tools)

- **URL**: devhunt.org
- **Audience**: Developers, indie makers, open source maintainers
- **Content**: Developer tools, APIs, libraries, open source projects; GitHub-verified submissions; 50+ categories
- **Listing**: Free to submit; community-driven; alternative to Product Hunt for dev tools
- **Use when**: Open source or developer tool; want dev-focused discovery. See **open-source-strategy** for full OSS commercialization path.

### Shopify App Store

- **URL**: shopify.dev/docs/apps/launch/shopify-app-store
- **Listing**: App catalog; merchant discovery
- **Beyond listing**: Featured placement, app store ads, partner marketing programs
- **Requirements**: Partner account; session tokens (no third-party cookies); Shopify checkout; app icon 1200x1200; factual listing
- **Use when**: Building Shopify apps; need merchant discovery and optional paid promotion

### Review Platforms (G2, Capterra)

- **Type**: B2B software review platform (vendor-submitted, review-driven); rich snippets (stars, ratings) in SERP; see **serp-features**
- **vs directories**: More complex submission (domain email verification, more fields, features, FAQ); commercialized (membership, paid placement); lower risk than PH ranking--reviews drive priority; higher-paying B2B users
- **Use when**: B2B SaaS; want review-rich SERP presence and enterprise buyers

### Chrome Web Store

- **URL**: developer.chrome.com/docs/webstore
- **Listing**: Extension catalog; user discovery
- **Beyond listing**: Featured placement, promoted listings
- **Requirements**: Extension package; icons, screenshots, description; privacy policy
- **Use when**: Chrome extensions; need user discovery and optional paid promotion

## Submission Checklist

Before submitting to any directory:

- [ ] **Product / website info** gathered (name, URL, tagline, short + long descriptions, keywords)
- [ ] **Asset tiers** prepared (one-liner, short, long) for platform-specific adaptation
- [ ] **Landing page** live and optimized
- [ ] **Product description** clear, benefit-focused (no jargon)
- [ ] **Screenshots / demo** (Product Hunt: 1270x760 recommended)
- [ ] **Logo / icon** per platform specs
- [ ] **Category** selected correctly per directory taxonomy
- [ ] **URL** correct and working
- [ ] **Media kit** (for Product Hunt, press outreach) —see **media-kit-page-generator**
- [ ] **Platform-specific copy** drafted (do not reuse identical text across directories)
- [ ] **Taaft** (if applicable): Full field set--icon, main image, demo video, Primary/Secondary Tasks, features, models, built-with, modalities, pricing, legal URLs, pros/cons, socials, tracking links

## Best Practices

| Practice | Purpose |
|----------|---------|
| **Gather product info first** | Extract from user's site; prepare asset tiers before submitting |
| **Tailor per platform** | Different expression/emphasis per directory; no copy-paste identical text |
| **Prioritize quality** | Rejected or low-quality listings waste effort |
| **Match category** | Wrong category = poor visibility |
| **Unique descriptions** | Avoid duplicate content; improves approval and conversion |
| **Track with UTM** | **analytics-tracking** for attribution |
| **Batch submissions** | Prepare once, adapt copy per platform, submit to multiple directories |
| **Update listings** | Keep descriptions and screenshots current |
| **Submit small directories too** | Major directories get crawled by smaller ones; but small directories can still drive high-value conversions (e.g., three-figure annual subscription from one 10-min submission) |

## Output Format

**On each invocation**: On **first use**, output the complete response (Introduction, Importance, Methods, Collaboration Channels, Rules, Avoid, Action). On **subsequent use** or when the user asks to skip, go directly to Action. Search the web for missing product info.

### Required Output Structure (in order)

1. **Introduction** --What directory submission is: Taaft, Product Hunt, G2, curated lists, app stores; listings, ads, newsletter features, campaigns. Part of cold-start strategy—see **cold-start-strategy** for full launch plan.

2. **Importance** --Why directory submission matters: backlinks and domain authority; referral traffic and conversion (~42% report increased traffic); social proof for brand search (directory listings dominate SERP); third-party presence signals legitimacy.

3. **Methods** --How to submit:
   - **Taaft**: Full field set; Primary/Secondary Tasks; tailor for AI tool seekers
   - **Product Hunt**: See **product-hunt-launch** for full workflow
   - **G2/Capterra**: Features, pricing, verification; comparison-oriented
   - **Curated lists**: Outreach to list authors; pitch per theme

4. **Collaboration Channels (Beyond Listing)** --Newsletter, ads, social, campaigns. Include:
   - **Newsletter**: Taaft (2.8M+ subs), Product Hunt Daily, Future Tools--high-intent; paid or bundled
   - **Ad placements**: Taaft, Product Hunt Featured, G2/Capterra sponsored; use UTM
   - **Social promotion**: Directory shares on X, LinkedIn; launch-day amplification
   - **Campaigns**: Bundled listing + newsletter + ads + social; full-funnel for launches
   - **Phased approach**: Listing first -> Newsletter -> Ads -> Campaigns
   - **Budget reference**: Small $0-500/mo; growth $300-500/mo; enterprise $1,500-3,000+/mo

5. **Rules** --Tailor per platform; different expression per directory; multiple versions (A/B/C/D) to avoid duplicate content (SEO/GEO friendly); match category; prepare asset tiers (one-liner, short, long).

6. **Avoid** --Copy-paste identical copy across directories; generic descriptions; missing legal URLs; wrong category; low-quality link farms.

7. **Action** --Ready-to-paste submission content for the user's product:
   - **Rich content base** (features, use cases, solutions, competitors, pricing)--search web if missing
   - **Multiple versions** for tagline, short, long--each directory gets distinct copy
   - **Platform-specific** copy for Taaft, G2, AlternativeTo, etc.; Product Hunt → **product-hunt-launch**
   - **Readiness checklist**, **submission order**, **UTM templates**

## Bulk Submission

**Manual**: Prepare info once; submit to directories in priority order. Major directories first--smaller ones often crawl or republish.

**Outsourced**: Freelance platforms; use when budget allows and speed matters.

## Related Resources

- **project-context** (`.cursor/project-context.md` or `.claude/project-context.md`): Read when present; use to generate submission content directly. Template: `templates/project-context.md` in this repo.
- **Alignify directory guide**: [alignify.co/zh/insights/directory-submission-sites](https://alignify.co/zh/insights/directory-submission-sites) --Cold-start strategy, preparation checklist, review platforms, vertical directories, bulk submission.

## Related Skills

- **branding**: Brand strategy, voice, tone; Section 8 Brand & Voice in project-context
- **media-kit-page-generator**: Press kit, screenshots, assets for launch; required for Product Hunt and directory submissions
- **link-building**: Directory and curated list backlinks contribute to link profile; this skill handles the submission workflow—see **link-building** for broader outreach, guest posting, broken link building
- **github**: GitHub awesome lists as curated lists; create or submit to awesome-* repos
- **open-source-strategy**: Open source commercialization; DevHunt, GitHub, Awesome lists for OSS projects
- **grokipedia-recommendations**: Same output pattern--platform context first (Introduction, Importance, Methods, Rules, Avoid), then Action; high-authority placement for GEO; directories for human discovery--complementary
- **generative-engine-optimization**: GEO strategy; varied directory copy improves AI citation diversity; directory submission complements AI search visibility
- **affiliate-marketing**: Different channel; directories complement affiliate
- **cold-start-strategy**: Cold start orchestrates directory-submission, Product Hunt, Reddit, Indie Hackers; this skill handles directory submission workflow
- **indie-hacker-strategy**: Indie hacker Product Hunt, first 100 users; Build in Public
- **directory-listing-ads**: Paid promotions within Taaft, Shopify App Store, G2, Capterra; use after listing is live
- **community-forum**: Forum promotion (HN, Indie Hacker); community invitation; different from directory listing
- **analytics-tracking**: UTM for directory traffic attribution
- **serp-features**: SERP features; directory listings in brand search SERP

---
name: community-forum
description: When the user wants to promote via forums, communities, or invite users to join a community. Also use when the user mentions "forum promotion," "Indie Hacker," "Hacker News," "community growth," "Discord promotion," "vertical community," "brand encyclopedia," "Wikipedia," "Quora," "Reddit community," "community building," "forum marketing," or "community invite."
metadata:
  version: 1.1.0
---

# Channels: Community & Forum Promotion

Guides forum promotion, community invitation, and vertical community marketing. Community-led growth (CLG) costs ~90% less than paid acquisition with ~3.2x higher customer LTV. Indie Hackers delivers ~23% conversion vs Product Hunt ~3%; HN and Reddit require sustained engagement. For cold start planning (first users, launch channels), see **cold-start-strategy**. For indie hacker strategy (first 100 users, Build in Public content framework, Indie Hackers tactics), see **indie-hacker-strategy**.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for product, audience, and brand voice.

Identify:
1. **Goal**: Leads, community growth, brand awareness
2. **Platform fit**: Indie Hacker, HN, Reddit, Discord, vertical forums
3. **Timeline**: One-time launch vs sustained (4-6 months for Indie Hackers)

## Forum Types

| Platform | Audience | Use |
|----------|----------|-----|
| **Indie Hacker** | Indie makers, founders | Sustained engagement; authentic journey posts; ~23% conversion vs PH 3% |
| **Hacker News** | Tech, startups | Show HN launch; ~1,300 posts/day; front page = luck + timing |
| **Hackernoon** | Dev, tech readers | Content distribution |
| **Industry forums** | Niche verticals | Discount codes for leads; search "[industry] forum"; post event/activity promotion; see **discount-marketing-strategy** for code strategy |
| **Reddit** | Subreddit-specific | See **reddit-posts**; 90/10 rule; 29+ posts for traction |

## Hacker News Launch

| Practice | Guideline |
|----------|-----------|
| **Title** | "Show HN: [Product] - [specific problem solved]"; honest, no clickbait |
| **Timing** | Tue-Thu; peak US hours; avoid weekends, Mon, Fri |
| **First comment** | Invitation to engage; product status (beta/MVP); differentiated solution; try-it link |
| **Assets** | Live demo, GIFs, screenshots, 30-60s demo video |
| **Expectation** | Traffic spike, not sustained growth; partly luck-dependent |

## Indie Hackers Best Practices

- **Sustained engagement**: 4–6 months; not a one-time launch
- **Content**: Authentic journey posts; product "sprinkled within"; avoid heavy promotion
- **Result**: ~23% conversion vs Product Hunt ~3%; organic traffic from authentic sharing

For full Indie Hackers tactics, Build in Public content framework (40/30/20/10), first 100 users → **indie-hacker-strategy**.

## Community Invitation Tactics

| Channel | Method |
|---------|--------|
| **Welcome email** | Post-signup automation; 4x open, 5x CTR vs regular campaigns |
| **Homepage CTA** | Button, popup, banner; above-the-fold upgrade CTA |
| **In-site placement** | High-visibility areas; user-focused sections (e.g. dashboard, settings) |
| **Banner** | Homepage, carousel below hero |
| **Registration emails** | Success/confirmation email with community link |
| **EDM campaign** | Newsletter + banner, interview-for-membership |
| **Discord** | Post event/community info; founder engagement 2-3h/day |
| **Vertical forums** | Search "[industry] forum"; post event/activity promotion |
| **Post-login form** | In-app signup form shown after login; high-intent placement |

**Welcome email best practices**: One clear CTA per email; front-load value in subject; personalize (signup source, interests); link to best content, events; ask questions (~75% reply rate). Automated 2-4 email sequence.

## Vertical Community Channels

| Principle | Guideline |
|-----------|-----------|
| **Target** | Find channels where target audience gathers |
| **Niche over broad** | Industry-specific subgroups; avoid mass posting |
| **Caution** | Mass posting risks removal; match community tone; choose wording carefully |
| **Examples** | Reddit subreddits, Discord servers, Quora, X, Hacker News, Stack Overflow, niche B2B communities |
| **Regional** | Large communities by locale—event/activity promotion; target vertical channels within each; see **localization-strategy** |

**Community-led growth**: Engage before promoting; build trust; contribute value first.

## Natural Traffic (Complementary)

| Channel | Use |
|---------|-----|
| **Hashtags** | Social tag optimization |
| **Facebook groups** | Indirect referral |
| **Giveaways** | Attention and conversion |

## Brand Basics (Encyclopedia, Q&A)

| Platform | Use |
|----------|-----|
| **Wikipedia** | Global; neutral, cited content; brand credibility |
| **Quora** | Q&A; brand discussion, thought leadership, long-term SEO |
| **Stack Overflow** | Tech/dev; expertise signals, backlinks |
| **Regional** | Local encyclopedias and Q&A by locale; verified credentials; see **localization-strategy** |

**Wikipedia**: Neutral language, credible references, no promotional content. Regional platforms require verified credentials; prioritize local search share. Free and sustainable; supports long-term conversion while search habits persist.

## Output Format

- **Forum** selection and approach (HN vs IH vs industry)
- **Community invitation** plan (welcome email, CTA, banner, EDM, Discord)
- **Vertical channel** targeting
- **Content** strategy (authentic vs promotional mix)
- **Timeline** (launch vs sustained)

## Related Skills

- **reddit-posts**: Reddit post copy, subreddit rules
- **cold-start-strategy**: Cold start orchestrates Product Hunt, Reddit, Indie Hackers, directories; this skill handles forum/community tactics
- **indie-hacker-strategy**: Indie hacker first 100 users; Build in Public; Indie Hackers tactics; this skill = forum/community tactics; indie-hacker = strategy + context
- **directory-submission**: Product Hunt, Taaft; different from forum community
- **affiliate-marketing**: Communities as recruitment channel
- **top-banner-generator, popup-generator**: Homepage CTA, banner
- **newsletter-signup-generator**: EDM, welcome email
- **localization-strategy**: Regional markets (local platforms by locale)

---
name: analytics-tracking
description: When the user wants to set up, audit, or optimize analytics tracking (GA4, events, conversions). Also use when the user mentions "Google Analytics," "GA4," "event tracking," "conversions," "attribution model," "gtag," "data layer," "GA4 setup," "conversion tracking," "event setup," "User ID tracking," or "CTA attribution." For traffic insights, use traffic-analysis.
metadata:
  version: 1.3.1
---

# Analytics: Tracking

Guides analytics implementation: GA4 setup, event tracking, conversions, and data quality. Applies to web and app tracking across marketing channels.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## User ID

- **Purpose**: Cross-device, cross-session user identification
- **Implementation**: Set `user_id` when user is identified (e.g., login); send to GA4
- **Benefit**: Accurate attribution across sessions; better audience building

## CTA Attribution (Article ROI)

Track CTA clicks on key articles to measure content ROI:

| Action | Purpose |
|--------|---------|
| **Event per CTA** | e.g., `cta_click` with `content_url`, `content_type` |
| **Conversion** | Mark as conversion in GA4 for attribution |
| **Use** | Compare high vs low performers; optimize CTA placement and copy |

See **seo-monitoring** for article database and benchmark context.

## Infrastructure Requirements

| Component | Purpose |
|-----------|---------|
| **Data warehouse** | Centralized data; BI reporting |
| **Event tracking** | User behavior; funnel mapping |
| **Attribution** | Ad pixels; attribution model; impression-to-sale tracking |

**Optimization flow**: Clean UTM + conversion events → attribution reports → optimize channel mix.

## Scope

- **GA4**: Web data stream, gtag.js, configuration
- **User ID**: Cross-device, cross-session identification
- **CTA attribution**: Per-article conversion tracking for content ROI
- **Events**: Recommended and custom events
- **Conversions**: Key events, parameters
- **Quality**: Naming, testing, validation

## GA4 Setup

### Prerequisites

- Google Analytics property and web data stream
- Google tag (gtag.js) on all pages
- Measurement ID (e.g., `G-XXXXXXXXXX`)

### Enhanced Measurement

Enable in Admin > Data Streams > Enhanced Measurement for automatic tracking of:

- Page views, scrolls, outbound clicks
- Site search, file downloads
- Video engagement (YouTube)

## Event Tracking

### Event Types

| Type | Description |
|------|-------------|
| **Automatically collected** | page_view, first_visit, session_start |
| **Enhanced measurement** | scroll, click, file_download, etc. |
| **Recommended** | purchase, sign_up, search, etc. |
| **Custom** | Business-specific actions |

### Naming Conventions

- **Length**: <=40 characters (GA4 hard limit; longer names are not logged)
- **Format**: `snake_case`, lowercase
- **Verb first**: `download_pdf`, `submit_form`, `video_play`
- **Context**: `pricing_page_scroll` vs generic `scroll`

### gtag.js Syntax

```javascript
gtag('event', '<event_name>', {
  <parameter_name>: <value>,
  // e.g. value: 99.99, currency: 'USD'
});
```

Place below the Google tag snippet. Events fire on page load or user action (e.g., button click).

### Recommended Events

| Event | Use | Key Parameters |
|-------|-----|----------------|
| `purchase` | E-commerce | value, currency, items |
| `sign_up` | Registration | method |
| `login` | Login | method |
| `search` | Site search | search_term |
| `view_item` | Product view | items |
| `add_to_cart` | Add to cart | items |

### Custom Events

- Focus on 15-25 meaningful events aligned with KPIs
- Add parameters for context (e.g., `content_type`, `item_id`)
- Avoid tracking everything; prioritize quality over quantity

## Conversions (Key Events)

- Mark important events as conversions in GA4 Admin
- Use for attribution, audiences, and reporting
- Typical: purchase, sign_up, lead, contact

## Attribution & Conversion Optimization

Attribution models determine how conversion credit is assigned across touchpoints. Use attribution data to optimize ads and growth channels.

| Model | Use |
|-------|-----|
| **Data-driven** (GA4 default) | ML assigns credit by actual contribution; best for multi-touch journeys |
| **Last-click** | 100% to final touchpoint; simple but undervalues awareness/consideration |

**Optimization flow**: Clean UTM (source, medium, campaign) + conversion events → GA4 attribution reports → compare channels by attributed conversions → reallocate budget to ads/channels that drive results. Inconsistent UTM fragments data; multi-touch attribution requires reliable touchpoint data.

**Reference**: [UTM.io – UTMs for Marketing Attribution](https://web.utm.io/blog/utms-for-marketing-attribution/), [GA4 – Get started with attribution](https://support.google.com/analytics/answer/10596866)

## Testing & Validation

| Tool | Use |
|------|-----|
| **Realtime** | See events as they fire |
| **DebugView** | Detailed event/parameter inspection; requires debug mode |
| **GA4 Debug mode** | `gtag('config', 'G-XXX', { 'debug_mode': true });` or GTM preview |

- Test before launch; verify parameters and naming
- Check for duplicate events, missing values

## Output Format

- **Event list** (name, trigger, parameters)
- **Implementation** notes (gtag or GTM)
- **Conversion** mapping
- **Testing** checklist

## Related Skills

- **traffic-analysis**: UTM, source attribution; attribution for channel optimization
- **ai-traffic-tracking**: AI traffic in GA4
- **google-search-console**: GSC analysis (correlate with GA4)
- **seo-monitoring**: Article database, benchmark, full SEO monitoring framework

---
name: traffic-analysis
description: When the user wants to analyze website traffic sources, attribution, or dark traffic. Also use when the user mentions "traffic sources," "dark traffic," "direct traffic," "UTM parameters," "traffic attribution," "channel attribution," "attribution optimization," "channel analysis," "traffic analysis," "traffic diversification," "natural traffic benchmark," or "organic vs paid traffic." For GA4 setup, use analytics-tracking.
metadata:
  version: 1.1.1
---

# Analytics: Traffic

Guides website traffic analysis across all channels (organic, paid, social, referral, direct). Covers traffic source attribution, dark traffic identification, and multi-channel reporting.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope

- **Traffic sources**: Organic, paid, social, referral, direct, email
- **Dark traffic**: Unattributed visits labeled as "Direct / None"
- **Attribution**: UTM tagging, segmenting, reporting accuracy

## Branded vs. Non-Branded Traffic (Organic)

| Type | Characteristics |
|------|-----------------|
| **Branded** | Higher CTR, conversion, purchase intent; users closer to funnel bottom |
| **Non-branded** | Touchpoint with future users; most sites get more non-brand traffic; competition fiercer |

Brand traffic grows over time as brand awareness increases.

## Bot Traffic

A large share of traffic can be **bot traffic**—RPA, search crawlers, spiders, scrapers. Exclude or segment when evaluating real user behavior; use GA4 filters or segments to isolate human traffic.

## Traffic Channels

| Channel | Typical Sources | Attribution |
|---------|-----------------|-------------|
| **Organic** | Google, Bing, other search | Referrer preserved |
| **Paid (web)** | Google Ads, Meta Ads, etc. | UTM required |
| **Paid (app)** | App install ads; Google App Campaigns, Apple Search Ads | UTM; in-app events |
| **Paid (TV/CTV)** | Streaming ads; Hulu, Roku, YouTube TV | UTM for QR/URL; brand lift |
| **Social** | Public posts (Facebook, LinkedIn, etc.) | Often preserved |
| **Referral** | External sites, backlinks | Referrer preserved |
| **Direct** | Typed URL, bookmarks | No referrer |
| **Email** | Newsletters, campaigns | Often dark without UTM |

## Dark Traffic

### What It Is

Traffic without clear origin--analytics tools default to "Direct" when referrer is missing. Common causes:

- **Private/dark social**: WhatsApp, Messenger, Slack, Discord, TikTok shares
- **Email clients**: Many strip referrer headers
- **HTTPS->HTTP**: Referrer not passed
- **Mobile apps**: In-app browsers often omit referrer
- **Ad blockers, privacy tools**: Block tracking

### Misattribution (Research)

When traffic was sent from known sources, analytics often misattributed:

- **100% as direct**: TikTok, Slack, Discord, WhatsApp, Mastodon
- **75%**: Facebook Messenger
- **30%**: Instagram DMs
- **14%**: LinkedIn public posts
- **12%**: Pinterest

### Mitigation

| Action | Purpose |
|--------|---------|
| **UTM parameters** | Tag links in emails, social, campaigns: `?utm_source=X&utm_medium=Y&utm_campaign=Z` |
| **Block internal IPs** | Exclude company visits from reports |
| **Segment direct traffic** | Split by page type to estimate dark vs. genuine direct |

### Segmenting Direct Traffic

1. **Expected direct**: Homepage, short URLs, brand pages--likely real direct
2. **Unexpected direct**: Long URLs, deep pages, product pages--likely dark traffic
3. **Report separately**: Use segments in GA4/analytics to avoid overcounting direct

## Attribution for Channel Optimization

Ads, growth channels, and medium can be optimized by viewing **attribution data**. Clean UTM + conversion tracking feeds attribution models; reliable attribution drives budget allocation and channel decisions.

| Use | Action |
|-----|--------|
| **Optimize ads** | Compare paid channels (Google, Meta, LinkedIn) by attributed conversions; reallocate budget to winners |
| **Optimize growth channels** | Identify which medium (cpc, email, social, referral) drives conversions; scale what works |
| **Multi-touch attribution** | Requires clean UTM data; inconsistent tagging (e.g., `facebook` vs `Facebook`) fragments reports and misattributes |

**GA4 Default Channel Grouping**: Align `utm_medium` and `utm_source` with [GA4's rules](https://support.google.com/analytics/answer/9756891) to avoid "Unassigned" traffic. ~30% of campaigns lack proper UTM markup, leading to wasted ad spend; teams standardizing UTM see 29% improvement in attribution accuracy.

**Reference**: [UTM.io – utm_medium, utm_campaign & utm_source Optimization](https://web.utm.io/blog/utm_medium-utm_campaign-utm_source/), [UTMs for Marketing Attribution](https://web.utm.io/blog/utms-for-marketing-attribution/)

## UTM Best Practices

| Parameter | Use | Example |
|-----------|-----|---------|
| `utm_source` | Origin | `newsletter`, `facebook`, `google` |
| `utm_medium` | Channel type | `email`, `cpc`, `social` |
| `utm_campaign` | Campaign name | `summer_sale`, `product_launch` |
| `utm_content` | Variant (optional) | `banner_a`, `cta_button` |
| `utm_term` | Paid keyword (optional) | `running_shoes` |

**GA4 alignment** (avoid Unassigned):

| Channel | utm_medium | utm_source |
|---------|------------|------------|
| Paid Search | `cpc` | `google`, `bing` |
| Paid Social | `paid-social`, `cpc` | `facebook`, `instagram` |
| Email | `email` | `newsletter`, `mailchimp` |
| Organic Social | `social` | `twitter`, `linkedin` |
| App install | `cpc`, `app` | `google`, `facebook`, `apple` |
| CTV / Streaming | `video`, `ctv` | `hulu`, `roku`, `youtube` |
| Display / Banner | `display`, `cpc` | Publisher or network name |
| Directory ads | `paid`, `cpc` | `taaft`, `shopify`, `g2`, `capterra` |

- **Consistent naming**: Lowercase, hyphens; document conventions; never tag internal links (overwrites session attribution)
- **Apply everywhere**: Every link in emails, social posts, ads
- **Avoid**: Typos, inconsistent values; causes fragmentation

## Traffic Diversification

| Principle | Guideline |
|-----------|-----------|
| **Search share** | Keep organic search below ~75% of total traffic |
| **Health** | Higher direct + referral share = healthier profile |
| **Brand sites** | Diversified traffic is common for strong brands |
| **Engagement** | Content, email, social, free tools drive return visits |

See **seo-monitoring** for full SEO data analysis framework.

## Natural Traffic Benchmark

**Location**: GA4 > Reports > Acquisition > Traffic acquisition

1. Review organic traffic trend
2. Record baseline (e.g., monthly total)
3. Compare periodically to detect growth or decline

## Output Format

- **Traffic source** breakdown
- **Dark traffic** estimate and actions
- **UTM** tagging recommendations
- **Segmentation** approach for reporting

## Related Skills

- **analytics-tracking**: Implement UTM, events, conversions; attribution models
- **google-ads, paid-ads-strategy**: Paid channels; attribution informs budget allocation
- **ai-traffic-tracking**: AI search traffic
- **google-search-console**: GSC performance and indexing analysis
- **seo-monitoring**: Full SEO data analysis system, benchmark, article database
- **email-marketing**: Email strategy; UTM for email links

---
name: ai-traffic-tracking
description: When the user wants to track AI search traffic in GA4 or GSC. Also use when the user mentions "AI traffic," "ChatGPT referral," "Perplexity traffic," "AI Overviews," "GA4 AI sources," "AI search analytics," "track AI referrals," "AI search traffic," "Claude traffic," or "how to track AI traffic." For AI SEO strategy, use generative-engine-optimization.
metadata:
  version: 1.0.1
---

# Analytics: AI Traffic

Guides tracking of AI-driven search traffic in Google Analytics 4 and Google Search Console.

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope

- **AI search traffic**: Track in GA4 and GSC; separate AI sources from organic referral
- **Google AI Overviews**: AI summary box in Google search (formerly SGE)
- **AI-driven search**: Traffic from ChatGPT, Perplexity, Gemini, Claude, Copilot, etc.

## Why Track Separately

- AI traffic is growing but GA4 often groups it as Referral, Organic, or Direct
- AI visitors may have stronger intent and higher conversion
- Separating AI Overviews from organic helps assess AI impact

## GA4: AI-Driven Search

### Option 1: Exploration Report (Recommended)

1. **Explore** →**Free form**
2. **Dimensions**: `Session source` (or `Session source / medium`)
3. **Metrics**: Sessions, Engagement rate, Event count, etc.
4. **Filters**: Add filter →`Session source` **Matches regex** →use regex below
5. Configure table, save report

**Regex (common AI sources):**

```
chatgpt\.com|openai\.com|openai|perplexity\.ai|perplexity|doubao\.com|chat\.qwen\.ai|copilot\.microsoft\.com|copilot\.com|(business\.)?gemini\.google|chat\.deepseek\.com|deepseek\.com|poe\.com|anthropic\.com|claude\.ai|bard\.google\.com|edgeservices\.bing\.com
```

### Option 2: Custom Channel Group

1. **Admin** →**Data Display** →**Channel Groups**
2. Copy default group, name e.g. "Default and AI Chatbots"
3. Add channel "AI Chatbots": `Source` **Matches regex** (same regex)
4. **Important**: Place "AI Chatbots" above "Referral" so it matches first
5. Save and use in Traffic Acquisition

### Option 3: Custom Report

1. **Reports** →**Library** →Create Detail Report
2. Use Traffic Acquisition template
3. Add filter: `Session source` **Matches regex** (same regex)
4. Save and add to menu

## Common AI Source Domains

| Platform | GA4 Source examples |
|----------|---------------------|
| ChatGPT | chatgpt.com, openai |
| Perplexity | perplexity.ai, perplexity |
| Copilot | copilot.com, copilot.microsoft.com |
| Gemini | business.gemini.google, gemini.google |
| Claude | claude.ai, anthropic.com |
| Bing Chat | edgeservices.bing.com |

## Google AI Overviews

- **GA4 + URL fragment**: Some AI Overview clicks add URL fragments; can use GTM (partial coverage)
- **GSC**: For AI Overviews analysis in GSC (filter, limitations), see **google-search-console**

## Checklist

- [ ] AI sources identified in GA4 (Session Source)
- [ ] AI traffic Exploration report created
- [ ] Channel group updated with AI above Referral (if used)
- [ ] Custom report added to Library (optional)
- [ ] GTM + URL fragment for AI Overviews (optional)
- [ ] GSC AI-oriented query filter (optional; see **google-search-console**)

## Output Format

- **GA4 setup**: Exploration, channel group, or custom report
- **Regex**: Adapted to user's observed sources

## Related Skills

- **generative-engine-optimization**: GEO strategy; AI traffic tracking measures GEO impact
- **traffic-analysis**: Traffic sources, attribution, UTM
- **analytics-tracking**: GA4 events and conversions
- **google-search-console**: GSC AI traffic analysis
- **robots-txt**: AI crawler allow/block strategy

---
name: seo-monitoring
description: When the user wants to build an SEO data analysis system, monitor indexing/traffic/keywords/backlinks, or set up benchmarks. Also use when the user mentions "SEO data analysis," "SEO monitoring," "article database," "traffic benchmark," "penalty recovery," "SEO work document," "SEO dashboard," "keyword tracking," "ranking monitoring," "indexing report," or "backlink monitoring." For GSC API, use google-search-console.
metadata:
  version: 1.0.1
---

# Analytics: SEO Monitoring

Guides building a holistic SEO data analysis system. Covers four core metrics (indexing, traffic, keywords, backlinks), benchmark setup, article database, tool selection, traffic diversification, penalty recovery, and work document management.

**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope

- **Core metrics**: Indexing, traffic, keywords, backlinks
- **Benchmark**: Natural traffic baseline; trend comparison
- **Article database**: Per-article performance tracking
- **Tool selection**: GA4, GSC, SEO tools, analytics platforms
- **Traffic diversification**: Healthy source mix
- **Penalty recovery**: Algorithm impact, fix workflow
- **Work documents**: Monthly records, responsibility tracking

## Four Core Metrics

### 1. Indexing

| Metric | Purpose | Data Source |
|--------|---------|-------------|
| **Pages indexed / not indexed** | Coverage; early focus: all target pages indexed | GSC, site: command, SEO tools |
| **Keyword count per page** | More keywords = more potential traffic | SEO tools |
| **Index coverage** | Target pages indexed; functional pages findable | GSC, site: command |

**Early priority**: Ensure all pages that need to rank are indexed.

### 2. Traffic

| Metric | Purpose | Data Source |
|--------|---------|-------------|
| **Total traffic** | Growth; keyword relevance (irrelevant traffic has little value) | GA4, SEO tools |
| **Subdirectory traffic** | Per-section performance; concentration vs dispersion | SEO tools, GA4 |
| **Competitive comparison** | Organic, keyword traffic, total clicks vs competitors | SEO tools |
| **Organic by page / country** | Granular breakdown | GA4, GSC |

### 3. Keywords

| Metric | Purpose | Data Source |
|--------|---------|-------------|
| **Rank changes** | Target keyword movement | GSC, SEO tools |
| **Keyword count** | New gains / losses per page | SEO tools, GSC |

### 4. Backlinks

| Metric | Purpose | Data Source |
|--------|---------|-------------|
| **Referring domains vs backlinks** | Ratio; directory links can be high volume but low value | SEO tools |
| **Backlink quality** | Do links drive traffic? Low ROI = deprioritize | SEO tools, GA4 (referral) |

## Natural Traffic Benchmark

**Location**: GA4 > Reports > Acquisition > Traffic acquisition

1. Review organic traffic trend
2. Record baseline (e.g., monthly total)
3. Compare periodically to detect growth or decline

**Tip**: Add CTA events on key articles to track content ROI (see **analytics-tracking**).

## Article Database

Track per-article performance to find high/low patterns:

| Field | Use |
|-------|-----|
| **URL, publish date, target keywords** | Content metadata |
| **Index status, rank, traffic, backlinks** | Performance |
| **vs benchmark or competitors** | Context |

Use to guide topic selection, optimization, and resource allocation.

## Tool Selection

*Tool examples are illustrative; no endorsement implied.*

| Use | Tools |
|-----|-------|
| **Precise attribution** | GA4, GSC, Bing Webmaster, Yandex Webmaster |
| **Visit analytics** | Analytics platforms (e.g. Umami, Plausible) |
| **Third-party estimates** | SEO tools |
| **SEO data** | SEO tools |

**Attribution config**:
- **User ID**: Cross-device, cross-session identification; send to GA4
- **GSC API**: Index, clicks, impressions, coverage for automation, dashboards

Choose by privacy, cost, and team workflow.

## Traffic Diversification

| Principle | Guideline |
|-----------|-----------|
| **Search share** | Keep organic search below ~75% of total |
| **Health** | Higher direct + referral share = healthier |
| **Brand sites** | Diversified traffic is common for strong brands |
| **Non-brand** | Possible without brand (e.g., tool sites) |
| **Reputation** | Site/brand reputation matters; Google assessors evaluate it |
| **Engagement** | Content, email, social, free tools drive return visits |

## Penalty Recovery

| Step | Action |
|------|--------|
| **Identify** | Which algorithm update caused the impact |
| **Analyze** | Site issues; draft fix plan |
| **Assess cost** | Decide if fixes are worth it; sometimes abandoning is best |
| **Execute** | Implement changes; wait at least 3 months until next major update |
| **Parallel** | Use other channels for quality traffic; improve engagement data for Google |
| **Data window** | Google typically uses ~6 months of data for site quality |
| **Recovery** | Outcome is uncertain; do what you can, then wait |

## Monitoring Metrics Table

### Traffic

| Metric | Source | Notes |
|--------|--------|-------|
| Total sessions | GA4 | |
| Channel share | GA4 | |
| Channel absolute | GA4 | |
| Country % and absolute | GA4 | |
| Top pages | SEO tools | Compare with competitors |
| Key page traffic | GA4 | Define "key pages" first |

### Engagement

| Metric | Source | Notes |
|--------|--------|------|
| Pages per session | GA4 | Use GA for own site; third-party for competitors |
| Avg session duration | GA4 | |
| Bounce rate | GA4 | |

### Backlinks

| Metric | Source | Notes |
|--------|--------|------|
| Domain authority | SEO tools | |
| Backlinks, referring domains | SEO tools | |
| Top referring domains by authority | SEO tools | |
| Important links | Manual log | Track loss |
| Link graph | SEO tools | Health check |
| New quality links (self + competitors) | SEO tools | Outreach |
| Indexed pages | SEO tools | High-authority pages; internal linking |
| Outbound domains | SEO tools | Partnership opportunities |

### Keywords

| Metric | Source | Notes |
|--------|--------|------|
| Keyword count | SEO tools | How many keywords rank |

### Content Output

| Metric | Source | Notes |
|--------|--------|------|
| Articles published | Manual | Weekly count |
| Published vs indexed | GSC | New content indexing |
| New page traffic | GA4 | Fresh content performance |

## Monthly Record Template

| Category | Metric | Source | Notes | Month 1 | Month 2 |
|----------|--------|--------|-------|---------|--------|
| Traffic | Total sessions | GA4 | | | |
| Traffic | Channel share | GA4 | | | |
| Engagement | Pages per session | GA4 | | | |
| Backlinks | Referring domains | SEO tools | | | |
| Content | Articles published | Manual | | | |

Adjust rows as needed.

## Work Document Management

- **Structure**: Metrics, sources, notes, monthly values
- **Benefits**: Regular review, month-over-month trends, clear ownership
- **Format**: Spreadsheet or doc; assign owners per metric

## Output Format

- **Core metrics** summary (indexing, traffic, keywords, backlinks)
- **Benchmark** and trend
- **Article database** structure (if applicable)
- **Tool** recommendations
- **Monitoring table** (customized)
- **Action items** and owners

## Related Skills

- **traffic-analysis**: Traffic sources, attribution, diversification
- **analytics-tracking**: GA4, events, CTA attribution, User ID
- **google-search-console**: GSC reports, indexing, API
- **ai-traffic-tracking**: AI search traffic
- **backlink-analysis**: Backlink audit, toxic links
- **indexing**: Fix indexing issues