# Acquia Nebula Nebula Scrape Url

> Scraping URLs for design reference

- Skill: `tomevault-io/acquia-nebula-nebula-scrape-url` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/acquia-nebula-nebula-scrape-url`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/acquia-nebula-nebula-scrape-url/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/acquia-nebula-nebula-scrape-url

---


# 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:

   ```bash
   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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/acquia) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-12 -->