speccrew 0.1.0

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/LAYOUT-PATTERNS-TEMPLATE.md

@@ -0,0 +1,208 @@
+---
+template_name: layout-patterns
+description: Layout patterns documentation template
+output_file: layouts/page-layouts.md
+---
+
+# Page Layout Patterns
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+This document describes the standard layout patterns used in {{platform_name}}.
+
+## Layout Types
+
+### 1. Standard List Layout
+
+**Use Case**: Data listing, search results, tables
+
+**Visual Structure**:
+
+```
++------------------------------------------+
+|  Search Form (filters, search input)     |
++------------------------------------------+
+|  Toolbar (Add, Export, Batch actions)    |
++------------------------------------------+
+|                                          |
+|  Data Table                              |
+|  +------+------+------+------+          |
+|  | Col1 | Col2 | Col3 | Col4 |          |
+|  +------+------+------+------+          |
+|  | ...  | ...  | ...  | ...  |          |
+|  +------+------+------+------+          |
+|                                          |
++------------------------------------------+
+|  Pagination                              |
++------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{list_layout_code_example}}
+```
+
+**Key Components**:
+{{list_layout_key_components}}
+
+---
+
+### 2. Standard Form Layout
+
+**Use Case**: Data entry, editing, configuration
+
+**Visual Structure**:
+
+```
++------------------------------------------+
+|  Form Card                               |
+|  +------------------------------------+  |
+|  |  Form Title                        |  |
+|  +------------------------------------+  |
+|  |  +--------+  +--------+            |  |
+|  |  | Field1 |  | Field2 |            |  |
+|  |  +--------+  +--------+            |  |
+|  |  +--------+  +--------+            |  |
+|  |  | Field3 |  | Field4 |            |  |
+|  |  +--------+  +--------+            |  |
+|  +------------------------------------+  |
+|  |  [Cancel]              [Submit]    |  |
+|  +------------------------------------+  |
++------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{form_layout_code_example}}
+```
+
+**Key Components**:
+{{form_layout_key_components}}
+
+---
+
+### 3. Detail View Layout
+
+**Use Case**: Data display, read-only views, information pages
+
+**Visual Structure**:
+
+```
++------------------------------------------+
+|  Detail Card                             |
+|  +------------------------------------+  |
+|  |  Title + Actions                   |  |
+|  +------------------------------------+  |
+|  |  +-------------+  +-------------+  |  |
+|  |  | Section 1   |  | Section 2   |  |  |
+|  |  | - Item 1    |  | - Item 1    |  |  |
+|  |  | - Item 2    |  | - Item 2    |  |  |
+|  |  +-------------+  +-------------+  |  |
+|  +------------------------------------+  |
++------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{detail_layout_code_example}}
+```
+
+**Key Components**:
+{{detail_layout_key_components}}
+
+---
+
+### 4. Split Pane Layout
+
+**Use Case**: Master-detail, tree-table, navigation with content
+
+**Visual Structure**:
+
+```
++-------------------+----------------------+
+|                   |                      |
+|   Tree/Menu       |    Content Area      |
+|   +-----------+   |   +----------------+ |
+|   | Item 1    |   |   |                | |
+|   | Item 2    |   |   |   Main Content | |
+|   | Item 3    |   |   |                | |
+|   +-----------+   |   +----------------+ |
+|                   |                      |
++-------------------+----------------------+
+```
+
+**Implementation**:
+
+```vue
+{{split_pane_layout_code_example}}
+```
+
+**Key Components**:
+{{split_pane_layout_key_components}}
+
+---
+
+### 5. Dashboard Layout
+
+**Use Case**: Overview pages, analytics, reporting
+
+**Visual Structure**:
+
+```
++------------------------------------------+
+|  Stat Cards Row                          |
+|  +------+  +------+  +------+  +------+  |
+|  |Stat 1|  |Stat 2|  |Stat 3|  |Stat 4|  |
+|  +------+  +------+  +------+  +------+  |
++------------------------------------------+
+|  +----------------+  +----------------+  |
+|  |   Chart 1      |  |   Chart 2      |  |
+|  +----------------+  +----------------+  |
++------------------------------------------+
+|  +----------------+  +----------------+  |
+|  |   Table/List   |  |   Activity     |  |
+|  +----------------+  +----------------+  |
++------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{dashboard_layout_code_example}}
+```
+
+**Key Components**:
+{{dashboard_layout_key_components}}
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Breakpoint | Width | Layout Adjustments |
+|------------|-------|-------------------|
+{{breakpoint_table}}
+
+### Responsive Patterns
+
+{{responsive_patterns_description}}
+
+## Layout Selection Guide
+
+| Content Type | Recommended Layout | Alternative |
+|--------------|-------------------|-------------|
+{{layout_selection_table}}
+
+---
+
+**Section Source**
+{{section_source_files}}

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/NAVIGATION-PATTERNS-TEMPLATE.md

