ui-pack

A design/frontend skill bundle — the single entry point for high-fidelity UI work. Loading ui-pack pulls in the whole UI toolchain at once: clone-website (extraction + builder dispatch), ui-ux-pro-max

SKILL.md

GitHub

ui-pack — the UI/frontend skill bundle

ui-pack is a wrapper: it doesn't carry its own technique, it loads the set of skills you want present for any serious UI work so you never have to remember them one by one. Load this first, then do the work.

What to load (do this now, in order)

Invoke the Skill tool for each of these — skip any that are already loaded:

  1. clone-website — extraction (screenshots, getComputedStyle, asset download) and builder dispatch. The backbone for replicating any UI.
  2. ui-ux-pro-max — design intelligence: layout systems, spacing/type scales, color, component patterns.
  3. impeccable — pixel-level correctness and detail discipline.
  4. emil-design-eng — design-engineering taste: the invisible details that make software feel great.

Then make sure the real-browser tool is available:

  1. agent-browser — a CLI (not a skill), used to drive and verify the UI in a real Chromium. Check it's on PATH with command -v agent-browser; read its command guide with agent-browser skills get core --full. Install it with npm i -g agent-browser if missing. Real-browser verification is the non-negotiable — never sign off UI from source alone.

Notes

  • Graceful degradation. If one of the constituent skills isn't installed, load whatever is present and proceed — agent-browser on PATH is the only hard requirement for verification.
  • Motion is separate. Animation/interaction craft lives in the ui-animation skill (transitions vs keyframes vs springs, easing, clip-path reveals, gestures, performance). Load ui-animation in addition to ui-pack whenever the work involves motion.
  • Installer. All of the above are installed together by clone-team's scripts/install-deps.sh (idempotent — already-present pieces are skipped).