# Zoe Page Builder > zoe-page-builder - Skill: `jason-easyazz/zoe-page-builder` (Agent Skill) - Install (CLI): `npx skillmds@latest add jason-easyazz/zoe-page-builder` - Raw SKILL.md: https://api.skillmd.com/api/skills/jason-easyazz/zoe-page-builder/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: jason-easyazz (https://skillmd.com/u/jason-easyazz) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/jason-easyazz/zoe-page-builder --- # 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 `` 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 `