bio-link-deployer

What this skill does

# 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, use these Output Schema fields:
- S1 `recommended_program.url` + `.name` → add as "Featured Tools" links
- S2 `posts[].platform` → link to the user's social platform profiles
- S3 `products_featured[].url` + `.name` → add as "My Content" links (blog posts)
- S4 `landing_page.filename` or deployed URL → add as "Landing Pages" links
- S4 `products_featured[].url` + `.name` → add as product links if not already included

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
---
```

### Step 4: Self-Validation

Before presenting output, verify:

- [ ] All links are functional URLs (not placeholder)
- [ ] Mobile-first layout renders correctly at 375px width
- [ ] Theme CSS custom properties applied consistently
- [ ] FTC disclosure present if any affiliate links included
- [ ] "Built with Affiliate Skills by Affitor" footer present
- [ ] Money links (affiliate) ordered before social/content links

If any check fails, fix the output before delivering. Do not flag the checklist to the user — just ensure the output passes.

## Output Schema

```yaml
output_schema_version: "1.0.0"  # Semver — bump major on breaking changes
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"
**