catskill-preview

aniketpanjwani/catskill-preview

Design

About

SKILL.md

This skill converts markdown newsletters into styled HTML pages that match the Catskill Crew aesthetic. The preview uses design elements extracted from catskillcrew.com including: - **Colors:** Cream background (#F5EAD9), dark text (#3E3E3E), tan accents (#9A9082) - **Fonts:** Archivo for headings and body, Courier for buttons/monospace - **Dividers:** Hand-drawn woodcut-style animal illustrations (eagle, deer, fox, bear, rabbit, fish, owl, bird, snake) - **Layout:** 600px max-width, generous spacing, vintage/rustic aesthetic

The preview is for visual verification before sending - it shows how the newsletter will "feel" with proper branding applied.

Before routing, determine:

What does the user want?
- "preview the newsletter" → Preview existing markdown
- "convert to HTML" → Same as preview
- "refresh design" / "update design tokens" → Re-extract from website
- "download assets" → Re-download brand images
Is there a specific file?
- If user specifies a file, use that
- Otherwise, use the latest output/newsletter_*.md
Does the user want to see it in browser?
- Default: Yes, open via Playwright MCP
- If user says "just generate" → Create HTML only

Route to the appropriate workflow:

User Intent	Workflow
Preview newsletter / see how it looks	`workflows/preview-newsletter.md`
Refresh design / update styles	`workflows/extract-design.md`
Re-download brand assets	`workflows/download-assets.md`

**Most common usage:** User has written a newsletter and wants to see the preview.

User: "preview the newsletter"
→ Route to: workflows/preview-newsletter.md

The workflow will:

Find the latest newsletter markdown in output/
Convert to HTML using the template and design tokens
Open in browser via Playwright MCP
Take a screenshot for reference

## workflows/preview-newsletter.md Convert markdown to styled HTML and open in browser. This is the primary workflow.

workflows/extract-design.md

Re-extract design elements (colors, fonts) from catskillcrew.com using Playwright. Use when the website design has changed.

workflows/download-assets.md

Re-download brand assets (logo, divider images) from catskillcrew.com. Use when assets need refreshing.

## references/template-structure.md Documentation on the HTML template structure and CSS variables. Preview is successful when: - [ ] HTML file is generated at `output/newsletter_YYYY-MM-DD.html` - [ ] Page opens in browser showing styled newsletter - [ ] Colors match Catskill Crew brand (cream/tan/dark gray) - [ ] Divider images appear between sections - [ ] Typography feels right (Archivo font, uppercase headings)