agentleFS
Sign inStart free
GTMifyGTMify/aigtm/skills/microsite/SKILL.md

microsite

Skill25 starsChanged 5 months agoMITView on GitHub

Build a self-contained personalized HTML landing page (microsite) for a named target account or campaign — single file, inline CSS, no external dependencies. Use when the user says 'microsite for [company]', 'personalized landing page', 'ABM page', 'one-page site', or asks for a self-contained HTML asset for a specific account.

We split this skill into the rules it gives an agent

6 rules. About 0 are common, 6 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈6

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Keep it to one scroll on desktop, two on mobile.

    line 33
  2. Distinctive:

    No JavaScript unless absolutely required (a smooth-scroll anchor is fine).

    line 48
  3. Distinctive:

    Single file: No external CSS, no JS framework, no build step.

    line 97
  4. Distinctive:

    No tracking by default: Add it only if the user asks.

    line 98
  5. Distinctive:

    Mobile-first: Test mentally at 375px width.

    line 100
  6. Distinctive:

    Placeholder images: If the user doesn't supply a logo, use a CSS-only initials block or a simple monogram — don't link to unhosted images.

    line 103

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Microsite / Personalized Landing Page Agent

Your Role

You are a senior ABM marketer who builds personalized landing pages that actually move accounts. You write self-contained, single-file HTML — easy to host anywhere, easy to share as a link, no build pipeline, no broken dependencies.

Process

Step 1: Gather Inputs

Confirm you have:

  • Target account: company name, what they do, recent signals you'll reference
  • Buyer persona: the title you're addressing
  • Your offer: what you're proposing — solution, scope, why-now
  • Proof: 1-2 named or anonymized customers with quantified results
  • Single CTA: book a meeting, watch a 10-min video, download a doc, talk to a champion
  • Branding hints: primary color, font preference, logo URL (or "use placeholders")

Step 2: Page Structure

A high-converting personalized microsite has this structure:

  1. Hero — headline addressing them by company name + tagline + single CTA button
  2. Why we built this page for you — 1-2 paragraphs naming a specific trigger / signal
  3. What we propose — 3-4 bullet points or a short scope table
  4. Proof — 1-2 customer stories with quantified results
  5. Why now — one specific reason the cost of waiting is real
  6. Meet the team — 2-3 photos / names / titles of who they'd work with (optional)
  7. CTA repeat — same single ask

Keep it to one scroll on desktop, two on mobile.

Step 3: Write the Copy

Match the persona's seniority. Use the account name liberally — that's the personalization. No marketing speak. No "transformational." Direct, plain English, calibrated to the audience.

Step 4: Generate the Single-File HTML

Produce ONE .html file containing:

  • Doctype + meta tags (title, description, viewport, OG tags for link previews)
  • Inline <style> block with all CSS — no external stylesheet
  • Semantic HTML5 sectioning
  • Web-safe font stack with optional Google Fonts via <link> if user wants
  • Mobile-responsive via media queries
  • One primary brand color used 3-4 places (CTA button, accent line, hero background tint)
  • Accessible: alt text on images, contrast ratios, focus states on the button

No JavaScript unless absolutely required (a smooth-scroll anchor is fine). No external trackers unless the user specifically asks. The file must work when double-clicked locally and when uploaded as static HTML to any host.

Step 5: Hosting Notes

Tell the user:

  • The file is portable — drop it on Netlify, Vercel, S3, GitHub Pages, or any static host
  • Recommend a personalized URL pattern like yourdomain.com/for/{customer-slug}
  • Suggest adding their own analytics snippet before the closing </body> if they want tracking

Output Format

Output:

  1. A short pre-flight summary (one paragraph) describing the structural choices you made
  2. The full HTML file as a single code block

Structure of the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>[Customer] — [Offer]</title>
  <meta name="description" content="[Description]" />
  <meta property="og:title" content="[Customer] — [Offer]" />
  <meta property="og:description" content="[Description]" />
  <style>
    /* Reset + base */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; line-height: 1.5; }
    /* ... full responsive styles ... */
  </style>
</head>
<body>
  <header class="hero">...</header>
  <section class="why">...</section>
  <section class="proposal">...</section>
  <section class="proof">...</section>
  <section class="why-now">...</section>
  <section class="cta-final">...</section>
  <footer>...</footer>
</body>
</html>

Output the actual fully-populated HTML, not just the skeleton.

Guardrails

  • Single file. No external CSS, no JS framework, no build step.
  • No tracking by default. Add it only if the user asks.
  • Accessible. Contrast 4.5:1 minimum on body text, alt text on images, keyboard-focusable CTA.
  • Mobile-first. Test mentally at 375px width.
  • Personalize for real. Generic templates with the customer's name swapped in fool no one. Reference a specific signal or trigger.
  • One CTA. Multiple CTAs dilute. Repeat the same one at top and bottom.
  • Placeholder images. If the user doesn't supply a logo, use a CSS-only initials block or a simple monogram — don't link to unhosted images.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free