cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/fast-next-template
Code Issues 18 Pull Requests Wiki Activity

[DESIGN] Project Creation Wizard #49

New Issue
Closed
opened 2025-12-30 17:30:50 +00:00 by cardosofelipe · 2 comments
cardosofelipe commented 2025-12-30 17:30:50 +00:00
Owner
Copy Link

Description

Design interactive React prototype for the project creation wizard - the onboarding flow for creating new projects.

This is a Phase 1 simplified version that includes:

  • Form-based project configuration
  • Placeholder for future agent chat interface (Phase 4)

Requirements

Wizard Steps

  1. Basic Info:

    • Project name (required)
    • Description (optional)
    • Repository URL (optional, for linking to existing repo)

  2. Complexity Assessment:

    • Visual selector for: Script / Simple / Medium / Complex
    • Each option shows description and typical scope
    • Affects default agent configuration

  3. Client Mode Selection:

    • Technical Mode: "I'll provide detailed specs"
    • Auto Mode: "Help me figure out what I need"
    • Explanation of what each mode means

  4. Autonomy Level:

    • FULL_CONTROL: "Review every action"
    • MILESTONE: "Review at sprint boundaries"
    • AUTONOMOUS: "Only major decisions"
    • Matrix showing what requires approval in each mode

  5. Agent Chat Placeholder (for Phase 4):

    • Static mockup of future requirements discovery chat
    • Message: "In the full version, you'll chat with our Product Owner agent here to define requirements"
    • Shows what the future interface will look like

  6. Review & Create:

    • Summary of all selections
    • "Create Project" button
    • Option to go back and edit

Features

  • Step indicator (1/6, 2/6, etc.)
  • Back/Next navigation
  • Form validation with helpful errors
  • Auto-save draft (localStorage)
  • Cancel with confirmation

Interactions

  • Step navigation (can go back)
  • Selection highlighting
  • Tooltips for help text
  • Form validation feedback

Responsive Design

  • Desktop: Centered card wizard
  • Mobile: Full-width steps

Deliverables

  • frontend/prototypes/project-wizard/page.tsx
  • frontend/prototypes/project-wizard/README.md
  • Screenshots in issue comments

Acceptance Criteria

  • All wizard steps navigable
  • Complexity selector works
  • Mode and autonomy selections clear
  • Agent chat placeholder shows future vision
  • Review step shows all selections
  • Responsive on mobile
  • User approval obtained

Technical Notes

  • Reference FR-201 (Project Creation Wizard) in requirements
  • Reference autonomy level matrix in requirements doc
  • Prepare for Phase 4 integration with agent chat

Assignable To

ui-designer agent

## Description Design interactive React prototype for the project creation wizard - the onboarding flow for creating new projects. This is a **Phase 1 simplified version** that includes: - Form-based project configuration - Placeholder for future agent chat interface (Phase 4) ## Requirements ### Wizard Steps 1. **Basic Info**: - Project name (required) - Description (optional) - Repository URL (optional, for linking to existing repo) 2. **Complexity Assessment**: - Visual selector for: Script / Simple / Medium / Complex - Each option shows description and typical scope - Affects default agent configuration 3. **Client Mode Selection**: - Technical Mode: "I'll provide detailed specs" - Auto Mode: "Help me figure out what I need" - Explanation of what each mode means 4. **Autonomy Level**: - FULL_CONTROL: "Review every action" - MILESTONE: "Review at sprint boundaries" - AUTONOMOUS: "Only major decisions" - Matrix showing what requires approval in each mode 5. **Agent Chat Placeholder** (for Phase 4): - Static mockup of future requirements discovery chat - Message: "In the full version, you'll chat with our Product Owner agent here to define requirements" - Shows what the future interface will look like 6. **Review & Create**: - Summary of all selections - "Create Project" button - Option to go back and edit ### Features - Step indicator (1/6, 2/6, etc.) - Back/Next navigation - Form validation with helpful errors - Auto-save draft (localStorage) - Cancel with confirmation ### Interactions - Step navigation (can go back) - Selection highlighting - Tooltips for help text - Form validation feedback ### Responsive Design - Desktop: Centered card wizard - Mobile: Full-width steps ## Deliverables - `frontend/prototypes/project-wizard/page.tsx` - `frontend/prototypes/project-wizard/README.md` - Screenshots in issue comments ## Acceptance Criteria - [ ] All wizard steps navigable - [ ] Complexity selector works - [ ] Mode and autonomy selections clear - [ ] Agent chat placeholder shows future vision - [ ] Review step shows all selections - [ ] Responsive on mobile - [ ] **User approval obtained** ## Technical Notes - Reference FR-201 (Project Creation Wizard) in requirements - Reference autonomy level matrix in requirements doc - Prepare for Phase 4 integration with agent chat ## Assignable To ui-designer agent
cardosofelipe added the designfrontendphase-1 labels 2025-12-30 17:31:05 +00:00
cardosofelipe commented 2025-12-30 18:06:24 +00:00
Author
Owner
Copy Link

