Ucoz Design Editor Skill

---
name: ucoz-design-editor-skill
version: "1.2"
description: "Give any uCoz site a beautiful, modern makeover — safely. Refreshes the whole look and feel: colors, typography, CSS, header/footer and global blocks, menus and forms, plus a tailored restyle for every module (blog, shop, forum, photos, users, search, subscriptions). Includes a visual design system (identity extraction, style routing, typography/spacing, color tokens, component states, icons, modern CSS/JS, motion, imagery, accessibility) so every module ends up visually consistent. Works with the platform instead of against it, so pages stay pixel-perfect and unbroken. Use for any 'redesign / restyle / make my site look better / change the design or CSS' request via ucoz-mcp."
metadata:
  hermes:
    tags: [ucoz, mcp, design, design-system, templates, css, cms]
---

# uCoz Design Editor Skill

This skill teaches how to redesign and restyle **uCoz sites** through `ucoz-mcp`, with platform-safe template edits.
It does not replace the MCP tools — it supplies domain knowledge the MCP does not: design-system
architecture, system markup, CSS placement, safety rules, and which reference to open for a task.

## Rule 0 — Usage accounting

After the skill's main work completes successfully, record usage:

```text
skills_tool(action="register_usage", skill_id="ucoz-design-editor-skill")
```

If the usage API is unavailable or returns an error, show a brief warning and continue the skill's main workflow. Do not ask the user for a UUID, token, or site URL — the site comes from the active `ucoz-mcp` connection (selected via `select_site`).

## Scope

- Site-wide design / redesign (chrome, tokens, shared CSS)
- Global blocks, menus, mail forms, site pages
- Content modules (blog, news, articles, photo albums, site directory, …)
- Shop, users, search, subscriptions modules
- Site files (`files_tool`) and module install/enable

## MCP tools

| Tool | Purpose |
|---|---|
| `templates_tool` | Templates, backups, global blocks, menus, mail forms, pages |
| `files_tool` | Site files: list, read, write, upload, folders, delete, quota |
| `ftp_tool` | FTP password (`ftp_password_*`); in the legacy NPM MCP — also file operations over FTP |
| `modules_tool` | Install/uninstall modules, quarantine |

## Safety checklist (before `patch_template` / `update_template`)

- [ ] Production header only in `1/AHEADER`; production footer (single visible `$POWERED_BY$`) only in `1/BFOOTER`
- [ ] Public full-page shells render `$GLOBAL_AHEADER$` and `$GLOBAL_BFOOTER$` — never copy header/footer into module templates
- [ ] Navigation from menu variables (e.g. `$NMENU_1$`), not hardcoded menu HTML
- [ ] Multi-section redesign CSS: one canonical external stylesheet via `files_tool` (or module CSS / `3/3` per [ARCHITECTURE.md](references/ARCHITECTURE.md)) — no scattered `<style>` blocks
- [ ] `read_template` first; variables only from that output or `get_variables` — never invent names
- [ ] Partial edit → `patch_template` with byte-exact `code_search`; full rewrite → `update_template` only after user confirmation
- [ ] Before `update_template`, `read_template` again in the same turn (do not reconstruct from memory — especially third-party scripts)
- [ ] Never hide `$POWERED_BY$` (including CSS tricks)
- [ ] After save: re-`read_template` or fetch live page — `patch_template` can report success without persisting
- [ ] Risky bulk change: check backup headroom (`list_backups`)
- [ ] Full-page shell chrome audit after site-wide redesign: every enabled module's full HTML shells must use `/_st/…` CSS (never bare `/my.css`), matching font links, `$GLOBAL_AHEADER$`/`$GLOBAL_BFOOTER$`, theme body/layout classes, no foreign brand strings; treat Search `19/1` as high-risk orphan

**Always confirm with the user first:** `update_template` on an existing template, `restore_backup`, `delete_backup`, `page_delete` / `menu_delete` / `mail_delete_form`, `module_uninstall`, `quarantine_unlock`, `files_tool` `delete`, `ftp_password_reset` / `ftp_password_change`.

