HOW TO USE THIS PROMPT
1. Unzip html-to-psd-kit-v1.0.zip (for example into your Downloads folder).
2. In the Claude desktop app, open the Code tab and start a new session in the unzipped "html-to-psd-kit" folder.
3. Copy everything below the line and paste it into that session.

------------------------------------------------------------------------------------------------

I'd like you to install a Claude Code skill called "HTML to PSD" (skill ID: html-to-psd). Its files are in this folder.

WHAT IT IS
It turns designs Claude builds as HTML/SVG (flyers, posters, slides, social graphics, brackets, handouts) into layered, editable Photoshop files: one layer per element, real editable text, clean layer names, flat folders (never nested), 300 DPI for print, and an artboard per page for multi-page designs. It checks its own output against the original, lists the fonts needed, installs missing free Google Fonts (only with my permission, after a security check), and opens the file in Photoshop. It only runs in Claude Code on a Mac or Windows PC. It doesn't run in Chat, on claude.ai, or in Cowork.

WHAT'S IN THIS FOLDER
- html-to-psd.skill: the skill (a standard zip containing a folder named html-to-psd/)
- SKILL-REFERENCE.md: the full technical documentation. Read sections 1, 2, 5 and 11 before you start; use the rest as needed.
- INSTALL-GUIDE.pdf: the plain-language guide for people (no need to read it)
- CHECKSUMS.txt: SHA-256 fingerprints of the three files above

PLEASE DO THIS, ONE STEP AT A TIME, AND TELL ME BRIEFLY WHAT YOU FIND AT EACH STEP
I'm not technical, so use plain language and explain any technical term the first time you use it.

1. Check the files: compute the SHA-256 of html-to-psd.skill, INSTALL-GUIDE.pdf and SKILL-REFERENCE.md and compare them with CHECKSUMS.txt. If anything doesn't match, stop and tell me; don't install.

2. Check my computer: which operating system it is (it must be macOS or Windows), whether Node.js is installed (node --version, needs version 18 or newer), and whether Photoshop is installed.
   If Node.js is missing or older than 18, offer to install the current LTS (long-term support) version for me. Explain in one or two plain sentences what will be installed and where it comes from, and wait for my yes. Never ask me to type my password into this chat; the computer's own installer will ask me for it. Use only the official source, nodejs.org:
   - Mac: read https://nodejs.org/dist/index.json and find the newest entry whose "lts" value is not false. Download its macOS installer (the file named node-<version>.pkg inside https://nodejs.org/dist/<version>/) into this kit folder, compare its SHA-256 with the matching line in SHASUMS256.txt in that same nodejs.org folder, and stop if they don't match. Then open the installer (open <file>.pkg) so I can click through it and enter my password myself.
   - Windows: run winget install OpenJS.NodeJS.LTS (Windows will ask me to approve it). If winget isn't available, download the .msi installer from nodejs.org the same way, check its checksum, and open it for me.
   - When it finishes, confirm the version by running node by its full path (Mac: /usr/local/bin/node --version; Windows: "C:\Program Files\nodejs\node.exe" --version). Then tell me to quit and reopen the Claude app, start a new Code session in this folder, and paste this message again; step 2 will pass this time and we carry on.
   If I say no, if it fails, or if I don't have permission to install programs on this computer, stop and tell me to ask my IT person. Don't try workarounds.

3. Install the skill as a personal Claude Code skill: unzip html-to-psd.skill so its html-to-psd folder ends up at
   - Mac: ~/.claude/skills/html-to-psd
   - Windows: %USERPROFILE%\.claude\skills\html-to-psd
   If a folder with that name already exists, stop and ask me before replacing it. Afterwards, confirm that SKILL.md and the scripts folder are there.

4. Test it, but ask me first, because the first run downloads three small code libraries (ag-psd, pngjs, playwright) from npm, the public JavaScript library registry, into a cache folder. Once I say yes, run:
   node "<skills folder>/html-to-psd/scripts/convert.js" "<skills folder>/html-to-psd/assets/test-designs/contract-sample.html" "<this kit folder>/test-output"
   The last line should say RESULT: PASSED. Then read test-output/report.md and summarize it for me in a couple of sentences. If it fails, show me the error and check the Troubleshooting section (16) of SKILL-REFERENCE.md.

5. Fonts and Photoshop: the test design uses the free Google Font "Jost". Run
   node "<skills folder>/html-to-psd/scripts/install_fonts.js" "<this kit folder>/test-output"
   which only lists what's missing and changes nothing. If Jost is missing, tell me what would be downloaded and installed, and only run it again with --install if I say yes. Then open the test PSD with
   node "<skills folder>/html-to-psd/scripts/open_in_photoshop.js" "<this kit folder>/test-output/contract-sample.psd"
   It should show two artboards, "Front" and "Back".

6. Finish by telling me in plain words that it's installed, and that I should start a NEW Code session in the folder with my own design and ask something like "turn flyer.html into a layered Photoshop file for our designer."

Don't change anything outside the skills folder, the test-output folder, the Node.js installer download (only with my OK) and (only with my OK) my personal fonts folder. If anything is unclear or goes wrong, stop and ask me rather than guessing.
