v0 Component Design

Go to v0.dev and create a user profile card component with:
- Avatar image
- Name and title
- Contact information
- Action buttons

Import this v0 component into our project:
[paste v0 component code]

Please:
1. Adapt it to our design system
2. Add TypeScript types
3. Integrate with our existing components
4. Add proper error handling

Enhance this v0 component by:
1. Adding accessibility features
2. Implementing responsive design
3. Adding animation and micro-interactions
4. Integrating with our state management

// Basic v0 component
export default function UserCard() {
  return (
    <div className="p-4 border rounded">
      {/* v0 generated content */}
    </div>
  )
}

// Enhanced with TypeScript and proper structure
interface UserCardProps {
  user: User;
  onEdit?: () => void;
  onDelete?: () => void;
  className?: string;
}
 
export const UserCard: React.FC<UserCardProps> = ({
  user,
  onEdit,
  onDelete,
  className
}) => {
  // Enhanced implementation
}

Adapt this v0 component to use our design system:
1. Replace hardcoded colors with CSS variables
2. Use our spacing tokens
3. Apply our typography scale
4. Ensure brand consistency

Make this v0 component fully accessible:
1. Add proper ARIA labels
2. Ensure keyboard navigation
3. Implement focus management
4. Add screen reader support

Create a dashboard card component in v0 with basic layout

Import the v0 component and add:
1. Data fetching logic
2. Loading states
3. Error handling
4. Interactive features

Refine the component based on user feedback:
1. Improve visual hierarchy
2. Add more interactive elements
3. Optimize performance
4. Enhance mobile experience

Create a component library using v0 components:
1. Generate base components with v0
2. Enhance with Claude Code
3. Document with Storybook
4. Package for reuse

Make this v0 component responsive:
1. Add mobile-first breakpoints
2. Optimize touch interactions
3. Ensure content readability
4. Test across devices

Create comprehensive tests for this v0 component:
1. Render testing
2. User interaction testing
3. Accessibility testing
4. Visual regression testing

Test this component's integration with:
1. Parent components
2. State management
3. API endpoints
4. Routing system

Optimize this v0 component for performance:
1. Implement lazy loading
2. Add code splitting
3. Optimize bundle size
4. Minimize re-renders

Optimize images in this v0 component:
1. Add responsive images
2. Implement lazy loading
3. Use modern formats (WebP, AVIF)
4. Add proper alt text

Enhance this v0 form component with:
1. Form validation
2. Error handling
3. Submission states
4. Accessibility features

Improve this v0 data component by adding:
1. Sorting capabilities
2. Filtering options
3. Pagination
4. Export functionality

Enhance this v0 navigation with:
1. Active state management
2. Breadcrumb integration
3. Mobile menu functionality
4. Keyboard navigation

Resolve styling conflicts between v0 components and our existing CSS:
1. Identify conflicting styles
2. Create scoped solutions
3. Update design tokens
4. Test across browsers

Fix TypeScript errors in this v0 component:
1. Add proper type definitions
2. Handle optional props
3. Ensure type safety
4. Update interfaces

Optimize this slow v0 component:
1. Identify performance bottlenecks
2. Implement memoization
3. Reduce unnecessary re-renders
4. Optimize heavy computations

Take this v0 product card and integrate it with:
1. Shopping cart functionality
2. Wishlist features
3. Product comparison
4. Inventory management

Enhance this v0 dashboard widget with:
1. Real-time data updates
2. Interactive charts
3. Drill-down capabilities
4. Export options

Improve this v0 profile component by adding:
1. Edit functionality
2. Avatar upload
3. Social media links
4. Activity timeline