ai-summary-request

What this skill does

# AI Summary Request

## Overview

This skill creates a footer component with AI platform icons that allow visitors to request AI summaries of a website. The workflow begins by detecting and confirming the website domain, then asks whether to optionally generate an `llms.txt` file for enhanced AI discoverability.

## When to Use This Skill

Use this skill when:
- User wants to add AI platform integration buttons to their site
- User wants visitors to easily get AI summaries of their business
- User mentions "AI summary" or AI platform buttons
- User wants to create an `llms.txt` file for their website (optional)
- User asks about making their website AI-discoverable

## Workflow

### PREREQUISITE: Domain Detection and Confirmation

Before proceeding with any steps, you MUST determine the website domain:

#### Step 1: Attempt automatic detection

Search for domain information in this priority order:

1. **Environment files** (`.env`, `.env.local`, `.env.production`) - look for `SITE_URL`, `BASE_URL`, `NEXT_PUBLIC_URL`, `NUXT_PUBLIC_SITE_URL`, `VITE_SITE_URL`, or similar
2. **Deployment configs** (`vercel.json`, `netlify.toml`, `firebase.json`, `fly.toml`) - check for domain/alias settings
3. **CNAME files** in `public/` or root directory
4. **Configuration files** (`package.json` homepage field, `next.config.js`, `nuxt.config.js`, `vite.config.js`)
5. **HTML files** - meta tags or `<base>` tags in index files
6. **README or documentation** mentioning the live site URL

#### Step 2: Confirm or request domain

**If a domain is detected**, ask the user to confirm or provide an alternative:
> "I detected that this site appears to use the domain **[DETECTED_DOMAIN]**. Is this correct? If not, please provide the correct domain."

**If no domain can be detected**, ask the user directly:
> "I couldn't automatically detect the domain for this website. What domain should be used for the AI summary links? (e.g., https://example.com)"

#### Step 3: Normalize and store the domain

- If the user provides a domain without a protocol, prepend `https://`
- Remove any trailing slashes
- Store the normalized domain as `${WEBSITE_URL}` for use in subsequent steps

**Example normalizations:**
- `example.com` → `https://example.com`
- `https://example.com/` → `https://example.com`
- `http://example.com` → keep as-is (user may have specific requirements)

---

### PREREQUISITE: llms.txt Decision

After confirming the domain, ask the user:

> "Would you like me to also generate an `llms.txt` file for this website? This file helps AI models better understand your site's content and structure, which can improve the quality of AI-generated summaries.
>
> - **Yes**: I'll create a curated llms.txt file and the footer component will reference it
> - **No**: I'll create just the footer component, and the AI prompt will direct users to explore the website directly"

Store the user's choice as `${INCLUDE_LLMS_TXT}` (true/false).

---

## STEP 1: Generate llms.txt File (OPTIONAL - Only if user chose "Yes")

**Skip this step entirely if the user chose not to generate an llms.txt file.**

Generate a high-quality `llms.txt` file for a given website that helps language models quickly understand and reference the site's most valuable content.

### Analyze the Website's Content Hierarchy

- Inspect any available XML or HTML sitemaps (product, page, post) and explore navigation menus to identify major product categories, services, key informational pages, and blog or news posts
- Focus on top-level categories and representative subcategories or key products, rather than listing every single URL
- Identify important support or policy pages (e.g., About, Contact, Terms, Privacy, Shipping & Returns)

### Select and Curate Content

- For each major category, select a primary landing page and a few representative subcategories or high-value product pages
- Include links to authoritative guides, how-to articles, calculators, training programs or other resources
- Choose a handful of blog posts or case studies that showcase different topics (tutorials, industry insights, success stories). Avoid listing dozens of posts
- Exclude low-value pages such as checkout flows, login pages, or marketing fluff

### Draft Clear Descriptions

- Use concise, factual descriptions (10-15 words) that explain what each page covers
- Avoid hype or redundant repetition of the page title
- When summarizing subcategories, group them in parentheses for brevity

### Build the llms.txt in Markdown

- Start with an H1 title containing the website or company name and a short descriptor
- Add a blockquote (prefaced by >) that succinctly describes what the business does and who it serves
- Optionally include a sentence explaining that the list is curated for AI consumption
- Organize content with H2 headings such as:
  - ## Product categories (or Services if it's a service business)
  - ## Representative pages or ## Popular products
  - ## Guides & resources
  - ## Articles & case studies
  - ## Policies & support
- List each link as a bullet (`- [Title](URL): description`) under the appropriate section
- Keep the file in UTF-8 encoding and ensure it stays well under 100 KB by curating rather than exhaustively listing every URL
- Add an optional "Usage guidelines" section stating how you'd like AI models to attribute or use the content, and include an HTML comment like `<!-- Last updated: YYYY-MM-DD -->` for version tracking

### Validate and Publish

- Verify that all URLs return HTTP 200 and are publicly accessible
- Check the Markdown structure (one H1, proper headings and bullets)
- Place the final `llms.txt` at the website's root and, if possible, add a line in `robots.txt` (`Llmstxt: /llms.txt`) to aid discovery
- Plan regular updates (e.g., quarterly) to reflect changes in products, services or content

### Deliverable

Provide the full `llms.txt` file content, formatted as described above, in the served web root of the current website.

---

## STEP 2: Create AI Summary Request Footer Component

Create an "AI Summary Request" footer component with the following specifications.

### Component Structure

- Centered section containing a header and icon row
- Header text: "Request an AI summary of [COMPANY_NAME]"
- Row of 5 clickable AI platform icons in this exact order: ChatGPT, Claude, Gemini, Grok, Perplexity

### Visual Styling

- Container: flex column, centered alignment, 16px vertical gap
- Header: centered text, base font size (16px), medium font-weight, semantic gray color (#111827 or equivalent)
- Icon container: flex row, centered, 12px horizontal gap, wrap-enabled
- Each icon link: 40x40px clickable area with 28x28px visible icon, rounded-full background
- Icons: Apply CSS filter: `brightness(0)` for monochrome black effect
- Padding within circle: 6px (1.5rem equivalent)
- Hover effect: transform scale(1.1) with cubic-bezier(0.4, 0, 0.2, 1) transition, 150ms duration

### Icon Assets

**CRITICAL**: This skill includes bundled SVG icon files in the `resources/` directory. You MUST use these exact icons - do NOT use generic icon libraries, search for alternatives, or create substitutes.

#### Bundled Icons (Required)

Copy these SVG files from `resources/` to the user's project assets directory:

| Platform | File | Description |
|----------|------|-------------|
| ChatGPT | `resources/chatgpt.svg` | Hexagonal flower/aperture pattern with interlocking curved segments |
| Claude | `resources/claude.svg` | Abstract geometric pattern (NOT the Anthropic backslash logo) |
| Gemini | `resources/gemini.svg` | Four-pointed star/sparkle icon |
| Grok | `resources/grok.svg` | Angular crystalline/triangular pattern (NOT the X/Twitter logo) |
| Perplexity | `resources/perplexity.svg` | Hexagonal pattern with isometric cube perspective |

#### Implementation Steps

1. **Copy icons to project**: Copy all 5 SVG files from this skill's `resources/` directory to the user's project (e.g., `/public/icons/ai/` or `/assets/icons/