New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Preview Import

by adobe in adobe/skills

Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost.

Apache-2.0Auto-check passed

Install Preview Import

skills CLI
$ npx skills add adobe/skills --skill preview-import -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install adobe/skills preview-import --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/adobe/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/aem/edge-delivery-services/skills/preview-import .claude/skills/preview-import && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
preview-import
GitHub stars
195
Token cost
~1.3k tokens
SKILL.md length
522 words
Files
4
Skills in repo
105
Repo updated
First seen
Licence
Apache-2.0

At a glance

Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost.

  • Works in 4 steps: Start Development Server with HTML… → Navigate in Browser → Verify Rendering → …
  • SKILL.md covers When to Use This Skill, Prerequisites, Related Skills and Preview Workflow, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Preview Import is an agent skill from adobe/skills. Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `.releaserc.json`, `CHANGELOG.md` and `package.json`).

It works with Adobe Experience Manager. The repository describes itself as: Adobe Skills for Agents. The licence is Apache-2.0.

Example prompts

  • “/preview-import”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Start Development Server with HTML Folder Flag
  2. Navigate in Browser
  3. Verify Rendering
  4. Compare with Original

What it can do on your machine

Read from SKILL.md and the folder at commit cbc9952. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Preview Import loads about 1.3k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 522 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~87
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from adobe/skills at commit cbc9952, republished under its Apache-2.0 licence (© adobe). 522 words, ~1,273 tokens.

Download SKILL.mdSave it as .claude/skills/preview-import/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
preview-import
description
Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.
license
Apache-2.0
metadata.version
2.0.1

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)
  • 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.dirPath from metadata.json (e.g., /us)
  • This is the root folder containing your imported HTML file

Command:

bash
aem up --html-folder {dirPath}

Examples based on imported content location:

HTML File LocationCommandPreview URL
us/en.plain.htmlaem up --html-folder ushttp://localhost:3000/us/en
products/widget.plain.htmlaem up --html-folder productshttp://localhost:3000/products/widget
blog/2024/post.plain.htmlaem up --html-folder bloghttp://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:

  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
Show full SKILL.md (198 more words)Show less

Troubleshooting

Blocks don't render correctly:

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-folder flag - restart server with aem up --html-folder {dirPath}
  • Verify HTML file exists at expected path
  • Check documentPath from metadata.json matches URL
  • For index files, use / not /index
  • 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.

© adobe, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files in plugins/aem/edge-delivery-services/skills/preview-import of adobe/skills.

  • SKILL.md
  • .releaserc.json
  • CHANGELOG.md
  • package.json

Open the folder on GitHubat commit cbc9952

Compare with similar skills

Preview Import next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Preview Import compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Preview Import this skilladobe/skills195—~1.3kAutomated safety check: PassApache-2.0
Sanity Migrationsanity-io/agent-toolkit187—~1.4kAutomated safety check: PassMIT
Content Management Systemsgithub/awesome-copilot40k1 repos~1.3kAutomated safety check: PassMIT
App Builder UI ScaffolderNeverSight/learn-skills.dev2161 repos~2.2kAutomated safety check: PassApache-2.0
Authoring Analysismajiayu000/claude-skill-registry6662 repos~3.1kAutomated safety check: PassMIT
Block Inventorymajiayu000/claude-skill-registry6661 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Sanity Migration

    sanity-io/agent-toolkit

    Official

    Plans, implements, and reviews migrations from other CMSes and content systems into Sanity.

    187 GitHub stars~1.4k tokensUpdated 2 days ago
    Documents & OfficeAuto-check passed

  • Content Management Systems

    github/awesome-copilot

    Official

    Workflow for building and modifying content management systems across WordPress, Shopify, Wix, Squarespace, Drupal, WooCommerce, Joomla, HubSpot CMS Hub, Webflow, Adobe Experience Manager, and…

    40k GitHub starsUsed in 1 repo~1.3k tokens
    Sales & SupportAuto-check passed

  • App Builder UI Scaffolder

    NeverSight/learn-skills.dev

    Generates React Spectrum UI code for Adobe Experience Cloud Shell apps and AEM UI Extensions from annotated patterns.

    216 GitHub starsUsed in 1 repo~2.2k tokens
    Frontend & DesignAuto-check passed

  • Authoring Analysis

    majiayu000/claude-skill-registry

    Analyze content sequences and determine authoring approach (default content vs blocks).

    666 GitHub starsUsed in 2 repos~3.1k tokens
    Auto-check passed

  • Block Inventory

    majiayu000/claude-skill-registry

    Survey available blocks from local AEM Edge Delivery Services project and Block Collection to understand the block palette available for authoring.

    666 GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed

  • Identify Page Structure

    majiayu000/claude-skill-registry

    Identify section boundaries and content sequences within a scraped webpage for AEM Edge Delivery Services import.

    666 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

