Toge Design Agent

A senior product design advisor and end-to-end workflow orchestrator. Auto-load this skill whenever the user mentions: product design, UX, user experience, wireframes, user journey, design review, usability, design feedback, competitive research, problem framing, HMW statements, JTBD, design brief, information architecture, prototype, clickable prototype, interactive prototype, "make it interactive", "bring it to life", "wire the screens", UI polish, micro-interactions, animations, hover states, "feels off", "make it feel better", shadows, border radius, typography, font smoothing, stagger, scale on press, easing, or asks "what should I design", "help me design", "review this design", "run product design", or "design agent". Also trigger when a user shares a product brief, PRD, Intent document, or pm-agent output and wants structured design work done on it.

Animation and micro-interaction principles from Emil Kowalski and Jakub Krehel. Use when adding animations, hover states, enter/exit transitions, icon state changes, button feedback, or any motion detail to a prototype. Triggers on "add animations", "make it feel better", "feels off", "hover state", "transition", "easing", "scale on press", "micro-interactions".

Use when reviewing a design for quality assurance, auditing visual consistency, checking accessibility, validating design token usage, or evaluating a screen before handoff. Trigger phrases: "design QA", "review this design", "audit the UI", "check the design", "design review", "QA this screen", "is this design ready", "before handoff", "design audit".

Use when applying design tokens, choosing colors, typography, spacing, or surface styles for a product UI. Trigger phrases: "what token should I use", "design token", "color token", "apply tokens", "which color for", "semantic color", "dark mode token", "typography token", "surface token", "what class for", "token for danger", "token for success".

Developer handoff pass — cleans and restructures prototype code for production readiness. Splits oversized components, extracts composables, types all props/emits, removes prototype artifacts (mock delays, console.logs, placeholder comments), and verifies file structure. Trigger phrases: "ready for handoff", "clean up the code", "handoff pass", "production ready", "prepare for dev", "clean for frontend".

Reads and writes the team-wide UX Learnings file — the agent's institutional memory. Accumulates patterns, anti-patterns, component preferences, conventions, and recurring QA findings across features so each new design benefits from everything the team has already learned. Called by design-qa and handoff after completing their passes. Human-callable for manual entries: "remember this", "add to learnings", "that worked well — save it", "what have we learned".