/fix-virality

Fix the highest priority viral growth gap.

What This Does

• Invoke /check-virality to audit shareability

• Identify highest priority gap

• Fix that one issue

• Verify the fix

• Report what was done

This is a fixer. It fixes one issue at a time. Run again for next issue. Use /virality for full setup.

Process

1. Run Primitive

Invoke /check-virality skill to get prioritized findings.

2. Fix Priority Order

Fix in this order:

• P0: No OG tags, no root metadata

• P1: Dynamic OG images, share mechanics, Twitter cards

• P2: Referral system, UTM tracking, share prompts

• P3: Launch assets, changelog

3. Execute Fix

No OG tags (P0): Add to app/layout.tsx :

import type { Metadata } from 'next';

export const metadata: Metadata = { metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL!), title: { default: 'Your Product - Tagline', template: '%s | Your Product', }, description: 'One sentence that makes people want to try it.', openGraph: { type: 'website', locale: 'en_US', siteName: 'Your Product', images: ['/og-default.png'], }, twitter: { card: 'summary_large_image', creator: '@yourhandle', }, };

No dynamic OG images (P1):

pnpm add @vercel/og

Create app/api/og/route.tsx :

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) { const { searchParams } = new URL(request.url); const title = searchParams.get('title') ?? 'Your Product';

return new ImageResponse( ( <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backgroundColor: '#000', color: '#fff', }}> <div style={{ fontSize: 60, fontWeight: 'bold' }}>{title}</div> </div> ), { width: 1200, height: 630 } ); }

No share button (P1): Create components/share-button.tsx :

'use client';

import { useState } from 'react';

export function ShareButton({ url, title }: { url: string; title: string }) { const [copied, setCopied] = useState(false);

const share = async () => { if (navigator.share) { await navigator.share({ url, title }); } else { await navigator.clipboard.writeText(url); setCopied(true); setTimeout(() => setCopied(false), 2000); } };

return <button onClick={share}>{copied ? 'Copied!' : 'Share'}</button>; }

No referral system (P2): Add referral tracking to database schema and implement referral code generation.

4. Verify

After fix:

Test OG tags

curl -s https://yoursite.com | grep -E "og:|twitter:" | head -10

Test OG image endpoint

curl -I "http://localhost:3000/api/og?title=Test"

Or use OG validators:

• https://www.opengraph.xyz/

• https://cards-dev.twitter.com/validator

5. Report

Fixed: [P0] No OG tags configured

Updated: app/layout.tsx

• Added metadataBase
• Added openGraph configuration
• Added Twitter card configuration

Verified: curl shows og:title, og:image, twitter:card

Next highest priority: [P1] No dynamic OG images Run /fix-virality again to continue.

Branching

Before making changes:

git checkout -b feat/virality-$(date +%Y%m%d)

Single-Issue Focus

Each viral feature should be tested independently. Fix one at a time:

• Verify share previews look correct

• Test on actual social platforms

• Measure impact

Run /fix-virality repeatedly to build shareability.

Related

• /check-virality

• The primitive (audit only)

• /log-virality-issues

• Create issues without fixing

• /virality

• Full viral growth setup

• /launch-strategy

• Launch planning