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.

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 the zip so the files live in a folder named docx-to-citypage (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

3. Install dependencies (one time)

The extractor needs mammoth (which also provides jszip). From inside the skill folder:

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

Requires Node.js (18+, tested on v24).

4. Use it

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

/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.

5. Apply the brand styling

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.