Claude Skills

docx-to-citypage

Turns a City Page Builder Word .docx into a clean, optimized #pagebuilder HTML block — auto-detects sections (H1 → Section 1, each H2 → new section), pairs images into 40% two-column rows with alternating sides, handles infographics, CTA buttons, FAQ accordions + JSON-LD, and preserves every hyperlink via a manifest read straight from the docx.

makeslider

Turns a slider-content Markdown file (one ## Card block per card, with Image URL / Alt / Title / Description / Bullets) into a self-contained card-slider HTML block — <style> + scoped markup + <script>, scoped under .cards-slider-scope with no external dependencies. Pastes straight into a WordPress Custom HTML block or a GTM Custom HTML tag. Each build gets a unique SLIDER_ID so multiple sliders can coexist on one page.

service-package

Turns a service-package source — a content.md, a photo of a printed pricing sheet, or a whole directory of them — into a finished, styled HTML pricing card matching a named template. Reads the source with vision (no OCR dependency), transcribes every section, price, bullet, credit line, and totals panel, and emits a paste-ready block with the template's <style> copied verbatim. Templates live in templates/ (template-1 = the Moser cremation / funeral pricing card); add more by dropping a new templates/<name>.html.

How to install

1. Locate your skills folder

Claude Code loads skills from a .claude/skills/ folder. Use the project-level one (inside your repo) to share it with a project, or the global one in your home directory to make it available everywhere.

• Project: <your-repo>/.claude/skills/
• Global: ~/.claude/skills/ (Windows: %USERPROFILE%\.claude\skills\)

2. Unzip into a named folder

Extract each zip so the files live in a folder named after the skill (the folder name is the skill name). You should end up with:

.claude/skills/docx-to-citypage/
├── SKILL.md
├── extract.js
├── template.css
├── package.json
├── package-lock.json
└── .gitignore

.claude/skills/makeslider/
├── SKILL.md
├── make-slider.js
└── samplecontent.md

.claude/skills/service-package/
├── SKILL.md
├── samplecontent.md
└── templates/
    └── template-1.html

3. Install dependencies (docx-to-citypage only, one time)

The docx-to-citypage extractor needs mammoth (which also provides jszip). From inside that skill folder:

cd .claude/skills/docx-to-citypage
npm install

Requires Node.js (18+, tested on v24). makeslider has zero dependencies — no npm install needed, just Node. service-package needs nothing at all — it runs entirely in the agent (no Node, no install).

4. Use them

Restart Claude Code (or reload the window) so it picks up the new skills, then invoke either one:

/docx-to-citypage "C:\Users\XXX\Downloads\City Smith-Corcoran Funeral Homes - Palatine, IL.docx"

Point it at your .docx and it writes a <cityname>.html next to the document.

/makeslider slidercontent.md

Point it at your slider-content Markdown and it writes a slider-output.html in the working directory. See the bundled samplecontent.md for the card format.

/service-package template-1 "C:\Users\XXX\Downloads\Some Cremation Package.jpg"

Pass a template name and a source — a package image, a content.md, or a directory of them. It transcribes the content into the chosen template and writes a slugified <package-name>.html. See the bundled samplecontent.md for the Markdown format, and add new card styles by dropping a templates/<name>.html into the skill folder.

5. Apply the brand styling (docx-to-citypage)

The page is built with neutral default styling. To match the client's brand, send a follow-up message with the fonts and colors — Claude applies them to the page's CSS variables. Paste a prompt like this (edit the values per client):

Heading font is "Libre Caslon Text", serif
Heading Color is rgba(69, 85, 96, 1);
Content font is Montserrat, sans-serif
Content font-size: 16px

button font is Montserrat, sans-serif;
button background-color rgba(181, 17, 63, 1);
button font-size: 16px
border radius is 0
button text color: #ffffff;
hover background is  rgba(163, 10, 53, 1)
hover text color is #ffffff;

You can also include a border and box-shadow line for the button if the brand uses them.