feat: complete project modernization with Claude Code command system

.claude/commands/README.md

@@ -0,0 +1,195 @@
+# Role-Based Slash Commands for Claude Code
+
+This directory contains custom slash commands that transform Claude into specialized expert roles for multi-perspective software development analysis.
+
+## Quick Start
+
+### Analyze a Task
+```bash
+/project:workflows:analyze-task "Implement OAuth2 authentication with role-based permissions"
+```
+
+### Single Role Analysis
+```bash
+/project:roles:senior-frontend-architect "Review the new dashboard component architecture"
+```
+
+### Sequential Expert Chain
+```bash
+/project:chains:feature-development "Create a real-time notification system"
+```
+
+### Parallel Expert Analysis
+```bash
+/project:parallel:code-review-team "PR #123 - Authentication refactor"
+```
+
+## Command Categories
+
+### 🎭 Individual Roles (`/project:roles:`)
+Specialized expert perspectives for focused analysis:
+- `product-manager` - Business requirements and strategy
+- `senior-frontend-architect` - Technical architecture and design
+- `typescript-quality-engineer` - Code quality and type safety
+- `senior-sdet` - Testing strategy and quality assurance
+- `cybersecurity-engineer` - Security assessment and compliance
+- `devops-engineer` - Infrastructure and deployment
+- `ui-ux-design-engineer` - User experience and accessibility
+- `open-source-maintainer` - Community and sustainability
+
+### 🔗 Sequential Chains (`/project:chains:`)
+Multi-role workflows that build upon each phase:
+- `feature-development` - Complete feature development lifecycle
+- `bug-fix-optimization` - Comprehensive bug analysis and resolution
+- `security-review` - Multi-layered security assessment
+
+### ⚡ Parallel Analysis (`/project:parallel:`)
+Simultaneous expert perspectives with synthesis:
+- `code-review-team` - Multi-expert code review
+- `feature-planning-team` - Comprehensive feature planning
+- `performance-team` - Performance optimization analysis
+
+### 🛠️ Workflow Utilities (`/project:workflows:`)
+Supporting tools for complex workflows:
+- `analyze-task` - Determine optimal workflow strategy
+- `handoff-context` - Preserve context between roles
+- `synthesize-perspectives` - Unify multi-role insights
+
+### ⚡ Quick Actions (`/project:quick:`)
+Rapid, focused expert responses:
+- `review-pr` - Fast TypeScript-focused PR review
+- `fix-bug` - Quick bug analysis and resolution
+- `optimize-performance` - Immediate performance improvements
+- `security-check` - Rapid security assessment
+
+## Usage Patterns
+
+### Pattern 1: Task Complexity Analysis
+Start with complexity analysis to choose the right approach:
+```bash
+/project:workflows:analyze-task "Your complex development task"
+# Follow the recommended workflow from the analysis
+```
+
+### Pattern 2: Single Expert Consultation
+For focused, domain-specific analysis:
+```bash
+/project:roles:cybersecurity-engineer "Review authentication implementation"
+```
+
+### Pattern 3: Sequential Expert Chain
+For comprehensive feature development:
+```bash
+/project:chains:feature-development "Build user analytics dashboard"
+# Automatically progresses through Product → Architecture → Quality → Testing
+```
+
+### Pattern 4: Parallel Expert Team
+For complex decisions requiring multiple perspectives:
+```bash
+/project:parallel:code-review-team "Major refactoring PR"
+# Gets simultaneous input from Architecture, Quality, and Security experts
+```
+
+### Pattern 5: Context Handoff
+For manual role transitions:
+```bash
+/project:roles:product-manager "Define user requirements"
+# Then use the output as input to:
+/project:workflows:handoff-context "[Product Manager's analysis]"
+# Finally:
+/project:roles:senior-frontend-architect "[Handoff context + original task]"
+```
+
+## Command Composition Examples
+
+### Example 1: Feature Development
+```bash
+# Step 1: Analyze complexity
+/project:workflows:analyze-task "Real-time collaboration features"
+
+# Step 2: Follow recommended approach (e.g., sequential chain)
+/project:chains:feature-development "Real-time collaboration features"
+
+# Step 3: If conflicts arise, synthesize
+/project:workflows:synthesize-perspectives "[Chain output]"
+```
+
+### Example 2: Bug Investigation
+```bash
+# Quick assessment
+/project:quick:fix-bug "Memory leak in dashboard component"
+
+# If complex, escalate to full analysis
+/project:chains:bug-fix-optimization "Memory leak in dashboard component"
+```
+
+### Example 3: Code Review
+```bash
+# Quick review
+/project:quick:review-pr "Authentication service changes"
+
+# For critical changes, get team perspective
+/project:parallel:code-review-team "Authentication service changes"
+```
+
+## Best Practices
+
+1. **Start with Analysis**: Use `/project:workflows:analyze-task` for complex or unfamiliar tasks
+2. **Choose Appropriate Scope**: Single role for focused issues, chains for comprehensive development, parallel for critical decisions
+3. **Preserve Context**: Use handoff commands when manually transitioning between roles
+4. **Synthesize Conflicts**: Use synthesis commands when parallel analyses conflict
+5. **Document Decisions**: Keep role outputs for future reference and team alignment
+
+## Integration with Development Workflow
+
+### Git Integration
+```bash
+# Before starting work
+/project:workflows:analyze-task "$(git show --name-only HEAD)"
+
+# During development
+/project:quick:review-pr "$(git diff --name-only main...HEAD)"
+
+# Before merging
+/project:parallel:code-review-team "$(git log --oneline main...HEAD)"
+```
+
+### CI/CD Integration
+Use commands in pull request templates or automated checks:
+```markdown
+## Pre-merge Checklist
+- [ ] `/project:quick:security-check` completed
+- [ ] `/project:quick:optimize-performance` reviewed
+- [ ] `/project:parallel:code-review-team` approved
+```
+
+## Troubleshooting
+
+### Command Not Found
+- Verify `.claude/commands/` directory structure
+- Check file naming matches command structure
+- Ensure files are in the correct subdirectories
+
+### Poor Role Performance
+- Provide more specific context in arguments
+- Use handoff commands to preserve context between roles
+- Try analyze-task first for complex scenarios
+
+### Conflicting Recommendations
+- Use `/project:workflows:synthesize-perspectives`
+- Review individual role constraints and assumptions
+- Consider parallel analysis for critical decisions
+
+## Contributing
+
+To add new roles or workflows:
+1. Follow existing file naming patterns
+2. Include clear role definitions and responsibilities
+3. Use `$ARGUMENTS` for dynamic input
+4. Provide structured output templates
+5. Test with various input scenarios
+
+---
+
+**Next Steps**: Run `/project:test-setup "Initial validation"` to verify your command setup.

