Article-FX Kit

43 self-contained, zero-JavaScript HTML components for rich editorial articles.

Diagrams · pull-quotes · timelines · flip-cards · checklists · stat blocks — each a single copy-paste block that works anywhere HTML does.

No build step. No dependencies. No JavaScript. Just CSS and SVG/SMIL — so it survives sanitizers, innerHTML injection, and CMS blocks that strip <script>.

---

Install

As a Claude Code skill (let the AI build your article)

One command — copies the skill into your Claude Code skills directory:

npx degit albertocolchero/article-fx-kit/skills/article-fx ~/.claude/skills/article-fx

…or just paste this to Claude Code and let it do it:

Install the article-fx skill from github.com/albertocolchero/article-fx-kit into ~/.claude/skills, then use it to turn my draft into a rich WordPress article.

Then in any session: "Use the article-fx skill to make this blog post visual." The model reads your draft, picks components, and returns paste-ready blocks. Works in Cursor/Windsurf too — point them at skills/article-fx/SKILL.md.

As a component library (use the HTML directly)

# vendor a copy into your project (no git history):
npx degit albertocolchero/article-fx-kit my-article-fx

# or clone it:
git clone https://github.com/albertocolchero/article-fx-kit.git

No Node? Download the ZIP and unzip. Then open index.html to browse all 43 components in a mobile preview.

Quick start

1. Open index.html and pick a component, or use the picker in USAGE.md.
2. Open its file in components/ (e.g. components/12-pyramid.html).
3. Copy everything between the <!-- wp:html --> and <!-- /wp:html --> markers.
4. Paste into your CMS:
   • WordPress (Gutenberg): a Custom HTML block.
   • Ghost / others: an HTML card.
   • Static site: directly into the page.
5. Replace the placeholder copy with your content. Preview on mobile. Publish.

There is nothing to npm install.

Why it exists

Most component libraries assume a React/Tailwind build pipeline. But a huge amount of the web is long-form articles pasted into a CMS, where you often can't run JavaScript. Article-FX is built for exactly that:

• Zero <script> — survives sanitizers and innerHTML.
• Self-contained — each block inlines its own scoped <style>. No global CSS to install.
• Mobile-first — designed at 360px up; text stays outside tiny shapes.
• Accessible — every animated block honours prefers-reduced-motion.
• Themeable by find-and-replace — one small token palette in tokens.css.

What's inside

43 components across six families. Full picker + decision tree in USAGE.md.

Family	Components
Diagrams / structure	stack, iceberg, radial, timeline, pyramid, venn, constellation, 2×2 grid, concentric circles, process flow, anatomy callout, orbit
Contrast / comparison	toggle-compare, diagnostic table, fact-vs-myth, tab switcher, mini-FAQ
Reveal / interactive (CSS-only)	flip cards, tap-to-expand, step-by-step
Numbers / scale	counter, stat callout, spectrum scale
Editorial / rhythm	pull-quote, highlight, divider, definition card, quote stack, question callout, footnote aside, citation card, glossary strip, section opener, tag cloud, image + caption
Practical	warning boxes, checklist, key-takeaways, progress track, CTA card, stack cards

Design tokens

Components inline their own values, but all draw from one palette documented in tokens.css:

--fx-ink:   #06060b;   /* page background */
--fx-cream: #e8e4dd;   /* body text */
--fx-gold:  #c9a84c;   /* accent */

Default theme is a warm gold-on-near-black. To reskin, find-and-replace those hex values across components/.

Constraints (the rules that keep it portable)

Constraint	Why
No <script>	Survives sanitizers and innerHTML injection
CSS-only or SVG/SMIL animation	Only reliable path inside a CMS block
Self-contained scoped <style> per block	Plug-and-play, no global CSS
No position: fixed	Would break scrolling inside embedded web views
No :has()	Uneven support in older web views; uses ~ sibling selectors
Mobile-first 360px	Where most readers are
prefers-reduced-motion respected	Accessibility

Contributing

Contributions are very welcome — this kit grows one component at a time. Good first contributions: a new component (zero-JS, self-contained, reduced-motion), a theme variant, accessibility fixes, docs. See CONTRIBUTING.md.

License

MIT — do anything you want, just keep the notice.