speccrew 0.6.69 → 0.7.1

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/SKILL.md

@@ -72,495 +72,11 @@ Generate the following documents in `{output_path}/`:
 - If system has `*Dashboard.vue` files → `dashboard-pages.md`
 - If system has custom patterns like `*Workflow.vue` → `workflow-pages.md`
 
-## Workflow
+## AgentFlow Definition
 
-### Absolute Constraints
+<!-- @agentflow: workflow.agentflow.xml -->
 
-> **These rules apply to ALL document generation steps. Violation = task failure.**
-
-1. **FORBIDDEN: `create_file` for analysis documents** — NEVER use `create_file` to write any UI analysis document. Each document MUST be created by copying the appropriate template then filling sections with `search_replace`. `create_file` produces truncated output on large files.
-
-2. **FORBIDDEN: Full-file rewrite** — NEVER replace the entire document content in a single operation. Always use targeted `search_replace` on specific sections.
-
-3. **MANDATORY: Template-first workflow** — For every output document, the corresponding template MUST be copied to the target path first, then sections filled with `search_replace`. Skipping copy and writing content directly is FORBIDDEN.
-
-### Step 0: Pre-load Required Templates (Mandatory)
-
-**This step must complete before any workflow step begins.**
-
-Read all template files to understand document structures and required content:
-
-| Template File | Output Document | Purpose |
-|---------------|-----------------|---------|
-| `templates/UI-STYLE-GUIDE-TEMPLATE.md` | `ui-style-guide.md` | Main style guide structure |
-| `templates/PAGE-TYPE-SUMMARY-TEMPLATE.md` | `page-types/page-type-summary.md` | Page type classification structure |
-| `templates/PAGE-TYPE-INDIVIDUAL-TEMPLATE.md` | `page-types/[type]-pages.md` | Individual page type structure |
-| `templates/COMPONENT-LIBRARY-TEMPLATE.md` | `components/component-library.md` | Component inventory structure |
-| `templates/COMMON-COMPONENTS-TEMPLATE.md` | `components/common-components.md` | Common component usage structure |
-| `templates/BUSINESS-COMPONENTS-TEMPLATE.md` | `components/business-components.md` | Business component usage structure |
-| `templates/COMPONENT-INDIVIDUAL-TEMPLATE.md` | `components/{component-name}.md` | Individual component detail |
-| `templates/LAYOUT-PATTERNS-TEMPLATE.md` | `layouts/page-layouts.md` | Layout patterns structure |
-| `templates/NAVIGATION-PATTERNS-TEMPLATE.md` | `layouts/navigation-patterns.md` | Navigation patterns structure |
-| `templates/LAYOUT-INDIVIDUAL-TEMPLATE.md` | `layouts/{layout-name}-layout.md` | Individual layout detail |
-| `templates/STYLE-SYSTEM-TEMPLATE.md` | `styles/color-system.md` | Color system structure |
-| `templates/TYPOGRAPHY-TEMPLATE.md` | `styles/typography.md` | Typography structure |
-| `templates/SPACING-TEMPLATE.md` | `styles/spacing-system.md` | Spacing system structure |
-
-**Key principle**: Extract information from source code according to each template's section requirements.
-
-**Error Handling**: IF any template file is missing THEN report error with template path and STOP workflow.
-
-### Step 1: Discover Source Structure
-
-**Purpose**: Gather project metadata for `ui-style-guide.md` Section 1-2 (Project Overview, Platform Summary)
-
-**Template Reference**: `UI-STYLE-GUIDE-TEMPLATE.md` - Sections: Project Overview, Platform Summary
-
-Explore the source code directory to understand:
-- Project structure (views/pages directory)
-- Component organization
-- Style file locations
-- Configuration files (package.json, vite.config, etc.)
-
-**Key directories to explore:**
-- `src/views/` or `src/pages/` - Page components
-- `src/components/` - Reusable components
-- `src/layout/` or `src/layouts/` - Layout components
-- `src/styles/` or `src/assets/styles/` - Style files
-
-**Extract for ui-style-guide.md:**
-- Technology Stack (framework, UI library, build tool, language versions)
-- Directory Structure
-- Platform details (resolution range, target device)
-- Browser support list
-
-### Step 2: Analyze Page Types
-
-**Purpose**: Generate `page-types/page-type-summary.md` and individual `[type]-pages.md` files
-
-**Templates to Read First**:
-- `templates/PAGE-TYPE-SUMMARY-TEMPLATE.md` - Sections: Analysis Methodology, Page Type Statistics, Naming Conventions Summary, New Page Selection Guide, Page Type Details
-- `templates/PAGE-TYPE-INDIVIDUAL-TEMPLATE.md` - Structure for each page type document
-
-**Output Documents**:
-1. `page-types/page-type-summary.md` - Classification overview
-2. `page-types/[type]-pages.md` - One per discovered page type (dynamically named)
-
-Scan page files to identify and classify page types dynamically based on actual source code.
-
-#### Dynamic Page Type Discovery
-
-**DO NOT assume predefined page types.** Instead, analyze the actual codebase to discover what page types exist:
-
-1. **File Name Analysis**
-   - Extract naming patterns from page files
-   - Group files by similar naming conventions
-   - Examples: `*List.vue`, `*Form.vue`, `*Detail.vue`, `*Chart.vue`, etc.
-
-2. **Component Usage Analysis**
-   - Identify dominant components in each file group
-   - Look for patterns like:
-     - Table-heavy files → likely list/query pages
-     - Form-heavy files → likely create/edit pages
-     - Chart-heavy files → likely report/dashboard pages
-     - Split-pane layouts → likely master-detail pages
-
-3. **Route/Navigation Analysis**
-   - Check router configuration for page organization
-   - Identify menu structures and page hierarchies
-
-4. **Content Pattern Recognition**
-   - Search for keywords in template sections:
-     - Search/filter inputs → query functionality
-     - Submit buttons → form functionality
-     - Charts/graphs → report functionality
-     - Trees + tables → tree-table functionality
-
-#### Page Type Classification Output
-
-Based on analysis, generate a classification table:
-
-```
-| Page Type | Detection Pattern | File Count | Typical Files |
-|-----------|-------------------|------------|---------------|
-| [Auto-discovered Type 1] | [Recognition features] | N | [Example files] |
-| [Auto-discovered Type 2] | [Recognition features] | N | [Example files] |
-```
-
-#### Analysis Content for Each Discovered Page Type
-
-For each identified page type, extract according to `PAGE-TYPE-INDIVIDUAL-TEMPLATE.md`:
-
-1. **File List** - All files belonging to this type
-2. **Naming Pattern** - Common naming convention
-3. **Common Components** - Components used across pages of this type
-4. **Layout Pattern** - DOM structure and layout approach
-5. **Data Flow** - How data is fetched and managed
-6. **Interaction Patterns** - Common user interactions
-7. **Business Scenarios** - What business functions this page type serves
-
-**Generate**: `page-types/[type]-pages.md` for each discovered type
-
-#### Document Generation (per document)
-
-**For `page-types/page-type-summary.md`:**
-1. Copy template `templates/PAGE-TYPE-SUMMARY-TEMPLATE.md` → `{output_path}/page-types/page-type-summary.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For each `page-types/[type]-pages.md`:**
-1. Copy template `templates/PAGE-TYPE-INDIVIDUAL-TEMPLATE.md` → `{output_path}/page-types/[type]-pages.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-### Step 3: Extract Component Usage
-
-**Purpose**: Generate component documentation in `components/` directory
-
-**Templates to Read First**:
-- `templates/COMPONENT-LIBRARY-TEMPLATE.md` - Sections: UI Framework Components, Common Components, Business Components, Component Usage Statistics
-- `templates/COMMON-COMPONENTS-TEMPLATE.md` - Common component patterns and usage
-- `templates/BUSINESS-COMPONENTS-TEMPLATE.md` - Business component patterns
-
-**Output Documents**:
-1. `components/component-library.md` - Component inventory (summary with links)
-2. `components/common-components.md` - Common component usage conventions
-3. `components/business-components.md` - Business component usage conventions
-4. `components/{component-name}.md` - Individual component detail (one per discovered component)
-
-**Note**: `component-library.md` serves as the inventory/index:
-- Lists ALL discovered components with category, source, and brief description
-- Links to individual component documents: [wd-button](wd-button.md)
-- Does NOT contain detailed Props/Events (those are in individual files)
-
-Analyze component imports and usage:
-
-#### Component Categories
-
-**UI Framework Components** (Element Plus, Ant Design, Vant, etc.)
-- Button, Input, Select, Table, Form, Modal, etc.
-
-**Common Components** (Project-specific)
-- SearchForm, Pagination, DictTag, ImagePreview, etc.
-
-**Business Components** (Domain-specific)
-- UserSelect, DeptTree, RolePicker, etc.
-
-#### Extraction Method
-
-1. Read component files in `src/components/`
-2. Analyze imports in page files
-3. Identify component props and usage patterns
-4. Document component APIs
-
-**Extract for component-library.md** (per COMPONENT-LIBRARY-TEMPLATE.md):
-- UI Framework Components: Basic, Form, Data Display, Navigation, Feedback components
-- Common Components: Layout, Utility, Functional components with props
-- Business Components: Domain-specific components
-- Component usage statistics and dependencies
-
-**Extract for common-components.md**:
-- Component purpose and usage scenarios
-- Props definition and examples
-- Usage patterns and best practices
-
-**Extract for business-components.md**:
-- Business component list by domain
-- Props and event definitions
-- Business logic integration patterns
-
-#### Document Generation (per document)
-
-**For `components/component-library.md`:**
-1. Copy template `templates/COMPONENT-LIBRARY-TEMPLATE.md` → `{output_path}/components/component-library.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For `components/common-components.md`:**
-1. Copy template `templates/COMMON-COMPONENTS-TEMPLATE.md` → `{output_path}/components/common-components.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For `components/business-components.md`:**
-1. Copy template `templates/BUSINESS-COMPONENTS-TEMPLATE.md` → `{output_path}/components/business-components.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-#### Generate Individual Component Documents
-
-For each component discovered during analysis:
-
-1. **Copy Template**: Copy `templates/COMPONENT-INDIVIDUAL-TEMPLATE.md` to `{output_path}/components/{component-name}.md`
-   - Component name: lowercase, kebab-case (e.g., `wd-button.md`, `fg-search-form.md`)
-
-2. **Fill Template**: Use search_replace to fill each section:
-   - Extract Props/Events/Slots from source code (TypeScript interfaces, defineProps, defineEmits)
-   - Generate usage examples from actual usage found in pages/
-   - Extract CSS variables/classes from component styles
-   - Identify related components from imports
-
-3. **Scope Control**:
-   - For UI framework components (e.g., wd-*, el-*): Focus on project-specific usage patterns and customization, NOT full API docs (defer to official documentation)
-   - For custom components (e.g., fg-*): Full Props/Events/Slots documentation
-   - Skip trivial components (< 10 lines, no props/events)
-
-4. **Naming Convention**: {component-name}.md
-   - Use the component tag name in kebab-case
-   - Examples: wd-button.md, fg-search-form.md, z-paging.md
-
-### Step 4: Analyze Layout Patterns
-
-**Purpose**: Generate layout documentation in `layouts/` directory
-
-**Templates to Read First**:
-- `templates/LAYOUT-PATTERNS-TEMPLATE.md` - Layout pattern structure
-- `templates/NAVIGATION-PATTERNS-TEMPLATE.md` - Navigation pattern structure
-
-**Output Documents**:
-1. `layouts/page-layouts.md` - Layout pattern summary (with links)
-2. `layouts/navigation-patterns.md` - Navigation patterns
-3. `layouts/{layout-name}-layout.md` - Individual layout detail (one per discovered layout)
-
-**Note**: `page-layouts.md` serves as the layout pattern summary:
-- Lists ALL discovered layout patterns with type and usage frequency
-- Links to individual layout documents: [TabBar Layout](tabbar-layout.md)
-- Contains high-level comparison table between layouts
-- Does NOT contain detailed region/component analysis (those are in individual files)
-
-Identify common layout patterns:
-
-#### Layout Types
-
-1. **Standard List Layout**
-   ```
-   Search Form
-   Toolbar (Add/Export/Delete buttons)
-   Data Table
-   Pagination
-   ```
-
-2. **Standard Form Layout**
-   ```
-   Form Card
-   Form Fields (2-3 columns)
-   Action Buttons (Submit/Cancel)
-   ```
-
-3. **Detail View Layout**
-   ```
-   Detail Card
-   Description List
-   Action Buttons
-   ```
-
-4. **Split Pane Layout**
-   ```
-   Left: Tree/Menu
-   Right: Content Table/Form
-   ```
-
-**Extract for page-layouts.md** (per LAYOUT-PATTERNS-TEMPLATE.md):
-- Layout type definitions and visual diagrams
-- DOM structure patterns
-- Responsive behavior rules
-- Usage scenarios for each layout
-
-**Extract for navigation-patterns.md** (per NAVIGATION-PATTERNS-TEMPLATE.md):
-- Navigation structure (sidebar, topbar, breadcrumbs)
-- Menu organization patterns
-- Route configuration conventions
-- Navigation state management
-
-#### Document Generation (per document)
-
-**For `layouts/page-layouts.md`:**
-1. Copy template `templates/LAYOUT-PATTERNS-TEMPLATE.md` → `{output_path}/layouts/page-layouts.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For `layouts/navigation-patterns.md`:**
-1. Copy template `templates/NAVIGATION-PATTERNS-TEMPLATE.md` → `{output_path}/layouts/navigation-patterns.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-#### Generate Individual Layout Documents
-
-For each distinct layout pattern discovered:
-
-1. **Copy Template**: Copy `templates/LAYOUT-INDIVIDUAL-TEMPLATE.md` to `{output_path}/layouts/{layout-name}-layout.md`
-   - Layout name: lowercase, kebab-case (e.g., `tabbar-layout.md`, `detail-layout.md`)
-
-2. **Fill Template**: Use search_replace to fill each section:
-   - Generate ASCII layout diagram from actual page structure
-   - List components used in this layout
-   - Extract page configuration from pages.json or route config
-   - Identify pages that use this layout pattern
-
-3. **Discovery Rules**:
-   - Analyze page structures to identify distinct layout patterns
-   - Group pages with similar structure into layout categories
-   - Minimum 2 pages must share a layout pattern to warrant a document
-   - Common layout types: tabbar, detail, form, list, dashboard, modal, fullscreen
-
-4. **Naming Convention**: {layout-name}-layout.md
-   - Use descriptive name in kebab-case
-   - Examples: tabbar-layout.md, detail-layout.md, form-layout.md
-
-### Step 5: Extract Style Conventions
-
-**Purpose**: Generate style system documentation in `styles/` directory
-
-**Templates to Read First**:
-- `templates/STYLE-SYSTEM-TEMPLATE.md` - Color system structure
-- `templates/TYPOGRAPHY-TEMPLATE.md` - Typography structure
-- `templates/SPACING-TEMPLATE.md` - Spacing system structure
-
-**Output Documents**:
-1. `styles/color-system.md` - Color system
-2. `styles/typography.md` - Typography conventions
-3. `styles/spacing-system.md` - Spacing system
-
-Analyze style files to extract:
-
-#### Color System
-- Primary colors
-- Status colors (success, warning, error, info)
-- Text colors
-- Background colors
-- Border colors
-
-**Extract for color-system.md** (per STYLE-SYSTEM-TEMPLATE.md):
-- Color palette with hex values
-- Semantic color usage (primary, success, warning, error, info)
-- Color application rules (text, background, border)
-- CSS variables or theme configuration
-
-#### Typography
-- Font families
-- Font sizes (heading, body, small)
-- Font weights
-- Line heights
-
-**Extract for typography.md** (per TYPOGRAPHY-TEMPLATE.md):
-- Font family definitions
-- Type scale (H1-H6, body, small sizes)
-- Font weights and line heights
-- Typography usage patterns
-
-#### Spacing System
-- Padding/Margin scales
-- Grid system
-- Container widths
-
-**Extract for spacing-system.md** (per SPACING-TEMPLATE.md):
-- Spacing tokens (xs, sm, md, lg, xl values)
-- Grid system configuration
-- Container and breakpoint definitions
-- Spacing application guidelines
-
-#### Document Generation (per document)
-
-**For `styles/color-system.md`:**
-1. Copy template `templates/STYLE-SYSTEM-TEMPLATE.md` → `{output_path}/styles/color-system.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For `styles/typography.md`:**
-1. Copy template `templates/TYPOGRAPHY-TEMPLATE.md` → `{output_path}/styles/typography.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-**For `styles/spacing-system.md`:**
-1. Copy template `templates/SPACING-TEMPLATE.md` → `{output_path}/styles/spacing-system.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-### Step 6: Generate Documentation
-
-**Purpose**: Create all documentation files using extracted data and templates
-
-#### Document Generation Workflow
-
-For each document, follow this process:
-
-1. **Copy the corresponding template** from `templates/` directory to target path
-2. **Review extracted data** from Steps 1-5
-3. **Fill template sections** using `search_replace` - map data to template placeholders
-4. **Verify** all template placeholders are filled
-
-**Note**: NEVER use `create_file` to generate documents. Always copy template first, then use `search_replace` to fill sections.
-
-#### Document Generation (per document)
-
-**For `ui-style-guide.md`:**
-1. Copy template `templates/UI-STYLE-GUIDE-TEMPLATE.md` → `{output_path}/ui-style-guide.md`
-2. Fill each section using `search_replace` (FORBIDDEN: `create_file` rewrite)
-
-#### Document Generation Order and Dependencies
-
-| Order | Document | Template | Data Source | Dependencies |
-|-------|----------|----------|-------------|--------------|
-| 1 | `ui-style-guide.md` | UI-STYLE-GUIDE-TEMPLATE.md | Step 1, 3, 4, 5 | None (main entry) |
-| 2 | `page-types/page-type-summary.md` | PAGE-TYPE-SUMMARY-TEMPLATE.md | Step 2 | None |
-| 3 | `page-types/[type]-pages.md` | PAGE-TYPE-INDIVIDUAL-TEMPLATE.md | Step 2 | page-type-summary.md |
-| 4 | `components/component-library.md` | COMPONENT-LIBRARY-TEMPLATE.md | Step 3 | None |
-| 5 | `components/common-components.md` | COMMON-COMPONENTS-TEMPLATE.md | Step 3 | component-library.md |
-| 6 | `components/business-components.md` | BUSINESS-COMPONENTS-TEMPLATE.md | Step 3 | component-library.md |
-| 7 | `components/{component-name}.md` | COMPONENT-INDIVIDUAL-TEMPLATE.md | Step 3 | component-library.md |
-| 8 | `layouts/page-layouts.md` | LAYOUT-PATTERNS-TEMPLATE.md | Step 4 | None |
-| 9 | `layouts/navigation-patterns.md` | NAVIGATION-PATTERNS-TEMPLATE.md | Step 4 | page-layouts.md |
-| 10 | `layouts/{layout-name}-layout.md` | LAYOUT-INDIVIDUAL-TEMPLATE.md | Step 4 | page-layouts.md |
-| 11 | `styles/color-system.md` | STYLE-SYSTEM-TEMPLATE.md | Step 5 | None |
-| 12 | `styles/typography.md` | TYPOGRAPHY-TEMPLATE.md | Step 5 | color-system.md |
-| 13 | `styles/spacing-system.md` | SPACING-TEMPLATE.md | Step 5 | color-system.md |
-
-**Note**: `ui-style-guide.md` should reference/link to all other generated documents.
-
-#### Required Documents (All Platforms)
-
-| Document | Template | Required |
-|----------|----------|----------|
-| `ui-style-guide.md` | UI-STYLE-GUIDE-TEMPLATE.md | ✅ Yes |
-| `page-types/page-type-summary.md` | PAGE-TYPE-SUMMARY-TEMPLATE.md | ✅ Yes |
-| `page-types/[type]-pages.md` | PAGE-TYPE-INDIVIDUAL-TEMPLATE.md | ✅ Yes (one per discovered type) |
-| `components/component-library.md` | COMPONENT-LIBRARY-TEMPLATE.md | ✅ Yes |
-| `components/common-components.md` | COMMON-COMPONENTS-TEMPLATE.md | ✅ Yes |
-| `components/business-components.md` | BUSINESS-COMPONENTS-TEMPLATE.md | ✅ Yes |
-| `components/{component-name}.md` | COMPONENT-INDIVIDUAL-TEMPLATE.md | ✅ Yes (one per discovered component) |
-| `layouts/page-layouts.md` | LAYOUT-PATTERNS-TEMPLATE.md | ✅ Yes |
-| `layouts/navigation-patterns.md` | NAVIGATION-PATTERNS-TEMPLATE.md | ✅ Yes |
-| `layouts/{layout-name}-layout.md` | LAYOUT-INDIVIDUAL-TEMPLATE.md | ✅ Yes (one per discovered layout) |
-| `styles/color-system.md` | STYLE-SYSTEM-TEMPLATE.md | ✅ Yes |
-| `styles/typography.md` | TYPOGRAPHY-TEMPLATE.md | ✅ Yes |
-| `styles/spacing-system.md` | SPACING-TEMPLATE.md | ✅ Yes |
-
-### Step 7: Verify Output Completeness
-
-**CRITICAL**: Verify all required files exist before reporting completion.
-
-**Required File Structure**:
-```
-{output_path}/                    # Caller should pass path ending with ui-style/
-├── ui-style-guide.md                           ✅ Required
-├── page-types/
-│   ├── page-type-summary.md                    ✅ Required
-│   └── [type-1]-pages.md                       ✅ Required (one per discovered type)
-│   └── [type-2]-pages.md                       ✅ Required (one per discovered type)
-│   └── ...                                     ✅ Additional types...
-├── components/
-│   ├── component-library.md                    ✅ Required
-│   ├── common-components.md                    ✅ Required
-│   ├── business-components.md                  ✅ Required
-│   └── {component-name}.md                     ✅ Required (one per discovered component)
-├── layouts/
-│   ├── page-layouts.md                         ✅ Required
-│   ├── navigation-patterns.md                  ✅ Required
-│   └── {layout-name}-layout.md                 ✅ Required (one per discovered layout)
-└── styles/
-    ├── color-system.md                         ✅ Required
-    ├── typography.md                           ✅ Required
-    └── spacing-system.md                       ✅ Required
-```
-
-**Verification Rules**:
-1. Count discovered page types from Step 2
-2. Verify each page type has a corresponding `[type]-pages.md` file
-3. Verify all 13 required documents exist (11 base + individual component/layout files)
-4. Verify each component in component-library.md has a corresponding `{component-name}.md` file
-5. Verify each layout in page-layouts.md has a corresponding `{layout-name}-layout.md` file
-6. Verify component-library.md contains links to all individual component files
-7. Verify page-layouts.md contains links to all individual layout files
-8. If any file is missing, regenerate before proceeding
+> **REQUIRED**: Before executing this workflow, read the XML workflow specification: `speccrew-workspace/docs/rules/agentflow-spec.md`
 
 ## Checklist