speccrew 0.1.0

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

@@ -0,0 +1,324 @@
+
+# Feature Detail Design Template - [Feature Name]
+
+## 1. Content Overview
+
+name: {Feature Name}
+
+description: Feature overview.
+
+document-path: {documentPath}
+source-path: {sourcePath}
+
+## 2. Interface Prototype
+
+<!-- AI-TAG: UI_PROTOTYPE -->
+<!-- AI-NOTE: UI prototype uses ASCII wireframes to visually display page layout, elements and their positions -->
+<!-- AI-NOTE: ONLY draw prototype for the MAIN PAGE defined in {{sourcePath}} -->
+<!-- AI-NOTE: DO NOT draw prototypes for external components/modals defined in other files -->
+<!-- AI-NOTE: For external pages or shared components, only add reference links in Section 5, no prototypes -->
+
+### 2.1 {Main Page Name}
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [Page Title] {e.g., Product Management List}                │
+├─────────────────────────────────────────────────────────────┤
+│ ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
+│ │ Filter Area │ □ Checkbox  │ Input □     │ Dropdown ▼  │  │
+│ │             │ Keyword:____|____________ │ Status:_____▼│  │
+│ │             │ [Query]     [Reset]  [Add]                 │  │
+│ └─────────────┴─────────────┴─────────────┴─────────────┘  │
+│                                                             │
+│ ┌─────────────────────────────────────────────────────────┐ │
+│ │ No.  │ Field 1 │ Field 2 │ Field 3 │ Actions         │ │
+│ ├──────┼─────────┼─────────┼─────────┼─────────────────┤ │
+│ │ 1    │ {Value} │ {Value} │ {Value} │ [Edit][Delete]  │ │
+│ │ 2    │ {Value} │ {Value} │ {Value} │ [Edit][Delete]  │ │
+│ │ ...  │ ...     │ ...     │ ...     │ ...             │ │
+│ └──────┴─────────┴─────────┴─────────┴─────────────────┘ │ │
+│                                                             │
+│ ┌─────────────────────────────────────────────────────────┐ │
+│ │ Pagination: Total {X} records  Page [1][2][3]  {X}/page ▼│ │
+│ └─────────────────────────────────────────────────────────┘ │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Interface Element Description:**
+
+| Area | Element | Type | Description | Interaction | Source Link |
+|------|---------|------|-------------|-------------|-------------|
+| Filter Area | Keyword | Input | {Fuzzy search product name/code} | Enter to trigger query | [Source](../../{sourcePath}) |
+| Filter Area | Status Dropdown | Dropdown | {Filter product status} | Change triggers query | [Source](../../{sourcePath}) |
+| Filter Area | Query Button | Button | {Execute query} | Click to refresh list | [Source](../../{sourcePath}) |
+| List Area | Edit Link | Link | {Open edit page} | Click to navigate | [Source](../../{sourcePath}) |
+| List Area | Delete Link | Link | {Delete record} | Click to confirm deletion | [Source](../../{sourcePath}) |
+
+**External References:**
+- Edit page: Navigate to [Edit Page](./edit.md) (external page, not drawn here)
+- Delete confirmation: Uses [DeleteConfirm Component](../../components/DeleteConfirm.md) (shared component)
+
+<!-- AI-NOTE: DO NOT draw prototypes for external components/modals defined in other files -->
+<!-- AI-NOTE: Only document embedded modals that are defined within the same source file -->
+<!-- AI-NOTE: For external components, only add reference links in Section 5.3 or 5.4 -->
+
+
+## 3. Business Flow Description
+
+<!-- AI-TAG: BUSINESS_FLOW -->
+<!-- AI-NOTE: Document ALL business flows triggered by user interactions in this page -->
+<!-- AI-NOTE: Include: page initialization, component events (onChange, onClick, etc.), timers, websocket, page close -->
+<!-- AI-NOTE: For backend APIs and frontend shared methods: only show name, type and main function, NO deep analysis -->
+<!-- AI-NOTE: Follow speccrew-workspace/docs/rules/mermaid-rule.md guidelines: use graph TB/LR, no parentheses in node text, no HTML tags, no style -->
+
+### 3.1 Page Initialization Flow
+
+<!-- AI-NOTE: Document the business flow when page loads -->
+
+```mermaid
+graph TB
+    Start([Page Load]) --> Init[Initialize Page State]
+    Init --> CheckParams[Parse URL Parameters]
+    CheckParams --> LoadData[Load Initial Data]
+    LoadData --> Render[Render Page]
+    Render --> End([End])
+    
+    LoadData -->|Call| API1[API getList - Query API - Fetch data list]
+    LoadData -->|Call| Method1[Method formatParams - Shared Method - Format query parameters]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Initialize page state | Page mount | [Source](../../{sourcePath}) |
+| 2 | Parse URL parameters | Route change | [Source](../../{sourcePath}) |
+| 3 | Load initial data | After params parsed | [Source](../../{sourcePath}) |
+| 4 | Render page | Data loaded | [Source](../../{sourcePath}) |
+
+**Referenced Items:**
+| Name | Type | Main Function | Document Path |
+|------|------|---------------|---------------|
+| getList | API | Fetch data list | [API Doc](../../apis/getList.md) |
+| formatParams | Shared Method | Format query parameters | [Method Doc](../../utils/formatParams.md) |
+
+### 3.2 Component Event Flows
+
+<!-- AI-NOTE: Document business flows for each component event (onClick, onChange, onBlur, etc.) -->
+
+#### 3.2.1 {Event Name: e.g., Query Button onClick}
+
+```mermaid
+graph TB
+    Click[User Click] --> Validate[Validate Input]
+    Validate -->|Valid| Prepare[Prepare Query Params]
+    Validate -->|Invalid| ShowError[Show Error Message]
+    Prepare --> CallAPI[Call API]
+    CallAPI --> HandleResp[Handle Response]
+    HandleResp --> UpdateUI[Update List Display]
+    
+    CallAPI -->|Call| API2[API queryData - Query API - Search with filters]
+    Prepare -->|Call| Method2[Method buildQuery - Shared Method - Build query object]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Validate input | onClick | [Source](../../{sourcePath}) |
+| 2 | Prepare query params | Validation passed | [Source](../../{sourcePath}) |
+| 3 | Call API | Params ready | [Source](../../{sourcePath}) |
+| 4 | Handle response | API returned | [Source](../../{sourcePath}) |
+| 5 | Update UI | Data processed | [Source](../../{sourcePath}) |
+
+**Referenced Items:**
+| Name | Type | Main Function | Document Path |
+|------|------|---------------|---------------|
+| queryData | API | Search with filters | [API Doc](../../apis/queryData.md) |
+| buildQuery | Shared Method | Build query object | [Method Doc](../../utils/buildQuery.md) |
+
+#### 3.2.2 {Event Name: e.g., Dropdown onChange}
+
+```mermaid
+graph TB
+    Change[Value Changed] --> CheckValue[Check Selected Value]
+    CheckValue -->|Has Value| LoadSub[Load Sub-options]
+    CheckValue -->|Empty| ClearSub[Clear Sub-options]
+    LoadSub --> UpdateUI[Update Dropdown]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Check selected value | onChange | [Source](../../{sourcePath}) |
+| 2 | Load/Clear sub-options | Based on value | [Source](../../{sourcePath}) |
+| 3 | Update UI | Options ready | [Source](../../{sourcePath}) |
+
+### 3.3 Timer/WebSocket Flows (if applicable)
+
+<!-- AI-NOTE: Document flows triggered by timers or websocket events -->
+
+#### 3.3.1 {Timer/WebSocket Event Name}
+
+```mermaid
+graph TB
+    Timer[Timer Trigger] --> CheckState[Check Page State]
+    CheckState -->|Active| Refresh[Refresh Data]
+    CheckState -->|Inactive| Skip[Skip This Cycle]
+    Refresh --> UpdateUI[Update Display]
+    
+    Refresh -->|Call| API3[API getLatest - Query API - Get latest data]
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Check page state | Timer interval | [Source](../../{sourcePath}) |
+| 2 | Refresh data | Page is active | [Source](../../{sourcePath}) |
+| 3 | Update UI | Data received | [Source](../../{sourcePath}) |
+
+**Referenced Items:**
+| Name | Type | Main Function | Document Path |
+|------|------|---------------|---------------|
+| getLatest | API | Get latest data | [API Doc](../../apis/getLatest.md) |
+
+### 3.4 Page Close/Cleanup Flow (if applicable)
+
+<!-- AI-NOTE: Document cleanup operations when page closes -->
+
+```mermaid
+graph TB
+    Close[Page Close] --> ClearTimer[Clear Timers]
+    ClearTimer --> SaveState[Save Page State]
+    SaveState --> Cleanup[Cleanup Resources]
+    Cleanup --> End([End])
+```
+
+**Flow Description:**
+
+| Step | Business Operation | Trigger | Source |
+|------|-------------------|---------|--------|
+| 1 | Clear timers | beforeUnmount | [Source](../../{sourcePath}) |
+| 2 | Save page state | Cleanup start | [Source](../../{sourcePath}) |
+| 3 | Cleanup resources | State saved | [Source](../../{sourcePath}) |
+
+## 4. Data Field Definition
+
+<!-- AI-TAG: DATA_DEFINITION -->
+<!-- AI-NOTE: Document data fields used in this page only -->
+
+### 4.1 Page State Fields
+
+| Field Name | Field Type | Description | Source |
+|------------|------------|-------------|--------|
+| {Field 1} | String/Number/Boolean/Array/Object | {Description} | [Source](../../{sourcePath}) |
+| {Field 2} | String | {Description} | [Source](../../{sourcePath}) |
+
+### 4.2 Form Fields (if applicable)
+
+| Field Name | Field Type | Validation Rules | Default Value | Source |
+|------------|------------|------------------|---------------|--------|
+| {Form Field 1} | String | {Required, length 1-100} | - | [Source](../../{sourcePath}) |
+| {Form Field 2} | Number | {≥0} | 0 | [Source](../../{sourcePath}) |
+
+
+## 5. References
+
+<!-- AI-TAG: REFERENCES -->
+<!-- AI-NOTE: List all external references used in this page -->
+<!-- AI-NOTE: Follow bizs document path convention for all reference links -->
+
+### 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 Frontend Shared Methods
+
+| Method Name | Type | Main Function | Source | Document Path |
+|-------------|------|---------------|--------|---------------|
+| {Method Name} | Utils/Helpers | {Brief description} | [Source](../../{methodSourcePath}) | [Method Doc](../../utils/{method-name}.md) |
+
+### 5.3 Shared Components
+
+| Component Name | Type | Main Function | Source | Document Path |
+|----------------|------|---------------|--------|---------------|
+| {Component Name} | UI Component | {Brief description} | [Source](../../{componentSourcePath}) | [Component Doc](../../components/{component-name}.md) |
+
+### 5.4 Other Pages (This Page References)
+
+<!-- AI-NOTE: List external pages/components that this page references/uses -->
+<!-- AI-NOTE: DO NOT analyze these external files, only record their paths for reference -->
+<!-- AI-NOTE: Each external page will have its own separate document generated by another worker -->
+
+| Page Name | Relation Type | Description | Source | Document Path |
+|-----------|---------------|-------------|--------|---------------|
+| {Page Name} | Navigate/Embed | {Relation description} | [Source](../../{pageSourcePath}) | [Page Doc](../{page-path}.md) |
+
+### 5.5 Referenced By (Other Pages Reference This Page)
+
+<!-- AI-NOTE: List all pages that reference/navigate to this page -->
+<!-- AI-NOTE: Search through other page files to find references to this page -->
+
+| Page Name | Function Description | Source Path | Document Path |
+|-----------|---------------------|-------------|---------------|
+| {Referencing Page Name} | {e.g., "Click order ID to navigate to this detail page"} | {source-path} | [Page Doc](../{page-path}.md) |
+
+
+## 6. Business Rule Constraints
+
+<!-- AI-TAG: BUSINESS_RULES -->
+
+### 6.1 Permission Rules
+
+| Operation | Permission Requirement | No Permission Handling | Source |
+|-----------|----------------------|----------------------|--------|
+| Add/Edit/Delete | Have {role name} role or {permission code} permission | Hide operation button, show "No permission" when clicked | [Source](../../{sourcePath}) |
+| View sensitive fields | Have {data permission} scope | Display sensitive fields as "***" | [Source](../../{sourcePath}) |
+
+### 6.2 Business Logic Rules
+
+1. **{Rule 1}**: {e.g., Product code generation rule is "SP+YYMMDD+6 random digits"} | [Source](../../{sourcePath})
+2. **{Rule 2}**: {e.g., When stock is 0, product status automatically changes to "Off-shelf"} | [Source](../../{sourcePath})
+
+### 6.3 Validation Rules
+
+| Validation Scenario | Validation Rule | Prompt Message | Validation Timing | Source |
+|--------------------|-----------------|----------------|-------------------|--------|
+| Form submission | Product name cannot be empty | Please enter product name | Frontend blur + Backend submit | [Source](../../{sourcePath}) |
+| Form submission | Product code format error (must start with SP) | Product code must start with SP, please check | Backend submit | [Source](../../{sourcePath}) |
+
+
+## 7. Notes and Additional Information
+
+<!-- AI-TAG: ADDITIONAL_NOTES -->
+
+### 7.1 Compatibility Adaptation
+
+- **Interface Adaptation**: Supports PC 1920×1080 resolution, responsive adaptation for 1366×768 and above
+- **Interaction Adaptation**: Supports mouse click/Enter to trigger actions, supports keyboard Tab key to switch focus
+
+### 7.2 Pending Confirmations
+
+- [ ] **{Pending 1}**: {e.g., Whether product category dropdown needs to support fuzzy search}
+- [ ] **{Pending 2}**: {e.g., Whether delete operation needs secondary confirmation}
+
+### 7.3 Extension Notes
+
+- This prototype is a simplified version of the core process, extended fields/features can be added in subsequent iterations
+- ASCII wireframe prototype only expresses layout and interaction logic, visual styles (e.g., colors, fonts) should refer to product visual specifications
+
+---
+
+**Document Status:** 📝 Draft / 👀 In Review / ✅ Published  
+**Last Updated:** {Date}  
+**Maintainer:** {Name}  
+**Related Module Document:** [Module Overview Document](../{{module-name}}-overview.md)
+
+**Section Source**
+- [{FeatureFile}.vue](../../{sourcePath})
+- [{StoreFile}.ts](../../{store-path})
+- [{ComponentFile}.vue](../../{component-path})

