/design-optimizer

name: design-optimizer
description: "Optimize a website or app design in one run: capture the page once, audit usability, UX/AX, virality and agent readiness, merge overlaps into one prioritized report, apply fixes on opt-in. Don't use for one lens (dont-make-me-think, ux-ax-review)."
license: MIT
effort: high
dependencies:
  - dont-make-me-think
  - ux-ax-review
  - website-agent-readiness
  - viral-product-evaluator
  - frontend-design
  - browse
metadata:
  version: 1.1.0
  author: "Luong NGUYEN <luongnv89@gmail.com>"
  architecture: "orchestrator (intake once → member audits with skip-checks → merged report → gated apply)"

Design Optimizer

One invocation for "optimize my website/app design". This skill does no auditing of its own: evidence is captured once, the live scan runs at most once, overlapping checks are skipped where the member supports skip-checks, and remaining overlaps are merged into one row per defect in **one** prioritized report. Members keep their full workflows and gates; this file stays short to protect the context budget. Load `references/` files only at the phase that names them.

Members

| Member | Role | Owns (canonical check IDs) | Required? | |---|---|---|---| | `dont-make-me-think` | Krug usability audit; Redesign Mode in apply | `clarity` | required | | `ux-ax-review` | human UX + AI/search AX audit | `brand,responsive,accessibility,performance,conversion,structured-data,llms-txt,ai-actions` (+ scan-covered AX checks when no scan) | required | | `website-agent-readiness` | isitagentready.com live scan | `agent-readiness-scan` + scan-covered AX checks (`robots-sitemap,markdown-pages,crawler-access`) when its scan exists | optional | | `viral-product-evaluator` | 32-principle virality audit | `virality`, `meta-tags` | optional | | `frontend-design` | UI build in apply phase | — (writes code) | required only for `mode:apply` |

The full matrix, the three AX-ownership cases and each member's `skip-checks` set are in `references/check-ownership.md`.

Modes

| Mode | When | Writes | |---|---|---| | **audit** (default) | "optimize / review / improve my design" | evidence dir + reports in the output dir only | | **apply** | explicit `mode:apply`, or an explicit post-report opt-in naming finding IDs | UI source files, through a member's own gate |

**Never enter apply by inference.** "Optimize my design" means audit. Apply needs the user to say so after seeing the report (or pass `mode:apply`) and to name which findings to fix.

Prerequisites

• A target: live URL, local repo path, screenshots, or saved HTML. Ask for one when none is given.
• `curl` and `python3` for intake; `/browse` optional (screenshots, rendered HTML).
• Output dir: user-supplied, else `${TMPDIR:-/tmp}/design-optimizer/<slug>-<UTC stamp>/` —

outside the checkout so audit mode never touches the repo.

Dependency Preflight (mandatory)

This skill invokes the six skills declared in frontmatter `dependencies`. Run this once, in Phase 1 before intake:

if command -v asm >/dev/null && asm deps --help >/dev/null 2>&1; then
  asm deps discover design-optimizer --json || echo "discover failed; acquire still runs" >&2
  echo "do_mode=lease"
else
  echo "asm deps unavailable: npm install -g agent-skill-manager@latest" >&2
  echo "do_mode=installed"
fi
printf 'do_session=%s\n' "design-optimizer-$(date +%s)-$$"   # record it; reuse it verbatim

1. With `do_mode=lease`, run `asm deps acquire <member> --session <do_session> --json` for each audit member (dont-make-me-think, ux-ax-review, website-agent-readiness, viral-product-evaluator). Record each returned `skillMdPath`. Do not acquire `frontend-design` or `browse` here — their branches are not reached yet. 2. With `do_mode=installed`, test each audit member with `test -f "$HOME/.claude/skills/<member>/SKILL.md" || test -f "$HOME/.agents/skills/<member>/SKILL.md"`, falling back to the registry listing — `asm list -p claude --json | grep '"<member>"'` — because same-repo skills can be installed without the registry knowing the bare name. Record the path that exists. 3. `dont-make-me-think` and `ux-ax-review` are **required**. If either fails step 1 or 2, print `Missing skill: <member> — install: asm install github:luongnv89/skills:skills/<member> -p claude --yes` and stop before intake; write nothing. 4. `website-agent-readiness` and `viral-product-evaluator` are **optional**: a miss is fail-soft. Skip the member, fall back per `references/check-ownership.md`, and list its checks under "Not covered". `browse` is fail-soft too: acquire it at first use in intake, or test its install path — a miss only drops screenshots (`references/intake.md` records the skip). Check `frontend-design` only when apply routes a finding to it — acquire or test it then, and skip that apply item if it is missing. 5. **Release in `finally`.** If any acquire ran, run `asm deps release --session <do_session> --json` once at every terminal outcome, stops included, before the final response. List a failed release under `Uncertainty:`.

Never substitute one member for another or hand-run a member's workflow inline. Members run their own preflights for their own dependencies (e.g. website-agent-readiness acquires `plan-to-issues` only at its G4); this preflight covers only what design-optimizer invokes directly.

Repo Sync Before Edits (mandatory)

Audit mode writes only outside the checkout and needs no sync. Before **any** write into a git repo — apply mode, or an output dir the user placed inside a repo — sync first:

branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin
git pull --rebase origin "$branch"

If the tree is dirty: `git stash push -u -m "pre-design-optimizer"`, sync, `git stash pop`. If `origin` is missing or the rebase/stash conflicts, **stop and ask the user**. Members that write also run their own Repo Sync; never skip theirs because this one ran.

Workflow

##