Frontend Ui Developer

# Form components
agent-browser fill @input "value"
agent-browser type @input " appended"        # Test append behavior
agent-browser select @dropdown "Option"
agent-browser check @toggle                  # Toggle switch
agent-browser uncheck @toggle

# Responsive & scroll
agent-browser scroll down 500
agent-browser scroll right 200 --selector ".carousel"
agent-browser scrollintoview @footer
agent-browser hover @button                  # Test hover states
agent-browser dblclick @cell                 # Editable content

# Drag & drop
agent-browser drag @card @column2
agent-browser upload @dropzone ./image.png

# Keyboard
agent-browser press Escape                   # Modal close
agent-browser keyboard type "search"

agent-browser screenshot --full /tmp/full-page.png
agent-browser screenshot --annotate          # Debug element positions
agent-browser pdf /tmp/page.pdf

agent-browser storage local set "debug" "true"
agent-browser storage local set "feature_new_nav" "enabled"
agent-browser storage local clear            # Reset to defaults

# Capture trace for component bug reproduction
agent-browser trace start /tmp/component-trace.zip
agent-browser open http://localhost:3000/component
agent-browser click @e1
agent-browser wait --text "Error"
agent-browser trace stop
# Open trace in Playwright Trace Viewer for debugging

# Find components by visible text (stable across re-renders)
agent-browser find "Save Changes"            # Find by text
agent-browser find --role button "Delete"    # Find by role + text
agent-browser highlight @e1                  # Visually verify element
agent-browser highlight --clear

# Test dark/light mode rendering
agent-browser --color-scheme dark open http://localhost:3000
agent-browser screenshot /tmp/dark.png
agent-browser --color-scheme light open http://localhost:3000
agent-browser screenshot /tmp/light.png

# Precise mouse control for canvas/map components
agent-browser mouse move 200 300
agent-browser mouse click 200 300
agent-browser mouse wheel 0 -500            # Scroll within canvas

{
  "component": {
    "name": "AnalysisStatusCard",
    "path": "frontend/src/features/analysis/components/AnalysisStatusCard.tsx",
    "type": "interactive"
  },
  "react_19_features": {
    "useOptimistic": true,
    "useFormStatus": false,
    "use_hook": true,
    "startTransition": true
  },
  "validation": {
    "schema": "AnalysisStatusSchema",
    "fields_validated": ["id", "status", "progress", "error"],
    "runtime_checked": true
  },
  "type_safety": {
    "strict_mode": true,
    "exhaustive_switches": 2,
    "no_any_types": true
  },
  "ux_patterns": {
    "loading_state": "skeleton",
    "error_boundary": true,
    "prefetching": "onMouseEnter",
    "accessibility": "WCAG 2.2 AA"
  },
  "testing": {
    "msw_handlers": 3,
    "coverage": "92%",
    "e2e_scenarios": 2
  },
  "bundle_impact": {
    "size_added_kb": 4.2,
    "lazy_loaded": true
  }
}

// useOptimistic - Optimistic UI updates
const [optimisticItems, addOptimistic] = useOptimistic(
  items,
  (state, newItem) => [...state, { ...newItem, pending: true }]
)

// useFormStatus - Form submission state (inside form)
function SubmitButton() {
  const { pending } = useFormStatus()
  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>
}

// use() - Unwrap promises/context in render
const data = use(dataPromise) // Suspense-aware promise unwrapping
const theme = use(ThemeContext) // Context without useContext

// startTransition - Mark updates as non-urgent
startTransition(() => setSearchResults(results))

// ALWAYS validate API responses
import { z } from 'zod'

const AnalysisSchema = z.object({
  id: z.string().uuid(),
  status: z.enum(['pending', 'running', 'completed', 'failed']),
  createdAt: z.string().datetime(),
})

type Analysis = z.infer<typeof AnalysisSchema>

async function fetchAnalysis(id: string): Promise<Analysis> {
  const response = await fetch(`/api/v1/analyze/${id}`)
  const data = await response.json()
  return AnalysisSchema.parse(data) // Runtime validation!
}

// ALWAYS use exhaustive switch statements
type Status = 'pending' | 'running' | 'completed' | 'failed'

function assertNever(x: never): never {
  throw new Error(`Unexpected value: ${x}`)
}

function getStatusColor(status: Status): string {
  switch (status) {
    case 'pending': return 'gray'
    case 'running': return 'blue'
    case 'completed': return 'green'
    case 'failed': return 'red'
    default: return assertNever(status) // Compile-time exhaustiveness check
  }
}

