{
  "mcpServers": {
    "minimax": {
      "command": "uvx",
      "args": ["minimax-coding-plan-mcp", "-y"],
      "env": {
        "MINIMAX_API_KEY": "your-api-key",
        "MINIMAX_API_HOST": "https://api.minimax.io"
      }
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

"Analyze this design mockup: https://example.com/design.png and identify components"

"Describe the UI issues in this screenshot: /Users/dev/Downloads/ current.png"

"Extract text from images/receipt.jpg for data entry validation"

"Search for latest Tailwind CSS v4 features 2025"

1. navigate_page("http://localhost:3000/your-page")
2. take_screenshot(fullPage=true, filePath="/tmp/current-ui.png")
3. take_snapshot() // DOM structure

Prompt: "Analyze this UI screenshot (/tmp/current-ui.png). Identify:
- Layout structure (grid, flex, stacked)
- Component types (cards, forms, modals, navigation)
- Color scheme và contrast issues
- Spacing/typography problems
- Accessibility concerns (color contrast, focus states)
- Responsive behavior suggestions

Focus on: Shadcn UI patterns, Tailwind conventions."

1. list_console_messages()
2. list_network_requests()
3. evaluate_script(() => document.documentElement.outerHTML)

From snapshot + screenshot → Identify:
├── Navigation (header, sidebar)
├── Hero Section
├── Content Area
│   ├── Cards (blog, projects)
│   ├── Forms (search, filter)
│   └── Modals/Dialogs
└── Footer

// Tailwind breakpoints
const breakpoints = {
  sm: '640px',   // Mobile landscape
  md: '768px',   // Tablet
  lg: '1024px',  // Desktop
  xl: '1280px',  // Large desktop
  '2xl': '1536px' // Extra large
}

"Based on screenshot analysis, suggest:
1. Shadcn UI components to use (Card, Button, Dialog, etc.)
2. Tailwind classes for consistent spacing (spacing scale)
3. Color adjustments for dark mode compatibility
4. Typography hierarchy (text-sm, text-lg, text-xl, etc.)
5. Motion/Animation with Framer Motion"

apps/web/src/components/
├── ui/                    # Shadcn (DON'T EDIT)
├── blog/
│   ├── post-card.tsx
│   ├── post-list.tsx
│   └── pagination.tsx
├── docs/
│   ├── sidebar-nav.tsx
│   └── toc.tsx
└── site/
    ├── site-header.tsx
    └── site-footer.tsx

'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

export function PostCard({ post }: { post: BlogPost }) {
  const [isHovered, setIsHovered] = useState(false)
  
  return (
    <Card
      className="transition-all duration-200 hover:shadow-lg"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Content */}
    </Card>
  )
}

import { getBlogPosts } from '@/services/blog-service'
import { PostCard } from './post-card'

export async function BlogList({ page = 1 }: { page?: number }) {
  const { data: posts } = await getBlogPosts('vi', 'published', { page })
  
  return (
    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}

// Mobile-first responsive classes
<div className="
  grid gap-4           // Mobile (default)
  md:grid-cols-2       // Tablet
  lg:grid-cols-3       // Desktop
  xl:gap-6             // Large screens
">

1. make_file_changes()
2. navigate_page("http://localhost:3000/page")
3. take_screenshot(filePath="/tmp/updated-ui.png")
4. understand_image("Compare with /tmp/current-ui.png. What changed? Is it better?")

"Check this screenshot for:
- Color contrast ratios (WCAG AA/AAA)
- Focus indicators on interactive elements
- Touch target sizes (44x44px minimum)
- Semantic HTML structure
- ARIA labels missing"

performance_start_trace()
wait_for(5000)  // Let page load
performance_stop_trace()
performance_analyze_insight()

1. Navigate http://localhost:3000 và take screenshot
2. Analyze hero section: "Describe hero layout, identify issues with spacing, typography, visual hierarchy"
3. Suggest Shadcn + Tailwind redesign:
   - Use Card or custom component
   - Suggest heading sizes (text-3xl, text-4xl, text-5xl)
   - Suggest button styles (default, secondary, outline)
   - Suggest spacing (gap-4, gap-6, gap-8)

1. Navigate http://localhost:3000/blog và take full-page screenshot
2. Analyze grid: "How does the current grid behave on mobile? Tablet? Desktop?"
3. Suggest Tailwind grid fixes:
   - Mobile: grid-cols-1
   - Tablet: md:grid-cols-2
   - Desktop: lg:grid-cols-3
4. Verify with resize_page(375, 667) // Mobile size
5. Screenshot and confirm

1. Navigate http://localhost:3000/admin/posts/new
2. Analyze form: "Identify form fields, validation states, error message placement"
3. Suggest improvements:
   - Use Shadcn Form components (Form, FormField, FormItem)
   - Add error: parameter in Zod schemas
   - Show inline validation feedback
4. Fill form test data và screenshot kết quả

1. Take screenshot of current page (assume light mode)
2. evaluate_script(() => document.documentElement.classList.contains('dark'))
3. If dark mode not active: navigate_page with ?theme=dark or trigger toggle
4. take_screenshot() for dark mode
5. analyze_image: "Compare light vs dark mode. Any contrast issues? Gray-on-gray? Text unreadable?"

browser_action → take_screenshot → understand_image → analysis

navigate_page("http://localhost:3000")
wait_for("body")  // Wait for page load
take_screenshot()

"Redesign the blog listing page:
1. Navigate http://localhost:3000/vi/blog
2. Take full-page screenshot
3. Analyze current UI: 'Describe layout, components, color scheme, spacing issues'
4. Suggest Shadcn + Tailwind redesign:
   - PostCard component với hover effects
   - Responsive grid (1→2→3 columns)
   - Pagination component
   - Tag filter UI
5. Make changes và screenshot để verify"

"Check UI consistency:
1. Navigate http://localhost:3000
2. Take screenshot
3. analyze_image: 'List all UI inconsistencies (colors, spacing, typography)'
4. suggest_fixes: 'Specific Tailwind classes to fix each issue'"

"Improve form UX:
1. Navigate http://localhost:3000/contact
2. Take screenshot
3. Analyze: 'What form validation exists? Any UX issues?'
4. Suggest: 'Add Zod validation, error messages, focus states'
5. Implement và verify với screenshot comparison"

<Card className="transition-all duration-200 hover:shadow-lg hover:-translate-y-1">
  <CardHeader>
    <CardTitle>{title}</CardTitle>
  </CardHeader>
  <CardContent>{content}</CardContent>
</Card>

<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<div className="p-4 md:p-6 lg:p-8">
  <div className="gap-4 md:gap-6 lg:gap-8">

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">