---
name: render-dock-view
version: 1.2.0
description: "Render an interactive document from a Dock's structured MiraDock artifacts."
---

# Render Dock View

## Purpose

Use this skill when a human gives you a Dock URL or slug and asks you to render it as an interactive, reflowing document in your own environment. MiraDock serves structured Dock content. You render the experience, run your own inference, and pay your own model costs. This is Mode B for MiraDock Dock views.

The viewer can run in Claude, Codex, ChatGPT, Cursor, or another agent environment that can fetch HTTPS resources and create local UI.

## Input

Accept a Dock URL or a Dock slug. Extract the slug from paths such as `/w/{slug}` or use the supplied slug directly.

## Public Read Path

1. Fetch `GET https://miradock.com/w/{slug}/manifest.json` over plain HTTPS. Treat it as the single entry point for public Dock rendering.
2. Read the `dock` object, the public `artifacts` array, `design_tokens`, `assets`, `render_contract`, and `content_hash`.
3. Each artifact entry exposes `html_url`, `markdown_url`, `type`, and the Dock owner handle derived as `dock.owner_handle`.
4. If `design_tokens` is present, map the DTCG token object to CSS variables, theme values, or component props before inventing visual defaults.
5. If `assets` is non-empty, treat it as the approved asset catalog. Use catalogued `url`, `alt`, and `type` values exactly.
6. For `web_page` and `markdown_file` artifacts, fetch each markdown mirror with `GET https://miradock.com/a/{slug}.md` only when you need that artifact body.
7. For `micro_db` artifacts, treat the manifest entry as structured tabular data. If you also fetch the markdown mirror, preserve the table values exactly as presented.
8. If `https://miradock.com/w/{slug}/manifest.json` is unavailable, fetch the thin fallback `GET https://miradock.com/w/{slug}/index.json` and render from its public artifact list.

## Private Or Shared Read Path

Use OAuth 2.1 with Dynamic Client Registration against the MCP server at https://miradock.com/mcp. The public path uses plain HTTPS because https://miradock.com/mcp is 401-gated for private and shared artifact reads. After authorization, list and read artifacts through the MiraDock MCP tools available to your registered client.

## Rendering Guidance

Cache your rendered output by the manifest `content_hash`. Re-render only when the hash changes.

Send `If-None-Match` when you revalidate the manifest and any artifact markdown mirror. Keep your cached render when the server returns `304`.

Assemble one interactive document that reflows to the viewport.

Give readers cross-artifact navigation so they can move between sections without losing context.

Render `micro_db` data as a sortable and filterable table when your environment supports those controls.

Use only catalogued assets when `render_contract.assets_policy` is `only-approved`. Do not introduce uncatalogued images, SVGs, icons, or media in that mode.

Use only `design_tokens` when `render_contract.tokens_policy` is `only-approved`. Map approved tokens to CSS variables or component props and avoid unapproved color, spacing, typography, or radius values in that mode.

Obey `render_contract.level`: `strict` means follow the manifest, tokens, assets, and source text tightly; `guided` allows layout choices that preserve the Dock's content and constraints; `open` allows broader presentation choices while preserving source truth.

Follow the `render_contract` booleans: cite sources when `cite_sources` is true, do not add unsupported facts when `allow_invention` is false, and preserve fetched text verbatim when `preserve_text_verbatim` is true.

Link each rendered section back to its source artifact `html_url`.

## Worked Example

A human asks: Render the Dock `solstice-beverage-co`.

1. Fetch `https://miradock.com/w/solstice-beverage-co/manifest.json`.
2. Read the returned Dock metadata, design tokens, asset catalog, render contract, content hash, and artifact list.
3. For each `web_page` or `markdown_file` artifact, fetch its markdown mirror, for example `https://miradock.com/a/{artifact-slug}.md` after replacing `{artifact-slug}` with the artifact slug.
4. Convert each artifact into a section in one responsive document.
5. Apply `design_tokens` to CSS variables or component props before choosing fallback styling.
6. Use only catalogued assets when the render contract requires approved assets.
7. Add navigation that groups sections by artifact title and type.
8. Render any `micro_db` artifact as a table view with sorting and filtering controls where possible.
9. Put a source link on each section using the artifact's `html_url`.