@leejungkiin/awkit 1.0.0

package/workflows/ui/design-to-ui.md

@@ -0,0 +1,308 @@
+---
+description: 🎨 Phân tích ảnh thiết kế & tạo code UI
+alwaysApply: false
+category: workflow
+priority: medium
+---
+triggers:
+  - "keywords: design analysis, image analysis, ui evaluation"
+  - "file_patterns: *.png, *.jpg, *.design, *.mockup"
+  - "context: design review, implementation planning"
+version: 1.0.0
+track:
+  - quick
+  - method
+  - enterprise
+---
+
+# Design to Prompt Analysis Workflow
+
+## Nguyên Tắc Cơ Bản
+
+### Phân Tích Chi Tiết và Có Cấu Trúc
+
+- **_BẮT BUỘC_** phân tích từng pixel và chi tiết trong hình ảnh
+- **_BẮT BUỘC_** trích xuất tất cả tính năng có thể nhìn thấy
+- **_BẮT BUỘC_** kết nối các tính năng với nhau để tạo thành hệ thống hoàn chỉnh
+- **_BẮT BUỘC_** xác định tiềm năng AI và automation cho từng tính năng
+- **_BẮT BUỘC_** phân tích marketing và monetization potential
+
+### Quy Trình Phân Tích 4 Bước
+
+#### Bước 1: Trích xuất Tính năng (Feature Extraction)
+
+**Mục tiêu**: Liệt kê tất cả tính năng có thể nhìn thấy trong hình ảnh
+
+**Quy trình**:
+1. **Phân tích Layout**: Xác định cấu trúc màn hình và các vùng chức năng
+2. **Liệt kê UI Elements**: Buttons, forms, lists, cards, navigation elements
+3. **Xác định Data Points**: Text, numbers, images, icons có trong giao diện
+4. **Phân tích Interactions**: Swipe, tap, scroll, input patterns
+5. **Ghi nhận States**: Loading, empty, error, success states
+
+**Output Format**:
+```markdown
+## Tính năng được trích xuất
+
+### Màn hình chính
+- [Tính năng 1]: Mô tả chi tiết
+- [Tính năng 2]: Mô tả chi tiết
+- [Tính năng 3]: Mô tả chi tiết
+
+### Màn hình phụ
+- [Tính năng 4]: Mô tả chi tiết
+- [Tính năng 5]: Mô tả chi tiết
+```
+
+#### Bước 2: Phân tích Chuyên sâu Tính năng (Feature Deep Dive)
+
+**Mục tiêu**: Phân tích chi tiết từng tính năng về mặt kỹ thuật và business logic
+
+**Quy trình**:
+1. **Technical Analysis**: Database schema, API endpoints, algorithms
+2. **Business Logic**: Rules, validations, calculations
+3. **User Experience**: Flow, interactions, feedback
+4. **Data Requirements**: Input, output, storage, processing
+5. **Integration Points**: External services, third-party APIs
+
+**Output Format**:
+```markdown
+## Phân tích chuyên sâu tính năng
+
+### [Tên tính năng]
+**Mục đích**: [Business purpose]
+**Technical Requirements**:
+- Database: [Schema requirements]
+- API: [Endpoint specifications]
+- Business Logic: [Rules and calculations]
+- UI/UX: [Interaction patterns]
+
+**Data Flow**:
+1. [Step 1]: [Description]
+2. [Step 2]: [Description]
+3. [Step 3]: [Description]
+```
+
+#### Bước 3: Kết nối Tính năng (Feature Connection)
+
+**Mục tiêu**: Tạo ra hệ thống hoàn chỉnh bằng cách kết nối các tính năng
+
+**Quy trình**:
+1. **Data Relationships**: Cách dữ liệu liên kết giữa các tính năng
+2. **User Flow**: Journey người dùng qua các tính năng
+3. **System Architecture**: Cách các tính năng tương tác với nhau
+4. **Dependencies**: Tính năng nào phụ thuộc vào tính năng nào
+5. **Integration Points**: Cách tích hợp với hệ thống bên ngoài
+
+**Output Format**:
+```markdown
+## Kết nối tính năng
+
+### User Journey
+1. [Starting Point] → [Feature A] → [Feature B] → [End Point]
+
+### Data Relationships
+- [Feature A] provides data to [Feature B]
+- [Feature B] updates data for [Feature C]
+- [Feature C] triggers action in [Feature A]
+
+### System Architecture
+- Frontend: [UI components and interactions]
+- Backend: [API endpoints and business logic]
+- Database: [Data models and relationships]
+- External: [Third-party integrations]
+```
+
+#### Bước 4: Tiềm năng AI (AI Potential)
+
+**Mục tiêu**: Xác định cơ hội tích hợp AI và automation
+
+**Quy trình**:
+1. **Data Analysis**: Machine learning opportunities
+2. **Automation**: Repetitive task automation
+3. **Personalization**: User behavior analysis
+4. **Prediction**: Forecasting and recommendations
+5. **Natural Language**: Chat, voice, text processing
+
+**Output Format**:
+```markdown
+## Tiềm năng AI
+
+### Machine Learning Opportunities
+- [Feature]: [ML use case and benefits]
+- [Feature]: [ML use case and benefits]
+
+### Automation Potential
+- [Process]: [Automation opportunity]
+- [Process]: [Automation opportunity]
+
+### Personalization Features
+- [Feature]: [Personalization approach]
+- [Feature]: [Personalization approach]
+```
+
+## Marketing & Monetization Analysis
+
+### Target Market Analysis
+
+**Primary Users**:
+- Demographics: Age, gender, income, location
+- Psychographics: Interests, behaviors, values
+- Pain Points: Problems the app solves
+- Use Cases: How users will use the app
+
+**Market Size**:
+- Total Addressable Market (TAM)
+- Serviceable Addressable Market (SAM)
+- Serviceable Obtainable Market (SOM)
+
+### Cost vs. Revenue Analysis
+
+**Development Costs**:
+- Development time and resources
+- Third-party service costs
+- Infrastructure and hosting costs
+- Marketing and user acquisition costs
+
+**Revenue Streams**:
+- Subscription models
+- Freemium with premium features
+- In-app purchases
+- Advertising revenue
+- Data monetization (if applicable)
+
+**Break-even Analysis**:
+- Monthly recurring revenue targets
+- Customer acquisition cost
+- Lifetime value calculations
+- Payback period estimates
+
+### Target Users & Cross-sell Features
+
+**User Segments**:
+- Power users: Advanced features, premium subscriptions
+- Casual users: Basic features, freemium model
+- Business users: Team features, enterprise pricing
+
+**Cross-sell Opportunities**:
+- Related services or products
+- Premium feature upgrades
+- Additional user accounts
+- Complementary apps or services
+
+## Ví Dụ Phân Tích: Tính Năng "Thời tiết"
+
+### Bước 1: Trích xuất Tính năng
+
+```markdown
+## Tính năng Thời tiết
+
+### Màn hình chính
+- Weather Display: Hiển thị nhiệt độ, độ ẩm, tình trạng thời tiết
+- Location Selection: Chọn thành phố, GPS location
+- Forecast Cards: Dự báo 7 ngày với icons và nhiệt độ
+- Weather Map: Bản đồ thời tiết với overlays
+- Settings: Cài đặt đơn vị (Celsius/Fahrenheit), notifications
+```
+
+### Bước 2: Phân tích Chuyên sâu
+
+```markdown
+## Phân tích tính năng Thời tiết
+
+**Mục đích**: Cung cấp thông tin thời tiết chính xác và dự báo cho người dùng
+
+**Technical Requirements**:
+- Database: User preferences, location history, cached weather data
+- API: Weather service integration (OpenWeatherMap, AccuWeather)
+- Business Logic: Unit conversion, location validation, data caching
+- UI/UX: Responsive cards, smooth animations, offline support
+
+**Data Flow**:
+1. User opens app → Check cached data → Show last known weather
+2. Get current location → Fetch fresh weather data → Update UI
+3. User selects new location → Validate location → Fetch weather → Update display
+4. Background refresh → Update data → Send notifications if enabled
+```
+
+### Bước 3: Kết nối Tính năng
+
+```markdown
+## Kết nối với hệ thống
+
+### User Journey
+1. App Launch → Location Permission → Weather Display → Forecast View → Settings
+
+### Data Relationships
+- Location Service provides coordinates to Weather API
+- Weather API provides data to Weather Display
+- User Preferences affect data presentation
+- Notification Service uses weather data for alerts
+
+### System Architecture
+- Frontend: React Native components, Redux state management
+- Backend: Node.js API, Redis caching, PostgreSQL storage
+- External: Weather API, Location services, Push notifications
+```
+
+### Bước 4: Tiềm năng AI
+
+```markdown
+## AI Opportunities
+
+### Machine Learning
+- Weather Prediction: Improve forecast accuracy with local data
+- User Behavior: Predict when users check weather most
+- Personalization: Customize weather alerts based on user patterns
+
+### Automation
+- Smart Notifications: Alert users about weather changes affecting their schedule
+- Location Learning: Automatically detect frequently visited locations
+- Weather Patterns: Learn user preferences for weather information display
+```
+
+## Implementation Guidelines
+
+### Technical Documentation Generation
+
+**Component Specifications**:
+- Props and state requirements
+- Event handlers and callbacks
+- Styling and responsive behavior
+- Accessibility considerations
+
+**API Contract Specifications**:
+- Endpoint definitions and parameters
+- Request/response schemas
+- Error handling and status codes
+- Authentication and authorization
+
+**Database Schema**:
+- Entity relationships and constraints
+- Indexing strategies
+- Data validation rules
+- Migration scripts
+
+### Development Handoff
+
+**Frontend Requirements**:
+- UI component library specifications
+- State management patterns
+- Navigation and routing
+- Performance optimization
+
+**Backend Requirements**:
+- API endpoint specifications
+- Business logic implementation
+- Database design and optimization
+- Security and authentication
+
+**Integration Requirements**:
+- Third-party service integration
+- Data synchronization patterns
+- Error handling and recovery
+- Monitoring and logging
+
+---
+
+**Success Criteria**: Complete feature analysis, technical specifications, AI opportunities identification, and implementation-ready documentation.

