speccrew 0.1.0

package/.speccrew/skills/speccrew-knowledge-bizs-ui-analyze/templates/FEATURE-DETAIL-TEMPLATE-UI-MINIAPP.md

@@ -0,0 +1,292 @@
+
+# Feature Detail Design Template - [Feature Name]
+
+> **Platform**: Mini Program (WeChat/Alipay/ByteDance)
+> **Tech Stack**: WXML/AXML/TTML + WXSS/ACSS/TTSS + JavaScript
+
+## 1. Content Overview
+
+name: {Feature Name}
+
+description: Feature overview.
+
+document-path: {documentPath}
+source-path: {sourcePath}
+
+## 2. Interface Prototype
+
+<!-- AI-TAG: UI_PROTOTYPE -->
+<!-- AI-NOTE: Mini Program UI uses mobile-first ASCII wireframes -->
+<!-- AI-NOTE: Screen width: 750rpx (responsive unit) -->
+<!-- AI-NOTE: ONLY draw prototype for the MAIN PAGE defined in {{sourcePath}} -->
+
+### 2.1 {Main Page Name}
+
+```
+┌─────────────────────────┐
+│ Navigation Bar Title    │  ← System Navigation Bar
+├─────────────────────────┤
+│                         │
+│  ┌─────────────────┐   │
+│  │  Search Bar 🔍  │   │  ← Search Component
+│  └─────────────────┘   │
+│                         │
+│  ┌─────────────────┐   │
+│  │                 │   │
+│  │   Content       │   │  ← Scroll View
+│  │   Area          │   │
+│  │                 │   │
+│  │                 │   │
+│  └─────────────────┘   │
+│                         │
+│  ┌─────────────────┐   │
+│  │  [ + Action ]   │   │  ← Floating Button
+│  └─────────────────┘   │
+│                         │
+├─────────────────────────┤
+│ 🏠  📋  💬  👤          │  ← Tab Bar (if configured)
+└─────────────────────────┘
+```
+
+**Card Component Layout:**
+
+```
+┌─────────────────────────┐
+│ ┌────┐ Title        ▸  │
+│ │Img │ Description      │
+│ └────┘ [Tag1] [Tag2]    │
+├─────────────────────────┤
+│ ┌────┐ Title        ▸  │
+│ │Img │ Description      │
+│ └────┘ [Tag1] [Tag2]    │
+└─────────────────────────┘
+```
+
+**Interface Element Description:**
+
+| Area | Element | Component | Description | Interaction | Source Link |
+|------|---------|-----------|-------------|-------------|-------------|
+| Nav | Title | NavigationBar | {Page title} | - | [Source](../../{sourcePath}) |
+| Search | Search Input | search | {Search input} | bind:input/bind:confirm | [Source](../../{sourcePath}) |
+| Content | Card | view + image + text | {Display item} | bind:tap | [Source](../../{sourcePath}) |
+| Action | FAB | button | {Primary action} | bind:tap | [Source](../../{sourcePath}) |
+
+**Mini Program Specific Interactions:**
+
+| Event | Trigger | Description | Source |
+|-------|---------|-------------|--------|
+| bind:tap | Tap | Click element | [Source](../../{sourcePath}) |
+| bind:longpress | Long press | Long press element | [Source](../../{sourcePath}) |
+| bind:touchstart | Touch start | Start touch | [Source](../../{sourcePath}) |
+| bind:touchend | Touch end | End touch | [Source](../../{sourcePath}) |
+| bind:scrolltolower | Scroll to bottom | Load more | [Source](../../{sourcePath}) |
+| bind:pullDownRefresh | Pull down | Refresh page | [Source](../../{sourcePath}) |
+
+---
+
+## 3. Business Flow Description
+
+<!-- AI-TAG: BUSINESS_FLOW -->
+<!-- AI-NOTE: Mini Program lifecycle: onLoad → onShow → onReady → onHide → onUnload -->
+
+### 3.1 Page Initialization Flow
+
+```mermaid
+graph TB
+    Start([Page Open]) --> onLoad[onLoad - Parse options]
+    onLoad --> onShow[onShow - Page visible]
+    onShow --> CheckAuth{Check Login}
+    CheckAuth -->|Not Login| GetUser[Get User Info]
+    CheckAuth -->|Logged In| LoadData[Load Data]
+    GetUser --> LoadData
+    LoadData --> onReady[onReady - Render complete]
+    onReady --> End([End])
+    
+    LoadData -->|Call| API1[wx.request - API call]
+    GetUser -->|Call| wxLogin[wx.login - Get code]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Lifecycle | Source |
+|------|-------------------|-----------|--------|
+| 1 | Parse page options | onLoad | [Source](../../{sourcePath}) |
+| 2 | Page becomes visible | onShow | [Source](../../{sourcePath}) |
+| 3 | Check/get user info | onShow | [Source](../../{sourcePath}) |
+| 4 | Load page data | onShow | [Source](../../{sourcePath}) |
+| 5 | Page render complete | onReady | [Source](../../{sourcePath}) |
+
+### 3.2 User Interaction Flows
+
+#### 3.2.1 {Event Name: e.g., Card onTap}
+
+```mermaid
+graph TB
+    Tap[bind:tap] --> GetData[Get dataset]
+    GetData --> Navigate[wx.navigateTo]
+    Navigate --> PassData[Pass data via URL]
+    PassData --> TargetPage[Target Page]
+    
+    TargetPage -->|Call| API2[wx.request - Load detail]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Event | Source |
+|------|-------------------|-------|--------|
+| 1 | Get data from dataset | bind:tap | [Source](../../{sourcePath}) |
+| 2 | Navigate to detail | wx.navigateTo | [Source](../../{sourcePath}) |
+| 3 | Pass data via URL | query parameter | [Source](../../{sourcePath}) |
+
+#### 3.2.2 {Event Name: e.g., Pull Down Refresh}
+
+```mermaid
+graph TB
+    Pull[Pull Down] --> Trigger[Trigger refresh]
+    Trigger --> ShowLoading[Show loading]
+    ShowLoading --> Fetch[Fetch data]
+    Fetch --> StopPull[wx.stopPullDownRefresh]
+    StopPull --> UpdateUI[Update page data]
+    
+    Fetch -->|Call| API3[wx.request - Refresh API]
+```
+
+### 3.3 Mini Program Lifecycle
+
+```mermaid
+graph TB
+    subgraph PageLifecycle["Page Lifecycle"]
+        Load[onLoad] --> Show[onShow]
+        Show --> Ready[onReady]
+        Ready --> Hide[onHide]
+        Hide --> Show
+        Hide --> Unload[onUnload]
+    end
+```
+
+**Lifecycle Functions:**
+
+| Function | Trigger | Purpose | Source |
+|----------|---------|---------|--------|
+| onLoad | Page created | Parse options, init | [Source](../../{sourcePath}) |
+| onShow | Page visible | Refresh data | [Source](../../{sourcePath}) |
+| onReady | Render done | DOM operations | [Source](../../{sourcePath}) |
+| onHide | Page hidden | Pause operations | [Source](../../{sourcePath}) |
+| onUnload | Page closed | Cleanup | [Source](../../{sourcePath}) |
+| onPullDownRefresh | Pull down | Refresh data | [Source](../../{sourcePath}) |
+| onReachBottom | Scroll bottom | Load more | [Source](../../{sourcePath}) |
+| onShareAppMessage | Share | Custom share | [Source](../../{sourcePath}) |
+
+---
+
+## 4. Data Field Definition
+
+### 4.1 Page Data Fields
+
+| Field Name | Type | Description | Source |
+|------------|------|-------------|--------|
+| {Field 1} | String/Number/Boolean/Array/Object | {Description} | [Source](../../{sourcePath}) |
+| {loading} | Boolean | {Loading state} | [Source](../../{sourcePath}) |
+| {list} | Array | {List data} | [Source](../../{sourcePath}) |
+| {hasMore} | Boolean | {Has more data} | [Source](../../{sourcePath}) |
+
+### 4.2 Form Fields (if applicable)
+
+| Field Name | Type | Validation | Component | Source |
+|------------|------|------------|-----------|--------|
+| {Field 1} | String | {Required} | input | [Source](../../{sourcePath}) |
+| {Field 2} | String | {Phone format} | input type=digit | [Source](../../{sourcePath}) |
+
+---
+
+## 5. References
+
+### 5.1 APIs
+
+| API Name | Type | Main Function | Source | Document Path |
+|----------|------|---------------|--------|---------------|
+| {API Name} | Query/Mutation | {Brief description} | [Source](../../{apiSourcePath}) | [API Doc](../../apis/{api-name}.md) |
+
+### 5.2 Mini Program APIs
+
+| API | Purpose | Usage | Source |
+|-----|---------|-------|--------|
+| wx.request | HTTP request | Call backend API | [Source](../../{sourcePath}) |
+| wx.navigateTo | Page navigation | Navigate to page | [Source](../../{sourcePath}) |
+| wx.showToast | Show toast | Display message | [Source](../../{sourcePath}) |
+| wx.getUserInfo | Get user info | Authentication | [Source](../../{sourcePath}) |
+
+### 5.3 Components
+
+| Component | Type | Main Function | Source | Document Path |
+|-----------|------|---------------|--------|---------------|
+| {Custom Component} | UI | {Description} | [Source](../../{componentSourcePath}) | [Component Doc](../../components/{component-name}.md) |
+
+### 5.4 Other Pages
+
+| Page Name | Relation Type | Description | Source | Document Path |
+|-----------|---------------|-------------|--------|---------------|
+| {Page Name} | navigateTo | {Navigation description} | [Source](../../{pageSourcePath}) | [Page Doc](../{page-path}.md) |
+
+### 5.5 Referenced By
+
+| Page Name | Function Description | Source Path | Document Path |
+|-------------|---------------------|-------------|---------------|
+| {Referencing Page} | {e.g., "Navigate to this page"} | {source-path} | [Page Doc](../{page-path}.md) |
+
+---
+
+## 6. Business Rule Constraints
+
+### 6.1 Permission Rules
+
+| Operation | Permission | No Permission Handling | Source |
+|-----------|------------|----------------------|--------|
+| View page | {None/Login} | Show login modal | [Source](../../{sourcePath}) |
+| Use feature | {Scope required} | Guide to authorize | [Source](../../{sourcePath}) |
+
+### 6.2 Mini Program Specific Rules
+
+1. **Package Size**: {e.g., Main package ≤ 2MB} | [Source](../../{sourcePath})
+2. **API Limit**: {e.g., Concurrent request limit} | [Source](../../{sourcePath})
+3. **Storage**: {e.g., Use wx.setStorage for cache} | [Source](../../{sourcePath})
+
+### 6.3 Validation Rules
+
+| Scenario | Rule | Handling | Source |
+|----------|------|----------|--------|
+| Form submit | {Validation} | wx.showToast / showModal | [Source](../../{sourcePath}) |
+
+---
+
+## 7. Notes and Additional Information
+
+### 7.1 Platform Differences
+
+- **WeChat**: wx.* APIs, WXML/WXSS
+- **Alipay**: my.* APIs, AXML/ACSS
+- **ByteDance**: tt.* APIs, TTML/TTSS
+- **Universal**: Use framework like uni-app/Taro for multi-platform
+
+### 7.2 Performance Considerations
+
+- **List Rendering**: Use wx:key for list items
+- **Image Optimization**: Use lazy-load, appropriate size
+- **setData**: Minimize data size, avoid frequent calls
+- **Subpackages**: Use for large applications
+
+### 7.3 Pending Confirmations
+
+- [ ] **{Pending 1}**: {e.g., Whether to support share to moments}
+- [ ] **{Pending 2}**: {e.g., Whether to add subscription message}
+
+---
+
+**Document Status:** 📝 Draft / 👀 In Review / ✅ Published  
+**Last Updated:** {Date}  
+**Maintainer:** {Name}  
+**Related Module Document:** [Module Overview Document](../{{module-name}}-overview.md)
+
+**Section Source**
+- [{page}.js/{page}.wxml](../../{sourcePath})
+- [{page}.json](../../{configPath})

