# Sd Build HTML Embed
> Author a self-contained HTML experience (single index.html OR multi-file bundle with css/js/images/fonts) entirely in Claude Code, then upload it to the SimplerDevelopment portal as a draft page or single-slide pitch deck. The output is a sandboxed iframe-rendered `html-embed` block — useful for interactive prototypes, motion-design experiments, custom calculators, immersive landing pages, or anything that would otherwise be impossible inside the visual block editor. Supports two upload paths — `posts_upload_html` for a single ≤1 MB HTML file, or `posts_upload_html_zip` (and the deck variants) for a multi-file zipped bundle up to 50 MB. Returns a portal post + approval URL. Use when the user says 'build an HTML embed', 'make an interactive widget', 'custom landing page with a working demo', 'huashu-style hi-fi mockup', 'upload this prototype', 'zip and ship', 'embed this single-file HTML into the portal'.
- Skill: `simplerdevelopment/sd-build-html-embed` (Agent Skill)
- Install (CLI): `npx skillmds@latest add simplerdevelopment/sd-build-html-embed`
- Raw SKILL.md: https://api.skillmd.com/api/skills/simplerdevelopment/sd-build-html-embed/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: SimplerDevelopment (https://skillmd.com/u/simplerdevelopment)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/simplerdevelopment/sd-build-html-embed
---
# sd-build-html-embed
A skill for authoring HTML content **locally first, in this Claude Code session**, then uploading the finished artifact to the SimplerDevelopment portal as an `html-embed` block. Two upload paths exist:
1. **Single-file** — one `index.html` with everything inlined (CSS in `
```
Run a contrast check on `--text` vs `--bg` before shipping. Call `branding_check_contrast` to confirm ≥ 4.5:1 for body, ≥ 3:1 for large text.
### Logo
If `brand.logoUrl` is set, fetch it server-side once (via `WebFetch`) and either:
- **Single-file path:** base64-encode and inline as a `
`.
- **Bundle path:** save to `./assets/logo.svg` (or .png) and reference relatively.
Never hot-link the logo from S3 inside the embed — the embed is sandboxed without same-origin, and intermittent failures look terrible.
### Accessibility
The same WCAG rules from `SD_DESIGN_PRINCIPLES.md` apply:
- Body 16px+, headings 36+ for hero scale.
- `prefers-reduced-motion` respected for any animation.
- `alt` on informational images, `alt=""` on decorative.
- Headings in hierarchical order, one `h1`.
- Buttons / links have accessible names.
## Build steps
### Single-file path
1. Write `./.sd/embeds//index.html` with `