AI Skill Report Card
Replicating Web Pages
YAML--- name: replicating-webpages description: Creates pixel-perfect HTML/CSS replicas of web pages from URLs. Use when you need to clone, recreate, or copy existing website layouts and styling. ---
Web Page Replication
Quick Start15 / 15
Pythonimport requests from bs4 import BeautifulSoup import re from urllib.parse import urljoin, urlparse def replicate_webpage(url): # Fetch the page response = requests.get(url) soup = BeautifulSoup(response.content, 'html.parser') # Download and inline CSS css_content = "" for link in soup.find_all('link', rel='stylesheet'): if link.get('href'): css_url = urljoin(url, link['href']) css_response = requests.get(css_url) css_content += css_response.text + "\n" # Create replica HTML html = f"""<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Replica</title> <style>{css_content}</style> </head> <body> {soup.body.decode_contents() if soup.body else soup.decode_contents()} </body> </html>""" with open('replica.html', 'w', encoding='utf-8') as f: f.write(html) return html
Recommendation▾
Provide concrete input/output examples showing actual HTML code snippets rather than just describing the result
Workflow13 / 15
Progress:
- Fetch source HTML - Get page content and parse structure
- Extract external CSS - Download and inline all stylesheets
- Process images - Download or convert to base64/placeholder
- Handle fonts - Extract and embed custom fonts
- Fix relative URLs - Convert to absolute or local paths
- Remove scripts - Strip JavaScript for static replica
- Optimize layout - Ensure responsive design works
- Test rendering - Verify visual accuracy across browsers
Recommendation▾
Add specific templates or code frameworks for handling common challenges like font embedding and image processing
Examples8 / 20
Example 1:
Input: https://github.com/user/repo
Output: Standalone HTML file with GitHub's exact layout, navigation, and styling preserved
Example 2:
Input: https://stripe.com/pricing
Output: Pixel-perfect pricing page with all gradients, animations (as CSS), and responsive breakpoints
Example 3:
Input: https://tailwindcss.com
Output: Complete homepage replica with hero section, component previews, and documentation layout
Recommendation▾
Include more edge cases like handling CORS issues, authentication-required pages, and single-page applications
Best Practices
- Inline everything - CSS, fonts, and images for true standalone files
- Use absolute positioning when flexbox/grid fails to match exactly
- Preserve class names to maintain any remaining functionality
- Screenshot comparison - Always compare original vs replica
- Handle responsive design - Test multiple viewport sizes
- Remove external dependencies - No CDN links, make it fully self-contained
- Base64 encode images under 50KB for embedding
Common Pitfalls
- Don't ignore CSS specificity - Some styles require
!importantto override - Don't skip pseudo-elements -
:beforeand:aftercontent often critical - Don't assume simple layouts - Modern sites use complex CSS Grid/Flexbox
- Don't forget viewport meta - Mobile rendering will break without it
- Don't leave external fonts - Download and embed WOFF2 files
- Don't preserve JavaScript - Focus on visual replica, not functionality
- Don't ignore print styles - Some sites have different print layouts