@@ -0,0 +1,157 @@
+---
+template_name: navigation-patterns
+description: Navigation patterns documentation
+output_file: layouts/navigation-patterns.md
+---
+
+# Navigation Patterns
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+Navigation patterns used in {{platform_name}}.
+
+## Navigation Types
+
+### 1. Sidebar Navigation
+
+**Use Case**: Main application navigation
+
+**Structure**:
+
+```
++------------------+------------------------------------------+
+| Logo             |                                          |
++------------------+                                          |
+|                  |                                          |
+|  Dashboard       |           Main Content Area              |
+|  Users           |                                          |
+|  Settings        |                                          |
+|  ...             |                                          |
+|                  |                                          |
++------------------+------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{sidebar_navigation_code}}
+```
+
+**Behavior**:
+{{sidebar_behavior}}
+
+---
+
+### 2. Top Navigation
+
+**Use Case**: Secondary navigation, toolbars
+
+**Structure**:
+
+```
++-------------------------------------------------------------+
+| Breadcrumb  |          Actions | User Profile               |
++-------------------------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{top_navigation_code}}
+```
+
+---
+
+### 3. Tab Navigation
+
+**Use Case**: Content organization within a page
+
+**Structure**:
+
+```
++-------------------------------------------------------------+
+| [Tab 1] [Tab 2] [Tab 3]                                     |
++-------------------------------------------------------------+
+|                                                             |
+|                    Tab Content                              |
+|                                                             |
++-------------------------------------------------------------+
+```
+
+**Implementation**:
+
+```vue
+{{tab_navigation_code}}
+```
+
+---
+
+### 4. Breadcrumb Navigation
+
+**Use Case**: Hierarchical page indication
+
+**Structure**:
+
+```
+Home / Category / Current Page
+```
+
+**Implementation**:
+
+```vue
+{{breadcrumb_code}}
+```
+
+---
+
+### 5. Pagination
+
+**Use Case**: List navigation
+
+**Structure**:
+
+```
+[Previous] [1] [2] [3] ... [10] [Next]
+```
+
+**Implementation**:
+
+```vue
+{{pagination_code}}
+```
+
+## Navigation State Management
+
+### Active State
+
+{{active_state_guidelines}}
+
+### Collapsed State
+
+{{collapsed_state_guidelines}}
+
+### Mobile Adaptation
+
+{{mobile_adaptation_guidelines}}
+
+## Navigation Guidelines
+
+### Information Architecture
+
+{{ia_guidelines}}
+
+### Accessibility
+
+{{accessibility_guidelines}}
+
+---
+
+**Section Source**
+{{section_source_files}}

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/PAGE-TYPE-INDIVIDUAL-TEMPLATE.md

@@ -0,0 +1,123 @@
+---
+template_name: page-type-individual
+description: Individual page type analysis template
+dynamic_name: "{{page_type_name}}-pages.md"
+output_path: page-types/
+---
+
+# {{page_type_display_name}} Pages
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+- **Detection Pattern**: `{{detection_pattern}}`
+- **File Count**: {{file_count}} files
+- **Typical Functions**: {{typical_functions}}
+
+## Applicable Scenarios
+
+{{applicable_scenarios_list}}
+
+## Page Inventory
+
+| File Path | Page Name | Function Description | Module |
+|-----------|-----------|---------------------|--------|
+{{page_inventory_table}}
+
+## Layout Structure
+
+### Visual Layout
+
+```
+{{layout_ascii_diagram}}
+```
+
+### DOM Structure
+
+```
+{{dom_structure}}
+```
+
+## Common Components
+
+### UI Framework Components
+
+{{ui_framework_components_list}}
+
+### Project Common Components
+
+{{project_common_components_list}}
+
+### Business Components
+
+{{business_components_list}}
+
+## Data Flow
+
+```
+{{data_flow_diagram}}
+```
+
+### Data Fetching Pattern
+
+{{data_fetching_pattern}}
+
+### State Management
+
+{{state_management_pattern}}
+
+## Interaction Patterns
+
+### User Interactions
+
+{{user_interactions_list}}
+
+### Event Handling
+
+{{event_handling_pattern}}
+
+## Code Example
+
+### Typical Implementation
+
+```vue
+{{code_example}}
+```
+
+### Key Implementation Points
+
+{{implementation_points}}
+
+## Best Practices
+
+### Design Guidelines
+
+{{design_guidelines}}
+
+### Development Guidelines
+
+{{development_guidelines}}
+
+### Performance Considerations
+
+{{performance_considerations}}
+
+## Related Files
+
+{{related_files_list}}
+
+## See Also
+
+- [Page Type Summary](page-type-summary.md)
+{{related_page_type_links}}
+
+---
+
+**Section Source**
+{{section_source_files}}

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/PAGE-TYPE-SUMMARY-TEMPLATE.md

