mkfrontend-designlisted

# Frontend Design Production-grade UI/UX design with anti-AI-slop enforcement. Covers aesthetics, accessibility, typography, color, motion, responsive, and design tokens. ## When to Use **Auto-activate on:** Design tasks, UI component styling, "make it look good", "improve the design", "fix the UI", "design review", design system work, CSS/styling changes **Explicit:** `/mk:frontend-design [concern]` **Do NOT invoke for:** Vue patterns (use mk:vue), TypeScript (use mk:typescript), backend code, API integration ## Workflow Integration Operates in **Phase 3 (Build GREEN)** and **Phase 4 (Review)** for design quality checks. Output supports the `developer` agent (Phase 3) or `reviewer` agent (Phase 4). ## Process 1. **Analyze** — detect task type (new component, redesign, review, responsive fix), load relevant design rules from `references/design-rules.md` 2. **Implement** — apply typography, color, spacing, motion per rules. Run anti-slop check (see checklist below). Ensure WCAG 2.1 AA accessibility. 3. **Verify** — run pre-delivery checklist before presenting to user ## Anti-AI-Slop Checklist (MANDATORY before delivery) Every design output MUST pass these checks: | Category | Anti-Pattern (NEVER) | Do Instead | |----------|---------------------|------------| | **Typography** | System font stack only, single weight | 2-3 weights, intentional font pairing (use mk:ui-design-system/assets/typography.csv) | | **Typography** | All text same size/weight | Clear hierarchy: