name	Web Content Summarizer
description	Fetch and summarize web content for any research task - documentation, design inspiration, competitor analysis, tutorials, API docs. Use when you need to understand web pages, extract key information, research patterns, or gather context for development work.

Web Content Summarizer

What This Skill Does

Fetches web content and generates focused summaries using Claude. Adapted from Anthropic's web summarization cookbook.

Use Cases:

Documentation Research - Summarize framework docs, API references, tutorials
Design Inspiration - Analyze competitor sites, design patterns, UI examples
Technical Research - Extract key info from blog posts, Stack Overflow, GitHub
Content Gathering - Pull relevant info for site content, copy, features

Quick Start

Summarize Any Page

WebFetch("https://example.com/page", "Summarize the main points and key takeaways")

Search Then Summarize

WebSearch("Astro 5.0 new features 2025")
// Then WebFetch the most relevant result

Research Patterns

Pattern 1: Documentation Lookup

When: Learning a framework feature, checking API syntax, understanding a library

1. WebSearch for "[framework] [feature] documentation"
2. WebFetch the official docs page
3. Ask: "Extract the key syntax, examples, and gotchas"

Example:

WebFetch("https://docs.astro.build/en/guides/content-collections/",
         "Summarize how to set up and use content collections in Astro 5.x")

Pattern 2: Design Research

When: Looking for UI patterns, design inspiration, competitor analysis

1. WebSearch for "[type of site] design examples" or visit competitor
2. WebFetch the page
3. Ask: "Describe the layout, color scheme, typography, and notable UI patterns"

Example:

WebFetch("https://competitor-site.com",
         "Analyze the design: layout structure, colors, fonts, navigation, calls-to-action")

Pattern 3: Technical Problem Solving

When: Debugging, finding solutions, understanding error messages

1. WebSearch for "[error message]" or "[problem] [framework] solution"
2. WebFetch Stack Overflow or blog posts
3. Ask: "What's the solution and why does it work?"

Example:

WebSearch("Tailwind CSS 4.0 @theme not working")
// WebFetch the most relevant result

Pattern 4: Content Research

When: Gathering information for site content, blog posts, product descriptions

1. WebSearch for "[topic] guide" or "[topic] overview"
2. WebFetch multiple authoritative sources
3. Ask: "Extract key facts, statistics, and talking points"

Tool Reference

WebFetch

Fetches a URL and processes content with a prompt.

WebFetch(url, prompt)

Parameters:

url: Full URL to fetch (required)
prompt: What to extract/summarize (required)

Prompt Tips:

Be specific: "Extract the installation steps" vs "Summarize"
Request format: "List as bullet points" or "Format as a table"
Focus: "Focus on [specific aspect]" or "Ignore [irrelevant parts]"

Examples:

// Documentation
WebFetch("https://tailwindcss.com/docs/installation",
         "List the installation steps for Tailwind CSS with Astro")

// Design analysis
WebFetch("https://dribbble.com/shots/example",
         "Describe the color palette, typography, and layout approach")

// Technical article
WebFetch("https://blog.example.com/post",
         "Summarize the main argument and code examples")

WebSearch

Searches the web and returns results.

WebSearch(query)

Query Tips:

Add year for current info: "React 19 features 2025"
Add "docs" or "tutorial" for learning: "Astro SSR tutorial"
Add "vs" for comparisons: "Tailwind vs CSS modules"
Quote exact phrases: "exact error message"

Examples:

WebSearch("Astro 5.0 content collections tutorial")
WebSearch("Tailwind CSS 4.0 breaking changes")
WebSearch("outdoor store website design inspiration")

Output Formats

Quick Summary

WebFetch(url, "Summarize in 3-5 bullet points")

Detailed Breakdown

WebFetch(url, "Break down into sections: Overview, Key Points, Examples, Gotchas")

Comparison Table

WebFetch(url, "Extract features and format as a comparison table")

Action Items

WebFetch(url, "What are the actionable steps or recommendations?")

Code Extraction

WebFetch(url, "Extract all code examples with brief explanations")

WVWO-Specific Research

When researching for WVWO specifically, maintain the project voice:

Design Research

Look for: Rural, authentic, handmade aesthetics
Avoid: SaaS, startup, corporate patterns
Ask: "Does this feel like Kim's shop or a tech company?"

Content Research

Write summaries in conversational tone
Avoid marketing speak
Focus on practical, helpful information

Technical Research

Prioritize: Astro, Tailwind CSS, vanilla JS solutions
Avoid: React, Vue, complex frameworks
Keep it simple and maintainable

Common Research Tasks

Task: Learn a New Astro Feature

1. WebSearch("Astro [feature] guide 2025")
2. WebFetch official docs
3. WebFetch a tutorial for examples
4. Summarize: Syntax, use cases, gotchas

Task: Find Design Inspiration

1. WebSearch("[type] website design inspiration")
2. WebFetch 2-3 examples
3. Summarize: What works, what to adapt for WVWO

Task: Debug an Issue

1. WebSearch("[exact error message]")
2. WebFetch Stack Overflow or GitHub issue
3. Extract: Root cause, solution, verification steps

Task: Research a Library

1. WebFetch the library's homepage/README
2. WebFetch the documentation
3. Summarize: What it does, how to install, basic usage, alternatives

Troubleshooting

Issue: Page Won't Load

Cause: Site blocks automated access Solution: Try WebSearch instead, or manually copy relevant content

Issue: Content Seems Outdated

Cause: Cached or old page Solution: Add current year to search, verify publish date on source

Issue: Too Much Content

Cause: Page is very long Solution: Use more specific prompt: "Focus only on [section]"

Issue: Paywall or Login Required

Cause: Restricted content Solution: Search for alternative sources, or use publicly available portions

Integration with Project Workflow

This skill integrates with other WVWO tools:

Research → Use this skill to gather context
Implement → Apply findings to Astro components
Learn → Store successful patterns with AgentDB
Verify → Check work against aesthetics guidelines

Skill Version: 1.1.0 Based On: Anthropic's Web Summarization Cookbook Scope: Project-wide research and content gathering

name	Web Content Summarizer
description	Fetch and summarize web content for any research task - documentation, design inspiration, competitor analysis, tutorials, API docs. Use when you need to understand web pages, extract key information, research patterns, or gather context for development work.