preview-import
Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.
Best use case
preview-import is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.
Teams using preview-import should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/preview-import/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How preview-import Compares
| Feature / Agent | preview-import | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Preview and verify imported content in local AEM Edge Delivery Services dev server. Validates rendering, compares with original page, and troubleshoots common issues.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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:**
```bash
aem up
```
This 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/test
```
Use `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.md` for 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 `/index` not `/`
- 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
page-import
Import a single webpage from any URL to structured HTML content for authoring in AEM Edge Delivery Services. Scrapes the page, analyzes structure, maps to existing blocks, and generates HTML for immediate local preview. Also triggered by terms like "migrate", "migration", or "migrating".
generate-import-html
Generate structured HTML from authoring analysis for AEM Edge Delivery Services. Creates section structure, applies block tables, handles metadata, and manages images folder.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
Testing Blocks
Guide for testing code changes in AEM Edge Delivery projects including blocks, scripts, and styles. Use this skill after making code changes and before opening a pull request to validate functionality. Covers unit testing for utilities and logic, browser testing with Playwright/Puppeteer, linting, performance validation, and guidance on which tests to maintain vs use as throwaway validation.
template-skill
Replace with description of the skill and when Claude should use it.
slack-gif-creator
Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like "make me a GIF for Slack of X doing Y".
skill-developer
Create and manage Claude Code skills following Anthropic best practices. Use when creating new skills, modifying skill-rules.json, understanding trigger patterns, working with hooks, debugging skill activation, or implementing progressive disclosure. Covers skill structure, YAML frontmatter, trigger types (keywords, intent patterns, file paths, content patterns), enforcement levels (block, suggest, warn), hook mechanisms (UserPromptSubmit, PreToolUse), session tracking, and the 500-line rule.
skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
scrape-webpage
Scrape webpage content, extract metadata, download images, and prepare for import/migration to AEM Edge Delivery Services. Returns analysis JSON with paths, metadata, cleaned HTML, and local images.
page-decomposition
Analyze content sequences within a section and provide neutral descriptions for AEM Edge Delivery Services. Invoked per section during page import to identify breaking points between default content and blocks.
mcp-builder
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).