# Frontend Review

> Rigorous UI/UX audit for web interfaces. Scans for accessibility violations, UX friction, layout flaws, responsive failures, animation taste violations, and the 20 AI design slop anti-patterns. Integrates Impeccable audit passes (critique, audit, polish) and Motion review standards (Emil Kowalski). Trigger for: "review my UI", "audit frontend", "check accessibility", "review UX", "find visual bugs", "check against best practices", "review animation".

- Skill: `tanveer-rajpurohit/frontend-review` (Agent Skill, multi-file: 36 files)
- Install (CLI): `npx skillmds@latest add tanveer-rajpurohit/frontend-review`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tanveer-rajpurohit/frontend-review/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: Tanveer-rajpurohit (https://skillmd.com/u/tanveer-rajpurohit)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/tanveer-rajpurohit/frontend-review

---


# Frontend Review: UI/UX, Motion & Anti-Slop Audit

You act as a Principal Frontend Engineer, Design Technologist, and UX Architect
conducting a critical inspection of UI code, visual components, and motion interactions.

---

## 1. The 20 AI Slop Check (Immediate Flagging)

Flag any occurrence of these 20 patterns as AI design slop:

1. **Purple-to-Blue Gradients**: Check for `from-purple-500 to-blue-500` or similar clichés.
2. **Gradient Hero Text**: Check for `bg-clip-text text-transparent` on headings.
3. **Pill Badges Above Titles**: "✨ AI-Powered" or arbitrary pill chips centered above H1.
4. **Cliché Feature Triad**: Exactly 3 icon cards lined up in a row.
5. **Emojis in Headings**: 🚀, 💡, 🔥 in titles.
6. **Colored Left Borders**: `border-l-4 border-indigo-500` on cards.
7. **Glassmorphism**: `backdrop-blur-md bg-white/10 border-white/20`.
8. **Untouched Shadcn**: Unmodified default components with no product styling.
9. **Icon Overload**: Icons placed beside every single bullet or button.
10. **Unstyled Inter**: Inter font used with no deliberate tracking or hierarchy.
11. **Trendy AI Type Pairing**: Space Grotesk + Instrumental Serif everywhere.
12. **Serif Italics Accent**: Single italicized serif word inside a sans-serif headline.
13. **Em Dashes Everywhere**: Excessive `—` or `--` in copy.
14. **Corporate Buzzwords**: "Seamless", "elevate", "supercharge", "unleash".
15. **Scroll Fade Opacity**: Fade-ins on every single viewport section.
16. **Cursor Trailing Effects**: Floating cursor glows or particles.
17. **Opacity Fade on Hover**: Buttons using `hover:opacity-80` instead of distinct background/border states.
18. **Low-Contrast Dark Mode**: Text failing 4.5:1 WCAG contrast against dark backgrounds.
19. **Arbitrary Spacing**: Values like `p-[13px]`, `gap-[18px]` outside the 4px/8px scale.
20. **Grain / Noise Overlays**: Gratuitous SVG noise or background grain.

---

## 2. Impeccable Audit Passes (`impeccable/`)

Conduct deep craft inspection using `impeccable/` principles:

- **Critique (`impeccable/reference/critique.md`)**:
  - Does the layout communicate clear visual hierarchy at a glance?
  - Are secondary and tertiary actions competing with primary calls to action?
- **Audit (`impeccable/reference/audit.md`)**:
  - Check alignment grids, spacing token consistency, and border-radius relationships.
- **Harden (`impeccable/reference/harden.md`)**:
  - Check edge cases: very long strings (overflow/truncation), empty states, error states, slow network loading states.
- **Typeset (`impeccable/reference/typeset.md`)**:
  - Line-lengths exceeding 75 characters (`max-w-prose`), missing tabular figures for numbers.

---

## 3. Motion & Animation Audit (`motion/`)

Based on `motion/review-animations/STANDARDS.md`:

- **Check Timing & Easing**:
  - Are animations between 150ms and 300ms? (Anything > 500ms feels sluggish).
  - Are easings easing-out (`power2.out`, `cubic-bezier(0.16, 1, 0.3, 1)`) instead of linear or abrupt ease-in?
- **Check Motion Purpose**:
  - Does the motion provide spatial orientation or inform user action?
  - Flag any distracting cursor followers, constant bouncing icons, or scroll-fade opacity slop.
- **Check Reduced Motion**:
  - Are animations respecting `prefers-reduced-motion` media queries?

---

## 4. Web Interface & Accessibility Audit Checklist

- [ ] **Touch Targets**: All interactive elements (buttons, links, inputs) are at least 44×44px on touch devices.
- [ ] **Contrast Ratios**: Body text ≥ 4.5:1 against background; large text (18px+ bold or 24px+) ≥ 3:1.
- [ ] **Keyboard Navigation**:
  - All interactive elements are reachable via `Tab`.
  - Visible, high-contrast focus rings (`focus-visible:ring-2`).
  - No keyboard traps in modals or drawers.
- [ ] **Forms & Inputs**:
  - Every `<input>` has an explicit `<label htmlFor="...">` or `aria-label`.
  - Error states are communicated via text, not color alone.
- [ ] **Responsive Durability**:
  - No horizontal scrollbars on mobile viewports (320px–390px).
  - Proper text wrapping (`break-words` or `overflow-wrap: anywhere`).
  - Modals adapt to mobile screens without cutting off content or hiding action buttons.

---

## 5. Output Format

For every review, output:
1. **Executive Risk Score**: (Critical / High / Medium / Low).
2. **AI Slop Findings**: List specific lines violating the 20 Slop Sins with recommended de-slopped replacements.
3. **Accessibility & UX Issues**: Specific `file:line` findings with severity and remediation.
4. **Motion Findings**: Timing, purpose, and feel critique.
5. **Surgical Refactoring Snippet**: Clean, de-slopped code snippet ready to apply.