.claude/commands/chains/bug-fix-optimization.md

@@ -0,0 +1,39 @@
+# Bug Fix & Optimization Chain Workflow
+
+I need you to help analyze and fix a bug or performance issue through multiple expert perspectives sequentially.
+
+**Bug/Issue**: $ARGUMENTS
+
+## Phase 1: TypeScript Quality Engineer Perspective
+First, as a TypeScript Quality Engineer:
+- Analyze the root cause of the issue
+- Identify code quality problems or anti-patterns
+- Assess type safety and error handling
+- Review related code for similar issues
+- Recommend immediate fixes and preventive measures
+
+## Phase 2: Senior Frontend Architect Perspective
+Next, as a Senior Frontend Architect:
+- Evaluate architectural implications of the fix
+- Consider impact on existing component structure
+- Assess performance implications
+- Recommend architectural improvements
+- Plan for scalability and maintainability
+
+## Phase 3: Senior SDET Perspective
+Then, as a Senior SDET:
+- Design tests to prevent regression
+- Create comprehensive test cases for the fix
+- Plan integration and E2E test coverage
+- Establish monitoring and alerting for similar issues
+- Recommend quality gates to catch future occurrences
+
+## Phase 4: Cybersecurity Engineer Perspective
+Finally, as a Cybersecurity Engineer:
+- Assess security implications of the bug and fix
+- Identify potential security vulnerabilities
+- Recommend security hardening measures
+- Plan security testing and validation
+- Consider compliance and audit requirements
+
+**Instructions**: After each phase, document key findings and recommendations. Provide a final comprehensive fix plan with implementation steps, testing strategy, and prevention measures.

.claude/commands/chains/feature-development.md

@@ -0,0 +1,39 @@
+# Feature Development Chain Workflow
+
+I need you to help develop a new feature by working through multiple specialized perspectives sequentially.
+
+**Feature/Task**: $ARGUMENTS
+
+## Phase 1: Product Manager Perspective
+First, adopt the role of a Product Manager and:
+- Define clear user stories and acceptance criteria
+- Identify success metrics and KPIs
+- Outline MVP vs full feature scope
+- Consider business value and prioritization
+- Assess market positioning and competitive advantage
+
+## Phase 2: Senior Frontend Architect Perspective
+Next, as a Senior Frontend Architect:
+- Design the technical architecture
+- Define component structure and reusability patterns
+- Plan state management approach
+- Identify integration points with existing systems
+- Consider performance and scalability implications
+
+## Phase 3: TypeScript Quality Engineer Perspective
+Then, as a TypeScript Quality Engineer:
+- Define type interfaces and contracts
+- Plan error handling strategies
+- Ensure type safety across components
+- Recommend coding standards and patterns
+- Design validation and data flow patterns
+
+## Phase 4: Senior SDET Perspective
+Finally, as a Senior SDET:
+- Create comprehensive test strategy
+- Define test cases for each component
+- Plan E2E testing approach
+- Establish quality gates and CI/CD integration
+- Design accessibility and cross-browser testing
+
+**Instructions**: After each phase, explicitly document key decisions and constraints that should inform the next phase. Provide a final synthesis with actionable next steps and implementation roadmap.

