speccrew 0.1.0

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

@@ -0,0 +1,117 @@
+---
+template_name: style-system
+description: Style system documentation (color, typography, spacing)
+output_file: styles/color-system.md
+---
+
+# Color System
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+The color system provides a consistent palette for {{platform_name}}.
+
+## Brand Colors
+
+### Primary Palette
+
+| Token Name | Hex Value | RGB Value | Usage |
+|------------|-----------|-----------|-------|
+{{primary_palette_table}}
+
+### Secondary Palette
+
+| Token Name | Hex Value | RGB Value | Usage |
+|------------|-----------|-----------|-------|
+{{secondary_palette_table}}
+
+## Semantic Colors
+
+### Status Colors
+
+| Status | Light Mode | Dark Mode | Usage |
+|--------|------------|-----------|-------|
+{{status_colors_table}}
+
+### Feedback Colors
+
+| Type | Color | Usage Examples |
+|------|-------|----------------|
+{{feedback_colors_table}}
+
+## Neutral Colors
+
+### Gray Scale
+
+| Token | Hex Value | Usage |
+|-------|-----------|-------|
+{{gray_scale_table}}
+
+### Text Colors
+
+| Token | Hex Value | Usage |
+|-------|-----------|-------|
+{{text_colors_table}}
+
+## Background Colors
+
+| Token | Hex Value | Usage |
+|-------|-----------|-------|
+{{background_colors_table}}
+
+## Border Colors
+
+| Token | Hex Value | Usage |
+|-------|-----------|-------|
+{{border_colors_table}}
+
+## CSS Variables
+
+```css
+:root {
+{{css_variables}}
+}
+
+[data-theme="dark"] {
+{{dark_mode_variables}}
+}
+```
+
+## Usage Guidelines
+
+### Do's
+
+- ✅ Use semantic color tokens (e.g., `--color-primary`) instead of hardcoded values
+- ✅ Use status colors consistently for their intended purposes
+- ✅ Ensure sufficient contrast ratios for accessibility
+- ✅ Test colors in both light and dark modes
+
+### Don'ts
+
+- ❌ Use colors outside the defined palette without approval
+- ❌ Mix multiple primary colors in the same context
+- ❌ Use status colors for non-status purposes
+- ❌ Ignore color blindness accessibility
+
+## Color Combinations
+
+### Safe Combinations
+
+{{safe_combinations_table}}
+
+### Contrast Requirements
+
+| Text Size | Minimum Contrast | Recommended Contrast |
+|-----------|------------------|---------------------|
+{{contrast_requirements_table}}
+
+---
+
+**Section Source**
+{{section_source_files}}

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

@@ -0,0 +1,107 @@
+---
+template_name: typography
+description: Typography system documentation
+output_file: styles/typography.md
+---
+
+# Typography System
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Overview
+
+The typography system defines font families, sizes, weights, and line heights for {{platform_name}}.
+
+## Font Families
+
+### Primary Font
+
+| Property | Value | Usage |
+|----------|-------|-------|
+{{primary_font_table}}
+
+### Fallback Fonts
+
+```css
+font-family: {{font_stack}};
+```
+
+### Monospace Font
+
+| Property | Value | Usage |
+|----------|-------|-------|
+{{monospace_font_table}}
+
+## Type Scale
+
+### Heading Styles
+
+| Level | Size | Weight | Line Height | Letter Spacing | Usage |
+|-------|------|--------|-------------|----------------|-------|
+{{heading_styles_table}}
+
+### Body Text Styles
+
+| Style | Size | Weight | Line Height | Usage |
+|-------|------|--------|-------------|-------|
+{{body_styles_table}}
+
+### Special Text Styles
+
+| Style | Size | Weight | Line Height | Usage |
+|-------|------|--------|-------------|-------|
+{{special_styles_table}}
+
+## Font Weights
+
+| Token | Value | Usage |
+|-------|-------|-------|
+{{font_weights_table}}
+
+## Line Heights
+
+| Token | Value | Usage |
+|-------|-------|-------|
+{{line_heights_table}}
+
+## Letter Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+{{letter_spacing_table}}
+
+## CSS Classes
+
+```css
+{{typography_css_classes}}
+```
+
+## Responsive Typography
+
+### Mobile Adjustments
+
+| Element | Desktop | Tablet | Mobile |
+|---------|---------|--------|--------|
+{{responsive_typography_table}}
+
+## Usage Guidelines
+
+### Hierarchy
+
+{{typography_hierarchy_guidelines}}
+
+### Readability
+
+- Optimal line length: {{optimal_line_length}}
+- Minimum font size: {{minimum_font_size}}
+- Recommended line height for body text: {{recommended_line_height}}
+
+---
+
+**Section Source**
+{{section_source_files}}

package/.speccrew/skills/speccrew-knowledge-techs-ui-analyze/templates/UI-STYLE-GUIDE-TEMPLATE.md

