Plan
ID:SPEC-001Status:accepted

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

TierScopeMaintained byInstallExamples
CoreUniversal primitives, ships with refrakt.mdrefrakt.md teamBuilt-in, always availablehint, tabs, figure, datatable, budget
Official packagesDomain-specific rune sets, maintained by refrakt.mdrefrakt.md teamnpm install @refrakt-md/...@refrakt-md/landing, @refrakt-md/storytelling
Community packagesDomain-specific rune sets, maintained by third partiesCommunity authorsnpm install @refrakt-community/...@refrakt-community/dnd-5e, @refrakt-community/screenplay
LocalPer-project declarationsProject authorConfig onlyA 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

RuneAliasesPurpose
hintcallout, alertContextual message (note, warning, caution, check)
detailsCollapsible content with summary label
figureImage with caption
sidenotefootnote, marginnoteMargin note content
annotateMain content with margin annotations
pullquoteStyled excerpt for visual emphasis
textblockStyled block of text (lead, aside, boxed)
mediatextText alongside media layout
revealProgressive disclosure steps
conversationdialogue, chatSpeaker-attributed dialogue
embedAuto-detected media embeds (YouTube, Vimeo, Twitter, CodePen, Spotify)
galleryMulti-image container with grid/carousel layout and lightbox
statmetricKey metric display — big number with label and optional trend indicator

Navigation & Structure

RuneAliasesPurpose
gridcolumnsMulti-column layout
tabsTabbed content panels
accordionfaqCollapsible sections (FAQ support)
toctable-of-contentsAuto-generated table of contents
breadcrumbBreadcrumb navigation path
navNavigation groups with page references
layout / regionPage layout definitions and named content blocks
iconInline SVG from theme icon registry

Data & Code

RuneAliasesPurpose
datatabledata-tableInteractive table with sorting, filtering, pagination
chartData visualization from table data
diagramMermaid, PlantUML, ASCII art diagrams
mathequation, formulaMathematical notation via KaTeX/LaTeX syntax
budget3-level cost breakdown with auto-calculated totals
codegroupLanguage-tabbed code blocks
compareSide-by-side comparison panels
diffBefore/after code comparison
sandboxIsolated HTML/CSS/JS with optional framework loading
formcontact-formInteractive 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.

RuneAliasesPurpose
heroHero section with title, subtitle, action buttons
ctacall-to-actionCall-to-action block with headline and buttons
bentoBento grid layout with sized cells
featureFeature section with icon/name/description items
stepsStep-by-step process visualization
pricingPricing tiers with feature lists
testimonialreviewCustomer testimonials with attribution
comparisonversus, vsFeature comparison grid with positive/negative indicators

@refrakt-md/docs (3 runes)

Developer documentation. API references, code documentation, changelogs.

RuneAliasesPurpose
apiendpointAPI endpoint with method, parameters, request/response
symbolCode construct documentation (functions, classes, types)
changelogVersioned change history with categorized entries

@refrakt-md/learning (8 runes)

Structured educational and instructional content. Courses, tutorials, training materials, how-to guides, recipes.

RuneAliasesPurposeSchema.org
howtohow-toStep-by-step instructions with tools/materialsHowTo
recipeIngredients, steps, chef tips — a specialised instructional format for foodRecipe
conceptdefinitionTerm definition with explanation and related conceptsDefinedTerm
exercisePractice problem with prompt, hints, and revealable solution
quizAssessment with questions, answer options, and scoringQuiz
glossaryCollection of terms with definitions, auto-linked across the siteDefinedTermSet
prerequisiteDeclares dependencies between content ("complete X before this lesson")
objectivelearning-outcomeLearning 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.

RunePurpose
characterStructured character profiles scaling from NPC sketch to full protagonist
realmPlace cards with atmosphere and sensory detail
factionGroups with goals, resources, and relationships
loreWorldbuilding knowledge with spoiler support
plotNarrative structure with trackable story beats
bondConnections between entities, relationship map data
storyboardVisual panels with captions for sequential storytelling

@refrakt-md/places (3 runes)

Places, events, and journeys. Geographic and time-based real-world content.

RuneAliasesPurposeSchema.org
eventEvent with speakers, agenda, venue, registrationEvent
mapMap pins with locations and descriptionsPlace
itineraryTravel/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.

RuneAliasesPurposeSchema.org
castteamPeople entries with roles and photosPerson
organizationbusinessOrganization with logo, links, profilesOrganization
timelineDated milestones with descriptionsItemList
partnerclientLogo grid of partners, clients, or investors with optional links
jobpostingJob listing with title, department, location, type, requirementsJobPosting

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.

RuneAliasesPurpose
swatchInline color chip
paletteColor system with groups and scales
typographyFont specimens with weights
spacingSpacing, radius, and shadow tokens
previewshowcaseComponent 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:

RunePurposeSchema.org (varies by type attribute)
trackSingle media item — song, podcast episode, audiobook chapter, talkMusicRecording / PodcastEpisode / AudioObject / VideoObject
playlistOrdered collection — album tracklist, podcast feed, video series, audiobookMusicPlaylist / PodcastSeries / ItemList
albumGrouped release — music album, podcast season, video season, lecture seriesMusicAlbum / PodcastSeason / TVSeason
artistCreator profile — musician, podcaster, narrator, filmmaker, speakerMusicGroup / 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:

RunePurposeSchema.org
videoSelf-hosted video with poster image, captions, subtitles, responsive sizingVideoObject
audioSelf-hosted audio with waveform visualization, chapters, transcriptAudioObject

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

PackageRunesAudience
Core (built-in)~30Everyone
@refrakt-md/marketing8Marketing sites, product pages
@refrakt-md/docs3Developer documentation
@refrakt-md/learning8Courses, tutorials, training materials
@refrakt-md/storytelling7Writers, game masters, worldbuilders
@refrakt-md/places3Travel, events, local guides
@refrakt-md/business5Company sites, agency portfolios
@refrakt-md/design5Design systems, component libraries
@refrakt-md/media6Music, 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

Relationships