Agent · UX Designer 🎨

E11 UI/UX (skill: e11-agent-ux-designer) — UX and UI strategy. Produces the dual-spine UX output: a DESIGN.md build spec and an EXPERIENCE.md experience narrative. Sources every component from @engineering11/* SDKs and shadcn primitives before designing anything custom.

What it produces

• DESIGN.md — the buildable spec (screens, structure, components) suitable for design-tool handoff.
• EXPERIENCE.md — journeys, states, and the experience rationale, closing with an Alloy follow-ups list for Tier C components.
• Both land in {planning_artifacts}/ux-designs/ux-<project>-<date>/, with .memlog.md, a .working/ area, and promoted mockups//wireframes/.
• Every component carries its P/D class and source tier (see below).

When to use it

• UI is a primary piece of the project — run this before architecture locks component decisions.
• An existing design needs an update or a validation pass (Create / Update / Validate are one skill).
• You want a design-tool handoff package (default: Google Stitch prompt via design_handoffs).

How to invoke

Invoke e11-agent-ux-designer; on activation it enumerates the available E11 frontend SDKs (skill:e11-knowledge list:sdks) so sourcing decisions start from reality.

Code	Dispatches to	Purpose
[UX]	e11-ux	Create / Update / Validate the dual-spine UX design
[QK]	e11-knowledge	Pull an alloy doc directly

Component classification (P/D + tiers)

The classification discipline is the E11 heart of this agent:

1. Every component is classed P (primitive) or D (domain/behavior).
2. P → shadcn (Tier B). Don't rebuild buttons.
3. D → E11 SDK first (Tier A): check skill:e11-knowledge list:sdks and sdk:<name>:frontend-using, cite alloy://….
4. D with no SDK coverage → composed from shadcn (Tier B).
5. Neither → custom (Tier C), flagged as an SDK candidate in the Alloy follow-ups list.

Both spines carry the class and source for every component, so the Architect and Dev inherit sourcing decisions instead of re-deriving them.

Example session

You: e11-agent-ux-designer

UX: 🎨 E11 UI/UX. Frontend SDK census: 17 SDKs available (list:sdks).

You: UX — the tenant usage dashboard. Internal tool, fast path.

UX: Fast path, internal stakes. Batched questions:
    1) primary persona? 2) navigation shell exists? 3) export UX needed?
    ...
    Component table (excerpt):
      UsageChart      D  Tier A  @engineering11/analytics-ui
                      (alloy://sources/sdks-react/sdks/analytics-ui/frontend-using.md)
      DateRangePicker P  Tier B  shadcn
      ExportScheduler D  Tier C  custom — added to Alloy follow-ups
    Writing DESIGN.md + EXPERIENCE.md ...

Gotchas

• Run before architecture when UI is central. The spine inherits component decisions; the wrong order forces rework.
• Validation is opt-in and costly. The reviewer gate lets you pick lenses (accessibility is recommended for consumer/regulated stakes) — don't run every lens on a hobby project.
• Tier C is a flag, not a failure. Custom components are fine; leaving them out of the Alloy follow-ups list is what's not fine.
• The old name forwards. e11-create-ux-design shims to e11-ux for one release. See Upgrading.

Customizing

Persona and menu in .foundry/custom/e11-agent-ux-designer.toml; skill surface (spine examples, design_handoffs, creative_tools, output paths, the e11_platform_component_classification gate) in .foundry/custom/e11-ux.toml. See Customization.

Source

src/foundry/workflows/2-plan-workflows/e11-agent-ux-designer/SKILL.md

See also: Phase 2 — Planning · Knowledge layer.