@@ -0,0 +1,171 @@
+---
+template_name: ui-style-guide
+description: Main UI style guide template for frontend platforms
+output_file: ui-style-guide.md
+---
+
+# {{platform_name}} UI Style Guide
+
+<cite>
+**Files Referenced in This Document**
+{{source_files}}
+</cite>
+
+> **Target Audience**: devcrew-designer-{{platform_id}}, devcrew-dev-{{platform_id}}
+
+## Table of Contents
+
+1. [Project Overview](#project-overview)
+2. [Platform Summary](#platform-summary)
+3. [Design System](#design-system)
+4. [Component Architecture](#component-architecture)
+5. [Layout Patterns](#layout-patterns)
+6. [Page Type Guide](#page-type-guide)
+7. [Styling Conventions](#styling-conventions)
+8. [Best Practices](#best-practices)
+
+## Project Overview
+
+### Technology Stack
+
+| Category | Technology | Version |
+|----------|------------|---------|
+| Framework | {{framework}} | {{framework_version}} |
+| UI Library | {{ui_library}} | {{ui_library_version}} |
+| Build Tool | {{build_tool}} | {{build_tool_version}} |
+| Language | {{language}} | {{language_version}} |
+
+### Directory Structure
+
+```
+src/
+├── views/          # Page components
+├── components/     # Reusable components
+├── layouts/        # Layout components
+├── styles/         # Global styles
+└── assets/         # Static assets
+```
+
+## Platform Summary
+
+### Supported Platforms
+
+| Platform | Resolution Range | Target Device |
+|----------|------------------|---------------|
+| {{platform_details}} |
+
+### Browser Support
+
+- {{browser_support_list}}
+
+## Design System
+
+### Color Palette
+
+| Color Name | Hex Value | Usage |
+|------------|-----------|-------|
+| Primary | {{primary_color}} | Buttons, links, active states |
+| Success | {{success_color}} | Success messages, positive actions |
+| Warning | {{warning_color}} | Warnings, caution states |
+| Error | {{error_color}} | Errors, destructive actions |
+| Info | {{info_color}} | Informational messages |
+
+### Typography
+
+| Element | Font Family | Size | Weight | Line Height |
+|---------|-------------|------|--------|-------------|
+| H1 | {{heading_font}} | {{h1_size}} | 600 | 1.2 |
+| H2 | {{heading_font}} | {{h2_size}} | 600 | 1.3 |
+| Body | {{body_font}} | {{body_size}} | 400 | 1.5 |
+| Small | {{body_font}} | {{small_size}} | 400 | 1.4 |
+
+### Spacing System
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| xs | {{xs_spacing}} | Tight spacing, icons |
+| sm | {{sm_spacing}} | Compact elements |
+| md | {{md_spacing}} | Default spacing |
+| lg | {{lg_spacing}} | Section spacing |
+| xl | {{xl_spacing}} | Large sections |
+
+## Component Architecture
+
+### Component Categories
+
+1. **UI Framework Components**: {{ui_framework_name}} built-in components
+2. **Common Components**: Project-wide reusable components
+3. **Business Components**: Domain-specific components
+
+### Component Usage Patterns
+
+See detailed documentation:
+- [Component Library](components/component-library.md)
+- [Common Components](components/common-components.md)
+- [Business Components](components/business-components.md)
+
+## Layout Patterns
+
+### Available Layouts
+
+See [Layout Patterns](layouts/page-layouts.md) for detailed information.
+
+### Navigation Patterns
+
+See [Navigation Patterns](layouts/navigation-patterns.md) for detailed information.
+
+## Page Type Guide
+
+### Page Type Overview
+
+See [Page Type Summary](page-types/page-type-summary.md) for the complete list of page types.
+
+### Page Type Selection
+
+| Business Scenario | Recommended Page Type | Reference |
+|-------------------|----------------------|-----------|
+{{page_type_selection_table}}
+
+## Styling Conventions
+
+### CSS Methodology
+
+- **Approach**: {{css_methodology}}
+- **Preprocessor**: {{preprocessor}}
+- **Naming Convention**: {{naming_convention}}
+
+### Style File Organization
+
+```
+styles/
+├── variables/      # CSS variables
+├── mixins/         # SCSS/LESS mixins
+├── components/     # Component-specific styles
+└── utilities/      # Utility classes
+```
+
+See detailed style system:
+- [Color System](styles/color-system.md)
+- [Typography](styles/typography.md)
+- [Spacing System](styles/spacing-system.md)
+
+## Best Practices
+
+### Do's
+
+- ✅ Use the design system tokens for consistency
+- ✅ Follow the established naming conventions
+- ✅ Reuse existing components before creating new ones
+- ✅ Test responsive behavior across breakpoints
+
+### Don'ts
+
+- ❌ Hardcode colors or spacing values
+- ❌ Create one-off components without justification
+- ❌ Bypass the layout system
+- ❌ Ignore accessibility guidelines
+
+---
+
+**Section Source**
+{{section_source_files}}