kiro-agent-team 1.0.0

package/.kiro/prompts/execute-backend.md

@@ -0,0 +1,257 @@
+# Execute: Backend Development
+
+## Backend-Specific Implementation Framework
+
+This specialized execution framework is optimized for backend development tasks, focusing on API design, business logic implementation, and system integration.
+
+## Backend Development Process
+
+### Phase 1: Requirements Analysis
+**Backend-Specific Analysis:**
+- API endpoint specifications and data contracts
+- Business logic requirements and validation rules
+- Database integration and query patterns
+- Authentication and authorization requirements
+- Performance and scalability considerations
+- Security requirements and compliance needs
+
+**Questions to Address:**
+- What API endpoints need to be implemented?
+- What business rules and validation logic are required?
+- How should data be structured and validated?
+- What authentication/authorization patterns are needed?
+- What are the performance requirements?
+- What security measures must be implemented?
+
+### Phase 2: Architecture Design
+**Backend Architecture Planning:**
+- API design patterns (REST, GraphQL, RPC)
+- Service layer architecture and separation of concerns
+- Database schema design and ORM integration
+- Middleware stack and request/response handling
+- Error handling and logging strategies
+- Testing strategy for business logic and APIs
+
+**Design Decisions:**
+- Choose appropriate design patterns for business logic
+- Define clear API contracts and data models
+- Plan database interactions and transaction handling
+- Design authentication and authorization flows
+- Establish error handling and validation patterns
+
+### Phase 3: Implementation
+**Systematic Backend Implementation:**
+
+#### API Layer Implementation
+```typescript
+// Example API endpoint structure
+router.post('/api/users', [
+  authMiddleware,
+  validateUserInput,
+  async (req: Request, res: Response) => {
+    try {
+      const userData = req.body;
+      const user = await userService.createUser(userData);
+      res.status(201).json({ success: true, data: user });
+    } catch (error) {
+      handleApiError(error, res);
+    }
+  }
+]);
+```
+
+#### Service Layer Implementation
+```typescript
+// Business logic in service layer
+export class UserService {
+  async createUser(userData: CreateUserDto): Promise<User> {
+    // Validate business rules
+    await this.validateUserData(userData);
+    
+    // Hash password securely
+    const hashedPassword = await bcrypt.hash(userData.password, 12);
+    
+    // Create user with transaction
+    return await this.db.transaction(async (tx) => {
+      const user = await tx.user.create({
+        data: { ...userData, password: hashedPassword }
+      });
+      
+      // Create related records
+      await this.createUserProfile(tx, user.id);
+      
+      return user;
+    });
+  }
+}
+```
+
+#### Data Validation Implementation
+```typescript
+// Input validation with Zod
+const CreateUserSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8).regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/),
+  name: z.string().min(2).max(100),
+  role: z.enum(['user', 'admin']).default('user')
+});
+
+export const validateUserInput = (req: Request, res: Response, next: NextFunction) => {
+  try {
+    req.body = CreateUserSchema.parse(req.body);
+    next();
+  } catch (error) {
+    res.status(400).json({ error: 'Invalid input data', details: error.errors });
+  }
+};
+```
+
+### Phase 4: Security Implementation
+**Backend Security Measures:**
+- Input validation and sanitization
+- SQL injection prevention with parameterized queries
+- Authentication token management (JWT)
+- Authorization middleware and role-based access
+- Rate limiting and DDoS protection
+- Security headers and CORS configuration
+
+**Security Checklist:**
+- [ ] All inputs validated and sanitized
+- [ ] SQL injection prevention implemented
+- [ ] Authentication properly secured
+- [ ] Authorization checks on all protected endpoints
+- [ ] Rate limiting configured
+- [ ] Security headers implemented
+- [ ] Sensitive data properly encrypted
+- [ ] Error messages don't leak sensitive information
+
+### Phase 5: Testing Implementation
+**Backend Testing Strategy:**
+- Unit tests for business logic and services
+- Integration tests for API endpoints
+- Database integration tests with test containers
+- Authentication and authorization tests
+- Error handling and edge case tests
+- Performance tests for critical endpoints
+
+**Testing Examples:**
+```typescript
+// Unit test for service layer
+describe('UserService', () => {
+  it('should create user with hashed password', async () => {
+    const userData = { email: 'test@example.com', password: 'Password123', name: 'Test User' };
+    const user = await userService.createUser(userData);
+    
+    expect(user.email).toBe(userData.email);
+    expect(user.password).not.toBe(userData.password); // Should be hashed
+    expect(await bcrypt.compare(userData.password, user.password)).toBe(true);
+  });
+});
+
+// Integration test for API endpoint
+describe('POST /api/users', () => {
+  it('should create user and return 201', async () => {
+    const userData = { email: 'test@example.com', password: 'Password123', name: 'Test User' };
+    
+    const response = await request(app)
+      .post('/api/users')
+      .send(userData)
+      .expect(201);
+      
+    expect(response.body.success).toBe(true);
+    expect(response.body.data.email).toBe(userData.email);
+  });
+});
+```
+
+### Phase 6: Performance Optimization
+**Backend Performance Considerations:**
+- Database query optimization and indexing
+- Caching strategies (Redis, in-memory)
+- Connection pooling and resource management
+- Async/await patterns for non-blocking operations
+- Response compression and optimization
+- Monitoring and profiling integration
+
+### Phase 7: Documentation
+**Backend Documentation Requirements:**
+- API documentation (OpenAPI/Swagger)
+- Business logic documentation
+- Database schema documentation
+- Authentication and authorization guides
+- Deployment and configuration guides
+- Error handling and troubleshooting guides
+
+## Backend-Specific Validation Checklist
+
+### API Design Validation
+- [ ] RESTful design principles followed
+- [ ] Consistent naming conventions used
+- [ ] Proper HTTP status codes implemented
+- [ ] Error responses standardized
+- [ ] API versioning strategy implemented
+- [ ] Rate limiting configured appropriately
+
+### Business Logic Validation
+- [ ] Business rules properly implemented
+- [ ] Data validation comprehensive
+- [ ] Transaction handling correct
+- [ ] Error handling robust
+- [ ] Logging adequate for debugging
+- [ ] Performance optimized
+
+### Security Validation
+- [ ] Authentication properly implemented
+- [ ] Authorization checks comprehensive
+- [ ] Input validation prevents injection attacks
+- [ ] Sensitive data properly protected
+- [ ] Security headers configured
+- [ ] CORS properly configured
+
+### Database Integration Validation
+- [ ] Database queries optimized
+- [ ] Transactions used appropriately
+- [ ] Connection pooling configured
+- [ ] Migration scripts tested
+- [ ] Backup and recovery tested
+- [ ] Data integrity maintained
+
+### Testing Validation
+- [ ] Unit tests cover business logic
+- [ ] Integration tests cover API endpoints
+- [ ] Database tests use proper isolation
+- [ ] Authentication tests comprehensive
+- [ ] Error handling tests complete
+- [ ] Performance tests for critical paths
+
+## Backend Implementation Success Criteria
+
+### Functionality
+- All API endpoints work as specified
+- Business logic correctly implements requirements
+- Data validation prevents invalid states
+- Error handling provides useful feedback
+- Authentication and authorization work correctly
+
+### Performance
+- API response times meet requirements
+- Database queries are optimized
+- Memory usage is reasonable
+- CPU usage is efficient
+- Concurrent request handling works properly
+
+### Security
+- No security vulnerabilities detected
+- Authentication cannot be bypassed
+- Authorization prevents unauthorized access
+- Input validation prevents attacks
+- Sensitive data is properly protected
+
+### Maintainability
+- Code is well-structured and readable
+- Business logic is properly separated
+- Dependencies are managed correctly
+- Documentation is comprehensive
+- Tests provide good coverage
+
+This backend-specific execution framework ensures systematic, secure, and performant API development with comprehensive validation and testing.