// Skeleton loading with Motion pulse (NOT CSS animate-pulse)
import { motion } from 'motion/react';
import { pulse } from '@/lib/animations';

function AnalysisCardSkeleton() {
  return (
    <div>
      <motion.div {...pulse} className="h-4 bg-muted rounded w-3/4 mb-2" />
      <motion.div {...pulse} className="h-3 bg-muted rounded w-1/2" />
    </div>
  )
}

// Suspense boundaries with skeletons
<Suspense fallback={<AnalysisCardSkeleton />}>
  <AnalysisCard id={analysisId} />
</Suspense>

// ALWAYS import from centralized presets
import { motion, AnimatePresence } from 'motion/react';
import { fadeIn, modalContent, staggerContainer, staggerItem, cardHover, tapScale } from '@/lib/animations';

// Modal animations
<AnimatePresence>
  {isOpen && (
    <motion.div {...modalContent}>Modal content</motion.div>
  )}
</AnimatePresence>

// List stagger animations
<motion.ul variants={staggerContainer} initial="initial" animate="animate">
  {items.map(item => (
    <motion.li key={item.id} variants={staggerItem}>{item.name}</motion.li>
  ))}
</motion.ul>

// Card hover micro-interactions
<motion.div {...cardHover} {...tapScale}>Clickable card</motion.div>

// NEVER inline animation values
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>  // Use fadeIn instead

// Page navigation transitions with React Router
import { Link, useViewTransitionState } from 'react-router';

function ProductCard({ product }: { product: Product }) {
  const isTransitioning = useViewTransitionState(`/products/${product.id}`);
  return (
    <Link to={`/products/${product.id}`} viewTransition>
      <img
        src={product.image}
        style={{ viewTransitionName: isTransitioning ? 'hero' : undefined }}
      />
    </Link>
  );
}

// Use Motion for component animations, View Transitions for page navigation
// View Transitions API is cross-browser (Chrome, Firefox, Safari) in 2026

// TanStack Query prefetching on hover/focus
const queryClient = useQueryClient()

function AnalysisLink({ id }: { id: string }) {
  return (
    <Link
      to={`/analyze/${id}`}
      onMouseEnter={() => {
        queryClient.prefetchQuery({
          queryKey: ['analysis', id],
          queryFn: () => fetchAnalysis(id),
        })
      }}
    >
      View Analysis
    </Link>
  )
}

// TanStack Router preloading
<Link to="/analyze/$id" params={{ id }} preload="intent">
  View Analysis
</Link>

// MSW for network-level mocking (NOT fetch mocks)
import { setupServer } from 'msw/node'
import { http, HttpResponse } from 'msw'

const server = setupServer(
  http.get('/api/v1/analyze/:id', ({ params }) => {
    return HttpResponse.json({
      id: params.id,
      status: 'completed',
    })
  })
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

// NEVER use raw fetch without validation
const data = await response.json() // Type is 'any'!

// NEVER use non-exhaustive switches
switch (status) {
  case 'pending': return 'gray'
  // Missing cases = runtime bugs!
}

// NEVER mock fetch directly in tests
jest.mock('fetch') // Use MSW instead

// NEVER use spinners for content loading
<Spinner /> // Use skeleton components instead

// NEVER omit prefetching for navigation
<Link to="/page">Click</Link> // Add preload="intent"

// NEVER use native Date for formatting
new Date().toLocaleDateString('he-IL') // Use formatDate() from @/lib/dates

// NEVER hardcode locale strings
`${minutes} minutes` // Use i18n.t('time.minutesShort', { count: minutes })

// NEVER use .join() for user-facing lists
items.join(', ') // Use formatList(items) from useFormatting hook

// NEVER hardcode currency symbols
`$${price}` // Use formatCurrency(price) from useFormatting hook

// NEVER leave console.log statements in production
console.log('debug info') // Remove before commit

// NEVER use inline Motion animation values
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}> // Use @/lib/animations presets

// NEVER forget AnimatePresence for exit animations
{isOpen && <motion.div {...fadeIn}>} // Wrap with AnimatePresence

// NEVER use CSS transitions with Motion components
<motion.div {...fadeIn} className="transition-all"> // Remove CSS transition

// NEVER use CSS variables in Tailwind classes
<div className="bg-[var(--color-primary)]"> // Use bg-primary instead
<div className="text-[var(--color-text-primary)]"> // Use text-text-primary instead