feat(frontend): Add project creation wizard prototype for #49

Add a 6-step guided wizard for project onboarding:
- Step 1: Basic info (name, description, repo URL)
- Step 2: Complexity assessment (Script/Simple/Medium/Complex)
- Step 3: Client mode selection (Technical/Auto)
- Step 4: Autonomy level with approval matrix
- Step 5: Agent chat preview placeholder (Phase 4)
- Step 6: Review and create

Features:
- Interactive selectable cards
- Form validation with error messages
- Progress indicator with step labels
- Responsive design for mobile/tablet/desktop
- Accessible with ARIA attributes and keyboard navigation
- Success screen with navigation options

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/app/[locale]/prototypes/page.tsx

@@ -15,6 +15,7 @@ import {
   CircleDot,
   Activity,
   ChevronRight,
+  Wand2,
 } from 'lucide-react';
 
 const prototypes = [
@@ -81,6 +82,22 @@ const prototypes = [
       'Search functionality',
     ],
   },
+  {
+    id: 'project-wizard',
+    title: 'Project Creation Wizard',
+    description: 'Guided onboarding flow for creating new projects with AI agent configuration',
+    icon: Wand2,
+    issue: '#49',
+    status: 'ready',
+    features: [
+      '6-step guided wizard flow',
+      'Complexity assessment selector',
+      'Client mode selection (Technical/Auto)',
+      'Autonomy level with approval matrix',
+      'Agent chat preview placeholder',
+      'Review and confirmation step',
+    ],
+  },
 ];
 
 export default function PrototypesIndex() {

frontend/src/app/[locale]/prototypes/project-wizard/README.md

@@ -0,0 +1,180 @@
+# Project Creation Wizard - Design Prototype
+
+## Overview
+The Project Creation Wizard provides a guided onboarding flow for creating new projects in Syndarix. It walks users through essential configuration steps including naming, complexity assessment, interaction mode selection, and autonomy level settings. This wizard ensures users make informed decisions about how they want to work with AI agents.
+
+## User Stories
+- As a new user, I want a guided process to create my first project so I understand all the options available
+- As a user, I want to specify my project's complexity so the right resources are allocated
+- As a user, I want to choose how I interact with agents (technical vs auto mode) based on my expertise
+- As a user, I want to control how much autonomy agents have so I feel comfortable with the workflow
+- As a user, I want to review all my selections before creating the project to ensure accuracy
+- As a user, I want to see a preview of the agent chat experience to understand what's coming
+
+## Key Screens
+
+### 1. Basic Info (Step 1)
+- Project name input (required, minimum 3 characters)
+- Description textarea (optional)
+- Repository URL input (optional, with git icon)
+- Inline validation with error messages
+- Helpful descriptions for each field
+
+### 2. Complexity Assessment (Step 2)
+- Visual grid of complexity options (Script, Simple, Medium, Complex)
+- Each option shows:
+  - Icon representing complexity level
+  - Label and description
+  - Typical scope/timeline
+  - Real-world examples
+- Selectable card pattern with checkmark indicator
+
+### 3. Client Mode Selection (Step 3)
+- Two large cards: Technical Mode vs Auto Mode
+- Each mode shows:
+  - Icon and title
+  - Description
+  - List of features/capabilities
+- Clear differentiation between approaches
+
+### 4. Autonomy Level (Step 4)
+- Three options: Full Control, Milestone, Autonomous
+- Each option shows:
+  - Icon, label, description
+  - Best-for recommendation
+  - Approval badges for quick scanning
+- Detailed approval matrix table below
+- Clear indication of what requires approval in each mode
+
+### 5. Agent Chat Placeholder (Step 5)
+- Static mockup of future chat interface
+- Sample conversation showing Product Owner agent interaction
+- "Coming in Phase 4" badge
+- Disabled input field with explanation
+- Card explaining what to expect in full version
+
+### 6. Review & Create (Step 6)
+- Summary cards for all selections:
+  - Basic Information
+  - Project Complexity
+  - Interaction Mode
+  - Autonomy Level
+- Ready-to-create confirmation card
+- Create Project button with loading state
+
+## User Flow
+1. User clicks "Create Project" or starts wizard
+2. Enters project name and optional details
+3. Selects complexity level based on project scope
+4. Chooses interaction mode (technical or assisted)
+5. Sets autonomy level for agent actions
+6. Views agent chat preview (informational)
+7. Reviews all selections on summary screen
+8. Clicks "Create Project" to finalize
+9. Sees success screen with navigation options
+
+## Design Decisions
+
+### Wizard Pattern
+- Linear 6-step flow with clear progress indication
+- Each step is self-contained and focused
+- Back/Next navigation with disabled states
+- Step indicator shows current position and labels
+
+### Visual Feedback
+- Selectable cards highlight on hover and selection
+- Checkmark icons confirm selected options
+- Primary color treatment for selected states
+- Disabled button states prevent premature progression
+
+### Information Architecture
+- Progressive disclosure: show details only when relevant
+- Complexity options ordered from simple to complex
+- Autonomy matrix provides at-a-glance comparison
+- Review step consolidates all information
+
+### Form Validation
+- Real-time validation with immediate feedback
+- Error messages appear below problematic fields
+- Required fields clearly marked with asterisk
+- Prevents progression until valid
+
+## States
+
+### Loading
+- Create button shows spinner during submission
+- Text changes to "Creating..." for clarity
+
+### Empty
+- Initial state with no selections made
+- Next button disabled until requirements met
+
+### Error
+- Inline error messages for validation failures
+- Red border on invalid inputs
+- Descriptive error text guides correction
+
+### Success
+- Full-screen success message
+- Project name displayed in confirmation
+- Clear navigation options (dashboard or create another)
+
+## Responsive Breakpoints
+
+### Desktop (lg: 1024px+)
+- 2-column grid for complexity options
+- Side-by-side client mode cards
+- Full approval matrix table
+- Comfortable spacing
+
+### Tablet (md: 768px)
+- 2-column grid maintained for complexity
+- Review cards in 2-column grid
+- Adequate touch targets
+
+### Mobile (< 768px)
+- Single column layout throughout
+- Stacked complexity cards
+- Stacked client mode cards
+- Scrollable approval matrix
+- Full-width buttons
+
+## Accessibility Notes
+- All form inputs have associated labels with htmlFor
+- Required fields marked with both asterisk and aria-required
+- Error messages connected via aria-describedby
+- Keyboard navigation for all selectable cards
+- Focus visible indicators on interactive elements
+- Screen reader announces step changes
+- Color is not sole indicator of selection state
+
+## Components Used
+- Card, CardHeader, CardTitle, CardContent, CardDescription
+- Button (default, outline, ghost variants)
+- Badge (default, secondary, outline variants)
+- Input, Textarea
+- Label
+- Separator
+- Lucide icons (extensive use for visual clarity)
+- Custom SelectableCard component
+
+## Questions for Review
+1. Is 6 steps too many? Should any be combined?
+2. Is the complexity naming (Script/Simple/Medium/Complex) intuitive?
+3. Should the agent chat step be required or skippable?
+4. Is the approval matrix table too detailed or appropriately informative?
+5. Should there be a "save draft" option for longer sessions?
+6. Is the success screen adequate or should it show more next steps?
+
+## How to View
+Navigate to: `/prototypes/project-wizard`
+
+## Next Steps
+After approval:
+1. Connect to backend API for project creation
+2. Implement real form validation with backend rules
+3. Add animated transitions between steps
+4. Integrate with actual agent chat in Phase 4
+5. Add keyboard shortcuts for navigation
+6. Implement draft saving functionality
+7. Add analytics tracking for wizard completion rates