package/.speccrew/skills/speccrew-knowledge-bizs-ui-style-extract/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: speccrew-knowledge-bizs-ui-style-extract
+description: Extract and aggregate UI design patterns (page types, components, layouts) from analyzed bizs feature documents, outputting to techs ui-style-patterns directory.
+tools: Read, Write
+---
+
+# Bizs UI Style Extract
+
+Extract and aggregate **UI design patterns** from bizs pipeline analyzed feature documents. Through cross-module clustering analysis, identify common page types, component patterns, and layout patterns, then output them to the techs knowledge base `ui-style-patterns/` subdirectory.
+
+## Language Adaptation
+
+**CRITICAL**: All generated documents must match the user's language. Detect the language from the user's input and generate content accordingly.
+
+- User writes in 中文 → Generate Chinese documents, use `language: "zh"`
+- User writes in English → Generate English documents, use `language: "en"`
+- User writes in other languages → Use appropriate language code
+
+**All generated pattern documents must be in the language specified by the `language` parameter.**
+
+## Trigger Scenarios
+
+- Called by `speccrew-knowledge-bizs-dispatch` Stage 3.5 (after Module Summarize, before System Summary)
+- "Extract UI patterns from bizs features"
+- "Aggregate UI design patterns"
+
+## Input
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| `platform_id` | Platform identifier (e.g., web-vue, mobile-uniapp), used to locate output directory | Yes |
+| `platform_type` | Platform type (web, mobile, desktop), only execute for frontend platforms | Yes |
+| `feature_docs_path` | Completed feature documents base path, e.g., `speccrew-workspace/knowledges/bizs/{platform-type}/{module}/features/` | Yes |
+| `features_manifest_path` | Path to features-{platform}.json, used to get completed feature list | Yes |
+| `module_overviews_path` | **Parent directory** containing all module overview subdirectories. Example: `knowledges/bizs/web-vue/` (this directory contains `system/system-overview.md`, `user/user-overview.md`, etc.). **NOT** a specific module directory like `knowledges/bizs/web-vue/system/`. | Yes |
+| `output_path` | Output directory, e.g., `speccrew-workspace/knowledges/techs/{platform_id}/ui-style-patterns/` | Yes |
+| `language` | User language code | Yes |
+
+## Output
+
+> **Directory Separation**: This skill outputs to `ui-style-patterns/` (NOT `ui-style/`).
+> - `ui-style/` is managed by techs pipeline (framework-level design system, existing components/pages)
+> - `ui-style-patterns/` is managed by bizs pipeline (business pattern aggregation from feature docs)
+> This separation prevents file conflicts between the two pipelines.
+
+```
+{output_path}/
+├── page-types/          # Page type pattern documents
+│   ├── {pattern-name}.md
+│   └── ...
+├── components/          # Component pattern documents
+│   ├── {pattern-name}.md
+│   └── ...
+└── layouts/             # Layout pattern documents
+    ├── {pattern-name}.md
+    └── ...
+```
+
+## Workflow Overview
+
+```mermaid
+graph TB
+    S1[Step 1: Load Features Manifest] --> S2[Step 2: Read Feature Documents]
+    S2 --> S3[Step 3: Read Module Overviews]
+    S3 --> S4[Step 4: Cross-Module Clustering]
+    S4 --> S5[Step 5: Generate Pattern Documents]
+    S5 --> S6[Step 6: Return Summary]
+```
+
+---
+
+## Step 1: Load Features Manifest
+
+**Goal**: Read the features manifest to identify all completed features.
+
+**Input Validation**:
+- If `platform_type` is NOT `web`, `mobile`, or `desktop` → Skip this skill (backend platforms do not have UI patterns)
+- Verify `features_manifest_path` exists and is valid JSON
+- Verify `feature_docs_path` exists and is a directory
+- Create `output_path` directory if it does not exist
+
+**Action**:
+- Read `{features_manifest_path}` (e.g., `speccrew-workspace/knowledges/base/sync-state/knowledge-bizs/features-{platform}.json`)
+- Filter features where `status === "completed"`
+- Collect feature metadata: `featureId`, `module`, `documentPath`
+
+**Output**: List of completed features with their document paths.
+
+---
+
+## Step 2: Read Feature Documents
+
+**Goal**: Extract UI-related information from all completed feature documents.
+
+**Action**:
+- For each completed feature, read the `.md` document from `documentPath`
+- Extract the following sections:
+  - **Interface Prototype**: ASCII wireframe diagrams
+  - **Page Elements Table**: Component list with types and responsibilities
+  - **Business Flow Description**: Interaction patterns
+
+**Extraction Focus**:
+| Section | What to Extract |
+|---------|-----------------|
+| Interface Prototype | ASCII wireframe structure, layout regions |
+| Page Elements Table | Component names, types, responsibilities, interactions |
+| Business Flow Description | User interaction sequences, navigation patterns |
+
+---
+
+## Step 3: Read Module Overviews
+
+**Goal**: Gather module-level aggregated information for context.
+
+**Action**:
+- Read all `module-overview.md` files from `{module_overviews_path}`
+- Extract module-level summaries about:
+  - Common page structures
+  - Shared components
+  - Navigation patterns
+
+**Output**: Module-level context for pattern clustering.
+
+---
+
+## Step 4: Cross-Module Clustering Analysis
+
+**Goal**: Identify recurring UI patterns across modules through clustering analysis.
+
+**Action**:
+- Analyze all extracted UI information from Steps 2-3
+- Cluster similar patterns into categories:
+  - **Page Types**: Pages with similar structure and purpose
+  - **Component Patterns**: Reusable component combinations
+  - **Layout Patterns**: Repeating structural layouts
+
+**Clustering Strategy**:
+- Adopt dynamic discovery strategy — Agent automatically identifies and categorizes pattern types based on actual analysis results
+- Templates only standardize output format, do not limit pattern types
+- Common patterns include but are not limited to:
+
+| Category | Common Patterns |
+|----------|-----------------|
+| Page Types | list-page, form-page, detail-page, tree-list-page, dashboard-page, wizard-page |
+| Component Patterns | search-filter-bar, data-table-pagination, modal-form, drawer-detail, tab-panel |
+| Layout Patterns | sidebar-content, topbar-sidebar-content, full-screen |
+
+**Pattern Recognition Criteria**:
+- **Frequency**: Pattern appears in 2+ features (stronger signal if across different modules)
+- **Similarity**: Structural similarity in ASCII wireframes
+- **Semantic alignment**: Similar business purpose and interaction flow
+
+> **Note**: Cross-module occurrence is a strong signal but not required. Patterns appearing in multiple features within a single module are also valid for extraction.
+
+---
+
+## Step 5: Generate Pattern Documents
+
+**Goal**: Create pattern documents for each identified pattern.
+
+**Action**:
+- For each identified pattern, generate a `.md` document using the appropriate template
+- Place documents in corresponding subdirectories:
+  - Page types → `{output_path}/page-types/`
+  - Component patterns → `{output_path}/components/`
+  - Layout patterns → `{output_path}/layouts/`
+
+**File Naming Convention**:
+- Use `kebab-case` for pattern names
+- Examples: `list-page.md`, `search-filter-bar.md`, `sidebar-content.md`
+
+**Template Application**:
+- Use `PAGE-TYPE-TEMPLATE.md` for page type patterns
+- Use `COMPONENT-PATTERN-TEMPLATE.md` for component patterns
+- Use `LAYOUT-PATTERN-TEMPLATE.md` for layout patterns
+
+**Content Requirements**:
+1. **ASCII wireframes**: Must be generalized versions (not direct copies from specific features)
+2. **Instance references**: Must use relative paths to reference actual feature documents
+3. **Mermaid diagrams**: Must follow `speccrew-workspace/docs/rules/mermaid-rule.md` rules
+   - Use `graph TB/LR` syntax only
+   - No `<br/>` tags, no `style` definitions, no nested `subgraph`
+   - No `direction` keyword, no special symbols
+
+---
+
+## Step 6: Return Summary
+
+**Goal**: Provide summary of generated pattern documents.
+
+**Action**:
+- Collect all generated file paths
+- Count patterns by category
+- Return summary object
+
+---
+
+## Generation Rules
+
+1. **Pattern Quality**:
+   - Each pattern must have clear applicable scenarios
+   - Generalized ASCII wireframe (not feature-specific)
+   - At least 2 instance references (from same or different modules)
+
+2. **Template Compliance**:
+   - All sections from template must be filled
+   - Instance reference paths must be relative and valid
+
+3. **Mermaid Compliance**:
+   - Follow all rules in `mermaid-rule.md`
+   - Use basic `graph TB` or `graph LR` syntax
+   - No prohibited syntax elements
+
+4. **Language Consistency**:
+   - All content in the specified `language`
+   - Template section headers remain in English
+   - Content text matches user language
+
+---
+
+## Error Handling
+
+| Scenario | Handling |
+|----------|----------|
+| No completed features | Return empty result, log warning |
+| No patterns identified | Return empty result, log message |
+| Template not found | Use default structure, log warning |
+| Feature document missing | Skip feature, continue with others |
+
+---
+
+## Checklist
+
+- [ ] Step 1: Features manifest loaded, completed features identified
+- [ ] Step 2: All completed feature documents read
+- [ ] Step 3: All module overviews read
+- [ ] Step 4: Cross-module clustering analysis completed
+- [ ] Step 5: Pattern documents generated with correct templates
+- [ ] Step 5: File naming follows kebab-case convention
+- [ ] Step 5: ASCII wireframes are generalized versions
+- [ ] Step 5: Instance references use relative paths
+- [ ] Step 5: Mermaid diagrams follow mermaid-rule.md
+- [ ] Step 6: Summary returned with file list
+
+## Return
+
+After completion, return a summary object to the caller:
+
+```json
+{
+  "status": "completed",
+  "platform_id": "web-vue",
+  "patterns": {
+    "page_types": {
+      "count": 3,
+      "files": ["page-types/list-page.md", "page-types/form-page.md", "page-types/detail-page.md"]
+    },
+    "components": {
+      "count": 2,
+      "files": ["components/search-filter-bar.md", "components/modal-form.md"]
+    },
+    "layouts": {
+      "count": 1,
+      "files": ["layouts/sidebar-content.md"]
+    }
+  },
+  "total_patterns": 6,
+  "output_path": "speccrew-workspace/knowledges/techs/web-vue/ui-style-patterns/"
+}
+```

