AI Summary Request

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:

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/)
2. Reference in component: Use relative paths to the copied SVG files in the footer component
3. Do NOT substitute: These are the only approved icons - do not use CDN links, icon libraries, or recreate from descriptions

Icon Validation

Before finalizing, visually confirm:

• ChatGPT icon is NOT a speech bubble or generic chat icon
• Claude icon is NOT a simple backslash or text character
• Gemini icon is NOT a constellation or zodiac twins symbol
• Grok icon is NOT the X/Twitter bird or logo
• Perplexity icon is NOT a question mark or generic markdown symbol

AI Platform Links

Generate URL-encoded links to each AI platform with pre-composed prompt:

1. ChatGPT: https://chat.openai.com/?q=[ENCODED_PROMPT]
2. Claude: https://claude.ai/new?q=[ENCODED_PROMPT]
3. Gemini: https://gemini.google.com/?q=[ENCODED_PROMPT]
4. Grok: https://grok.com?q=[ENCODED_PROMPT]
5. Perplexity: https://www.perplexity.ai/?q=[ENCODED_PROMPT]

Prompt Templates (Select based on llms.txt decision)

Use the appropriate template based on the user's llms.txt decision from the prerequisite step.

Template variables:

• ${WEBSITE_URL} - The confirmed/normalized domain from prerequisite step
• ${COMPANY_NAME} - The company/site name (ask user if not obvious from codebase)
• ${KEY_ASPECTS} - Customize based on the business type (e.g., "features, pricing, deliverables" for services; "products, shipping, returns" for e-commerce)

WITH llms.txt (if user chose to generate llms.txt)

Please read the structured information at ${WEBSITE_URL}/llms.txt to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

WITHOUT llms.txt (if user chose not to generate llms.txt)

Please visit and analyze ${WEBSITE_URL} to understand ${COMPANY_NAME}.

As a potential client, I want to concretely understand what I will receive with ${COMPANY_NAME} (${WEBSITE_URL}).

Detail step by step what the service includes: ${KEY_ASPECTS}.

Explain it simply, as if you were describing the real experience of the service.

Implementation Checklist

• Detect or ask for website domain and get user confirmation
• Ask user whether to generate llms.txt file
• If llms.txt chosen: Generate and place llms.txt at website root
• Copy all 5 SVG icons from resources/ to project assets directory
• Select correct prompt template based on llms.txt decision
• Place component in footer, above copyright notice
• URL-encode prompt using encodeURIComponent() or equivalent
• Each link opens in new tab: target="_blank" rel="noopener noreferrer"
• Add aria-label: "Get AI summary from [Platform Name]"
• Test all 5 platform links verify prompt pre-population works
• Verify icons are using the bundled SVGs (NOT generic alternatives)
• Apply brightness(0) filter for consistent monochrome appearance
• Ensure 44x44px minimum touch target for mobile accessibility
• Responsive: icons wrap on screens < 640px width

Technical Notes

• The llms.txt file follows the emerging standard for AI-readable site documentation
• The footer component should be framework-agnostic but can be adapted for React, Vue, Svelte, or vanilla HTML/CSS
• All URLs must be properly encoded to handle special characters in the prompt
• The component should be accessible and follow WCAG 2.1 guidelines

Bundled Resources

resources/

Contains the official SVG icons for each AI platform:

• chatgpt.svg - OpenAI ChatGPT hexagonal aperture icon
• claude.svg - Anthropic Claude geometric pattern icon
• gemini.svg - Google Gemini four-pointed star icon
• grok.svg - xAI Grok crystalline pattern icon
• perplexity.svg - Perplexity hexagonal cube icon

These icons MUST be copied to the user's project and used directly. Do not substitute with alternatives.

Success Criteria

A successful implementation should:

1. Confirm the website domain with the user before proceeding
2. Ask the user whether to include llms.txt generation
3. If llms.txt chosen: Produce a curated, well-structured llms.txt file under 100KB
4. Create a visually consistent footer component with correct branding
5. Use the appropriate prompt template based on the user's llms.txt decision
6. Generate working links that pre-populate prompts in each AI platform
7. Be accessible on both desktop and mobile devices
8. Use the bundled SVG icons from resources/ (no substitutes)