OpenSkillIndex← back to search
claude-code

Learn-skills.dev nebula-scrape-url

Scraping URLs for design reference

install
source · Clone the upstream repo
git clone https://github.com/NeverSight/learn-skills.dev
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/acquia/nebula/nebula-scrape-url" ~/.claude/skills/neversight-learn-skills-dev-nebula-scrape-url && rm -rf "$T"
manifest: data/skills-md/acquia/nebula/nebula-scrape-url/SKILL.md
source content

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