blog-builderlisted

Build or upgrade a professional blog UI (blog hub + article reading experience) for any website or platform, following the Citely blog standard. Use when creating a blog from scratch, styling article HTML received from a CMS or Citely Connect, adding a table of contents / reading progress / typography system to articles, or auditing an existing blog against SEO/GEO and reading-UX standards.
stephenpham68/citely-blog-kit · ★ 0 · Web & Frontend · score 72

Install: claude install-skill stephenpham68/citely-blog-kit

# Blog Builder — Citely blog standard Build two surfaces to a defined quality bar: the **blog hub** (overview/index page) and the **article page** (reading UX). Everything is token-first and brand-agnostic: the standard fixes structure, hierarchy, and quality gates; the user's brand supplies color and type. ## When to use - The site has no blog, or has a bare "list of posts" that needs a real hub + reading UX. - Article HTML arrives from a CMS/API (e.g. Citely Connect) as bare tags and must be rendered beautifully. - The user asks for a TOC, reading progress, better typography, tables, dark mode, or mobile fixes on a blog. - Auditing an existing blog page against this standard (use `references/checklist.md`). ## When NOT to use - Marketing landing pages, docs sites, or e-commerce category pages — different information architecture. - Full CMS/backend design (storage, editor, publishing pipeline) — this skill covers the *reading* surfaces only. ## Required inputs (ask if missing) 1. **Brand color** (one hex). Derive the rest per `references/design-tokens.md`. Never invent a brand palette without asking. 2. **Font(s)** — a display/heading font and a body font (can be the same family). 3. **Site language** for all UI strings (labels, CTA, dates). Article content keeps its own language. 4. **Stack** — plain HTML/CSS, React/Next, Astro, Vue, PHP theme… The standard is stack-agnostic; templates are vanilla HTML/CSS/JS you translate to the stack. 5. **Content source** — where