Adds an "AI Summary Request" footer component with clickable AI platform icons (ChatGPT, Claude, Gemini, Grok, Perplexity) that pre-populate prompts for users to get AI summaries of the website. Optionally creates an llms.txt file for enhanced AI discoverability. Use when users want to add AI platform integration buttons or make their website AI-friendly.
Adds an "AI Summary Request" footer component with clickable AI platform icons (ChatGPT, Claude, Gemini, Grok, Perplexity) that pre-populate prompts for users to get AI summaries of the website. Optionally creates an llms.txt file for enhanced AI discoverability. Use when users want to add AI platform integration buttons or make their website AI-friendly.
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:
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
HTML files - meta tags or <base> tags in index files
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)
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
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/)
Reference in component: Use relative paths to the copied SVG files in the footer component
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:
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:
