nebula-scrape-url

name	nebula-scrape-url
description	Capture web page screenshots and HTML for design reference. Use when the user provides a URL and asks to build, recreate, or implement a design. Runs `scripts/scrape-page.js` to capture desktop/tablet/mobile screenshots and HTML. Not for Figma, GitHub, or documentation URLs.

Scraping URLs for design reference

This applies to web page URLs only. Do not use this for:

• Figma URLs (use the Figma MCP instead)
• GitHub URLs (read the code directly)
• Documentation URLs (read or search as needed)

Workflow

1. Run the scraper to capture screenshots and HTML:

   node scripts/scrape-page.js <url>
   

2. Review the output in scraped/<timestamp>/:

   • screenshot-desktop.png - Desktop layout reference
   • screenshot-tablet.png - Tablet layout reference
   • screenshot-mobile.png - Mobile layout reference
   • page.html - Full HTML for structure reference

3. Use the screenshots to understand the visual design (layout, spacing, colors, typography).

4. Use the HTML to understand the content structure and hierarchy.

5. Build the components using the nebula-component-creation skill.

Example

User prompt: "Build me this page: https://example.com/pricing"

1. Run: node scripts/scrape-page.js https://example.com/pricing
2. Review the screenshots to understand the layout
3. Review the HTML to understand the structure
4. Create components that match the design using Tailwind CSS