Skip to content
cccskills
FreePublished on GitHub

boring-ui

Entry point for building with Boring UI (the @hachej/boring-* npm packages and shadcn registry blocks for apps with an AI agent inside, on the Pi agent harness). Use when a task mentions boring-ui, @hachej/boring-ui-kit, @hachej/boring-agent, @hachej/boring-files, boring-ui-blocks, PiChat, AgentWorkspace, AmbientChat, AppShell, or asks to "add an agent/assistant/chat to my app", "build an app with an agent inside", or "use the Boring kit". Explains the packages, the rules every change must follow, and which boring-ui skill to load next.

The English summary is being prepared. Showing the original description.

hachej/boring-ui

Run score Not tested

See how to install

Files included (1)

  • SKILL.md5.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Boring UI

Boring UI is a kit for putting an AI agent inside an app. It has two halves:

  • npm packages for the server and headless browser code.
  • shadcn registry blocks (React source copied into the app) for the UI.

The agent runs on Pi (@earendil-works/pi-durable). The app's server opens Pi's Harness; the kit adds agent definitions, tools and HTTP handlers around it.

Pick the next skill

The taskLoad
Create an app with an agent, or add an agent to an existing React/Node appbuild-agent-app
Install, update, restyle or check UI blocksadd-blocks
Give the agent tools, file access, approvals, questions, sub-agents or schedulesagent-capabilities

Packages

Keep all @hachej/boring-* packages on the same version. Pi packages are peers pinned to ~1.2.0.

PackageUse it for
@hachej/boring-ui-kitHeadless controllers, editors and viewers; the registry items under r/; the boring-ui-blocks command
@hachej/boring-agentdefineAgent (/agents), chat transport (/chat-transport), conversations (/conversations), present (/artifacts), file guard (/file-guard), approvals (/approval), questions (/ask-user), schedules (/schedule), memory (/memory/optchat)
@hachej/boring-filesThe workspace provider (/workspace), its journal (/journal, /sqlite), the browser revision provider (/revision) and its handler (/revision-handler), Node HTTP glue (/node-http)
@hachej/boring-executionVirtual Bash and Git (/virtual, /virtual-git), remote shell and file system adapters
@hachej/boring-feedbackIn-app feedback capture and delivery
@earendil-works/pi-durable, pi-ai, chordPi itself: Harness, createRegistry, defineTool, storage, NodeExecutionEnv, models, context

Main blocks: pi-chat (the conversation), pi-ambient (a floating bar over an existing site), pi-workspace (chat plus an artifact panel), pi-app (a whole agent page: sessions, chat, viewers), app-shell (one agent above any app, phone drawer and desktop panel). The full list is in registry/README.md.

Rules

Follow these on every change. They come from INVARIANTS.md and AGENTS.md.

  1. The host owns the Harness. The app's server opens and closes Pi's Harness, its storage, its models and its credentials. Kit packages never open one. Do not wrap Pi in a new engine, registry or scheduler; use Pi's public APIs (defineTool, defineExtension, registry.install, conversation.configure).
  2. The host owns policy. Authentication, who may open which conversation or file, budgets and model keys live in host code (the authenticate and resolve callbacks of the handlers). Never put a model key in browser code.
  3. One place for files. Each workspace has exactly one provider instance (createWorkspaceProvider). The agent's file tools (through createFileGuard), present, the viewers and the file tree all use that same instance. No second copy, mirror or sync.
  4. Use blocks, not hand-rolled UI. Install the registry blocks and customise them through their props (labels, icons, headerActions, artifactKinds, viewers, renderTool, …) and the shadcn theme tokens. Never edit an installed block file; npx boring-ui-blocks check fails on edited copies.
  5. Agent-written code never runs in the host process. An agent may run code only through its conversation's ExecutionEnv (a shell or sandbox). Do not import() or eval workspace content.
  6. Fictional data only in examples, fixtures, seeds and tests. Never use real people, credentials or customer data.

Where to read more

Verify

  • The kit version: npm view @hachej/boring-ui-kit version. Use it for every @hachej/boring-* package and every registry URL.
  • In an app with blocks: npx boring-ui-blocks check --design src passes.
  • In this repository: npm run check passes.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

add-blocks

Free

Find, install, update, check and theme Boring UI registry blocks (shadcn items such as pi-chat, pi-ambient, pi-workspace, pi-app, app-shell, viewers, file-tree, documents, feedback, windows) with the boring-ui-blocks command. Use when asked to "add a chat/agent block", "install pi-app", "upgrade/update the Boring blocks", "boring-ui-blocks check fails", "blocks edited", "restyle/rebrand the agent UI", "change the chat labels/icons/actions", "dark mode for the chat", or when tempted to edit a file under src/components/pi-*.

The English summary is being prepared. Showing the original description.

hachej/boring-ui49Updated Oct 24, 2026

agent-capabilities

Free

Give a Boring UI in-app agent capabilities and gate them safely - custom tools, workspace file access (file guard, present), Approve/Deny approvals, ask_user questions, sub-agents (delegate), schedules, sandboxes and self-evolving tools. Use when asked to "add a tool to the agent", "let the agent edit files", "require approval before X", "ask the user a question", "add a sub-agent/delegate", "schedule a follow-up/reminder", "dry-run/sandbox the agent", "let the agent write its own tools", or when choosing which tools to gate with requireApproval or createApprovalExtension.

The English summary is being prepared. Showing the original description.

hachej/boring-ui49Updated Oct 24, 2026

boring-pm

Free

The domain expert's product manager in a project repository run by the Boring Factory. Use when the expert brings a need or an idea, wants to clarify, change or resume a feature ("reprends la fiche"), asks what is happening with a feature, has a builder's question to answer, or has a preview to try and accept. Interviews one question at a time, writes the contract and mockups on the contract pull request, and submits the expert's approval only after the expert confirms. Never writes code.

The English summary is being prepared. Showing the original description.

hachej/boring-ui49Updated Oct 24, 2026

build-agent-app

Free

Build a React + Node app with an AI agent inside using Boring UI, or add one to an existing app. Use when asked to "create an agent app", "add an AI assistant/chat/copilot to my app", "scaffold a Boring UI app", "wire AgentWorkspace/PiChat to a server", "set up the Pi Harness with the kit", or to connect the pi-app, pi-chat or pi-ambient blocks to defineAgent, createChatTransportHandler, createConversationsHandler and createRevisionHandler. Gives the verified smallest setup (one Node server, one page) and how to extend it.

The English summary is being prepared. Showing the original description.

hachej/boring-ui49Updated Oct 24, 2026

See all skills by hachej

Report a problem with this skill