1. resolve-library-id → Get library ID
2. query-docs → Fetch current documentation

resolve-library-id:
  libraryName: "@tanstack/react-query"
  query: "How to fetch data with React Query"

query-docs:
  libraryId: "/tanstack/query"
  query: "useQuery hook data fetching patterns"

// ✅ Good: Typed props, descriptive names, Tailwind
interface UserCardProps {
  user: User;
  onSelect?: (user: User) => void;
  variant?: 'default' | 'compact';
}

export function UserCard({ user, onSelect, variant = 'default' }: UserCardProps) {
  return (
    <div className="rounded-lg border bg-card p-4 shadow-sm">
      {/* Content */}
    </div>
  );
}

// ❌ Bad: No types, inline styles, generic names
export function Card({ data, onClick }) {
  return <div style={{padding: 10}}>{data.name}</div>;
}

// Frontend: Typed API client
interface ApiResponse<T> {
  data: T;
  success: boolean;
  errors?: string[];
}

async function fetchUsers(): Promise<ApiResponse<User[]>> {
  const response = await fetch('/api/users');
  return response.json();
}

// .NET: Minimal API endpoint
app.MapGet("/api/users", async (IUserService userService) =>
{
    var users = await userService.GetAllAsync();
    return Results.Ok(new { data = users, success = true });
});

// Responsive design: mobile-first
<div className="flex flex-col gap-4 md:flex-row md:gap-6 lg:gap-8">

// Consistent spacing scale: 4, 6, 8, 12, 16
<div className="p-4 md:p-6 lg:p-8">

// Card pattern
<div className="rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md">

1. browser_navigate → Open the page (with take_screenshot_afterwards: true)
2. browser_lock → Lock browser for interaction
3. browser_snapshot → Get page structure
4. [Perform interactions if needed]
5. browser_take_screenshot → Capture visual state
6. browser_console_messages → Check for errors
7. browser_unlock → Release when done

Visual Verification:
- [ ] Component renders without errors
- [ ] Layout matches design/intent
- [ ] Responsive: Check at 375px, 768px, 1280px widths
- [ ] Spacing is consistent (follows 4px grid)
- [ ] Text is readable and properly sized
- [ ] Colors match design system
- [ ] Interactive states work (hover, focus, active)
- [ ] No console errors or warnings

Alignment Checks:
- [ ] Elements are properly aligned (left/center/right)
- [ ] Vertical spacing is consistent
- [ ] Grid/flex items are evenly distributed
- [ ] Icons are vertically centered with text
- [ ] Form labels align with inputs

// React Query error handling
const { data, error, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});

if (error) {
  return <ErrorState message="Failed to load users" retry={refetch} />;
}

// Global exception handling
app.UseExceptionHandler(errorApp =>
{
    errorApp.Run(async context =>
    {
        context.Response.StatusCode = 500;
        await context.Response.WriteAsJsonAsync(new { 
            success = false, 
            errors = new[] { "An unexpected error occurred" } 
        });
    });
});

Pre-Implementation:
- [ ] Fetched current docs from Context7
- [ ] Reviewed existing codebase patterns

Implementation:
- [ ] TypeScript types are complete
- [ ] Component follows project conventions
- [ ] Tailwind classes follow mobile-first
- [ ] Error states are handled

Verification:
- [ ] Tested in browser at multiple widths
- [ ] Visual alignment verified
- [ ] No console errors
- [ ] Interactive states work
- [ ] Browser unlocked after testing