{
  "markdown": "# htmlshop\n\nA small local editor for HTML design files. You open a folder, click elements in the browser, adjust text, typography, layout, color, and export images. Files are edited in place on disk.\n\nhtmlshop ships two pieces together:\n\n1. `npx htmlshop`, a local Node server and browser editor for folders of `.html`/`.htm` designs.\n2. A reusable AI-tool skill/rule that tells Codex, Claude Code, Cursor, and similar IDEs how to generate fixed-size HTML designs and launch the editor.\n\nEverything runs locally. There are no accounts, telemetry, or remote htmlshop services.\n\n## Copy-Paste Setup\n\nPaste this into the terminal inside Cursor, Codex, Claude Code, Windsurf, or another AI coding IDE:\n\n```bash\nnpx --yes htmlshop@latest install && npx --yes htmlshop@latest init\n```\n\nThat installs the global Codex/Claude Code skill and adds the project rule that Cursor-style IDEs can read from `.cursor/rules/htmlshop.mdc`.\n\nTo launch the editor after setup:\n\n```bash\nnpx --yes htmlshop@latest\n```\n\n## Install The Skill\n\nInstall for Codex and Claude Code:\n\n```bash\nnpx htmlshop install\n```\n\nInstall only one global skill:\n\n```bash\nnpx htmlshop install codex\nnpx htmlshop install claude\n```\n\nResolved install locations:\n\n- Codex: `${CODEX_HOME:-~/.codex}/skills/htmlshop/SKILL.md`\n- Claude Code: `${CLAUDE_CONFIG_DIR:-~/.claude}/skills/htmlshop/SKILL.md`\n\nFor Cursor, run this at the root of each project where you want htmlshop available:\n\n```bash\nnpx htmlshop init\n```\n\nThat writes `.cursor/rules/htmlshop.mdc`. Windsurf, Aider, Continue, and other AI IDEs can use the same `skills/htmlshop/SKILL.md` content as project rules or context.\n\nUninstall global skills:\n\n```bash\nnpx htmlshop uninstall\nnpx htmlshop uninstall codex\nnpx htmlshop uninstall claude\n```\n\n## Run The Editor\n\nOpen the default projects folder, created on first run:\n\n```bash\nnpx htmlshop\n```\n\nOpen a specific folder:\n\n```bash\nnpx htmlshop ~/path/to/designs\n```\n\nUseful options:\n\n```bash\nnpx htmlshop ~/path/to/designs --port 5200\nnpx htmlshop ~/path/to/designs --host 127.0.0.1\nnpx htmlshop ~/path/to/designs --no-open\nnpx htmlshop doctor\n```\n\nThe default URL is `http://127.0.0.1:5178`. If that port is busy and you did not explicitly set a port, htmlshop tries the next available port and prints the final URL.\n\nOn first run, if the default projects folder has no visible designs, htmlshop seeds a bundled `welcome.html` demo so the gallery is immediately editable.\n\n## AI Workflow\n\nAfter installing the skill, ask your AI coding tool for a design:\n\n```text\n/htmlshop make a 1080x1080 Instagram post titled \"Truth isn't loud\"\nusing my design-system.md\n```\n\nThe assistant should:\n\n1. Read a referenced design system if one exists.\n2. Write one or more self-contained `.html` files under `~/htmlshop/projects/`; `.htm` is also accepted.\n3. Launch `npx htmlshop <project-folder>` in the background.\n4. Give you the local editor URL.\n\nProjects convention:\n\n- Loose `.html` or `.htm` files in `~/htmlshop/projects/` are standalone designs.\n- Subfolders are carousels or multi-slide projects.\n- Uploaded images are saved under `<root>/assets/`.\n\n## Editor Features\n\nGallery:\n\n- Shows standalone designs and carousel folders.\n- Creates new designs and new carousels.\n- Renames, moves, duplicates, and deletes designs with local modals.\n- Shows the active root folder in the header.\n- Opens folders with multiple designs as a side-by-side carousel editor.\n\nEditor:\n\n- Click an element to select it.\n- Drag or resize elements with transform handles.\n- Static/relative layouts freeze into absolute positions on first transform so siblings do not reflow.\n- Layers panel with editor-only hide/show toggles.\n- Properties panel for text, typography, layout, background, borders, effects, and blending.\n- Undo/redo per open design.\n- Zoom controls and fit-to-screen.\n- Add artboards and images.\n- Rename or delete artboards from the Layers sidebar.\n- Export PNG/JPG at 1x, 2x, or 3x for the active design or all slides.\n\nShortcuts:\n\n| Action | Shortcut |\n|---|---|\n| Undo / Redo | Cmd+Z / Cmd+Shift+Z |\n| Zoom in / out / 100% | Cmd+Plus / Cmd+Minus / Cmd+0 |\n| Delete selected | Delete |\n| Duplicate selected | Cmd+D |\n| Deselect | Esc |\n\n## Design File Shape\n\nhtmlshop works best with single-file fixed canvases. Use `.html` by default; `.htm` is accepted for existing files.\n\n```html\n<!doctype html>\n<html>\n<head>\n  <style>\n    body {\n      margin: 0;\n      width: 1080px;\n      height: 1080px;\n      position: relative;\n      overflow: hidden;\n    }\n    .headline {\n      position: absolute;\n      left: 120px;\n      top: 240px;\n    }\n  </style>\n</head>\n<body>\n  <h1 class=\"headline\">Hello</h1>\n</body>\n</html>\n```\n\nInline CSS is preferred. External JavaScript is not needed. Google Fonts are supported, but local/system fonts keep the workflow fully offline after the editor loads.\n\n## Privacy\n\nSee [PRIVACY.md](./PRIVACY.md). Short version: htmlshop serves files from your machine to your browser on `127.0.0.1`, edits files on disk, and does not send usage data anywhere. The editor UI currently loads DM Sans from Google Fonts.\n\n## Development\n\n```bash\nnpm install\nnpx playwright install chromium\nnpm run check\nnode bin/htmlshop.js --no-open\n```\n\n`npm run check` performs syntax checks, runs a local smoke test against a temporary folder, runs Playwright browser reliability tests, runs `npm audit --omit=dev`, and verifies package contents with `npm pack --dry-run`.\n\nUseful targeted checks:\n\n```bash\nnpm run smoke\nnpm run smoke:cli\nnpm run test:browser\n```\n\nManual release checklist:\n\n1. Empty first-run gallery.\n2. New design and new carousel creation.\n3. Open single design and multi-slide carousel.\n4. Select, drag, resize, duplicate, delete, undo, redo.\n5. Hide/lock a layer, save another edit, reload, and confirm editor-only `data-htmlshop-*` artifacts were not saved.\n6. Rename and move conflict handling.\n7. Upload image and save.\n8. Export PNG and JPG at 1x/2x with correct dimensions.\n9. Keyboard checks: tab through gallery menus, modals trap focus, Esc closes dialogs/drawers.\n10. `htmlshop install`, `install codex`, `install claude`, `init`, `doctor`, and `--no-open`.\n\n## License\n\nMIT\n",
  "bytes": 6164,
  "sha": "0d1deb805cc983c49b296fe6d4676f088ce63a126e2b405da625ecc9f3ad32e1",
  "repo_slug": "robzilla1738/htmlshop",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_robzilla1738_htmlshop_htmlshop_f80ded3a/readme"
}