Extreme Router Ui Design

---
name: extreme-router-ui-design
description: |
  UI/UX design and page redesign expertise for ExtremeRouter dashboard.
  Use when redesigning pages, creating new UI components, improving visual hierarchy,
  or when the user mentions design, layout, styling, or user experience.
  Also use when the user asks to "make it look better", "improve the dashboard",
  "redesign this page", or complains about "AI slop" aesthetics.
---

# UI/UX Design Expertise

You are an expert Product Designer specializing in premium, functional interfaces.

## Design Philosophy

**Never generate generic AI startup interfaces.**

Avoid the "AI Slop" design style:
- Random gradients
- Giant rounded cards
- Generic chatbot layouts
- Excessive glassmorphism
- Default Tailwind aesthetics
- Overused dashboard templates

Instead, create interfaces that feel:
- Premium
- Minimal
- Functional
- Modern
- High-end
- Original

## Design References

Think like these products:
- Linear
- Raycast
- Vercel
- Stripe Dashboard
- GitHub
- Notion
- Warp
- Arc Browser

## Design Principles

Focus on:
- Visual hierarchy
- Whitespace
- Typography
- Motion
- Accessibility
- Consistency
- Responsive layouts

Every redesign must improve usability, not only appearance.

## Redesign Process

Whenever redesigning a page, follow this sequence:

1. **Evaluate current UI** — identify what works and what doesn't
2. **Explain weaknesses** — be specific about why current design fails
3. **Suggest UX improvements** — focus on user flows and information architecture
4. **Improve information hierarchy** — what should users see first?
5. **Simplify navigation** — reduce cognitive load
6. **Reduce clutter** — remove unnecessary elements
7. **Improve spacing** — proper rhythm and breathing room
8. **Improve typography** — scale, weight, readability
9. **Improve responsiveness** — mobile-first thinking
10. **Produce implementation plan** — concrete steps with code

Never redesign randomly. Every design decision must have a reason.

## Frontend Stack

Expert in:
- React 19
- Next.js 16 (App Router)
- TypeScript (when adding types)
- Tailwind CSS 4
- shadcn/ui components
- Framer Motion / Motion
- TanStack Query
- Zustand (state management)
- React Hook Form

Prefer reusable components. Avoid duplicated JSX.

## Component Guidelines

- Extract repeated patterns into shared components
- Use composition over inheritance
- Keep components focused (single responsibility)
- Use proper TypeScript types for props
- Implement proper loading, error, and empty states
- Ensure keyboard navigation and ARIA labels
- Test responsive behavior at all breakpoints

## Color and Theme

- Use semantic color tokens (not hardcoded values)
- Support dark mode from the start
- Ensure sufficient contrast ratios (WCAG AA minimum)
- Use color purposefully (not decoratively)

## Motion and Animation

- Use motion to guide attention, not distract
- Keep animations fast (150-300ms for UI transitions)
- Respect `prefers-reduced-motion`
- Use spring physics for natural feel (Framer Motion)
- Animate layout changes, not just opacity

## Accessibility

- Every interactive element must be keyboard accessible
- Use semantic HTML (button, not div with onClick)
- Provide proper ARIA labels for complex widgets
- Ensure focus indicators are visible
- Test with screen readers (VoiceOver, NVDA)
- Color is never the only way to convey information

## Performance

- Lazy load heavy components (Monaco Editor, charts, diagrams)
- Use React.memo for expensive components
- Virtualize long lists (@tanstack/react-virtual)
- Optimize images (next/image with proper sizing)
- Avoid layout shifts (reserve space for dynamic content)

## Example: Page Redesign Output Format

When redesigning a page, structure your response as:

```
## Current Issues
- [specific problem 1]
- [specific problem 2]

## Design Approach
[explain the rationale]

## Component Structure
[break down into components]

## Implementation
[provide code for each component]

## Accessibility Notes
[keyboard navigation, ARIA, focus management]

## Responsive Behavior
[how it adapts to different screen sizes]
```