Details: [EDITING.md](references/EDITING.md), [ARCHITECTURE.md](references/ARCHITECTURE.md).

## Anti-patterns

| Wrong | Correct |
|---|---|
| Guess variable names by analogy | Confirm via `read_template` / `get_variables` |
| `update_template` for a small change | `patch_template` with exact `code_search` |
| Reformat whitespace in `code_search` | Copy byte-for-byte from `read_template` |
| Inline `<style>` in page/global-block templates | CSS template `3/3`, module CSS, or one file uploaded via `files_tool` |
| Hand-coded menu / mail form HTML | `menu_*` / `mail_*` + `$NMENU_*$` / `$MFORM_*$` |
| Hide `$POWERED_BY$` | Keep visible in `BFOOTER` |
| Grid on wrapper around `$BODY$` instead of `#allEntries` | See [SYSTEM-MARKUP.md](references/SYSTEM-MARKUP.md) |
| Assume template markup is what the live page renders | Fetch the live page first (`#uf-register`, widgets, …) |
| Hand-drawn SVG icon path data | Heroicons/Lucide/Tabler — [VISUAL.md](references/VISUAL.md) §4 |
| Same default palette/style on every redesign regardless of niche | Extract existing identity first, route deliberately — [VISUAL.md](references/VISUAL.md) §1 |
| Orphan shell with `/my.css` or foreign layout classes (esp. `19/1`) | Align shell to a known-good live template: `/_st/my.css`, theme wrappers, AHEADER/BFOOTER |

## Quick decision helper

