Preview Import
- 31 installs
- 45 repo stars
- Updated August 4, 2026
- adobe/helix-website
preview-import is a Claude Code skill that previews content imported into a local AEM Edge Delivery Services dev server and verifies it renders like the original page.
About
preview-import opens imported content in a local AEM Edge Delivery Services development server and verifies it renders correctly. A developer runs it after generating import HTML to check block styling, image loading, and metadata against the original page screenshot. It is the final verification step of Adobe's page-import workflow.
- Previews imported HTML in a local AEM Edge Delivery Services dev server (aem up on localhost:3000)
- Compares the rendered page against the original screenshot to verify block decoration and layout
- Ships a troubleshooting guide for broken blocks, missing images, raw HTML, and 404s
Preview Import by the numbers
- 31 all-time installs (skills.sh)
- Ranked #1,450 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
preview-import capabilities & compatibility
- Capabilities
- content migration · block preview · local dev server
- Use cases
- web design · frontend
What preview-import says it does
Open and verify imported content in local development server.
This starts the local AEM proxy server at `http://localhost:3000`
Layout matches original page structure (compare to screenshot.png)
npx skills add https://github.com/adobe/helix-website --skill preview-importAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 31 |
|---|---|
| repo stars | ★ 45 |
| Last updated | August 4, 2026 |
| Repository | adobe/helix-website ↗ |
What it does
Preview and verify content imported into a local AEM Edge Delivery Services dev server before opening a pull request.
Who is it for?
AEM Edge Delivery developers verifying that imported pages render correctly before a PR
Skip if: Scraping source pages (use scrape-webpage) or general web frameworks outside AEM Edge Delivery
When should I use this skill?
You have generated import HTML and need to preview and verify it in the local AEM dev server
What you get
A verified local preview whose blocks, images, and metadata match the original page
- Verified local preview matching the original page structure
- Validated block decoration and metadata presence
By the numbers
- 4-step preview workflow (start server, navigate, verify rendering, compare)
- 6-point rendering verification checklist
Files
Preview Import
Open and verify imported content in local development server.
When to Use This Skill
Use this skill when:
- You have generated HTML file (from generate-import-html)
- Ready to preview in browser and verify rendering
- Need to compare with original page structure
Invoked by: page-import skill (Step 5)
Prerequisites
From previous skills, you need:
- ✅ HTML file at correct path (from generate-import-html)
- ✅ Images folder in same directory
- ✅ screenshot.png from scrape-webpage (for comparison)
- ✅ documentPath from metadata.json (for URL construction)
Related Skills
- page-import - Orchestrator that invokes this skill
- generate-import-html - Provides HTML file to preview
- scrape-webpage - Provides screenshot for comparison
Preview Workflow
Step 1: Start Development Server
Command:
aem upThis starts the local AEM proxy server at http://localhost:3000
---
Step 2: Navigate in Browser
For most files, use the document path directly:
http://localhost:3000${documentPath}Example:
- HTML file:
us/en/about.plain.html - URL:
http://localhost:3000/us/en/about
IMPORTANT: For index files, use `/index` instead of `/`:
If file is: index.plain.html
Preview at: http://localhost:3000/index
NOT: http://localhost:3000/Note: If you used --html-folder flag (e.g., aem up --html-folder drafts), prepend that folder to the URL:
File: drafts/test.plain.html
URL: http://localhost:3000/drafts/testUse paths.documentPath from metadata.json, but for index files ensure the path is /index not /
---
Step 3: Verify Rendering
Check the following:
- ✅ Blocks render with correct styling
- ✅ Layout matches original page structure (compare to screenshot.png)
- ✅ Images load (or show appropriate placeholders)
- ✅ No raw HTML visible
- ✅ Metadata appears in page source (view source, check
<meta>tags) - ✅ Section styling applied correctly
---
Step 4: Compare with Original
Side-by-side comparison: 1. Open ./import-work/screenshot.png alongside browser preview 2. Check that content structure matches 3. Verify blocks decorated correctly 4. Confirm section boundaries align 5. Validate styling consistency
---
Troubleshooting
Blocks don't render correctly:
- Check HTML structure matches expected format
- Verify block names match exactly (case-sensitive)
- Review
../page-import/resources/html-structure.mdfor format guidance
Images not loading:
- Verify images folder is in same directory as HTML file
- Check image paths are
./images/...format - Ensure images were copied correctly from
./import-work/images/
Raw HTML visible:
- Block name might not match existing block in project
- Check browser console for JavaScript errors
- Verify block exists in
blocks/directory
Metadata not in page source:
- Check metadata block is at end of HTML file
- View page source and search for
<meta>tags in<head> - Verify metadata properties match expected format
Dev server not running:
- Start server with
aem up - Check for port conflicts (default 3000)
- Verify you're in correct project directory
Page not found (404):
- Verify HTML file exists at expected path
- Check documentPath from metadata.json matches URL
- For index files, use
/indexnot/ - If using
--html-folder, include folder in URL
---
Output
This skill provides:
- ✅ Verified preview that matches original page structure
- ✅ Visual confirmation of correct rendering
- ✅ Validated block decoration
- ✅ Confirmed metadata presence
Import complete when all verification points pass.
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k