AI Skill Report Card
Building SEO Optimized Websites
YAML--- name: building-seo-optimized-websites description: Builds SEO-optimized, responsive, and performant frontend websites using modern best practices. Use when developing new sites or auditing existing ones for performance and SEO improvements. ---
Quick Start15 / 15
HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title - Brand Name</title> <meta name="description" content="Compelling 150-160 character description"> <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin> <link rel="stylesheet" href="/css/critical.css" inline> <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> </head> <body> <main> <h1>Primary Heading</h1> <img src="/img/hero.webp" alt="Descriptive alt text" loading="lazy" width="800" height="600"> </main> </body> </html>
Recommendation▾
Condense the workflow section - combine related steps and remove redundant explanations Claude already understands
Workflow13 / 15
Progress:
- SEO Foundation: Set up meta tags, structured data, semantic HTML
- Performance Optimization: Implement lazy loading, code splitting, image optimization
- Responsive Design: Mobile-first CSS with fluid typography and layouts
- Accessibility: ARIA labels, keyboard navigation, color contrast
- Technical SEO: Sitemap, robots.txt, Core Web Vitals optimization
- Testing: Lighthouse audit, cross-browser testing, performance monitoring
SEO Implementation
- Research target keywords and create content hierarchy
- Implement semantic HTML5 structure (
<header>,<main>,<article>,<section>) - Add structured data (JSON-LD schema markup)
- Optimize meta titles (50-60 chars) and descriptions (150-160 chars)
- Create XML sitemap and optimize robots.txt
Performance Optimization
- Implement critical CSS inlining for above-the-fold content
- Use WebP/AVIF images with fallbacks, include width/height attributes
- Lazy load images and non-critical resources
- Code split JavaScript bundles by route/component
- Implement service worker for caching strategies
Responsive Design
- Start with mobile-first CSS using min-width media queries
- Use fluid typography:
clamp(1rem, 2.5vw, 1.5rem) - Implement flexible grid systems with CSS Grid/Flexbox
- Test across viewport sizes: 320px, 768px, 1024px, 1440px+
Recommendation▾
Add more concrete input/output examples showing before/after scenarios with specific performance metrics
Examples18 / 20
Example 1: Critical CSS Implementation Input: Homepage with hero section and navigation Output:
CSS/* critical.css - inlined */ .hero{display:flex;min-height:50vh;background:linear-gradient(...);} .nav{position:fixed;top:0;z-index:100;} @media(min-width:768px){.hero{min-height:100vh;}}
Example 2: Image Optimization Input: Product gallery requiring fast loading Output:
HTML<picture> <source srcset="/img/product.avif" type="image/avif"> <source srcset="/img/product.webp" type="image/webp"> <img src="/img/product.jpg" alt="Product name" loading="lazy" width="400" height="300" decoding="async"> </picture>
Example 3: Structured Data Input: Article page needing rich snippets Output:
HTML<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Article Title", "datePublished": "2024-01-01", "author": {"@type": "Person", "name": "Author Name"} } </script>
Recommendation▾
Include a quick template or boilerplate that demonstrates multiple concepts working together rather than isolated snippets
Best Practices
- Core Web Vitals: Target LCP <2.5s, FID <100ms, CLS <0.1
- Mobile Performance: Prioritize 3G connection speeds (1.6Mbps)
- SEO Hierarchy: One H1 per page, logical H2-H6 structure
- Image Strategy: Use next-gen formats with proper sizing and lazy loading
- CSS Strategy: Critical path CSS inlined, non-critical loaded asynchronously
- JavaScript: Defer non-essential scripts, use dynamic imports for code splitting
- Accessibility: Minimum 4.5:1 color contrast, focus management, screen reader testing
Common Pitfalls
- Loading all CSS/JS upfront instead of critical path optimization
- Missing alt attributes or using generic descriptions like "image"
- Forgetting width/height on images causing layout shift
- Using pixel-based breakpoints instead of content-based responsive design
- Ignoring FOUC (Flash of Unstyled Content) with web font loading
- Over-optimizing for desktop while neglecting mobile performance
- Missing structured data markup for rich search results
- Not testing with real device throttling and network conditions