Prototype Available for Review

The project creation wizard prototype is now available at:
http://localhost:3000/prototypes/project-wizard

Wizard Steps:

  1. Basic Info - Project name, description, repository URL
  2. Complexity - Visual selector (Script/Simple/Medium/Complex)
  3. Client Mode - Technical Mode vs Auto Mode
  4. Autonomy Level - Full Control/Milestone/Autonomous with approval matrix
  5. Agent Chat - Preview placeholder for Phase 4
  6. Review & Create - Summary of all selections

Key Features:

  • Interactive selectable cards
  • Form validation with error messages
  • Progress indicator
  • Responsive design
  • Accessible with ARIA and keyboard navigation

PR: #52

Please review the prototype and provide feedback on the design.

**Prototype Available for Review** The project creation wizard prototype is now available at: http://localhost:3000/prototypes/project-wizard **Wizard Steps:** 1. Basic Info - Project name, description, repository URL 2. Complexity - Visual selector (Script/Simple/Medium/Complex) 3. Client Mode - Technical Mode vs Auto Mode 4. Autonomy Level - Full Control/Milestone/Autonomous with approval matrix 5. Agent Chat - Preview placeholder for Phase 4 6. Review & Create - Summary of all selections **Key Features:** - Interactive selectable cards - Form validation with error messages - Progress indicator - Responsive design - Accessible with ARIA and keyboard navigation **PR:** #52 Please review the prototype and provide feedback on the design.
cardosofelipe commented 2025-12-30 22:02:12 +00:00
Author
Owner
Copy Link

Approved in general. But fix this:
For a simple script I expect minutes to max 1-2 hours
For a simple project I expect 2-3 days
For a medium project I expect 2-3 weeks
For a complex project I expect 2-3 months

AI agents run FAR more fast than humans, if you control them properly you can have an enormous boost.

Also for a simple script I would skip too much config screens, there will be no sprints, no milestones, just a simple chat with an agent, at most.

Approved in general. But fix this: For a simple script I expect minutes to max 1-2 hours For a simple project I expect 2-3 days For a medium project I expect 2-3 weeks For a complex project I expect 2-3 months AI agents run FAR more fast than humans, if you control them properly you can have an enormous boost. Also for a simple script I would skip too much config screens, there will be no sprints, no milestones, just a simple chat with an agent, at most.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
agents
Agent orchestration
 architecture
Architectural decisions
 backend
Backend work
 blocked
Blocked by dependency
 database
Database/migrations
 design
UI/UX design work
 devops
DevOps/Infrastructure work
 epic
Epic/parent issue
 frontend
Frontend work
 infrastructure
Infrastructure / DevOps
 mcp
MCP related
 phase-0
Phase 0: Foundation
 phase-1
Phase 1: Core Platform
 phase-2
Phase 2: MCP Integration
 priority:high
High priority
 spike
Architecture spike / research task
No Label design frontend phase-1
Milestone
No items
No Milestone
Assignees
Clear assignees
cardosofelipe
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cardosofelipe/syndarix#49
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?