adobe/preview-import
skills/aem/edge-delivery-services/skills/preview-import/SKILL.md
Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.
$ install --global
skillsauthnpx skillsauth add adobe/skills preview-importInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 11, 2026, 3:21 AM343.7s3 files scanned
SKILL.md
- name:
- preview-import
- description:
- Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.
- license:
- Apache-2.0
- version:
- 1.0.0
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 with HTML Folder Flag
Determine the folder from metadata.json:
- Look at
paths.dirPathfrom metadata.json (e.g.,/us) - This is the root folder containing your imported HTML file
Command:
aem up --html-folder {dirPath}
Examples based on imported content location:
| HTML File Location | Command | Preview URL |
|-------------------|---------|-------------|
| us/en.plain.html | aem up --html-folder us | http://localhost:3000/us/en |
| products/widget.plain.html | aem up --html-folder products | http://localhost:3000/products/widget |
| blog/2024/post.plain.html | aem up --html-folder blog | http://localhost:3000/blog/2024/post |
Why this is required:
- Without
--html-folder, AEM CLI proxies requests to the remote server - The remote server doesn't have your locally imported content
- Result: 404 "Page not found" errors
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 / instead of /index:
If file is: index.plain.html
Preview at: http://localhost:3000/
NOT: http://localhost:3000/index
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/test
Use paths.documentPath from metadata.json, but for index files ensure the path is / not /index
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:
- Open
./import-work/screenshot.pngalongside browser preview - Check that content structure matches
- Verify blocks decorated correctly
- Confirm section boundaries align
- 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):
- Most common cause: Missing
--html-folderflag - restart server withaem up --html-folder {dirPath} - Verify HTML file exists at expected path
- Check documentPath from metadata.json matches URL
- For index files, use
/indexnot/ - Check terminal output confirms "Serving HTML files from folder: {folder}"
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
adobe/run-workflow
tools
VerifiedTrustedCommunity
Use the run-workflow MCP to discover, compose, execute, publish, and save Adobe Firefly workflows. TRIGGER when: user asks what actions are available, what the MCP can do, how to process images/video/3D via workflow, wants to build/run/save/publish a workflow, OR pastes any workflow/batch/execution ID. BARE ID (UUID/workflowId/batchId) = INSPECT ONLY — call inspect_run, NEVER run_workflow_submit. ALWAYS call list_actions first for capability/discovery questions. DO NOT TRIGGER for direct Firefly API calls without MCP (use firefly-api-specs).
150SKILL.mdUpdated Jul 28, 2026
adobe/run-featured-workflow
tools
VerifiedTrustedCommunity
Run predefined featured workflows via run-workflow MCP. TRIGGER when user names a featured workflow (retargeting, banners at scale, localization, packaging, banner advertising, etc.) or asks to run a known marketing/production workflow. Requires run-workflow MCP. ALWAYS call get_featured_workflow before compose_workflow. DO NOT TRIGGER for custom one-off workflows with no named template — use run-workflow skill.
150SKILL.mdUpdated Jul 28, 2026
adobe/commerce-app-migrate
tools
VerifiedTrustedCommunity
Migrate an Adobe Commerce App Builder project from the Integration Starter Kit or Checkout Starter Kit to the new App Management approach. Run from the root of the App Builder project to be migrated. Pass --auto to skip confirmation prompts (suitable for CI or batch use) — auto mode prints a summary of all Q&A questions answered with their defaults. Pass --doc-scan-only to scan README.md and env.dist for outdated content without modifying any files. Use when the user wants to migrate an App Builder project from the Integration Starter Kit or Checkout Starter Kit to the App Management approach, or mentions upgrading their Adobe Commerce extension architecture.
150SKILL.mdUpdated Jul 24, 2026
adobe/commerce-app-webhooks
development
VerifiedTrustedCommunity
Add or modify webhook interceptors in an Adobe Commerce app. Use when the user wants to intercept Commerce operations to validate input, append data, or modify behavior — before or after execution. Requires a base app initialized with commerce-app-init.
150SKILL.mdUpdated Jul 24, 2026