web-content
Opinionated project initialization for Claude Code. Security-first, spec-driven, AI-native.
npx skills add https://github.com/alinaqi/claude-bootstrap --skill web-contentSKILL.md
Web Content Skill
Load with: base.md + ui-web.md
For creating web content optimized for both traditional SEO and AI discovery (ChatGPT, Perplexity, Claude, Gemini).
Sources: GEO Complete Guide | AI Search SEO | LLM Optimization | Generative Engine Optimization
Philosophy
SEO gets clicks. GEO gets citations.
Traditional SEO optimizes for Google rankings. Generative Engine Optimization (GEO) optimizes for being cited by AI assistants. Modern content needs both:
- SEO: Rank on search results pages
- GEO: Be cited in AI-generated answers (ChatGPT, Perplexity, Claude, Gemini)
AI traffic grew 1,200% between July 2024 and February 2025. Google's search share dropped below 90% for the first time in a decade. Optimize for both.
Content Structure for AI + SEO
The Golden Rule
Write for humans, structure for machines.
AI systems prefer:
- Short, clear, fact-based content
- Clean formatting (headers, bullets, tables)
- Standalone sections that can be quoted
- Direct answers to questions
Page Types & Templates
Homepage
## Homepage Structure
### Above the Fold
- **Headline**: Clear value proposition (what you do + for whom)
- **Subheadline**: How you deliver that value
- **Primary CTA**: One clear action
- **Trust signals**: Logos, testimonials, stats
### Content Sections
1. **Problem Statement**: Pain point you solve
2. **Solution Overview**: How you solve it (3-4 key features)
3. **Social Proof**: Testimonials, case studies, logos
4. **How It Works**: 3-step process (simple)
5. **Pricing Preview**: Or link to pricing page
6. **FAQ Section**: 5-7 common questions (GEO gold)
7. **Final CTA**: Repeat primary action
### Schema Required
- Organization schema (name, logo, founding date, social links)
- WebSite schema with SearchAction
- FAQ schema for questions section
Product/Service Page
## Product Page Structure
### Hero Section
- **Product Name**: Clear, descriptive
- **One-line Description**: What it does in 10 words or less
- **Key Benefit**: Primary value proposition
- **CTA**: Buy/Try/Demo
### Content Sections
1. **TL;DR Box**: 3-5 bullet summary (AI-quotable)
2. **Problem → Solution**: What problem, how solved
3. **Features Grid**: 4-6 features with icons
4. **Comparison Table**: vs. alternatives (GEO loves these)
5. **Use Cases**: Who uses it and how
6. **Testimonials**: Real names, photos, companies
7. **Pricing**: Clear tiers if applicable
8. **FAQ**: Product-specific questions
### Schema Required
- Product schema (name, description, price, availability)
- Review schema (aggregate rating)
- FAQ schema
- BreadcrumbList schema
Blog Post / Article
## Blog Post Structure
### Opening (First 100 words)
- **TL;DR**: Direct answer to the title's question
- **What you'll learn**: Bullet list of takeaways
- This section should be quotable standalone
### Body Structure
- **H2 sections**: Main topics (5-7 per article)
- **H3 subsections**: Supporting points
- **Bullet lists**: For scanability
- **Stat boxes**: Highlight key numbers
- **Comparison tables**: When comparing options
### Content Elements
- Definition boxes ("What is X?")
- Step-by-step instructions
- Code examples (if technical)
- Original statistics/research
- Expert quotes with attribution
### Closing
- **Summary**: Key takeaways (bulleted)
- **Next steps**: What reader should do
- **Related content**: Internal links
### Metadata Required
- Author name + bio + photo
- Publication date
- Last updated date (visible!)
- Reading time
- Article schema with author
FAQ Page
## FAQ Page Structure
### Organization
- Group questions by category
- Most common questions first
- Direct, concise answers
- Link to detailed pages for more info
### Question Format
Q: [Exact question users ask]
A: [Direct answer in first sentence, then elaboration]
### Schema Required
- FAQPage schema (critical for AI discovery)
- Each Q&A as Question/Answer schema
Landing Page
## Landing Page Structure
### Single Focus
- One offer
- One audience
- One CTA (repeated)
### Sections
1. **Headline**: Benefit-focused, specific
2. **Problem Agitation**: Pain points
3. **Solution**: Your offer
4. **Proof**: Testimonials, stats, logos
5. **Features**: 3-5 key benefits
6. **Objection Handling**: FAQ or guarantee
7. **CTA**: Clear, urgent
### No Navigation
- Remove header nav (reduce exits)
- Single path: read → convert
AI-Optimized Content Formats
TL;DR Boxes
<div class="tldr-box">
<h3>TL;DR</h3>
<ul>
<li>Key point 1 with specific detail</li>
<li>Key point 2 with number/stat</li>
<li>Key point 3 with actionable insight</li>
</ul>
</div>
Place at top of articles. AI
...