Bloom

Skill SunnyDevendranadh/Bloom/.claude/skills/bloom

Per-session sticky mode that makes markdown bloom into rich, self-contained .html artifacts. Activate /bloom, deactivate /bloom-off. Once on, stays on for the session.From its SKILL.md

Install

npx -y skills add SunnyDevendranadh/Bloom --skill bloom

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

5.3 KB, ~1.5k tokens by cl100k_base, as published. Nobody here has run it

Bloom — Self-Contained HTML Artifact Skill

Produce self-contained .html files as agent output. Once activated, every substantial artifact blooms from flat markdown into a browsable .html file.

Bloom Mode

Per-session, sticky. Activates on /bloom, /bloom-on, /bloom-mode, or phrases "bloom on", "let it bloom", "bloom mode on", "activate bloom", "go bloom". Auto-activates if .bloom file exists at repo root. Deactivates on /bloom-off, /no-bloom, "bloom off", "stop bloom". On first activation: confirm mode + deactivation command in plain text. No HTML splash screen. Off by default at session start; most recent toggle wins.

Produces HTML for: reports, reviews, comparisons, docs, plans, explainers, diagrams, decks, timelines, triage boards, editors, glossaries — anything beyond a few sentences of structured markdown. Reply with a single plain-text path line (e.g., Wrote ./bloom/sprint-44-status.html). Never dump HTML source into chat.

Stays plain text for: one-liners, tool status, errors, short questions, code edits, commit/PR metadata, shell output. Rule of thumb: actionable in under 5 seconds → plain text; skim-later → HTML.

Companion rule

Reserved .md files (README.md, CLAUDE.md, AGENTS.md, CONTRIBUTING.md, CHANGELOG.md, LICENSE, paths under .github/, .factory/, .cursor/, .windsurf/, .continue/, .claude/): write both the canonical .md (source of truth) AND a companion .html next to it that uses the full design system and interactivity. Non-reserved docs default to .html primary unless user asks for markdown.

Output location

Companion: alongside original (README.md → README.html)
Free-standing: ./bloom/<date>-<slug>.html (create ./bloom/ if needed)

Design System

:root {
  --ivory:    #FAF9F5;  --slate:    #141413;
  --clay:     #D97757;  --oat:      #E3DACC;
  --olive:    #788C5D;  --rust:     #B04A3F;
  --gray-100: #F0EEE6;  --gray-300: #D1CFC5;
  --gray-500: #87867F;  --gray-700: #3D3D3A;
  --white:    #FFFFFF;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

--clay=accent/CTA, --olive=success, --oat=warm fill, --rust=danger, --slate=strong text, --gray-500=muted, --gray-300=borders, --gray-100=subtle fills.

Construction Rules

Single file — All HTML/CSS/JS in one .html. No external deps, CDN, or build step. Works via file://.
CSS custom properties — Use var(--clay) etc. Never hard-code hex in component styles.
Semantic HTML — <header>, <main>, <section>, <article>, <nav>, <details>, <figure>, <table>, <dl> over bare <div>.
Inline JS only — Max ~60 lines. No frameworks or imports.
Responsive — max-width 860–1120px, clamp() type, breakpoints at 640px and 960px.
Export — "Copy as markdown/JSON" with Clipboard API + execCommand('copy') fallback on editor artifacts.
Print-friendly — Core content readable without JS. <details> over JS toggles. Print styles hide toolbars.
Accessible — aria-label on SVGs, one <h1>, no skipped levels, visible focus, keyboard nav.
No placeholders — Real, specific content only. No Lorem ipsum or TODO stubs.
Viewport meta — Always <meta name="viewport" content="width=device-width, initial-scale=1">.
Progressive enhancement — All text/structure visible without JS.
No dialogs — No alert(), prompt(), confirm(). Use inline toasts.

Security: No external deps (S1). No eval/Function/string-setTimeout (S2). No innerHTML with untrusted content (S3). No fetch/XHR/WebSocket (S4). CSP-compatible — addEventListener only (S5). No executable data URIs (S6). Sanitize clipboard — textContent, not innerHTML (S7). No javascript: URIs (S8).

HTML Skeleton

<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>[Specific title]</title><style>
:root{--ivory:#FAF9F5;--slate:#141413;--clay:#D97757;--oat:#E3DACC;--olive:#788C5D;--rust:#B04A3F;--gray-100:#F0EEE6;--gray-300:#D1CFC5;--gray-500:#87867F;--gray-700:#3D3D3A;--white:#FFF;--serif:ui-serif,Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--ivory);color:var(--gray-700);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;padding:56px 24px 120px}.page{max-width:860px;margin:0 auto}</style>
</head><body><div class="page"><!-- semantic content --></div>
<script>/* addEventListener only; no eval, no innerHTML with user data */</script>
</body></html>

Self-check: Substantial artifacts → .html file (not inline, reserved .md companions updated too) • Free-standing under ./bloom/ (kebab-case) • Trivial answers stay plain text • Deactivation triggers honored before responding

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.