package/.speccrew/skills/speccrew-knowledge-bizs-ui-style-extract/templates/COMPONENT-PATTERN-TEMPLATE.md

@@ -0,0 +1,33 @@
+# {Component Pattern Name}
+
+## Pattern Overview
+
+- **Category**: Component Pattern
+- **Applicable Scenarios**: {描述此组件模式适用的场景}
+- **Typical Characteristics**: {描述此组件模式的典型特征}
+
+## Standard Layout
+
+{归纳后的通用 ASCII 线框图，展示此组件模式的布局}
+
+## Component Composition
+
+| Component | Role | Configuration | Notes |
+|-----------|------|--------------|-------|
+| {组件名} | {角色} | {配置要点} | {备注} |
+
+## Typical Interaction Flow
+
+{通用化的 Mermaid 流程图，展示此组件模式的典型交互}
+
+## Instance References
+
+| Feature | Module | Document Path |
+|---------|--------|--------------|
+| {feature 名} | {模块名} | {文档相对路径} |
+
+## Design Recommendations
+
+- **Best Practices**: {最佳实践}
+- **Common Variants**: {常见变体}
+- **Considerations**: {注意事项}

package/.speccrew/skills/speccrew-knowledge-bizs-ui-style-extract/templates/LAYOUT-PATTERN-TEMPLATE.md

@@ -0,0 +1,33 @@
+# {Layout Pattern Name}
+
+## Pattern Overview
+
+- **Category**: Layout Pattern
+- **Applicable Scenarios**: {描述此布局模式适用的场景}
+- **Typical Characteristics**: {描述此布局模式的典型特征}
+
+## Standard Layout
+
+{归纳后的通用 ASCII 线框图，展示此布局的区域划分}
+
+## Layout Regions
+
+| Region | Purpose | Typical Content | Responsive Behavior |
+|--------|---------|----------------|---------------------|
+| {区域名} | {用途} | {典型内容} | {响应式行为} |
+
+## Navigation and Interaction
+
+{通用化的 Mermaid 流程图，展示布局中的导航和交互模式}
+
+## Instance References
+
+| Feature | Module | Document Path |
+|---------|--------|--------------|
+| {feature 名} | {模块名} | {文档相对路径} |
+
+## Design Recommendations
+
+- **Best Practices**: {最佳实践}
+- **Common Variants**: {常见变体}
+- **Considerations**: {注意事项}