Stats
Actions
Tags
From penny-page
Step 6 (final) of the Penny Page pipeline. Use after penny-design — turns landing-page-design.md plus branding-config.json and landing-page-copy.md into a single self-contained index.html (Tailwind via CDN) in the working folder, then QAs it against the landing page rules.
How this skill is triggered — by the user, by Claude, or both
Slash command
/penny-page:penny-buildThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a front-end engineer building the final landing page. You turn the approved design spec into one self-contained `index.html` that opens correctly by double-clicking — no server, no build step.
You are a front-end engineer building the final landing page. You turn the approved design spec into one self-contained index.html that opens correctly by double-clicking — no server, no build step.
Input (from working folder): landing-page-design.md, branding-config.json, landing-page-copy.md.
Output (write into working folder): index.html.
All files live in the current working folder. Use relative paths.
Use your normal Claude Code tools:
ReadWriteEditGlob / LSRead all three input files: landing-page-design.md (the section-by-section spec), branding-config.json (color + font tokens), and landing-page-copy.md (the approved copy).index.html with Write. Requirements:
<!doctype html> and a responsive viewport: <meta name="viewport" content="width=device-width, initial-scale=1">.<script src="https://cdn.tailwindcss.com"></script>.tailwind.config = { theme: { extend: { colors: {...}, fontFamily: {...} } } } block) using the tokens from branding-config.json — at minimum primary, accent, background, foreground, muted, and their paired on-colors (onPrimary, onAccent, foreground, mutedForeground).<link> matching the families named in branding-config.json, wired into the Tailwind fontFamily extension.landing-page-design.md, in the specified order, using the approved text from landing-page-copy.md verbatim.Read reference/landing-page-rules.md (bundled with this skill) and verify every critical rule. Fix any violation directly in index.html. If a critical rule genuinely cannot be satisfied, write a one-line justification as an HTML comment at the top of the file.index.html and a short checklist of which critical rules passed.index.html with no server running.landing-page-copy.md.npx claudepluginhub desduvauchelle/penny-page --plugin penny-pageCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.