ai-devx 1.0.0

package/templates/.agent/skills/testing-patterns/SKILL.md

@@ -0,0 +1,262 @@
+---
+name: testing-patterns
+description: Comprehensive testing strategies for unit, integration, and E2E tests
+version: "1.0.0"
+requires: []
+related:
+  - react-best-practices
+  - backend-specialist
+---
+
+# Testing Patterns Skill
+
+## Testing Pyramid
+
+```
+    /\
+   /  \  E2E Tests
+  /____\  (Slow, Expensive)
+ /      \
+/________\ Integration Tests
+          (Medium Speed)
+____________
+Unit Tests
+(Fast, Cheap)
+```
+
+## Unit Testing
+
+### AAA Pattern
+```typescript
+// Arrange
+const user = { name: 'John', age: 30 };
+
+// Act
+const result = calculateAgeGroup(user);
+
+// Assert
+expect(result).toBe('adult');
+```
+
+### Test Naming
+```typescript
+describe('calculateAgeGroup', () => {
+  it('should return "child" when age is less than 13', () => {
+    // test
+  });
+  
+  it('should return "teen" when age is between 13 and 19', () => {
+    // test
+  });
+  
+  it('should return "adult" when age is 20 or greater', () => {
+    // test
+  });
+});
+```
+
+### React Component Testing
+```tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Button', () => {
+  it('should render button with text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+  
+  it('should call onClick when clicked', async () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    
+    await userEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  
+  it('should be disabled when disabled prop is true', () => {
+    render(<Button disabled>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeDisabled();
+  });
+});
+```
+
+### Mocking
+```typescript
+// Mock modules
+jest.mock('./api', () => ({
+  fetchUser: jest.fn()
+}));
+
+// Mock return value
+(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'John' });
+
+// Mock with implementation
+jest.mock('./logger', () => ({
+  log: jest.fn(),
+  error: jest.fn()
+}));
+```
+
+## Integration Testing
+
+### API Testing
+```typescript
+import request from 'supertest';
+import { app } from './app';
+
+describe('Users API', () => {
+  it('should create a new user', async () => {
+    const response = await request(app)
+      .post('/users')
+      .send({ name: 'John', email: 'john@example.com' })
+      .expect(201);
+    
+    expect(response.body.data.name).toBe('John');
+  });
+  
+  it('should return 400 for invalid data', async () => {
+    await request(app)
+      .post('/users')
+      .send({ name: '' })
+      .expect(400);
+  });
+});
+```
+
+### Database Testing
+```typescript
+import { prisma } from './db';
+
+describe('User Repository', () => {
+  beforeEach(async () => {
+    await prisma.user.deleteMany();
+  });
+  
+  it('should create user in database', async () => {
+    const user = await prisma.user.create({
+      data: { email: 'test@example.com', name: 'Test' }
+    });
+    
+    expect(user.email).toBe('test@example.com');
+    
+    const found = await prisma.user.findUnique({
+      where: { id: user.id }
+    });
+    expect(found).toBeTruthy();
+  });
+});
+```
+
+## E2E Testing
+
+### Playwright Example
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('user can login', async ({ page }) => {
+  await page.goto('/login');
+  
+  await page.fill('[name="email"]', 'user@example.com');
+  await page.fill('[name="password"]', 'password123');
+  await page.click('button[type="submit"]');
+  
+  await expect(page).toHaveURL('/dashboard');
+  await expect(page.locator('h1')).toContainText('Welcome');
+});
+
+test('user can complete purchase flow', async ({ page }) => {
+  // Browse products
+  await page.goto('/products');
+  await page.click('text=Add to Cart');
+  
+  // Go to cart
+  await page.click('text=Cart');
+  await page.click('text=Checkout');
+  
+  // Fill checkout form
+  await page.fill('[name="address"]', '123 Main St');
+  await page.click('text=Place Order');
+  
+  // Verify success
+  await expect(page.locator('.success-message')).toBeVisible();
+});
+```
+
+## Test Coverage
+
+### Coverage Thresholds
+```json
+{
+  "coverageThreshold": {
+    "global": {
+      "branches": 80,
+      "functions": 80,
+      "lines": 80,
+      "statements": 80
+    }
+  }
+}
+```
+
+### What to Test
+
+**Always Test:**
+- Business logic
+- Edge cases
+- Error handling
+- User interactions
+- API contracts
+
+**Don't Test:**
+- Third-party libraries
+- Simple getters/setters
+- Implementation details
+- CSS/styling
+
+## TDD Workflow
+
+1. **Red**: Write failing test
+   ```typescript
+   it('should add two numbers', () => {
+     expect(add(1, 2)).toBe(3);
+   });
+   ```
+
+2. **Green**: Write minimal code
+   ```typescript
+   function add(a: number, b: number) {
+     return a + b;
+   }
+   ```
+
+3. **Refactor**: Improve code
+   ```typescript
+   // Add input validation
+   function add(a: number, b: number) {
+     if (typeof a !== 'number' || typeof b !== 'number') {
+       throw new Error('Inputs must be numbers');
+     }
+     return a + b;
+   }
+   ```
+
+## Testing Checklist
+
+### Before Writing Tests
+- [ ] Understand requirements
+- [ ] Identify edge cases
+- [ ] Plan test scenarios
+
+### While Writing Tests
+- [ ] Test happy path
+- [ ] Test error cases
+- [ ] Test boundary conditions
+- [ ] Use descriptive names
+- [ ] One concept per test
+
+### After Writing Tests
+- [ ] All tests pass
+- [ ] Coverage meets thresholds
+- [ ] Tests are maintainable
+- [ ] No test interdependencies

package/templates/.agent/workflows/create.md

@@ -0,0 +1,131 @@
+---
+command: /create
+description: Create new features, components, or applications
+agent: orchestrator
+skills:
+  - react-best-practices
+  - api-patterns
+  - database-design
+  - frontend-design
+mode: build
+---
+
+# /create Workflow
+
+## Purpose
+Build new features, components, or applications from scratch with best practices.
+
+## Trigger
+User types: `/create <description>`
+
+## Execution Steps
+
+### Step 1: Requirement Analysis
+- Parse user request
+- Determine scope (component, feature, app)
+- Identify tech stack from context
+- Check existing patterns in codebase
+
+### Step 2: Architecture Decision
+Based on request, determine:
+- **Frontend**: Component, page, or full UI
+- **Backend**: API endpoint, service, or microservice
+- **Database**: Schema changes, migrations
+- **Full-stack**: All of the above
+
+### Step 3: Multi-Agent Coordination (if needed)
+For full-stack features:
+1. **Database Architect** → Schema first
+2. **Backend Specialist** → API layer
+3. **Frontend Specialist** → UI components
+4. **Test Engineer** → Tests
+
+### Step 4: Implementation
+
+**For Components:**
+```typescript
+// Follow existing patterns
+// Use TypeScript
+// Include Prop types
+// Add basic tests
+// Export from index
+```
+
+**For APIs:**
+```typescript
+// REST or GraphQL
+// Input validation
+// Error handling
+// Authentication check
+// Rate limiting
+```
+
+**For Features:**
+```
+1. Database migration
+2. Backend endpoints
+3. Frontend integration
+4. Tests (unit, integration, E2E)
+5. Documentation
+```
+
+### Step 5: Validation
+Run validation checks:
+- [ ] Code follows project conventions
+- [ ] TypeScript compiles
+- [ ] Linting passes
+- [ ] Tests pass
+- [ ] Security review (if auth/data involved)
+
+### Step 6: Documentation
+- Add JSDoc comments
+- Update README if needed
+- Include usage examples
+
+## Response Format
+
+```
+⚡ Executing /create
+
+🤖 Applying @frontend-specialist...
+
+[Code implementation]
+
+✅ Created: [File path]
+✅ Type-safe: [Yes/No]
+✅ Tested: [Yes/No]
+
+### Usage
+[How to use the created feature]
+
+### Next Steps
+- [ ] Review implementation
+- [ ] Run tests: npm test
+- [ ] Manual testing
+```
+
+## Examples
+
+### Create Component
+**User**: `/create Button component with loading state`
+
+### Create API
+**User**: `/create GET /api/users endpoint with pagination`
+
+### Create Feature
+**User**: `/create user profile page with avatar upload`
+
+## Best Practices Applied
+- TypeScript strict mode
+- Component composition
+- Error boundaries
+- Loading states
+- Form validation
+- Accessibility
+
+## Success Criteria
+- Feature is complete and functional
+- Follows project conventions
+- Includes error handling
+- Has test coverage
+- Documentation provided

package/templates/.agent/workflows/debug.md

@@ -0,0 +1,138 @@
+---
+command: /debug
+description: Systematic debugging and root cause analysis
+agent: debugger
+skills:
+  - systematic-debugging
+  - error-analysis
+  - performance-profiling
+mode: analytical
+---
+
+# /debug Workflow
+
+## Purpose
+Systematically analyze and fix bugs, errors, and unexpected behavior.
+
+## Trigger
+User types: `/debug <problem description>`
+
+## Execution Steps
+
+### Step 1: Information Gathering
+Collect details:
+- Error messages and stack traces
+- When did it start occurring?
+- Recent code changes
+- Steps to reproduce
+- Environment (browser, OS, versions)
+- Frequency (always, sometimes, random)
+
+### Step 2: Problem Classification
+Determine type:
+- **Runtime Error**: Exception, crash
+- **Logic Error**: Wrong output, unexpected behavior
+- **Performance Issue**: Slow, memory leak
+- **UI Issue**: Visual problems, layout
+- **Integration Issue**: API failure, auth problem
+
+### Step 3: Hypothesis Formation
+List possible causes:
+1. Recent code changes
+2. Dependency updates
+3. Environment changes
+4. Data issues
+5. Race conditions
+6. Configuration problems
+
+### Step 4: Investigation
+**For Frontend Errors:**
+- Check browser console
+- Inspect network requests
+- Review React/Vue devtools
+- Check state management
+
+**For Backend Errors:**
+- Review logs
+- Check error stack traces
+- Verify database connections
+- Test API endpoints
+
+**For Performance Issues:**
+- Profile execution
+- Check memory usage
+- Analyze network calls
+- Review bundle size
+
+### Step 5: Root Cause Identification
+- Narrow down to specific cause
+- Create minimal reproduction
+- Verify hypothesis
+
+### Step 6: Solution Implementation
+- Fix root cause (not symptoms)
+- Add regression tests
+- Update documentation if needed
+
+### Step 7: Verification
+- Confirm fix works
+- Check for side effects
+- Run test suite
+- Deploy to staging
+
+## Response Format
+
+```
+⚡ Executing /debug
+
+🤖 Applying @debugger for systematic analysis...
+
+## Issue Summary
+[Brief description of the problem]
+
+## Investigation
+### Step 1: Information Gathering
+[Details collected]
+
+### Step 2: Root Cause Analysis
+[Analysis process]
+
+**Root Cause**: [What's causing the issue]
+
+## Solution
+
+### Fix
+```code
+[The fix with explanation]
+```
+
+### Regression Test
+```typescript
+[Test to prevent recurrence]
+```
+
+## Verification Steps
+1. [Step 1 to verify fix]
+2. [Step 2 to verify fix]
+3. [Step 3 to verify fix]
+
+## Prevention
+[How to avoid this in the future]
+```
+
+## Examples
+
+**User**: `/debug Login button not working`
+**User**: `/debug API returns 500 error`
+**User**: `/debug Page loads slowly`
+**User**: `/debug Memory leak in dashboard`
+
+## Debugging Checklist
+- [ ] Collected all error information
+- [ ] Identified recent changes
+- [ ] Reproduced the issue
+- [ ] Found root cause
+- [ ] Implemented fix
+- [ ] Added regression test
+- [ ] Verified solution
+- [ ] Documented fix

package/templates/.agent/workflows/deploy.md

@@ -0,0 +1,163 @@
+---
+command: /deploy
+description: Deploy application to production or staging
+agent: devops-engineer
+skills:
+  - docker-expert
+  - deployment-procedures
+  - ci-cd
+mode: operational
+---
+
+# /deploy Workflow
+
+## Purpose
+Deploy application to production, staging, or development environments.
+
+## Trigger
+User types: `/deploy [environment]`
+
+## Execution Steps
+
+### Step 1: Pre-deployment Checks
+Verify:
+- [ ] All tests passing
+- [ ] Code reviewed
+- [ ] Version bumped
+- [ ] Changelog updated
+- [ ] No sensitive data in code
+
+### Step 2: Environment Detection
+Determine target:
+- Production
+- Staging
+- Development
+
+### Step 3: Build Process
+```bash
+# Install dependencies
+npm ci
+
+# Run tests
+npm test
+
+# Build application
+npm run build
+
+# Check build output
+ls -la dist/
+```
+
+### Step 4: Deployment Strategy
+
+**Vercel/Netlify:**
+```bash
+vercel --prod
+```
+
+**Docker:**
+```bash
+docker build -t myapp:v1.0.0 .
+docker push myapp:v1.0.0
+```
+
+**AWS/GCP/Azure:**
+- Use CI/CD pipeline
+- Deploy to ECS/Kubernetes
+- Blue-green or rolling deployment
+
+### Step 5: Post-deployment Verification
+- [ ] Health checks passing
+- [ ] Smoke tests passing
+- [ ] Logs showing no errors
+- [ ] Monitoring dashboards green
+- [ ] SSL certificates valid
+
+### Step 6: Rollback Plan
+Have rollback ready:
+- Previous version tagged
+- Database migrations reversible
+- Quick rollback procedure
+
+## Response Format
+
+```
+⚡ Executing /deploy
+
+🤖 Applying @devops-engineer...
+
+## Pre-deployment Checklist
+✅ Tests passing
+✅ Code reviewed
+✅ Version bumped to v1.2.0
+
+## Deployment Steps
+1. Building application...
+   ✅ Build successful (45s)
+
+2. Running tests...
+   ✅ All tests passed (128 tests)
+
+3. Deploying to production...
+   ✅ Deployed successfully
+
+## Post-deployment
+🌐 URL: https://myapp.com
+📊 Health: https://myapp.com/health
+
+### Verification
+✅ Health check: 200 OK
+✅ Response time: < 100ms
+✅ SSL: Valid
+
+## Rollback
+If needed: `vercel --rollback`
+```
+
+## Deployment Checklist
+
+### Before Deploy
+- [ ] Tests passing (unit, integration, E2E)
+- [ ] Code reviewed and approved
+- [ ] Security scan clean
+- [ ] Performance benchmarks met
+- [ ] Database migrations prepared
+- [ ] Environment variables set
+- [ ] Rollback plan ready
+
+### During Deploy
+- [ ] Build successful
+- [ ] No build warnings
+- [ ] Assets uploaded
+- [ ] Database migrations run
+- [ ] Services restarted
+
+### After Deploy
+- [ ] Health checks pass
+- [ ] Smoke tests pass
+- [ ] Error logs clean
+- [ ] Performance normal
+- [ ] Monitoring alerts silent
+
+## Common Commands
+
+```bash
+# Vercel
+vercel --prod
+
+# Netlify
+netlify deploy --prod
+
+# Docker
+kubectl set image deployment/myapp myapp=myapp:v1.0.0
+
+# AWS
+aws elasticbeanstalk update-environment
+```
+
+## Success Criteria
+- Zero-downtime deployment
+- All health checks passing
+- Performance maintained
+- Rollback plan ready
+- Team notified