chore: add code formatting config and pre-commit hooks (#450)

This commit is contained in:
manjaroblack
2025-08-16 19:08:39 -05:00
committed by GitHub
parent 51284d6ecf
commit ed539432fb
130 changed files with 11886 additions and 10939 deletions

View File

@@ -343,7 +343,7 @@ template:
output:
format: markdown
filename: docs/front-end-spec.md
title: "{{project_name}} UI/UX Specification"
title: '{{project_name}} UI/UX Specification'
workflow:
mode: interactive
@@ -354,7 +354,7 @@ sections:
title: Introduction
instruction: |
Review provided documents including Project Brief, PRD, and any user research to gather context. Focus on understanding user needs, pain points, and desired outcomes before beginning the specification.
Establish the document's purpose and scope. Keep the content below but ensure project name is properly substituted.
content: |
This document defines the user experience goals, information architecture, user flows, and visual design specifications for {{project_name}}'s user interface. It serves as the foundation for visual design and frontend development, ensuring a cohesive and user-centered experience.
@@ -363,7 +363,7 @@ sections:
title: Overall UX Goals & Principles
instruction: |
Work with the user to establish and document the following. If not already defined, facilitate a discussion to determine:
1. Target User Personas - elicit details or confirm existing ones from PRD
2. Key Usability Goals - understand what success looks like for users
3. Core Design Principles - establish 3-5 guiding principles
@@ -371,29 +371,29 @@ sections:
sections:
- id: user-personas
title: Target User Personas
template: "{{persona_descriptions}}"
template: '{{persona_descriptions}}'
examples:
- "**Power User:** Technical professionals who need advanced features and efficiency"
- "**Casual User:** Occasional users who prioritize ease of use and clear guidance"
- "**Administrator:** System managers who need control and oversight capabilities"
- '**Power User:** Technical professionals who need advanced features and efficiency'
- '**Casual User:** Occasional users who prioritize ease of use and clear guidance'
- '**Administrator:** System managers who need control and oversight capabilities'
- id: usability-goals
title: Usability Goals
template: "{{usability_goals}}"
template: '{{usability_goals}}'
examples:
- "Ease of learning: New users can complete core tasks within 5 minutes"
- "Efficiency of use: Power users can complete frequent tasks with minimal clicks"
- "Error prevention: Clear validation and confirmation for destructive actions"
- "Memorability: Infrequent users can return without relearning"
- 'Ease of learning: New users can complete core tasks within 5 minutes'
- 'Efficiency of use: Power users can complete frequent tasks with minimal clicks'
- 'Error prevention: Clear validation and confirmation for destructive actions'
- 'Memorability: Infrequent users can return without relearning'
- id: design-principles
title: Design Principles
template: "{{design_principles}}"
template: '{{design_principles}}'
type: numbered-list
examples:
- "**Clarity over cleverness** - Prioritize clear communication over aesthetic innovation"
- '**Clarity over cleverness** - Prioritize clear communication over aesthetic innovation'
- "**Progressive disclosure** - Show only what's needed, when it's needed"
- "**Consistent patterns** - Use familiar UI patterns throughout the application"
- "**Immediate feedback** - Every action should have a clear, immediate response"
- "**Accessible by default** - Design for all users from the start"
- '**Consistent patterns** - Use familiar UI patterns throughout the application'
- '**Immediate feedback** - Every action should have a clear, immediate response'
- '**Accessible by default** - Design for all users from the start'
- id: changelog
title: Change Log
type: table
@@ -404,7 +404,7 @@ sections:
title: Information Architecture (IA)
instruction: |
Collaborate with the user to create a comprehensive information architecture:
1. Build a Site Map or Screen Inventory showing all major areas
2. Define the Navigation Structure (primary, secondary, breadcrumbs)
3. Use Mermaid diagrams for visual representation
@@ -415,7 +415,7 @@ sections:
title: Site Map / Screen Inventory
type: mermaid
mermaid_type: graph
template: "{{sitemap_diagram}}"
template: '{{sitemap_diagram}}'
examples:
- |
graph TD
@@ -434,46 +434,46 @@ sections:
title: Navigation Structure
template: |
**Primary Navigation:** {{primary_nav_description}}
**Secondary Navigation:** {{secondary_nav_description}}
**Breadcrumb Strategy:** {{breadcrumb_strategy}}
- id: user-flows
title: User Flows
instruction: |
For each critical user task identified in the PRD:
1. Define the user's goal clearly
2. Map out all steps including decision points
3. Consider edge cases and error states
4. Use Mermaid flow diagrams for clarity
5. Link to external tools (Figma/Miro) if detailed flows exist there
Create subsections for each major flow.
elicit: true
repeatable: true
sections:
- id: flow
title: "{{flow_name}}"
title: '{{flow_name}}'
template: |
**User Goal:** {{flow_goal}}
**Entry Points:** {{entry_points}}
**Success Criteria:** {{success_criteria}}
sections:
- id: flow-diagram
title: Flow Diagram
type: mermaid
mermaid_type: graph
template: "{{flow_diagram}}"
template: '{{flow_diagram}}'
- id: edge-cases
title: "Edge Cases & Error Handling:"
title: 'Edge Cases & Error Handling:'
type: bullet-list
template: "- {{edge_case}}"
template: '- {{edge_case}}'
- id: notes
template: "**Notes:** {{flow_notes}}"
template: '**Notes:** {{flow_notes}}'
- id: wireframes-mockups
title: Wireframes & Mockups
@@ -482,23 +482,23 @@ sections:
elicit: true
sections:
- id: design-files
template: "**Primary Design Files:** {{design_tool_link}}"
template: '**Primary Design Files:** {{design_tool_link}}'
- id: key-screen-layouts
title: Key Screen Layouts
repeatable: true
sections:
- id: screen
title: "{{screen_name}}"
title: '{{screen_name}}'
template: |
**Purpose:** {{screen_purpose}}
**Key Elements:**
- {{element_1}}
- {{element_2}}
- {{element_3}}
**Interaction Notes:** {{interaction_notes}}
**Design File Reference:** {{specific_frame_link}}
- id: component-library
@@ -508,20 +508,20 @@ sections:
elicit: true
sections:
- id: design-system-approach
template: "**Design System Approach:** {{design_system_approach}}"
template: '**Design System Approach:** {{design_system_approach}}'
- id: core-components
title: Core Components
repeatable: true
sections:
- id: component
title: "{{component_name}}"
title: '{{component_name}}'
template: |
**Purpose:** {{component_purpose}}
**Variants:** {{component_variants}}
**States:** {{component_states}}
**Usage Guidelines:** {{usage_guidelines}}
- id: branding-style
@@ -531,19 +531,19 @@ sections:
sections:
- id: visual-identity
title: Visual Identity
template: "**Brand Guidelines:** {{brand_guidelines_link}}"
template: '**Brand Guidelines:** {{brand_guidelines_link}}'
- id: color-palette
title: Color Palette
type: table
columns: ["Color Type", "Hex Code", "Usage"]
columns: ['Color Type', 'Hex Code', 'Usage']
rows:
- ["Primary", "{{primary_color}}", "{{primary_usage}}"]
- ["Secondary", "{{secondary_color}}", "{{secondary_usage}}"]
- ["Accent", "{{accent_color}}", "{{accent_usage}}"]
- ["Success", "{{success_color}}", "Positive feedback, confirmations"]
- ["Warning", "{{warning_color}}", "Cautions, important notices"]
- ["Error", "{{error_color}}", "Errors, destructive actions"]
- ["Neutral", "{{neutral_colors}}", "Text, borders, backgrounds"]
- ['Primary', '{{primary_color}}', '{{primary_usage}}']
- ['Secondary', '{{secondary_color}}', '{{secondary_usage}}']
- ['Accent', '{{accent_color}}', '{{accent_usage}}']
- ['Success', '{{success_color}}', 'Positive feedback, confirmations']
- ['Warning', '{{warning_color}}', 'Cautions, important notices']
- ['Error', '{{error_color}}', 'Errors, destructive actions']
- ['Neutral', '{{neutral_colors}}', 'Text, borders, backgrounds']
- id: typography
title: Typography
sections:
@@ -556,24 +556,24 @@ sections:
- id: type-scale
title: Type Scale
type: table
columns: ["Element", "Size", "Weight", "Line Height"]
columns: ['Element', 'Size', 'Weight', 'Line Height']
rows:
- ["H1", "{{h1_size}}", "{{h1_weight}}", "{{h1_line}}"]
- ["H2", "{{h2_size}}", "{{h2_weight}}", "{{h2_line}}"]
- ["H3", "{{h3_size}}", "{{h3_weight}}", "{{h3_line}}"]
- ["Body", "{{body_size}}", "{{body_weight}}", "{{body_line}}"]
- ["Small", "{{small_size}}", "{{small_weight}}", "{{small_line}}"]
- ['H1', '{{h1_size}}', '{{h1_weight}}', '{{h1_line}}']
- ['H2', '{{h2_size}}', '{{h2_weight}}', '{{h2_line}}']
- ['H3', '{{h3_size}}', '{{h3_weight}}', '{{h3_line}}']
- ['Body', '{{body_size}}', '{{body_weight}}', '{{body_line}}']
- ['Small', '{{small_size}}', '{{small_weight}}', '{{small_line}}']
- id: iconography
title: Iconography
template: |
**Icon Library:** {{icon_library}}
**Usage Guidelines:** {{icon_guidelines}}
- id: spacing-layout
title: Spacing & Layout
template: |
**Grid System:** {{grid_system}}
**Spacing Scale:** {{spacing_scale}}
- id: accessibility
@@ -583,7 +583,7 @@ sections:
sections:
- id: compliance-target
title: Compliance Target
template: "**Standard:** {{compliance_standard}}"
template: '**Standard:** {{compliance_standard}}'
- id: key-requirements
title: Key Requirements
template: |
@@ -591,19 +591,19 @@ sections:
- Color contrast ratios: {{contrast_requirements}}
- Focus indicators: {{focus_requirements}}
- Text sizing: {{text_requirements}}
**Interaction:**
- Keyboard navigation: {{keyboard_requirements}}
- Screen reader support: {{screen_reader_requirements}}
- Touch targets: {{touch_requirements}}
**Content:**
- Alternative text: {{alt_text_requirements}}
- Heading structure: {{heading_requirements}}
- Form labels: {{form_requirements}}
- id: testing-strategy
title: Testing Strategy
template: "{{accessibility_testing}}"
template: '{{accessibility_testing}}'
- id: responsiveness
title: Responsiveness Strategy
@@ -613,21 +613,21 @@ sections:
- id: breakpoints
title: Breakpoints
type: table
columns: ["Breakpoint", "Min Width", "Max Width", "Target Devices"]
columns: ['Breakpoint', 'Min Width', 'Max Width', 'Target Devices']
rows:
- ["Mobile", "{{mobile_min}}", "{{mobile_max}}", "{{mobile_devices}}"]
- ["Tablet", "{{tablet_min}}", "{{tablet_max}}", "{{tablet_devices}}"]
- ["Desktop", "{{desktop_min}}", "{{desktop_max}}", "{{desktop_devices}}"]
- ["Wide", "{{wide_min}}", "-", "{{wide_devices}}"]
- ['Mobile', '{{mobile_min}}', '{{mobile_max}}', '{{mobile_devices}}']
- ['Tablet', '{{tablet_min}}', '{{tablet_max}}', '{{tablet_devices}}']
- ['Desktop', '{{desktop_min}}', '{{desktop_max}}', '{{desktop_devices}}']
- ['Wide', '{{wide_min}}', '-', '{{wide_devices}}']
- id: adaptation-patterns
title: Adaptation Patterns
template: |
**Layout Changes:** {{layout_adaptations}}
**Navigation Changes:** {{nav_adaptations}}
**Content Priority:** {{content_adaptations}}
**Interaction Changes:** {{interaction_adaptations}}
- id: animation
@@ -637,11 +637,11 @@ sections:
sections:
- id: motion-principles
title: Motion Principles
template: "{{motion_principles}}"
template: '{{motion_principles}}'
- id: key-animations
title: Key Animations
repeatable: true
template: "- **{{animation_name}}:** {{animation_description}} (Duration: {{duration}}, Easing: {{easing}})"
template: '- **{{animation_name}}:** {{animation_description}} (Duration: {{duration}}, Easing: {{easing}})'
- id: performance
title: Performance Considerations
@@ -655,13 +655,13 @@ sections:
- **Animation FPS:** {{animation_goal}}
- id: design-strategies
title: Design Strategies
template: "{{performance_strategies}}"
template: '{{performance_strategies}}'
- id: next-steps
title: Next Steps
instruction: |
After completing the UI/UX specification:
1. Recommend review with stakeholders
2. Suggest creating/updating visual designs in design tool
3. Prepare for handoff to Design Architect for frontend architecture
@@ -670,17 +670,17 @@ sections:
- id: immediate-actions
title: Immediate Actions
type: numbered-list
template: "{{action}}"
template: '{{action}}'
- id: design-handoff-checklist
title: Design Handoff Checklist
type: checklist
items:
- "All user flows documented"
- "Component inventory complete"
- "Accessibility requirements defined"
- "Responsive strategy clear"
- "Brand guidelines incorporated"
- "Performance goals established"
- 'All user flows documented'
- 'Component inventory complete'
- 'Accessibility requirements defined'
- 'Responsive strategy clear'
- 'Brand guidelines incorporated'
- 'Performance goals established'
- id: checklist-results
title: Checklist Results