| Task | Open |
|---|---|
| Colors, typography, icons, tokens, motion, imagery — any "what should it look like" question | [VISUAL.md](references/VISUAL.md) |
| Find module/template IDs | [ARCHITECTURE.md](references/ARCHITECTURE.md) → `list_modules` |
| Header / footer / shared chrome | [GBLOCKS.md](references/GBLOCKS.md) |
| Custom global block / `$GLOBAL_*$` | [GBLOCKS.md](references/GBLOCKS.md) |
| Where to put CSS / verify live CSS | [ARCHITECTURE.md](references/ARCHITECTURE.md) |
| Patch vs rewrite / backups / encoding | [EDITING.md](references/EDITING.md) |
| `$VAR$` / `<?if?>` expressions | [LANGUAGE.md](references/LANGUAGE.md) |
| Menus, mail forms, pages, files (`files_tool`), FTP password, modules | [TOOLS.md](references/TOOLS.md) |
| `eMessage` / `manTable` / `#allEntries` / `.goods-list` | [SYSTEM-MARKUP.md](references/SYSTEM-MARKUP.md) |
| System `_uWnd` / `xw-*` toasts, alerts, mail success modals | [UWND.md](references/UWND.md) → [EXAMPLES.md#uwnd-glass](EXAMPLES.md#uwnd-glass) |
| Blog / news / articles / photo / other content modules | [BLOG.md](references/BLOG.md) → [SYSTEM-MARKUP.md](references/SYSTEM-MARKUP.md) |
| Photo albums specifically | [PHOTO.md](references/PHOTO.md) |
| Forum (rules) | [FORUM.md](references/FORUM.md) |
| Forum glass CSS pattern | [EXAMPLES.md#forum-glass-apple](EXAMPLES.md#forum-glass-apple) |
| Shop | [SHOP.md](references/SHOP.md) |
| Users / cabinet | [USERS.md](references/USERS.md) |
| Search overlay / results | [SEARCH.md](references/SEARCH.md) |
| Subscriptions & plans | [SUBSCRIPTIONS.md](references/SUBSCRIPTIONS.md) |
| Auth modal / other UI patterns | [EXAMPLES.md](EXAMPLES.md) |

**Rules vs examples:** `references/*.md` = hard platform rules. `EXAMPLES.md` = optional copy-paste UI patterns. Forum rules → `references/FORUM.md`; forum glass sample → `EXAMPLES.md#forum-glass-apple`. System `_uWnd` popups/modals → `references/UWND.md` (not FORUM.md).

## Core workflow

1. **Locate** — `list_modules` if needed → `read_template`.
2. **Diagnose** — `$GLOBAL_XXX$` → edit that global block; list card → Entry view template; else page template. Fetch live DOM when layout/CSS is involved.
3. **Verify variables** — [LANGUAGE.md](references/LANGUAGE.md).
4. **Edit** — before writing any CSS/HTML rule, read [VISUAL.md](references/VISUAL.md) (identity extraction, style routing, non-negotiables/anti-references, typography/spacing, color tokens, component states, icons, CSS/JS toolbox, motion, imagery, accessibility). Then `patch_template` (byte-exact) or confirmed `update_template`; menus/mail/pages via their APIs ([TOOLS.md](references/TOOLS.md)).
5. **Validate** — `validate_template` for non-trivial changes, plus the accessibility checklist in [VISUAL.md](references/VISUAL.md) §10.
6. **Confirm** — re-read template or live page after save.
7. **Report** — what changed (module/template/block), the visual direction used (kept-and-systematized vs. replaced, per `VISUAL.md` §1.2), and any manual CP step.

## Site-wide redesign order

Prefer cheapest/safest first:

1. Identity extraction and token contract ([VISUAL.md](references/VISUAL.md) §1, §3) in the CSS template / canonical stylesheet
2. Component CSS (hardcoded values → tokens, per [VISUAL.md](references/VISUAL.md) §3.5–§3.6)
3. Structural HTML last — and only where needed; keep JS-wired DOM shapes intact ([SYSTEM-MARKUP.md](references/SYSTEM-MARKUP.md))

## References

| File | Contents |
|---|---|
| [VISUAL.md](references/VISUAL.md) | Visual design system: identity extraction, style routing, typography/spacing, color tokens, component states, icons, modern CSS/JS toolbox, motion, imagery, accessibility |
| [EDITING.md](references/EDITING.md) | Patch/update, validation, backups, troubleshooting |
| [LANGUAGE.md](references/LANGUAGE.md) | Variables and expressions |
| [ARCHITECTURE.md](references/ARCHITECTURE.md) | Template structure, CSS strategy |
| [SYSTEM-MARKUP.md](references/SYSTEM-MARKUP.md) | System forms, `#allEntries`, shop grids |
| [UWND.md](references/UWND.md) | `_uWnd` / `xw-*` toasts, alerts, mail success modals |
| [TOOLS.md](references/TOOLS.md) | Files (`files_tool`), FTP password, modules, mail, menus, pages |
| [GBLOCKS.md](references/GBLOCKS.md) | Global blocks |
| [BLOG.md](references/BLOG.md) | Content-module playbook (blog + peers) |
| [PHOTO.md](references/PHOTO.md) | Photo albums (`9`) |
| [FORUM.md](references/FORUM.md) | Forum (`8`) |
| [SHOP.md](references/SHOP.md) | Online store (`20`) |
| [USERS.md](references/USERS.md) | Users module (`4`) |
| [SEARCH.md](references/SEARCH.md) | Search (`19`) |
| [SUBSCRIPTIONS.md](references/SUBSCRIPTIONS.md) | Subscriptions (`25`) |
| [EXAMPLES.md](EXAMPLES.md) | Optional implementation patterns (auth modal, cards, shop UI, …) |

## Setup

- uCoz MCP connects at `https://www.ucoz.com/mcp` — the agent config needs only the URL, no tokens or Node.js.
- On first connection the agent opens a sign-in window: the user signs in to their uCoz account and clicks “Allow”.
- Then `list_sites` → `select_site(site_id)`; all tools work on the selected site.

Admin actions (`modules_tool`, `ftp_password_*`) require the signed-in account to be the site owner or have site administrator rights.