How do I install the Zoe Page Builder skill?

Run npx skillmds@latest add jason-easyazz/zoe-page-builder in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Zoe Page Builder skill do?

zoe-page-builder It is listed under Coding & Dev Tools on SkillMD.

Is Zoe Page Builder safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Zoe Page Builder?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Zoe Page Builder free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Zoe Page Builder?

jason-easyazz (@jason-easyazz) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Zoe Page Builder by jason-easyazz — Agent Skill

Name: Zoe Page Builder
Author: jason-easyazz

File contents

zoe-page-builder

Build new HTML pages and views for Zoe's UI at services/zoe-ui/dist/.

Trigger conditions

This skill activates when the system message begins with [ZOE_SELF_BUILD: page], or when the user asks to create a new page, dashboard, or view in the Zoe UI.

Prerequisites

Caller must have admin role. Check via zoe_self_capabilities tool. If not admin, reply: "Page building requires admin access."
Do NOT modify any existing page without explicit user instruction.
NEVER touch dist/css/, dist/js/, or any CSS/JS asset files.

Step-by-step workflow

1. Check admin role

capabilities = zoe_self_capabilities()
if capabilities.role != "admin": STOP — reply with access denied.

2. Understand the request

Ask clarifying questions if ambiguous:

What should the page display or do?
Should it appear in the nav bar? If so, what label and icon?
Does it need real-time data? Which /api/ endpoint?

3. Reference the existing style

Read services/zoe-ui/dist/chat.html for the design conventions:

Dark background (#0f0f14), accent colour (var(--zoe-accent)), card surfaces (var(--zoe-surface))
Sans-serif font stack already loaded in <head> of chat.html — match it
Reuse existing CSS custom properties; do not add new stylesheet links

4. Spec + confirm

Draft a brief spec (≤5 bullet points) and present it to the user. Wait for confirmation before writing any file.

5. Generate the page

All CSS and JS must be inline in a single .html file placed in services/zoe-ui/dist/.

Rules:

One <style> block in <head>, one <script> block before </body>
No external CDN links; no separate .css or .js files
Use fetch('/api/...') for data — existing zoe-data endpoints only
Match the visual language of chat.html (colours, spacing, card style)
Page must be fully responsive (mobile-first)
Include a back-link or nav reference so the user can return to the main UI

6. Add nav link (if requested)

If the page needs a nav entry, edit the nav section of services/zoe-ui/dist/index.html (or whichever shell page contains the nav). Add a single <a> element with the agreed label and a suitable SVG icon. Do not restructure the nav — append only.

7. Output contract

Your final chat reply must be ≤3 sentences summarising what the page does. NEVER include raw HTML/CSS/JS in the chat reply.

If a preview mechanism is available, emit:

:::zoe-ui
{"action":"navigate","url":"<page_url>","target":"iframe"}
:::

8. After user approval

If user confirms, the file is already in dist/ and live via nginx — no further promotion step is needed. If user requests changes, iterate on the spec and regenerate the file in place.

Error handling

If a required API endpoint doesn't exist, describe what's needed and stop.
Never write files outside services/zoe-ui/dist/ without explicit user approval.
Do not overwrite existing pages without reading them first and confirming with the user.

---name: zoe-page-builderdescription: zoe-page-builder---# zoe-page-builderBuild new HTML pages and views for Zoe's UI at `services/zoe-ui/dist/`.## Trigger conditionsThis skill activates when the system message begins with `[ZOE_SELF_BUILD: page]`, or when the user asks to create a new page, dashboard, or view in the Zoe UI.## Prerequisites- Caller must have admin role. Check via `zoe_self_capabilities` tool. If not admin, reply: "Page building requires admin access."- Do NOT modify any existing page without explicit user instruction.- NEVER touch `dist/css/`, `dist/js/`, or any CSS/JS asset files.## Step-by-step workflow### 1. Check admin role```capabilities = zoe_self_capabilities()if capabilities.role != "admin": STOP — reply with access denied.```### 2. Understand the requestAsk clarifying questions if ambiguous:- What should the page display or do?- Should it appear in the nav bar? If so, what label and icon?- Does it need real-time data? Which `/api/` endpoint?### 3. Reference the existing styleRead `services/zoe-ui/dist/chat.html` for the design conventions:- Dark background (`#0f0f14`), accent colour (`var(--zoe-accent)`), card surfaces (`var(--zoe-surface)`)- Sans-serif font stack already loaded in `<head>` of chat.html — match it- Reuse existing CSS custom properties; do not add new stylesheet links### 4. Spec + confirmDraft a brief spec (≤5 bullet points) and present it to the user. Wait for confirmation before writing any file.### 5. Generate the pageAll CSS and JS must be **inline** in a single `.html` file placed in `services/zoe-ui/dist/`.Rules:- One `<style>` block in `<head>`, one `<script>` block before `</body>`- No external CDN links; no separate `.css` or `.js` files- Use `fetch('/api/...')` for data — existing zoe-data endpoints only- Match the visual language of `chat.html` (colours, spacing, card style)- Page must be fully responsive (mobile-first)- Include a back-link or nav reference so the user can return to the main UI### 6. Add nav link (if requested)If the page needs a nav entry, edit the nav section of `services/zoe-ui/dist/index.html` (or whichever shell page contains the nav). Add a single `<a>` element with the agreed label and a suitable SVG icon. Do not restructure the nav — append only.### 7. Output contractYour final chat reply must be ≤3 sentences summarising what the page does.NEVER include raw HTML/CSS/JS in the chat reply.If a preview mechanism is available, emit:```:::zoe-ui{"action":"navigate","url":"<page_url>","target":"iframe"}:::```### 8. After user approvalIf user confirms, the file is already in `dist/` and live via nginx — no further promotion step is needed.If user requests changes, iterate on the spec and regenerate the file in place.## Error handling- If a required API endpoint doesn't exist, describe what's needed and stop.- Never write files outside `services/zoe-ui/dist/` without explicit user approval.- Do not overwrite existing pages without reading them first and confirming with the user.

Frequently asked questions

Zoe Page Builder