bio-link-deployer

# Bio Link Deployer

Create a Linktree-style hub page that links all your affiliate content — blog posts, landing pages, social profiles, and product links — in one place. Output is a single self-contained HTML file with 3 theme options, mobile-first (90%+ bio link traffic is mobile), deployable anywhere.

## Stage

S5: Distribution — The central hub that ties your entire affiliate funnel together. Put this link in your social media bios, email signatures, and anywhere you need one link to rule them all. Unlike Linktree, you own the page and pay nothing.

## When to Use

- User wants a link-in-bio page for social media profiles
- User wants a single page linking all their affiliate content
- User says anything like "linktree", "bio link", "link page", "link in bio", "all my links"
- User has multiple affiliate products/blog posts/landing pages and needs a hub
- User wants a free alternative to Linktree/Beacons/Stan Store

## Input Schema

```yaml
user_name: string           # REQUIRED — display name or handle (e.g., "@alexcreator")

tagline: string             # OPTIONAL — short bio under the name
                            # Default: auto-generated from link categories

avatar_url: string          # OPTIONAL — URL to profile image
                            # Default: emoji placeholder based on niche

links:                      # REQUIRED — at least 3 links
  - label: string           # Display text (e.g., "HeyGen — AI Video Creator")
    url: string             # Destination URL
    category: string        # Group label (e.g., "Tools", "My Content", "Connect")
    icon: string            # OPTIONAL — emoji for visual (e.g., "🎬")

theme: string               # OPTIONAL — "minimal" | "dark" | "gradient"
                            # Default: "minimal"
```

**Chaining context**: If earlier skills (S1-S4) were run in the conversation:
- Products from S1 → add as "Featured Tools" links
- Blog posts from S3 → add as "My Content" links
- Landing pages from S4 → add as "Featured Tools" or "Landing Pages" links
- Social posts from S2 → link to the social platform profiles

If the user says "make me a bio link with everything we've done" — gather all products, blog posts, and landing pages from the conversation and organize them into categories.

## Workflow

### Step 1: Gather Links

Collect links from one of these sources:

**Option A — User provides links directly:**
Use the `links` array as-is. Ensure each link has a label, url, and category.

**Option B — Gather from conversation context:**
If prior skills (S1-S4) were run, collect:
- Product affiliate URLs → category: "Featured Tools"
- Blog post URLs → category: "My Content"
- Landing page URLs → category: "Landing Pages"
- Social media profiles (if mentioned) → category: "Connect"

**Option C — User provides partial info:**
Ask for missing required fields. Minimum: user_name + 3 links.

Organize links by category. Suggested category order:
1. "Featured Tools" (affiliate product links — money links first)
2. "My Content" (blog posts, landing pages, videos)
3. "Connect" (social media, email, website)

### Step 2: Build Page

Read `templates/bio-link.html` for the page structure and all three theme variants.

Apply the chosen `theme`:

**Minimal (default):**
- Clean white background, subtle borders
- Dark text, light gray accents
- Rounded corners (12px)
- Best for: professional, clean look

**Dark:**
- Dark navy background (#0f172a)
- Light text, blue accents
- Subtle card borders
- Best for: tech, gaming, modern brands

**Gradient:**
- Purple-to-blue gradient background
- White text, frosted-glass link cards
- Large rounded corners (24px)
- Best for: creative, lifestyle, bold brands

Set CSS variables in `:root` based on the chosen theme. Remove the other theme blocks from the template.

If `avatar_url` is provided, use an `<img>` tag. Otherwise, use the emoji placeholder div with an emoji matching the user's niche (default: 🚀).

### Step 3: Output

Present the final output in this structure:

**Part 1: Page Summary**
```
---
BIO LINK PAGE
---
Name: [user_name]
Theme: [minimal/dark/gradient]
Links: [count]
Categories: [list]
---
```

**Part 2: Complete HTML**
The full HTML file in a fenced code block (```html). Save as `index.html` (or `links.html`) and open in any browser.

**Part 3: Deploy Instructions**
Read `references/domain-setup.md` and provide the deploy options:
```
---
DEPLOY
---
1. Save as `index.html`
2. Preview: open the file in your browser
3. Deploy (pick one):
   - Netlify Drop: drag the file to https://app.netlify.com/drop (30 seconds)
   - Vercel: `npx vercel deploy --prod` (needs Node.js)
   - GitHub Pages: push to repo → Settings → Pages → main branch
4. Add to your social bios: paste the URL in your Instagram, X, TikTok, LinkedIn bio
5. Custom domain: see references/domain-setup.md for DNS setup guide
---
```

## Output Schema

```yaml
bio_link:
  user_name: string         # Display name
  theme: string             # Applied theme
  html: string              # Complete self-contained HTML
  filename: string          # Suggested filename (e.g., "index.html")
  link_count: number        # Total links on the page
  categories: string[]      # Categories used

deploy:
  local: string             # "Open index.html in browser"
  netlify: string           # Netlify Drop instructions
  vercel: string            # Vercel deploy command
  github_pages: string      # GitHub Pages instructions
```

## Output Format

Present the output as three clearly separated sections:
1. **Page Summary** — name, theme, link count, categories
2. **HTML** — the complete file in a code block, ready to save
3. **Deploy Instructions** — how to get the page live and add to social bios

The HTML should be **immediately usable** — save as `.html`, open in browser, and it works. No build step, no dependencies, mobile-optimized.

## Error Handling

- **No links provided**: "I need at least 3 links to create your bio page. List your affiliate product URLs, blog posts, social profiles, or landing pages."
- **No user_name**: "What name or handle should I display? (e.g., @yourusername)"
- **Invalid avatar_url**: Use emoji placeholder instead. Note: "I couldn't load the avatar image, so I used an emoji placeholder. You can replace it later by editing the HTML."
- **Unknown theme**: Default to minimal. Inform: "I used the 'minimal' theme. Available themes: minimal, dark, gradient."
- **Too many links (20+)**: Include all but suggest: "That's a lot of links — consider featuring your top 10-15 and linking to a full directory page for the rest."
- **No categories provided**: Auto-categorize based on URL patterns (social domains → "Connect", blog URLs → "My Content", product URLs → "Tools").

## Examples

### Example 1: Full Input
**User**: "Create a dark-themed bio link page for @sarahcontent with these links: HeyGen (heygen.com/ref), Semrush (semrush.com/ref), My HeyGen Review (blog.com/heygen), Follow on X (x.com/sarah)"
**Action**: theme=dark, organize into 3 categories (Tools, Content, Connect), generate HTML.

### Example 2: From Conversation Context
**User**: "Make me a bio link page with everything we've done today"
**Context**: S1 found HeyGen, S3 wrote a blog post, S4 made a landing page
**Action**: Gather all URLs from conversation, auto-categorize, default theme=minimal, generate HTML.

### Example 3: Minimal Input
**User**: "I need a link in bio page"
**Action**: Ask for user_name and links. Provide example: "What's your display name and what links do you want? For example: product URLs, blog posts, social profiles."

## References

- `templates/bio-link.html` — Bio link page template with 3 theme variants (minimal, dark, gradient). Read in Step 2.
- `references/domain-setup.md` — Hosting and domain setup guide for Netlify Drop, Vercel, GitHub Pages. Read in Step 3.
- `shared/references/ftc-compliance.md` — FTC disclosure for bio link pages (footer text). Reference in Step 2.
- `shared/references/affitor-branding.md` — Affitor footer HTML. Reference in Step 2.