@@ -0,0 +1,58 @@
+---
+template_name: page-type-summary
+description: Page type summary and classification template
+output_file: page-types/page-type-summary.md
+---
+
+# Page Type Overview
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Analysis Methodology
+
+Page types were identified through automated analysis of the source codebase:
+
+1. **File Name Pattern Analysis**: Extracted naming conventions from `src/views/` and `src/pages/`
+2. **Component Usage Analysis**: Identified dominant component patterns in each file group
+3. **Content Pattern Recognition**: Scanned templates for functional keywords
+4. **Route Configuration Analysis**: Reviewed router configuration for page organization
+
+## Page Type Statistics
+
+| Page Type | Detection Pattern | File Count | Percentage | Typical Files |
+|-----------|-------------------|------------|------------|---------------|
+{{page_type_statistics_table}}
+
+## Naming Conventions Summary
+
+| Page Type | Recommended Naming | Example |
+|-----------|-------------------|---------|
+{{naming_conventions_table}}
+
+## New Page Selection Guide
+
+When creating a new page, use this guide to select the appropriate page type:
+
+| Business Scenario | Recommended Page Type | Reference Document |
+|-------------------|----------------------|-------------------|
+{{page_selection_guide_table}}
+
+## Page Type Details
+
+### Quick Reference
+
+{{page_type_quick_reference}}
+
+### Documentation Links
+
+{{page_type_documentation_links}}
+
+---
+
+**Section Source**
+{{section_source_files}}

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/SPACING-TEMPLATE.md

@@ -0,0 +1,119 @@
+---
+template_name: spacing
+description: Spacing system documentation
+output_file: styles/spacing-system.md
+---
+
+# Spacing System
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+The spacing system provides consistent spacing values for {{platform_name}}.
+
+## Spacing Scale
+
+### Base Unit
+
+Base unit: {{base_unit}}px
+
+### Spacing Tokens
+
+| Token | Value | Pixels | Usage |
+|-------|-------|--------|-------|
+{{spacing_tokens_table}}
+
+## Margin Patterns
+
+### Component Margins
+
+| Context | Token | Value |
+|---------|-------|-------|
+{{component_margins_table}}
+
+### Section Margins
+
+| Context | Token | Value |
+|---------|-------|-------|
+{{section_margins_table}}
+
+## Padding Patterns
+
+### Component Padding
+
+| Component Type | Token | Value |
+|----------------|-------|-------|
+{{component_padding_table}}
+
+### Container Padding
+
+| Container Type | Token | Value |
+|----------------|-------|-------|
+{{container_padding_table}}
+
+## Gap Patterns
+
+### Flex/Grid Gaps
+
+| Context | Token | Value |
+|---------|-------|-------|
+{{gap_patterns_table}}
+
+## CSS Variables
+
+```css
+:root {
+{{spacing_css_variables}}
+}
+```
+
+## Utility Classes
+
+### Margin Utilities
+
+```css
+{{margin_utility_classes}}
+```
+
+### Padding Utilities
+
+```css
+{{padding_utility_classes}}
+```
+
+## Layout Spacing
+
+### Page Layout
+
+```
+{{page_layout_spacing_diagram}}
+```
+
+### Component Spacing
+
+{{component_spacing_guidelines}}
+
+## Usage Guidelines
+
+### Do's
+
+- ✅ Use spacing tokens instead of arbitrary values
+- ✅ Maintain consistent spacing within components
+- ✅ Use larger spacing between sections, smaller within components
+
+### Don'ts
+
+- ❌ Mix spacing tokens arbitrarily
+- ❌ Use spacing for visual fixes instead of proper layout
+- ❌ Hardcode pixel values
+
+---
+
+**Section Source**
+{{section_source_files}}