package/.speccrew/skills/speccrew-knowledge-bizs-ui-analyze/templates/FEATURE-DETAIL-TEMPLATE-UI-MOBILE.md

@@ -0,0 +1,281 @@
+
+# Feature Detail Design Template - [Feature Name]
+
+> **Platform**: Mobile Native (iOS/Android)
+> **Tech Stack**: Swift/Kotlin/React Native/Flutter
+
+## 1. Content Overview
+
+name: {Feature Name}
+
+description: Feature overview.
+
+document-path: {documentPath}
+source-path: {sourcePath}
+
+## 2. Interface Prototype
+
+<!-- AI-TAG: UI_PROTOTYPE -->
+<!-- AI-NOTE: Mobile UI prototype uses vertical ASCII wireframes for phone screen layout -->
+<!-- AI-NOTE: Screen size reference: 375×812pt (iPhone X) or 360×640dp (Android) -->
+<!-- AI-NOTE: ONLY draw prototype for the MAIN SCREEN defined in {{sourcePath}} -->
+
+### 2.1 {Main Screen Name}
+
+```
+┌─────────────────────────┐
+│ Status Bar              │
+├─────────────────────────┤
+│ ←  Title          [⋯]  │  ← Navigation Bar
+├─────────────────────────┤
+│                         │
+│  ┌─────────────────┐   │
+│  │  Search Bar     │   │  ← Search/Filter Area
+│  └─────────────────┘   │
+│                         │
+│  ┌─────────────────┐   │
+│  │                 │   │
+│  │   Content       │   │  ← Main Content
+│  │   Area          │   │     (List/Grid/Form)
+│  │                 │   │
+│  │                 │   │
+│  └─────────────────┘   │
+│                         │
+│  ┌─────────────────┐   │
+│  │  [Action Btn]   │   │  ← Floating Action Button
+│  └─────────────────┘   │
+│                         │
+├─────────────────────────┤
+│ [Tab1] [Tab2] [Tab3]   │  ← Tab Bar (if applicable)
+└─────────────────────────┘
+```
+
+**List Item Layout:**
+
+```
+┌─────────────────────────┐
+│ ┌────┐  Title        > │
+│ │Icon│  Subtitle        │
+│ └────┘  [Tag]           │
+├─────────────────────────┤
+│ ┌────┐  Title        > │
+│ │Img │  Subtitle        │
+│ └────┘  [Tag]           │
+└─────────────────────────┘
+```
+
+**Interface Element Description:**
+
+| Area | Element | Type | Description | Interaction | Source Link |
+|------|---------|------|-------------|-------------|-------------|
+| Nav Bar | Back Button | Button | {Return to previous screen} | Tap to navigate back | [Source](../../{sourcePath}) |
+| Nav Bar | Title | Label | {Screen title} | - | [Source](../../{sourcePath}) |
+| Nav Bar | More Menu | Button | {Show action sheet} | Tap to show options | [Source](../../{sourcePath}) |
+| Content | List Item | Cell | {Display data item} | Tap to view detail | [Source](../../{sourcePath}) |
+| Content | Pull Refresh | Gesture | {Pull down to refresh} | Pull down gesture | [Source](../../{sourcePath}) |
+| FAB | Action Button | Button | {Primary action} | Tap to create/add | [Source](../../{sourcePath}) |
+
+**Mobile-Specific Interactions:**
+
+| Gesture | Action | Description | Source |
+|---------|--------|-------------|--------|
+| Tap | Select item | Navigate to detail | [Source](../../{sourcePath}) |
+| Long Press | Context menu | Show action sheet | [Source](../../{sourcePath}) |
+| Swipe Left | Delete/Reveal | Show delete/edit actions | [Source](../../{sourcePath}) |
+| Pull Down | Refresh | Reload data | [Source](../../{sourcePath}) |
+| Infinite Scroll | Load more | Pagination | [Source](../../{sourcePath}) |
+
+---
+
+## 3. Business Flow Description
+
+<!-- AI-TAG: BUSINESS_FLOW -->
+<!-- AI-NOTE: Document ALL business flows triggered by user interactions -->
+<!-- AI-NOTE: Mobile events: onTap, onLongPress, onSwipe, onScroll, onRefresh -->
+
+### 3.1 Screen Initialization Flow
+
+```mermaid
+graph TB
+    Start([Screen Load]) --> Init[Initialize ViewModel/State]
+    Init --> CheckAuth{Check Auth}
+    CheckAuth -->|Not Auth| Login[Navigate to Login]
+    CheckAuth -->|Authed| LoadData[Load Data]
+    LoadData --> Render[Render UI]
+    Render --> End([End])
+    
+    LoadData -->|Call| API1[API fetchData - Query API]
+    LoadData -->|Call| Cache[Load from Cache]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Initialize ViewModel | viewDidLoad/onCreate | [Source](../../{sourcePath}) |
+| 2 | Check authentication | After init | [Source](../../{sourcePath}) |
+| 3 | Load data | Auth passed | [Source](../../{sourcePath}) |
+| 4 | Render UI | Data loaded | [Source](../../{sourcePath}) |
+
+### 3.2 User Interaction Flows
+
+#### 3.2.1 {Event Name: e.g., List Item onTap}
+
+```mermaid
+graph TB
+    Tap[User Tap] --> CheckType{Item Type}
+    CheckType -->|Detail| Navigate[Push Detail Screen]
+    CheckType -->|Action| ShowAction[Show Action Sheet]
+    Navigate --> LoadDetail[Load Detail Data]
+    ShowAction --> HandleAction[Handle Selected Action]
+    
+    LoadDetail -->|Call| API2[API getDetail - Query API]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Detect tap | onTap | [Source](../../{sourcePath}) |
+| 2 | Check item type | Tap detected | [Source](../../{sourcePath}) |
+| 3 | Navigate or show actions | Based on type | [Source](../../{sourcePath}) |
+
+#### 3.2.2 {Event Name: e.g., Pull to Refresh}
+
+```mermaid
+graph TB
+    Pull[Pull Down] --> Trigger{Threshold Met}
+    Trigger -->|Yes| Refresh[Trigger Refresh]
+    Trigger -->|No| Cancel[Cancel]
+    Refresh --> ShowLoading[Show Loading Indicator]
+    ShowLoading --> FetchData[Fetch Latest Data]
+    FetchData --> UpdateUI[Update List]
+    FetchData -->|Call| API3[API refreshData - Query API]
+```
+
+### 3.3 Lifecycle Events
+
+```mermaid
+graph TB
+    subgraph ScreenLifecycle["Screen Lifecycle"]
+        Create[viewDidLoad/onCreate] --> Appear[viewWillAppear/onStart]
+        Appear --> Active[viewDidAppear/onResume]
+        Active --> Disappear[viewWillDisappear/onPause]
+        Disappear --> Inactive[viewDidDisappear/onStop]
+        Inactive --> Destroy[deinit/onDestroy]
+    end
+```
+
+**Lifecycle Handlers:**
+
+| Event | Platform | Handler | Purpose | Source |
+|-------|----------|---------|---------|--------|
+| Create | iOS | viewDidLoad | Initial setup | [Source](../../{sourcePath}) |
+| Create | Android | onCreate | Initial setup | [Source](../../{sourcePath}) |
+| Appear | iOS | viewWillAppear | Prepare data | [Source](../../{sourcePath}) |
+| Appear | Android | onStart | Prepare data | [Source](../../{sourcePath}) |
+| Destroy | iOS | deinit | Cleanup | [Source](../../{sourcePath}) |
+| Destroy | Android | onDestroy | Cleanup | [Source](../../{sourcePath}) |
+
+---
+
+## 4. Data Field Definition
+
+### 4.1 Screen State Fields
+
+| Field Name | Field Type | Description | Platform | Source |
+|------------|------------|-------------|----------|--------|
+| {Field 1} | String/Int/Boolean | {Description} | iOS/Android | [Source](../../{sourcePath}) |
+| {isLoading} | Boolean | {Loading state} | iOS/Android | [Source](../../{sourcePath}) |
+| {dataList} | Array | {List data source} | iOS/Android | [Source](../../{sourcePath}) |
+
+### 4.2 Form Fields (if applicable)
+
+| Field Name | Field Type | Validation | Input Type | Source |
+|------------|------------|------------|------------|--------|
+| {Field 1} | String | {Required} | TextField/EditText | [Source](../../{sourcePath}) |
+| {Field 2} | String | {Email format} | Keyboard: Email | [Source](../../{sourcePath}) |
+
+---
+
+## 5. References
+
+### 5.1 APIs
+
+| API Name | Type | Main Function | Source | Document Path |
+|----------|------|---------------|--------|---------------|
+| {API Name} | Query/Mutation | {Brief description} | [Source](../../{apiSourcePath}) | [API Doc](../../apis/{api-name}.md) |
+
+### 5.2 Native Components/Views
+
+| Component | Platform | Type | Main Function | Source | Document Path |
+|-----------|----------|------|---------------|--------|---------------|
+| {UITableView/RecyclerView} | iOS/Android | List | {Display scrollable list} | [Source](../../{componentSourcePath}) | [Component Doc](../../components/{component-name}.md) |
+| {UICollectionView} | iOS | Grid | {Display grid layout} | [Source](../../{componentSourcePath}) | [Component Doc](../../components/{component-name}.md) |
+
+### 5.3 Other Screens
+
+| Screen Name | Relation Type | Description | Source | Document Path |
+|-------------|---------------|-------------|--------|---------------|
+| {Screen Name} | Push/Modal | {Navigation description} | [Source](../../{screenSourcePath}) | [Screen Doc](../{screen-path}.md) |
+
+### 5.4 Referenced By
+
+| Screen Name | Function Description | Source Path | Document Path |
+|-------------|---------------------|-------------|---------------|
+| {Referencing Screen} | {e.g., "Tap item to navigate to this screen"} | {source-path} | [Screen Doc](../{screen-path}.md) |
+
+---
+
+## 6. Business Rule Constraints
+
+### 6.1 Permission Rules
+
+| Operation | Permission Requirement | No Permission Handling | Source |
+|-----------|----------------------|----------------------|--------|
+| View screen | {Authentication required} | Navigate to login | [Source](../../{sourcePath}) |
+| Perform action | {Role/Permission required} | Hide button / Show alert | [Source](../../{sourcePath}) |
+
+### 6.2 Mobile-Specific Rules
+
+1. **Offline Support**: {e.g., Cache data for offline viewing} | [Source](../../{sourcePath})
+2. **Network Detection**: {e.g., Show offline banner when no connection} | [Source](../../{sourcePath})
+3. **Loading States**: {e.g., Show skeleton screens during load} | [Source](../../{sourcePath})
+
+### 6.3 Validation Rules
+
+| Scenario | Rule | Error Handling | Source |
+|----------|------|----------------|--------|
+| Form input | {Validation rule} | Show inline error / Toast | [Source](../../{sourcePath}) |
+
+---
+
+## 7. Notes and Additional Information
+
+### 7.1 Platform Adaptation
+
+- **iOS**: Follow Human Interface Guidelines, support Dynamic Type
+- **Android**: Follow Material Design, support different screen densities
+- **Safe Area**: Handle notch, home indicator, status bar
+
+### 7.2 Performance Considerations
+
+- **List Optimization**: Use cell reuse, lazy loading
+- **Image Loading**: Use placeholder, progressive loading
+- **Memory Management**: Release resources on screen close
+
+### 7.3 Pending Confirmations
+
+- [ ] **{Pending 1}**: {e.g., Whether to support dark mode}
+- [ ] **{Pending 2}**: {e.g., Whether to add haptic feedback}
+
+---
+
+**Document Status:** 📝 Draft / 👀 In Review / ✅ Published  
+**Last Updated:** {Date}  
+**Maintainer:** {Name}  
+**Related Module Document:** [Module Overview Document](../{{module-name}}-overview.md)
+
+**Section Source**
+- [{ViewController}.swift/{Activity}.kt](../../{sourcePath})
+- [{ViewModel}.swift/{ViewModel}.kt](../../{viewModelPath})