🧩 What it is / what it does
Research-driven competitive intelligence engine for websites — scraping, analysis, reporting, and development across 6 connected phases, all based on real market data.
O website-intelligence is a senior web strategy skill that works in 6 sequential phases: client brand extraction → competitive niche analysis → HTML report, PDF-ready → build brief → website construction → quality audit. Everything is saved to deliverable files at each phase.
mcp__firecrawl__scrape — single pagemcp__firecrawl__map — complete domain architecturemcp__firecrawl__search — competitor discovery@media print)#c45d3e🎣 When it triggers
The exact triggers that make Claude Code activate website-intelligence — keywords, contexts, and request intentions.
Claude Code reads the skill description and triggers it when it detects any of the terms listed below in the user's request. You don't need to say the skill's name.
- ✓"website intelligence"
- ✓"build a site" / "build a website"
- ✓"redesign" / "website for [business]"
- ✓"scrape and rebuild"
- ✓"competitive analysis"
- ✓"niche research" / "website audit"
- ✗"create a simple landing page"
- ✗"make a React component"
- ✗"generate a system diagram"
- ✗"create a 3D animation"
- ✗"make an email marketing campaign"
- ✗tasks without real business context
🚀 How it improves your results
Concrete value website-intelligence delivers compared with the traditional approach of building a website without market research.
Sites built on real competitive research have informed positioning: you know what competitors do well, where the SEO gaps are, which patterns the top 10% share—and you build above that bar, not alongside it.
- ✓PDF report with competitor scoring (8 criteria)
- ✓Color palette and typography justified by data
- ✓SEO opportunities and keyword gaps identified
- ✓Site with Apple/Stripe-quality scroll animations
- ✓Placeholder marked for 3D asset (
<!-- 3D SCROLL ASSET HERE -->)
- ✗Beautiful site with no market differentiation
- ✗Colors and typography based on taste, not positioning
- ✗Generic SEO, without competitive gap insights
- ✗Decorative animations without a conversion hierarchy
- ✗No deliverable to present to the client
The generated site should achieve LCP < 2.5s, TBT < 200ms, CLS < 0.1. No render-blocking JavaScript. Images with lazy loading and explicit dimensions.
⚙️ How it works under the hood
Actual stack, MCP tools, phase-based approach, and implementation decisions from SKILL.md.
Before starting any phase, the skill checks whether the Firecrawl MCP is connected. If it isn't, it provides setup instructions (claude mcp add firecrawl). Without Firecrawl, phases 1 and 2 are blocked.
mcp__firecrawl__map — discovers all URLs on the client's domain
mcp__firecrawl__scrape — scrapes the main pages (home, about, services)
Saves research/01-client-brand.md with: colors, typography, voice, value proposition, nav structure
mcp__firecrawl__search — finds the top 5 competitors in the niche
mcp__firecrawl__scrape — deep scraping of each competitor
Scoring across 8 criteria: design, UX, SEO, performance, copy, CTA, social proof, mobile
Saves research/02-competitor-analysis.md
Static HTML without JavaScript — pure HTML + CSS with @media print
Design: warm paper #f6f4f0, terracotta #c45d3e, grain overlay via SVG filter
Cards with 4px accent borders, phases with dashed SVG connectors
Saves competitive-analysis.html in the project root
Define: Design Direction · Site Architecture · Content Framework · Conversion Playbook
Mandatory HARD STOP — does not proceed to phase 5 without the user’s explicit approval
Saves research/03-build-brief.md
Scroll-triggered animations at every section transition + parallax depth
Hero with marked placeholder: <!-- 3D SCROLL ASSET HERE --> with exact dimensions
Premium microinteractions: buttons, cards, nav
Structure: site/ with index.html, css/, js/, assets/
SEO audit: meta tags, schema markup, heading hierarchy, sitemaps
Accessibility audit: contrast, alt text, ARIA labels, keyboard navigation
Performance audit: LCP, TBT, CLS, render-blocking JS, lazy loading
Saves research/04-quality-audit.md
💬 Practical example + Ready-to-use prompt
Real prompt to paste into Claude Code and activate the skill immediately — along with what to expect at each stage.
Replace the URL and niche. The skill detects "competitive analysis" and "build a site" and starts automatically. You’ll receive deliverables at each phase before approving the next one.
competitive-analysis.html — open it in the browser and print it as a PDF.
site/index.html + final audit.
🧬 Works well with / limitations
website-intelligence is the skill that completes the course: competitive research → builds the best site. To go beyond the site, combine it with skills from the previous tracks.
This is the final module in Skill Design because it represents the complete cycle: you learned to build interfaces (T1), create visual identity (T2), produce media (T3) and use support (T4) tools. website-intelligence uses all of these — and also adds the market intelligence that sets a good site apart from an unbeatable one.
After website-intelligence delivers the site/index.html, trigger frontend-design to polish the React/Tailwind/shadcn code, add advanced responsive components, and ensure AA-level accessibility. The website-intelligence site defines what build — frontend-design defines how build with excellent code quality.
After Phase 6 (Quality Audit), run impeccable for a second verification layer: color contrast, typographic hierarchy, CTA microcopy, visual consistency across sections. impeccable complements website-intelligence's technical audit with a design audit.
website-intelligence leaves an explicit placeholder in the hero: <!-- 3D SCROLL ASSET HERE --> with exact dimensions. The 3d-animation-creator was made exactly for this: it generates the interactive, scroll-triggered 3D asset that goes in that slot. This integration is the most direct—the website-intelligence reserves the space, and the 3d-animation-creator fills it masterfully.
You completed Skill Design!
You completed all 4 tracks—Build, Identity, Media, and Support—and reached the module that closes the loop: market intelligence in service of design. You now know how to research, analyze, plan, and build websites that stand out using real data.
✓ What you learned in this module
Now that you know all 16 skills in the course, go back to the beginning and reread the modules with fresh eyes. A second read always reveals connections you didn’t see the first time—especially how the skills across the 4 tracks fit together in a complete design workflow with Claude Code.