More from adobe/skills

All 105 skills in this repo

  • Adobe App Builder Action Scaffolder

    adobe/skills

    Scaffolds, implements, deploys and debugs Adobe Runtime actions in App Builder projects, with templates for webhooks, events, database CRUD, sequences and Asset Compute workers.

    195 GitHub stars~3.1k tokensUpdated yesterday
    Auto-check passed

  • CDP Extension Pilot

    adobe/skills

    Launches Chrome with an unpacked extension over CDP, opens its sidepanel, popup or options page, and hands over to cdp-connect for clicks, typing and screenshots.

    195 GitHub stars~952 tokensUpdated yesterday
    Auto-check passed

  • Web Page Resource Collector

    adobe/skills

    Extracts icons, metadata, text, forms, videos and social links from any web page with playwright-cli, with SVG icon classification and cleanup.

    195 GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Page Langs

    adobe/skills

    Detect all languages used on a webpage — both declared (html@lang, hreflang alternate links, nested lang= attributes, meta content-language) and actually present in the body text (Google CLD3 via…

    195 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Page Prep

    adobe/skills

    Prepare any webpage for clean interaction by detecting and removing disruptive overlays (cookie banners, GDPR consent, modals, popups, newsletter signups, paywalls, login walls).

    195 GitHub stars~2.1k tokensUpdated yesterday
    Auto-check passed

  • Page Reduce

    adobe/skills

    Reduce a webpage to a structural skeleton with semantic tokens.

    195 GitHub stars~1.9k tokensUpdated yesterday
    Auto-check passed

Works with

Questions about Preview Import

What does Preview Import do?

Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Preview Import is an agent skill from adobe/skills. Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost.

How do I install Preview Import in Claude Code?

Run `npx skills add adobe/skills --skill preview-import -a claude-code`. Or copy the skill folder (plugins/aem/edge-delivery-services/skills/preview-import in adobe/skills) into .claude/skills/preview-import in your project. Claude Code loads it when a task matches its description.

How do I install Preview Import in Codex?

Run `npx skills add adobe/skills --skill preview-import -a codex`. Or copy the skill folder (plugins/aem/edge-delivery-services/skills/preview-import in adobe/skills) into .agents/skills/preview-import in your project. Codex loads it when a task matches its description.

Can I use Preview Import in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add adobe/skills --skill preview-import -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/preview-import, .gemini/skills/preview-import, .github/skills/preview-import and .opencode/skills/preview-import in your project.

What does Preview Import need to run?

SKILL.md names no scripts, command-line tools or credentials: Preview Import is instructions for the agent only.

Does Preview Import access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Preview Import safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Preview Import use?

Preview Import is published under the Apache-2.0 licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Preview Import use?

About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Preview Import?

Skills that share tags, products or a category with Preview Import: Sanity Migration (sanity-io/agent-toolkit, 187 stars), Content Management Systems (github/awesome-copilot, 40k stars), App Builder UI Scaffolder (NeverSight/learn-skills.dev, 216 stars) and Authoring Analysis (majiayu000/claude-skill-registry, 666 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Preview Import?

adobe (a GitHub organization) maintains it in adobe/skills, which has 195 GitHub stars. The repository holds 105 skills in this directory. The repository was last updated on October 6, 2026.

Source: adobe/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.