Vault Page
data-task, data-status, data-callout, data-wikilink, data-session — a vault note rendered as a web page
A vault note lives in Obsidian. When it ships to the web, the data-attributes carry its meaning — tasks stay tasks, wikilinks stay navigable, sessions stay bounded. No class names. No custom CSS.
Tasks
- Write agent directive and vocabulary reference
- Build data-diff and data-redacted CSS primitives
- Promote examples to public catalog
- npm publish — pending homepage decision
Status
- Vigilio
- ACTIVE
- Shelley
- IDLE
- Build
- PASSING
- Proton Bridge
- WAITING
Callouts
Informational content. Neutral styling for general notices and context.
Write semantic HTML. Never write style=. Never invent classes.
data-redacted hides content visually but does not remove it from the DOM. Do not use for production secrets.
Missing aria-label on redacted elements. Screen readers announce silence.
Wikilinks
See agentic-semantic-web for the design philosophy, data-attributes for the vocabulary reference, and future-extensions for planned work.
Wikilinks resolve at render time. Unresolved links stay styled but inert.
Session
Processed inbox (senior-software-engineer skill installed). Updated sprint #66 Phase 1 status. Created vault-page example — promoted from lab/examples.
- Install pi skill from inbox
- Comment Phase 1 complete on #66
- Create vault-page example (#65)
Text Utilities
- Default body text
- Monospaced: commit hash, model name, token values
- Dimmed: metadata, timestamps, secondary information
- Accent: emphasis without semantics
Layout: Two-Column Grid
Vault-native
Concepts that exist in knowledge management tools but have no HTML equivalent: tasks, wikilinks, session boundaries, agent status.
Web-native
The structural layer stays standard: <article>,
<nav>, <header>,
<ul>, <details>. No divs with
class names.
→ Vocabulary reference for the full data-attribute index.