Convert styled HTML prototypes into EDS blocks and deploy pages via the DA Source API.
npx skills add https://github.com/aemgdc/aemdev --skill deploy-aemgdc
Please help me install this Agent Skill. Skill: deploy Source: https://github.com/aemgdc/aemdev/tree/main/.agents/skills/deploy Command: npx skills add https://github.com/aemgdc/aemdev --skill deploy-aemgdc
<section> to one EDS block, lifts per-section CSS into scoped block stylesheets, and handles inline-styled <x-dc> content and JSX prototypes pre-rendered to static HTML. - Foundation and font hardening: Updates styles/styles.css with lifted design tokens, a reset with img { height: auto }, header-height reservation to prevent CLS, and self-hosted metric-matched @font-face declarations with licensing alerts for proprietary faces. - Headless DA deploy: Sanitizes non-ASCII HTML to entities, writes body fragments via the DA Source API, forces AEM Code Sync, previews, and verifies ingestion on .plain.html. - Use Case: Given a folder of claude-design prototypes under samples/, convert each page into EDS blocks plus content pages, push the branch, and deploy each page to a branch preview on aem.page with zero broken images. ## Quick Start Convert the prototypes in my samples folder into EDS blocks and content pages, then deploy them to DA on a new branch.High-intent search queries and answers about installing and using this skill.
Map each prototype `<section>` to one EDS block, lift the section's CSS into a stylesheet scoped under the block class, and author one content page per prototype page. React/JSX prototypes must be pre-rendered to static HTML first so a server-rendered `<main>` exists to decorate.
Push the code branch to GitHub, force AEM Code Sync via `POST admin.hlx.page/code/<org>/<repo>/<branch>/*`, sanitise the HTML to ASCII entities, then `PUT` the body fragment to `admin.da.live/source/<org>/<repo>/<path>.html` with a multipart `data` field, and finally POST to the preview endpoint.
The static header fragment is injected after first paint, so the first section renders at y=0 then jumps down by the header height. Reserve the header's rendered height with a responsive `min-height` on the bare `<header>` element in styles.css, matched per breakpoint to the fragment.
The pipeline emits `<img>` tags with width and height attributes; without `height: auto` in the CSS reset, a width constraint stretches the image vertically. The document reset must include `img { display: block; max-width: 100%; height: auto; }`.
Yes, but you must first port the AuthorKit runtime (ak.js, postlcp.js, lazy.js, head.html, fragment and section-metadata blocks) and remove boilerplate pieces it replaces. Two runtime edits are mandatory: delete the footer util import in lazy.js and set the fragment element's class in postlcp.js.
DA strips `<head>` and parses without a charset declaration, so multibyte UTF-8 becomes replacement characters. Run the bundled sanitise.js script before upload to encode all non-ASCII characters as named or numeric HTML entities, which survive the round-trip.
TimothyNguyen04Analyze prototypes against PRDs, design systems, and user research.
LAF-USAnalyze Core Web Vitals and render-blocking resources to identify performance bottlenecks.
aemcoderGenerate and validate Adobe DA and EDS compatible HTML and media references.
Focus-GTSPlan and execute bulk CMS content migration to AEM Edge Delivery Services.