Skip to content

Doc type

Websites

Your site, live on a board you can mark up.

A website doc puts a site’s pages on a board, live from its local dev server. Comment on any element and the agent learns which source file to edit; pick between versions of a section in the real layout.

InstallView on GitHub
"type": "website"

Pick a hero version in place. A section tied to a decision gets A B C keys beside it. Point at one to outline the section, pick it, and the page shows that version.

What it’s for

For sites that already run, and pages that don’t yet.

One board can mix live pages from the dev server and mockups of pages still to build.

  • Live pages

    Any dev server on a loopback port: Astro, Vite, Next and the rest, hot reload included.

  • Mockups

    A page that doesn’t exist yet, as an HTML screen file.

  • Section picks

    Two or three versions of a headline or a pricing table, shown in the real layout.

  • Breakpoints

    Every page at desktop, tablet and mobile width.

Features

What you can do on the page.

Edit the site and watch the board update

A page with a localhost URL shows the running dev server through bluedoc’s proxy. Save a source file and hot reload updates the page on the board.

Switch every page between desktop, tablet and mobile

Desktop, Tablet and Mobile resize every page, and it reflows because it really is that wide. A page’s title-bar icons resize that page alone.

Toggle Full page and Viewport

Full page grows each page to its whole height, so you pan over it. Viewport shows it in a window of the device’s height that scrolls, for sticky bars and scroll effects.

Jump to a section from the Pages panel

The Pages panel lists each page’s sections with the files they live in. Click one and the board pans to it.

Comment on an element and get its source file

In Point mode, click anything on a page. The change request carries the element’s selector, its section, the source files and the width you were looking at.

Open an old revision as its snapshot

bluedoc keeps a static copy of each live page per revision and width. An earlier revision shows that snapshot, labelled as one, never the live site posing as old.

Compare a page with an earlier revision

Compare puts the older revision left of the newer one at the same size; zoom and pan move both. A section whose content changed is outlined on both.

Open a live page in its own tab

The external-link key opens a live page at its dev server’s own URL, with hot reload and devtools, to try it for real.

Approve the site with your picks

Approve website lists each pick beside the agent’s recommendation and records the approval on this revision. The agent waits for it, then writes the picks into the source.

Works on every doc

Comments, revisions and approval, the same on every type.

See every shared feature

  • Follow a comment to Resolved

    Notes go from Pending to Open when sent, and to Resolved when the agent’s revision says it dealt with them.

  • Ask for more details

    Need more details marks a question and asks the agent what is missing before you pick.

How the agent uses it

The agent writes JSON. The server draws the page.

The agent reads the site, then adds one artboard per page with its sections, their selectors and source files. A section tied to a decision carries its variants.

npm run dev
python3 <skill>/scripts/build.py new website docs/site.bluedoc.json --title "Acme Fit site" --url http://localhost:4321/
python3 <skill>/scripts/serve.py open docs/site.bluedoc.json
acme-site.bluedoc.json · a page
{  "id": "home",  "title": "Home",  "device": "page",  "source": "src/pages/index.astro",  "sections": [    {      "id": "hero",      "title": "Hero",      "sel": "[data-bd=\"hero\"]",      "source": ["src/content/home.ts#hero", "src/components/Hero.astro"],      "decision": "hero-headline",      "variants": {        "a": [],        "b": [{ "sel": "[data-bd=\"headline\"]", "text": "Build the habit, one week at a time." }]      }    }  ]}

A page with a localhost url is shown live; without one it is a mockup file. The build checks that each source file exists.

Install

Pick your agent.

Each one installs the same skill from the GitHub repository.

claude plugin marketplace add andreiverdes/bluedoc
claude plugin install bluedoc@bluedoc

Inside a session the same commands are /plugin marketplace add andreiverdes/bluedoc and /plugin install bluedoc@bluedoc. Start a new session to load the skill.

Needs: Python 3.9 or later on PATH · git, for code reviews · gh, only to import GitHub review threads.

View on GitHub

Other doc types

Six more kinds of page.