package/workflows/ui/ui-first-methodology.md

@@ -0,0 +1,279 @@
+---
+description: Thiết kế UI đầy đủ trước tiên
+alwaysApply: false
+category: workflow
+priority: medium
+triggers:
+  - "keywords: ui, design, interface, user experience"
+  - "context: new project, frontend development"
+  - "file_patterns: *.ui, *.design, *.mockup"
+version: 1.0.0
+track:
+  - quick
+  - method
+  - enterprise
+---
+
+# UI First Methodology Workflow
+
+## UI First Philosophy
+
+**Core Principle**: Design and implement all user interfaces first, then build supporting backend logic  
+**Purpose**: Ensure every feature is testable and user-validated before complex logic implementation  
+**Benefit**: Reduce development risk, improve UX consistency, enable early user feedback
+
+### Key Benefits
+
+- **Early Validation**: Test user flows before investing in complex backend logic
+- **Better UX**: Focus on user experience from the beginning
+- **Reduced Risk**: Identify usability issues before heavy development
+- **Faster Iteration**: UI changes are typically faster than backend refactoring
+- **Complete Coverage**: Ensure every feature has a corresponding user interface
+
+## UI First Implementation Rules
+
+### Mandatory UI Coverage
+
+**Screen Coverage Requirements**:
+- ✅ Every CRUD operation MUST have dedicated UI screen
+- ✅ All user stories MUST map to specific UI interactions
+- ✅ Navigation between all features MUST be implemented
+- ✅ Error states and loading states MUST have UI representation
+
+**Validation Checkpoints**:
+- [ ] Can user access all features through UI?
+- [ ] Are all CRUD operations testable via interface?
+- [ ] Do all user flows have complete screen sequences?
+- [ ] Are error scenarios handled with appropriate UI feedback?
+
+### UI Implementation Standards
+
+**Component Structure**:
+- Reusable UI components for consistent design
+- Proper state management for user interactions
+- Responsive design for multiple screen sizes
+- Accessibility considerations for all users
+
+**Navigation Patterns**:
+- Clear navigation hierarchy
+- Consistent back/forward behavior
+- Breadcrumb or progress indicators where appropriate
+- Deep linking support for web applications
+
+### CRUD UI Requirements
+
+**Create Operations**:
+- Form-based input with validation
+- Clear success/error feedback
+- Cancel and save options
+- Input validation with helpful messages
+
+**Read Operations**:
+- List views with search and filtering
+- Detail views with comprehensive information
+- Pagination for large datasets
+- Empty states with helpful guidance
+
+**Update Operations**:
+- Inline editing where appropriate
+- Form-based editing for complex data
+- Clear save/cancel actions
+- Change confirmation for destructive actions
+
+**Delete Operations**:
+- Confirmation dialogs for destructive actions
+- Soft delete with restore options
+- Bulk delete operations with confirmation
+- Clear feedback on deletion results
+
+## UI Design Standards
+
+### Visual Consistency
+
+**Design System**:
+- Consistent color palette across all screens
+- Typography hierarchy and spacing
+- Icon library with consistent style
+- Component library for reusable elements
+
+**Layout Standards**:
+- Grid system for consistent spacing
+- Responsive breakpoints for different screen sizes
+- Consistent header and navigation patterns
+- Footer and branding consistency
+
+### Responsive Design
+
+**Mobile-First Approach**:
+- Design for mobile screens first
+- Progressive enhancement for larger screens
+- Touch-friendly interface elements
+- Optimized for mobile performance
+
+**Breakpoint Strategy**:
+- Mobile: 320px - 768px
+- Tablet: 768px - 1024px
+- Desktop: 1024px+
+- Large Desktop: 1440px+
+
+### Accessibility Design
+
+**WCAG 2.1 AA Compliance**:
+- Color contrast ratios meet standards
+- Keyboard navigation support
+- Screen reader compatibility
+- Focus indicators for interactive elements
+
+**Inclusive Design**:
+- Alternative text for images
+- Captions for video content
+- High contrast mode support
+- Font size adjustment options
+
+## User Flow Design
+
+### Primary User Flows
+
+**Onboarding Flow**:
+- Welcome screen with app introduction
+- Account creation or login
+- Feature tour or tutorial
+- Initial setup and preferences
+
+**Core Feature Flows**:
+- Main feature access and usage
+- Data input and management
+- Search and discovery
+- Settings and preferences
+
+### Secondary User Flows
+
+**Error Recovery Flows**:
+- Network error handling
+- Validation error recovery
+- Session timeout handling
+- Data sync conflict resolution
+
+**Advanced Feature Flows**:
+- Power user features
+- Administrative functions
+- Integration with external services
+- Data export and import
+
+## UI State Management
+
+### Loading States
+
+**Skeleton Screens**:
+- Show content structure while loading
+- Maintain layout stability
+- Provide visual feedback
+- Reduce perceived loading time
+
+**Progress Indicators**:
+- Show progress for long operations
+- Provide estimated completion time
+- Allow cancellation where appropriate
+- Clear success/failure feedback
+
+### Error States
+
+**Error Handling**:
+- Clear error messages
+- Suggested recovery actions
+- Fallback options
+- Contact support information
+
+**Empty States**:
+- Helpful empty state messages
+- Call-to-action buttons
+- Onboarding guidance
+- Feature discovery hints
+
+### Success States
+
+**Success Feedback**:
+- Clear success confirmation
+- Next action suggestions
+- Progress indicators
+- Celebration animations (when appropriate)
+
+## Implementation Guidelines
+
+### UI Development Priority
+
+1. **UI Implementation Tasks** (Priority 1)
+   - Screen layouts and components
+   - Navigation and routing
+   - User interaction handlers
+   - Form validation and feedback
+
+2. **Integration Tasks** (Priority 2)
+   - API integration with UI
+   - Data binding and state management
+   - Error handling in UI context
+
+3. **Backend Logic Tasks** (Priority 3)
+   - Business logic implementation
+   - Database operations
+   - Background processing
+
+### Platform-Specific Considerations
+
+**Mobile Applications**:
+- Touch gesture support
+- Platform-specific navigation patterns
+- Performance optimization for mobile
+- Offline functionality
+
+**Web Applications**:
+- Cross-browser compatibility
+- SEO optimization
+- Progressive Web App features
+- Desktop interaction patterns
+
+**Desktop Applications**:
+- Keyboard shortcuts
+- Menu systems
+- Window management
+- System integration
+
+## Quality Assurance
+
+### UI Testing Strategy
+
+**Visual Testing**:
+- Screenshot comparison testing
+- Cross-browser visual validation
+- Responsive design testing
+- Accessibility testing
+
+**Interaction Testing**:
+- User flow testing
+- Form validation testing
+- Navigation testing
+- Error handling testing
+
+**Performance Testing**:
+- Loading time optimization
+- Animation performance
+- Memory usage monitoring
+- Battery impact (mobile)
+
+### Success Metrics
+
+**UI Completion Metrics**:
+- Screen coverage percentage
+- User flow completion rate
+- Feature accessibility through UI
+- CRUD operation UI coverage
+
+**Quality Metrics**:
+- Design consistency score
+- Accessibility compliance
+- Performance benchmarks
+- User satisfaction ratings
+
+---
+
+**Success Criteria**: Complete UI coverage for all features, consistent design system, accessible interfaces, and smooth user flows.