Markdown-to-HTML Brand Theme with Contrast Checks
Turns your brand colors and fonts into a contrast-checked CSS theme and saved config that every Markdown-to-HTML export reuses.
Before & after
Same prompt, same agent — the only difference is the skill.
That's a good idea to establish a design system. You'd want to think about your primary and accent colors, decide on fonts for headings and body text, and consider what overall design style fits your brand. Do you know which fonts you prefer? What colors are you thinking? Once we nail those details, we could create some basic CSS or design tokens. This will help keep things consistent going forward. What's your vision for how things should look?
ONBOARDING WIZARD (10 Questions) 1. Primary color: #2563EB 2. Accent color: #F59E0B 3. Heading font: Inter 4. Body font: Open Sans 5. Design style: Minimal 6. Default output directory: ./design-exports 7. Syntax highlighting: One Dark 8. Table of contents: Left sidebar 9. Company name: Acme Inc 10. Logo: (skipped) GENERATED CSS CUSTOM PROPERTIES --primary-hsl: 217 91% 60% --primary-rgb: 37 99 235 --accent-hsl: 38 92% 50% --accent-rgb: 245 158 11 --heading-font: Inter, sans-serif --body-font: Open Sans, sans-serif --bg-light: #FFFFFF --text-primary: #1F2937 --text-muted: #6B7280 CONTRAST VALIDATION Body text on white: 13.2:1 (AAA pass) Accent on white: 5.8:1 (AA pass) Muted on white: 5.1:1 (AA pass) STORAGE Saved to: ./.markdown-html/config.json Applies to: All markdown-html conversions Override: Set MARKDOWN_HTML_NO_CONFIG=1 to skip
About this skill
Your Markdown exports either look like default browser styles, or someone pasted the brand orange into the link color and now half the text fails contrast. This skill turns your brand colors, fonts, and style into one checked theme. Every later HTML export reuses it.
What it does
- Computes WCAG 2.2 contrast for every text and background pair: body, muted, headings, links, code, highlights, and focus ring. It shows the actual ratios, not guesses.
- Darkens or lightens brand colors that fail while keeping the hue. The original hex stays in decorative roles so the brand is still recognizable.
- Derives 12 CSS custom properties in HSL, plus typography variables tuned to an editorial, technical, minimal, or playful preset.
- Styles every element Markdown produces: code blocks, tables, blockquotes, footnotes, task lists, TOC, and print.
- Checks your syntax-highlighting theme against the code background and fixes the usual failure, which is low-contrast comments.
- Writes a config with clear precedence: project settings first, then global settings, then built-in defaults. It also documents a bypass switch.
What you get
A contrast report, a config.json, and a theme.css ready to save. Any defaults it had to assume are clearly labeled so you can change them.
Best for
Developers, technical writers, and consultants who publish reports, docs, or handouts from Markdown and want them on-brand and readable.
SKILL.md preview
---
name: markdown-html-brand-theme
… (sign up to view the full skill)More development skills
View all Development skills →CodeTour Walkthrough File Builder
Writes a valid CodeTour .tour file for your repo: persona-targeted steps anchored to verified file paths and line numbers.
Code-Accurate Docs: Docstrings, JSDoc, OpenAPI Specs
Docstrings, JSDoc/TSDoc, OpenAPI specs, and quickstart guides written from your real code, covering error paths and edge cases.
Markdown to Single-File HTML (Docs, Reviews, Slides)
Turns markdown into one offline-safe HTML file laid out as a document, diff review, or slide deck, with a fidelity report.
Release Changelog from Commits and PRs
Turns a commit range or merged PRs into a release changelog with breaking changes, migration steps, and user-facing wording.