.claude/commands/chains/security-review.md

@@ -0,0 +1,39 @@
+# Security Review Chain Workflow
+
+I need you to conduct a comprehensive security review through multiple expert perspectives sequentially.
+
+**Code/System to Review**: $ARGUMENTS
+
+## Phase 1: Cybersecurity Engineer Perspective
+First, as a Cybersecurity Engineer:
+- Conduct OWASP Top 10 vulnerability assessment
+- Analyze authentication and authorization patterns
+- Review data protection and privacy compliance
+- Assess input validation and injection prevention
+- Identify security monitoring and logging gaps
+
+## Phase 2: DevOps Engineer Perspective
+Next, as a DevOps Engineer:
+- Review deployment security and CI/CD pipeline
+- Assess infrastructure security configurations
+- Evaluate secrets management and environment security
+- Review monitoring and incident response capabilities
+- Consider compliance and audit trail requirements
+
+## Phase 3: Senior Frontend Architect Perspective
+Then, as a Senior Frontend Architect:
+- Analyze client-side security patterns
+- Review state management for sensitive data
+- Assess API integration security
+- Evaluate third-party dependency security
+- Consider browser security and CSP implementation
+
+## Phase 4: TypeScript Quality Engineer Perspective
+Finally, as a TypeScript Quality Engineer:
+- Review type safety for security-critical code
+- Analyze error handling and information disclosure
+- Assess input validation and sanitization
+- Review code quality for security implications
+- Recommend secure coding patterns
+
+**Instructions**: After each phase, document security findings and risk assessments. Provide a final comprehensive security report with prioritized recommendations, remediation steps, and security improvement roadmap.

.claude/commands/parallel/code-review-team.md

@@ -0,0 +1,38 @@
+# Multi-Perspective Code Review Team
+
+Analyze the following code changes from three simultaneous expert perspectives:
+
+**Code/PR to Review**: $ARGUMENTS
+
+## Parallel Analysis Required:
+
+### Perspective 1: Senior Frontend Architect
+- Architecture patterns and design decisions
+- Component structure and modularity
+- Performance implications and optimization opportunities
+- Scalability concerns and maintainability
+- Integration patterns and data flow
+
+### Perspective 2: TypeScript Quality Engineer
+- Type safety and contract definitions
+- Code quality and standards adherence
+- Error handling and validation patterns
+- Best practices and anti-pattern identification
+- Build and tooling implications
+
+### Perspective 3: Cybersecurity Engineer
+- Security vulnerabilities and risk assessment
+- Authentication/authorization pattern security
+- Data protection and privacy compliance
+- OWASP compliance and security best practices
+- Input validation and injection prevention
+
+## Synthesis Instructions:
+After analyzing from all three perspectives:
+1. **Alignment Areas**: Identify where all perspectives agree
+2. **Conflicting Recommendations**: Highlight disagreements and propose resolutions
+3. **Prioritized Feedback**: Provide unified, prioritized recommendations
+4. **Specific Improvements**: Suggest concrete code changes with examples
+5. **Risk Assessment**: Overall risk level and mitigation strategies
+
+Format the output as a comprehensive code review with sections for each perspective, followed by synthesized recommendations and action items.

.claude/commands/parallel/feature-planning-team.md

@@ -0,0 +1,38 @@
+# Multi-Perspective Feature Planning Team
+
+Analyze the following feature request from three simultaneous expert perspectives:
+
+**Feature to Plan**: $ARGUMENTS
+
+## Parallel Analysis Required:
+
+### Perspective 1: Product Manager
+- Business value and user impact assessment
+- Market positioning and competitive analysis
+- Success metrics and KPI definition
+- MVP vs full feature scope planning
+- Stakeholder alignment and communication strategy
+
+### Perspective 2: Senior Frontend Architect
+- Technical feasibility and architecture design
+- Component structure and reusability patterns
+- Performance and scalability considerations
+- Integration complexity with existing systems
+- Technology stack and tool requirements
+
+### Perspective 3: Senior SDET
+- Testability and quality assurance strategy
+- Test automation framework requirements
+- Quality gates and acceptance criteria
+- Risk assessment and mitigation planning
+- CI/CD integration and deployment strategy
+
+## Synthesis Instructions:
+After analyzing from all three perspectives:
+1. **Feasibility Assessment**: Overall technical and business feasibility
+2. **Resource Requirements**: Development, testing, and infrastructure needs
+3. **Risk Matrix**: Identified risks with probability and impact assessment
+4. **Implementation Roadmap**: Phased approach with milestones and dependencies
+5. **Success Criteria**: Measurable outcomes and acceptance criteria
+
+Format the output as a comprehensive feature planning document with executive summary, detailed analysis from each perspective, and unified implementation plan.