BMAD-METHOD/bmad-agent/examples/v0-example-project.md

v0 UX/UI Architect Example Project

Project Overview

Project: E-commerce Product Dashboard Goal: Create a modern, responsive dashboard for managing products Target Users: Store administrators and product managers

Phase 1: Initial Requirements (Analyst → v0 UX/UI Architect)

Project Brief Summary

• Need a dashboard for managing e-commerce products
• Users should be able to view, add, edit, and delete products
• Must work on desktop and mobile devices
• Brand colors: Primary blue (#2563eb), Secondary gray (#64748b)
• Modern, clean aesthetic

Phase 2: Component Creation with Veronica

Activation Prompt

``` "Veronica, I need your help creating a product dashboard for an e-commerce platform. Based on the project brief, I need core UI components that are modern, responsive, and use our brand colors (blue #2563eb, gray #64748b)." ```

Generated Components

1. Product Card Component

Specification:

• Displays product image, name, price, and status
• Hover effects for interactivity
• Mobile-responsive layout
• Accessible design with proper ARIA labels

Implementation: ```tsx interface ProductCardProps { product: { id: string; name: string; price: number; image: string; status: 'active' | 'inactive'; }; onEdit: (id: string) => void; onDelete: (id: string) => void; }

const ProductCard: React.FC = ({ product, onEdit, onDelete }) => { // Component implementation... }; ```

2. Dashboard Header Component

Specification:

• Navigation breadcrumbs
• User profile dropdown
• Search functionality
• Responsive mobile menu

3. Data Table Component

Specification:

• Sortable columns
• Pagination
• Bulk actions
• Responsive design that stacks on mobile

Phase 3: Quality Assurance

v0 Component Quality Checklist Applied

✅ Design Consistency

• Follows established design system patterns
• Color palette matches brand guidelines (#2563eb, #64748b)
• Typography scales appropriately
• Spacing follows 8px grid system

✅ Code Quality

• Components are properly typed (TypeScript)
• Props are well-documented with interfaces
• Components handle edge cases (loading, error states)
• Performance optimized with React.memo where appropriate

✅ Accessibility

• Semantic HTML structure (header, main, section)
• Proper ARIA labels and roles
• Keyboard navigation support (tab order, enter/space activation)
• Screen reader compatibility tested
• Color contrast meets WCAG AA standards (4.5:1 ratio)

✅ Responsive Design

• Mobile-first approach implemented
• Breakpoints: 640px (sm), 768px (md), 1024px (lg)
• Touch-friendly interaction areas (44px minimum)
• Content reflows appropriately on all screen sizes

✅ Integration

• Imports/exports properly configured
• Dependencies clearly documented (React, TypeScript, Tailwind)
• Integration examples provided
• Storybook stories created for each component

Phase 4: Implementation Results

File Structure Created

``` src/ ├── components/ │ ├── ProductCard/ │ │ ├── ProductCard.tsx │ │ ├── ProductCard.stories.tsx │ │ └── ProductCard.test.tsx │ ├── DashboardHeader/ │ │ ├── DashboardHeader.tsx │ │ ├── DashboardHeader.stories.tsx │ │ └── DashboardHeader.test.tsx │ └── DataTable/ │ ├── DataTable.tsx │ ├── DataTable.stories.tsx │ └── DataTable.test.tsx ├── types/ │ └── Product.ts └── styles/ └── components.css ```

Performance Metrics

• Lighthouse Score: 98/100
• Bundle Size: +12KB (optimized)
• Load Time: <200ms for component rendering
• Accessibility Score: 100/100

Lessons Learned

What Worked Well

1. Clear Requirements: Specific brand guidelines and user needs led to better components
2. Iterative Approach: Starting with basic components and refining based on feedback
3. Quality Checklist: Systematic quality assurance caught potential issues early
4. Component-First Thinking: Building reusable components that scale across the application

Areas for Improvement

1. Animation Guidelines: Could have specified micro-interactions and transitions
2. Error State Design: More detailed error handling and messaging
3. Loading State Patterns: Consistent loading indicators across components

Next Steps

1. Integrate components into main application
2. Create additional specialized components (filters, modals, forms)
3. Develop comprehensive design system documentation
4. Set up automated testing pipeline

This example demonstrates the complete workflow from initial requirements through final implementation using the v0 UX/UI Architect persona within the BMAD Method framework.