package/.kiro/prompts/execute-frontend.md

@@ -0,0 +1,438 @@
+# Execute: Frontend Development
+
+## Frontend-Specific Implementation Framework
+
+This specialized execution framework is optimized for frontend development tasks, focusing on user interface implementation, user experience optimization, and client-side functionality.
+
+## Frontend Development Process
+
+### Phase 1: Requirements Analysis
+**Frontend-Specific Analysis:**
+- User interface specifications and design requirements
+- User experience goals and interaction patterns
+- Component architecture and reusability needs
+- State management requirements and data flow
+- Performance requirements and optimization needs
+- Accessibility requirements and compliance standards
+
+**Questions to Address:**
+- What UI components need to be implemented?
+- What user interactions and workflows are required?
+- How should application state be managed?
+- What are the performance and accessibility requirements?
+- What devices and browsers need to be supported?
+- How should the frontend integrate with backend APIs?
+
+### Phase 2: Architecture Design
+**Frontend Architecture Planning:**
+- Component hierarchy and atomic design principles
+- State management strategy (Redux, Context, local state)
+- Routing and navigation structure
+- API integration patterns and data fetching
+- Styling approach and design system integration
+- Testing strategy for components and user interactions
+
+**Design Decisions:**
+- Choose appropriate component patterns and composition
+- Define state management architecture and data flow
+- Plan API integration and error handling strategies
+- Establish styling patterns and design system usage
+- Design responsive layouts and mobile-first approach
+
+### Phase 3: Implementation
+**Systematic Frontend Implementation:**
+
+#### Component Implementation
+```typescript
+// Example component with TypeScript and accessibility
+interface TaskCardProps {
+  task: Task;
+  onUpdate: (task: Task) => void;
+  onDelete: (id: string) => void;
+}
+
+export const TaskCard: React.FC<TaskCardProps> = ({ task, onUpdate, onDelete }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow"
+      role="article"
+      aria-labelledby={`task-title-${task.id}`}
+    >
+      <h3 
+        id={`task-title-${task.id}`}
+        className="text-lg font-semibold text-gray-900"
+      >
+        {task.title}
+      </h3>
+      
+      <p className="text-gray-600 mt-2">{task.description}</p>
+      
+      <div className="flex justify-between items-center mt-4">
+        <span 
+          className={`px-2 py-1 rounded text-sm ${getStatusColor(task.status)}`}
+          aria-label={`Status: ${task.status}`}
+        >
+          {task.status}
+        </span>
+        
+        <div className="flex gap-2">
+          <button
+            onClick={() => setIsEditing(true)}
+            className="text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label={`Edit task: ${task.title}`}
+          >
+            Edit
+          </button>
+          <button
+            onClick={() => onDelete(task.id)}
+            className="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
+            aria-label={`Delete task: ${task.title}`}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+#### State Management Implementation
+```typescript
+// Redux Toolkit slice for task management
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+export const fetchTasks = createAsyncThunk(
+  'tasks/fetchTasks',
+  async (_, { rejectWithValue }) => {
+    try {
+      const response = await api.get('/tasks');
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response?.data || 'Failed to fetch tasks');
+    }
+  }
+);
+
+const tasksSlice = createSlice({
+  name: 'tasks',
+  initialState: {
+    items: [] as Task[],
+    loading: false,
+    error: null as string | null,
+  },
+  reducers: {
+    addTask: (state, action) => {
+      state.items.push(action.payload);
+    },
+    updateTask: (state, action) => {
+      const index = state.items.findIndex(task => task.id === action.payload.id);
+      if (index !== -1) {
+        state.items[index] = action.payload;
+      }
+    },
+    removeTask: (state, action) => {
+      state.items = state.items.filter(task => task.id !== action.payload);
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchTasks.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(fetchTasks.fulfilled, (state, action) => {
+        state.loading = false;
+        state.items = action.payload;
+      })
+      .addCase(fetchTasks.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload as string;
+      });
+  },
+});
+```
+
+#### API Integration Implementation
+```typescript
+// RTK Query API integration
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const tasksApi = createApi({
+  reducerPath: 'tasksApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: '/api',
+    prepareHeaders: (headers, { getState }) => {
+      const token = (getState() as RootState).auth.token;
+      if (token) {
+        headers.set('authorization', `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
+  tagTypes: ['Task'],
+  endpoints: (builder) => ({
+    getTasks: builder.query<Task[], void>({
+      query: () => 'tasks',
+      providesTags: ['Task'],
+    }),
+    createTask: builder.mutation<Task, Partial<Task>>({
+      query: (newTask) => ({
+        url: 'tasks',
+        method: 'POST',
+        body: newTask,
+      }),
+      invalidatesTags: ['Task'],
+    }),
+    updateTask: builder.mutation<Task, { id: string; updates: Partial<Task> }>({
+      query: ({ id, updates }) => ({
+        url: `tasks/${id}`,
+        method: 'PATCH',
+        body: updates,
+      }),
+      invalidatesTags: ['Task'],
+    }),
+  }),
+});
+```
+
+### Phase 4: Accessibility Implementation
+**Frontend Accessibility Measures:**
+- Semantic HTML structure and ARIA attributes
+- Keyboard navigation and focus management
+- Screen reader compatibility and announcements
+- Color contrast and visual accessibility
+- Touch target sizing for mobile devices
+- Error messaging and form validation accessibility
+
+**Accessibility Checklist:**
+- [ ] Semantic HTML elements used appropriately
+- [ ] ARIA attributes added where needed
+- [ ] Keyboard navigation works for all interactions
+- [ ] Focus indicators are visible and clear
+- [ ] Color contrast meets WCAG standards
+- [ ] Images have appropriate alt text
+- [ ] Forms have proper labels and error messages
+- [ ] Screen reader announcements are helpful
+
+### Phase 5: Responsive Design Implementation
+**Mobile-First Responsive Design:**
+- Flexible grid systems and layout patterns
+- Responsive typography and spacing
+- Touch-friendly interaction design
+- Performance optimization for mobile devices
+- Progressive enhancement for larger screens
+
+**Responsive Implementation:**
+```css
+/* Mobile-first responsive design */
+.task-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+@media (min-width: 768px) {
+  .task-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .task-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    padding: 2rem;
+  }
+}
+
+/* Touch-friendly button sizing */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.75rem 1rem;
+}
+```
+
+### Phase 6: Testing Implementation
+**Frontend Testing Strategy:**
+- Unit tests for component logic and utilities
+- Integration tests for component interactions
+- Accessibility tests with jest-axe
+- Visual regression tests with Storybook
+- End-to-end tests for user workflows
+- Performance tests for critical rendering paths
+
+**Testing Examples:**
+```typescript
+// Component unit test
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TaskCard } from './TaskCard';
+
+describe('TaskCard', () => {
+  const mockTask = {
+    id: '1',
+    title: 'Test Task',
+    description: 'Test Description',
+    status: 'todo' as const,
+  };
+
+  it('renders task information correctly', () => {
+    render(<TaskCard task={mockTask} onUpdate={jest.fn()} onDelete={jest.fn()} />);
+    
+    expect(screen.getByText('Test Task')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+    expect(screen.getByText('todo')).toBeInTheDocument();
+  });
+
+  it('calls onDelete when delete button is clicked', () => {
+    const onDelete = jest.fn();
+    render(<TaskCard task={mockTask} onUpdate={jest.fn()} onDelete={onDelete} />);
+    
+    fireEvent.click(screen.getByLabelText('Delete task: Test Task'));
+    expect(onDelete).toHaveBeenCalledWith('1');
+  });
+});
+
+// Accessibility test
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+it('should not have accessibility violations', async () => {
+  const { container } = render(<TaskCard task={mockTask} onUpdate={jest.fn()} onDelete={jest.fn()} />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+### Phase 7: Performance Optimization
+**Frontend Performance Considerations:**
+- Code splitting and lazy loading
+- Image optimization and lazy loading
+- Bundle size optimization and tree shaking
+- Memoization and re-render optimization
+- Caching strategies for API data
+- Core Web Vitals optimization
+
+**Performance Implementation:**
+```typescript
+// Code splitting with React.lazy
+const TaskModal = React.lazy(() => import('./TaskModal'));
+
+// Memoization for expensive calculations
+const TaskList = React.memo(({ tasks, filter }) => {
+  const filteredTasks = useMemo(() => {
+    return tasks.filter(task => 
+      filter === 'all' || task.status === filter
+    );
+  }, [tasks, filter]);
+
+  return (
+    <div className="task-list">
+      {filteredTasks.map(task => (
+        <TaskCard key={task.id} task={task} />
+      ))}
+    </div>
+  );
+});
+
+// Image optimization
+const OptimizedImage = ({ src, alt, ...props }) => (
+  <img
+    src={src}
+    alt={alt}
+    loading="lazy"
+    decoding="async"
+    {...props}
+  />
+);
+```
+
+### Phase 8: Documentation
+**Frontend Documentation Requirements:**
+- Component documentation with Storybook
+- State management patterns and data flow
+- API integration patterns and error handling
+- Accessibility implementation guide
+- Responsive design patterns and breakpoints
+- Performance optimization techniques
+
+## Frontend-Specific Validation Checklist
+
+### User Interface Validation
+- [ ] Components render correctly across browsers
+- [ ] Responsive design works on all target devices
+- [ ] Interactive elements provide appropriate feedback
+- [ ] Loading states and error handling implemented
+- [ ] Design system patterns followed consistently
+- [ ] Typography and spacing follow design guidelines
+
+### User Experience Validation
+- [ ] User workflows are intuitive and efficient
+- [ ] Navigation is clear and consistent
+- [ ] Form validation provides helpful feedback
+- [ ] Error messages are user-friendly
+- [ ] Performance meets user expectations
+- [ ] Accessibility supports all users
+
+### Technical Validation
+- [ ] State management is predictable and debuggable
+- [ ] API integration handles all error scenarios
+- [ ] Component architecture is maintainable
+- [ ] Code splitting optimizes bundle size
+- [ ] TypeScript types are comprehensive
+- [ ] Testing coverage is adequate
+
+### Performance Validation
+- [ ] Initial page load is under 3 seconds
+- [ ] Largest Contentful Paint is under 2.5 seconds
+- [ ] First Input Delay is under 100ms
+- [ ] Cumulative Layout Shift is under 0.1
+- [ ] Bundle size is optimized
+- [ ] Images are properly optimized
+
+### Accessibility Validation
+- [ ] WCAG 2.1 AA compliance achieved
+- [ ] Keyboard navigation works completely
+- [ ] Screen reader compatibility verified
+- [ ] Color contrast meets standards
+- [ ] Focus management is appropriate
+- [ ] Error announcements are helpful
+
+## Frontend Implementation Success Criteria
+
+### Functionality
+- All UI components work as designed
+- User interactions behave as expected
+- State management maintains data consistency
+- API integration handles all scenarios correctly
+- Error handling provides useful feedback
+
+### User Experience
+- Interface is intuitive and easy to use
+- Performance meets user expectations
+- Responsive design works on all devices
+- Accessibility supports diverse users
+- Visual design is polished and consistent
+
+### Technical Quality
+- Code is well-structured and maintainable
+- Components are reusable and composable
+- State management is predictable
+- Testing provides confidence in changes
+- Performance is optimized for target devices
+
+### Standards Compliance
+- Accessibility standards are met
+- Browser compatibility is ensured
+- Performance benchmarks are achieved
+- Code quality standards are followed
+- Design system patterns are implemented
+
+This frontend-specific execution framework ensures systematic, accessible, and performant user interface development with comprehensive validation and testing.