Community Runes — Specification
Package system, namespacing, rune extension, ecosystem architecture
Overview
Community runes are published packages that add domain-specific content types to refrakt.md. They go through the full rendering pipeline — parsing, rune transform, identity transform, theming — and are treated identically to core runes by the system. The only difference is where the rune definition comes from.
Community runes exist because some content types are too domain-specific for the core library but too widely shared to be local rune declarations. A D&D 5e stat block is used by thousands of game masters. A screenplay scene heading is used by thousands of screenwriters. These deserve proper packages with transforms, theme integration, inspector fixtures, and documentation.
Rune Tiers
| Tier | Scope | Maintained by | Install | Examples |
|---|---|---|---|---|
| Core | Universal primitives, ships with refrakt.md | refrakt.md team | Built-in, always available | hint, tabs, figure, datatable, budget |
| Official packages | Domain-specific rune sets, maintained by refrakt.md | refrakt.md team | npm install @refrakt-md/... | @refrakt-md/landing, @refrakt-md/storytelling |
| Community packages | Domain-specific rune sets, maintained by third parties | Community authors | npm install @refrakt-community/... | @refrakt-community/dnd-5e, @refrakt-community/screenplay |
| Local | Per-project declarations | Project author | Config only | A custom product card, a pricing calculator |
All tiers produce runes that are indistinguishable to the rendering pipeline. A {% stat-block %} from a community package goes through the same parse → rune transform → identity transform → render chain as a {% hint %} from the core.
The @refrakt-md/ namespace signals official packages maintained by the refrakt.md team. @refrakt-community/ signals third-party packages. Both go through the same pipeline. The distinction is trust and maintenance commitment, not technical capability.
New Project Defaults
New projects include official packages relevant to their use case. "Starting a landing page" pre-installs @refrakt-md/landing. "Starting a docs site" pre-installs @refrakt-md/docs. Users can remove packages they don't need or add community packages. Core runes are always available and cannot be removed.
Package Inventory
Core (~27 runes, built-in)
Runes that nearly every refrakt.md project uses regardless of domain. These are content-type primitives — tools for structuring and presenting information, not tied to any specific audience.
Prose & Formatting
| Rune | Aliases | Purpose |
|---|---|---|
hint | callout, alert | Contextual message (note, warning, caution, check) |
details | — | Collapsible content with summary label |
figure | — | Image with caption |
sidenote | footnote, marginnote | Margin note content |
annotate | — | Main content with margin annotations |
pullquote | — | Styled excerpt for visual emphasis |
textblock | — | Styled block of text (lead, aside, boxed) |
mediatext | — | Text alongside media layout |
reveal | — | Progressive disclosure steps |
conversation | dialogue, chat | Speaker-attributed dialogue |
embed | — | Auto-detected media embeds (YouTube, Vimeo, Twitter, CodePen, Spotify) |
gallery | — | Multi-image container with grid/carousel layout and lightbox |
stat | metric | Key metric display — big number with label and optional trend indicator |
Navigation & Structure
| Rune | Aliases | Purpose |
|---|---|---|
grid | columns | Multi-column layout |
tabs | — | Tabbed content panels |
accordion | faq | Collapsible sections (FAQ support) |
toc | table-of-contents | Auto-generated table of contents |
breadcrumb | — | Breadcrumb navigation path |
nav | — | Navigation groups with page references |
layout / region | — | Page layout definitions and named content blocks |
icon | — | Inline SVG from theme icon registry |
Data & Code
| Rune | Aliases | Purpose |
|---|---|---|
datatable | data-table | Interactive table with sorting, filtering, pagination |
chart | — | Data visualization from table data |
diagram | — | Mermaid, PlantUML, ASCII art diagrams |
math | equation, formula | Mathematical notation via KaTeX/LaTeX syntax |
budget | — | 3-level cost breakdown with auto-calculated totals |
codegroup | — | Language-tabbed code blocks |
compare | — | Side-by-side comparison panels |
diff | — | Before/after code comparison |
sandbox | — | Isolated HTML/CSS/JS with optional framework loading |
form | contact-form | Interactive form from list-based field definitions |
@refrakt-md/marketing (8 runes)
Marketing sites, product pages, landing pages. If you're building a website that needs to sell, convert, or present a business, you need these. If you're writing docs or a blog, you don't.
| Rune | Aliases | Purpose |
|---|---|---|
hero | — | Hero section with title, subtitle, action buttons |
cta | call-to-action | Call-to-action block with headline and buttons |
bento | — | Bento grid layout with sized cells |
feature | — | Feature section with icon/name/description items |
steps | — | Step-by-step process visualization |
pricing | — | Pricing tiers with feature lists |
testimonial | review | Customer testimonials with attribution |
comparison | versus, vs | Feature comparison grid with positive/negative indicators |
@refrakt-md/docs (3 runes)
Developer documentation. API references, code documentation, changelogs.
| Rune | Aliases | Purpose |
|---|---|---|
api | endpoint | API endpoint with method, parameters, request/response |
symbol | — | Code construct documentation (functions, classes, types) |
changelog | — | Versioned change history with categorized entries |
@refrakt-md/learning (8 runes)
Structured educational and instructional content. Courses, tutorials, training materials, how-to guides, recipes.
| Rune | Aliases | Purpose | Schema.org |
|---|---|---|---|
howto | how-to | Step-by-step instructions with tools/materials | HowTo |
recipe | — | Ingredients, steps, chef tips — a specialised instructional format for food | Recipe |
concept | definition | Term definition with explanation and related concepts | DefinedTerm |
exercise | — | Practice problem with prompt, hints, and revealable solution | — |
quiz | — | Assessment with questions, answer options, and scoring | Quiz |
glossary | — | Collection of terms with definitions, auto-linked across the site | DefinedTermSet |
prerequisite | — | Declares dependencies between content ("complete X before this lesson") | — |
objective | learning-outcome | Learning outcome statement ("after this lesson you will be able to...") | — |
Audience: Online course creators, tutorial authors, technical educators, bootcamp instructors, corporate training teams, cooking course sites, documentation teams writing getting-started guides.
Implementation note: glossary (auto-linking terms across the site) and prerequisite (dependency graph between content) require build pipeline integration beyond standard rune transforms. These runes are simple to render individually but their full power — site-wide term linking and learning path visualisation — depends on cross-page awareness at build time.
Runes compose naturally within a lesson page: objective at the top declares what the student will learn, concept runes introduce new terminology, howto or recipe runes teach procedures, exercise runes provide practice, and a quiz at the end tests retention. A glossary page collects all concept definitions and auto-links terms wherever they appear across the site. prerequisite runes build a dependency graph between lessons that themes can render as a learning path.
@refrakt-md/storytelling (7 runes)
Writers, game masters, TTRPG players, worldbuilders. See the Storytelling Runes specification for full details.
| Rune | Purpose |
|---|---|
character | Structured character profiles scaling from NPC sketch to full protagonist |
realm | Place cards with atmosphere and sensory detail |
faction | Groups with goals, resources, and relationships |
lore | Worldbuilding knowledge with spoiler support |
plot | Narrative structure with trackable story beats |
bond | Connections between entities, relationship map data |
storyboard | Visual panels with captions for sequential storytelling |
@refrakt-md/places (3 runes)
Places, events, and journeys. Geographic and time-based real-world content.
| Rune | Aliases | Purpose | Schema.org |
|---|---|---|---|
event | — | Event with speakers, agenda, venue, registration | Event |
map | — | Map pins with locations and descriptions | Place |
itinerary | — | Travel/schedule planning with stops and timing | — |
Audience: Travel bloggers, city guide creators, event organisers, tourism sites, conference sites. Future candidates for this package: accommodation (hotel/Airbnb card with amenities), venue (restaurant or bar with hours and atmosphere).
@refrakt-md/business (5 runes)
Professional and organisational content. Company sites, agency portfolios, nonprofit pages, careers pages.
| Rune | Aliases | Purpose | Schema.org |
|---|---|---|---|
cast | team | People entries with roles and photos | Person |
organization | business | Organization with logo, links, profiles | Organization |
timeline | — | Dated milestones with descriptions | ItemList |
partner | client | Logo grid of partners, clients, or investors with optional links | — |
job | posting | Job listing with title, department, location, type, requirements | JobPosting |
Audience: Company about pages, agency portfolios, nonprofit sites, startup pitch sites, careers pages, investor relations. Team page, company history, partner logos, job listings.
@refrakt-md/design (5 runes)
Design systems and component libraries. For teams documenting their visual language.
| Rune | Aliases | Purpose |
|---|---|---|
swatch | — | Inline color chip |
palette | — | Color system with groups and scales |
typography | — | Font specimens with weights |
spacing | — | Spacing, radius, and shadow tokens |
preview | showcase | Component preview with theme toggle, viewport simulation, source view |
@refrakt-md/media (6 runes)
Time-based media content: music, podcasts, audiobooks, video, talks. Covers both metadata (describing media that lives on external platforms) and playback (embedding self-hosted media). embed in core handles third-party player widgets (YouTube, Spotify embeds). This package handles everything else.
Metadata runes — describe media with structured cards and schema.org output:
| Rune | Purpose | Schema.org (varies by type attribute) |
|---|---|---|
track | Single media item — song, podcast episode, audiobook chapter, talk | MusicRecording / PodcastEpisode / AudioObject / VideoObject |
playlist | Ordered collection — album tracklist, podcast feed, video series, audiobook | MusicPlaylist / PodcastSeries / ItemList |
album | Grouped release — music album, podcast season, video season, lecture series | MusicAlbum / PodcastSeason / TVSeason |
artist | Creator profile — musician, podcaster, narrator, filmmaker, speaker | MusicGroup / Person |
The type attribute on track, playlist, and album determines which schema.org type is generated and which attributes the AI suggests. A track with type="episode" generates PodcastEpisode schema and expects show, season, and episode number. The same rune with type="song" generates MusicRecording and expects artist and album.
Player runes — embed self-hosted media directly in the page:
| Rune | Purpose | Schema.org |
|---|---|---|
video | Self-hosted video with poster image, captions, subtitles, responsive sizing | VideoObject |
audio | Self-hosted audio with waveform visualization, chapters, transcript | AudioObject |
The distinction: you reference a track (metadata card with links to where you listen), you play a video or audio (embedded player in the page).
Audience: Band and artist sites, podcast sites, audiobook publishers, video creators, conference talk archives, record label catalogues, film portfolios, sound design showcases, DJ mix archives.
Summary
| Package | Runes | Audience |
|---|---|---|
| Core (built-in) | ~30 | Everyone |
@refrakt-md/marketing | 8 | Marketing sites, product pages |
@refrakt-md/docs | 3 | Developer documentation |
@refrakt-md/learning | 8 | Courses, tutorials, training materials |
@refrakt-md/storytelling | 7 | Writers, game masters, worldbuilders |
@refrakt-md/places | 3 | Travel, events, local guides |
@refrakt-md/business | 5 | Company sites, agency portfolios |
@refrakt-md/design | 5 | Design systems, component libraries |
@refrakt-md/media | 6 | Music, podcasts, video, audio content |
| Total | ~75 |
Package Structure
A community rune package is a standard npm package with a defined structure:
@refrakt-community/dnd-5e/
package.json
index.ts ← rune registration and exports
runes/
item.ts ← rune transform for {% item %}
item.schema.ts ← attribute validation schema
stat-block.ts ← rune transform for {% stat-block %}
stat-block.schema.ts
spell.ts
spell.schema.ts
encounter.ts
encounter.schema.ts
theme/
dnd-5e.config.ts ← identity transform config for all runes
dnd-5e.css ← default visual styling
assets/
icons/ ← SVG icons (damage types, schools of magic, etc.)
behaviors/
initiative.ts ← interactive behaviors (encounter tracker, dice roller)
fixtures/
item.md ← inspector fixtures for each rune
stat-block.md
spell.md
encounter.md
prompt/ ← optional: for third-party chat products
rune-descriptions.md ← AI prompt descriptions for third-party chat integration
README.md