{"id":"d1085196-87d5-49dd-aee2-be10d59cc915","slug":"ben8t-specobserver","name":"spec-observer","description":"Visualize markdown spec documents as an interactive, human-readable React UI. Use this skill whenever a developer asks to \"visualize a spec\", \"render my spec\", \"show my plan\", \"make this spec readable\", \"observe the spec\", \"spec observer\", or any request to turn one or more markdown planning/specification documents into a browsable, structured interface. Also trigger when the user has a complex markdown plan or specification and expresses frustration reading it, asks for a better way to navigate it, or wants an overview of a multi-file spec. Do NOT use for simple markdown rendering, README previews, or non-spec documentation viewing.","canonicalUrl":"https://www.xpersona.co/skill/ben8t-specobserver","sourceUrl":"https://github.com/Ben8t/SpecObserver","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"ben8t","label":"Ben8t","url":"https://github.com/Ben8t/SpecObserver"},"protocols":["OPENCLEW"],"capabilities":["you","view","copy"],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T01:12:19.219Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"Ben8t"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","label":"Crawlable docs","value":"6 indexed pages on the official domain","category":"integration","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true,"metadata":{}},{"factKey":"vendor","label":"Vendor","value":"Ben8t","category":"vendor","href":"https://github.com/Ben8t/SpecObserver","sourceUrl":"https://github.com/Ben8t/SpecObserver","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:12:19.220Z","isPublic":true,"metadata":{}},{"factKey":"protocols","label":"Protocol compatibility","value":"OpenClaw","category":"compatibility","href":"https://www.xpersona.co/api/v1/agents/ben8t-specobserver/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/ben8t-specobserver/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T01:12:19.220Z","isPublic":true,"metadata":{}},{"factKey":"traction","label":"Adoption signal","value":"2 GitHub stars","category":"adoption","href":"https://github.com/Ben8t/SpecObserver","sourceUrl":"https://github.com/Ben8t/SpecObserver","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T01:12:19.220Z","isPublic":true,"metadata":{}},{"factKey":"handshake_status","label":"Handshake status","value":"UNKNOWN","category":"security","href":"https://www.xpersona.co/api/v1/agents/ben8t-specobserver/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/ben8t-specobserver/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true,"metadata":{}}],"highlights":["2 GitHub stars","Trust evidence available"],"agentCard":{"name":"spec-observer","description":"Visualize markdown spec documents as an interactive, human-readable React UI. Use this skill whenever a developer asks to \"visualize a spec\", \"render my spec\", \"show my plan\", \"make this spec readable\", \"observe the spec\", \"spec observer\", or any request to turn one or more markdown planning/specification documents into a browsable, structured interface. Also trigger when the user has a complex markdown plan or specification and expresses frustration reading it, asks for a better way to navigate it, or wants an overview of a multi-file spec. Do NOT use for simple markdown rendering, README previews, or non-spec documentation viewing.","source":"GITHUB_OPENCLEW","sourceId":"github:1162910236","repository":"https://github.com/Ben8t/SpecObserver","documentation":"https://www.xpersona.co/skill/ben8t-specobserver/agent/ben8t-specobserver","protocols":["OPENCLEW"],"capabilities":["you","view","copy"],"languages":["typescript"],"install":{"command":"git clone https://github.com/Ben8t/SpecObserver.git","ecosystem":"git"},"examples":[{"kind":"example","language":"text","snippet":"┌─────────────────────────────────────────────────┐\n│ [search bar] [file tabs] │\n├──────────────┬──────────────────────────────────┤\n│ │ │\n│ Table of │ Content Area │\n│ Contents │ │\n│ │ ┌─ Section (collapsible) ─────┐ │\n│ • Phase 1 │ │ ## Heading │ │\n│ ○ Task 1 │ │ paragraph text... │ │\n│ ○ Task 2 │ │ │ │\n│ • Phase 2 │ │"},{"kind":"example","language":"text","snippet":"#### UI components to implement\n\nAll components are built inline in the single JSX file — no imports beyond React and lucide-react.\n\n1. **SpecObserver (root)**\n - State: active file, search query, collapsed sections set, active heading (scroll tracking)\n - Renders: SearchBar, FileTabs (if multi-file), Sidebar, ContentArea, StatusBar\n\n2. **SearchBar**\n - Full-text search across all sections\n - Filters the ToC and highlights matches in the content area\n - Keyboard shortcut: `Cmd/Ctrl + K` to focus\n\n3. **FileTabs**\n - Only shown when multiple spec files are loaded\n - Tab per file, shows filename\n - Click to switch active document\n\n4. **Sidebar (Table of Contents)**\n - Nested list mirroring the heading hierarchy\n - Click to scroll to section\n - Active section highlighted based on scroll position\n - Indentation: `h2` = root, `h3` = indented, `h4` = double-indented\n - Collapsible on mobile (hamburger toggle)\n\n5. **ContentArea**\n - Renders all sections for the active file\n - Each section is a `CollapsibleSection`\n\n6. **CollapsibleSection**\n - Click heading to expand/collapse\n - Chevron indicator (▶ collapsed, ▼ expanded)\n - Default state: `h2` expanded, `h3+` collapsed (configurable)\n - Smooth height animation via CSS transition\n - Nested sections collapse with their parent\n\n7. **MermaidBlock**\n - For code blocks tagged as `mermaid`\n - Render using a lightweight inline SVG approach:\n - Include mermaid rendering via a `