chore: add code formatting config and pre-commit hooks (#450)
This commit is contained in:
160
dist/agents/ux-expert.txt
vendored
160
dist/agents/ux-expert.txt
vendored
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user