# Web Development - Skills and Agents Backlog

## Overview

Skills and agents identified to support Web Development processes. This backlog captures specialized capabilities that go beyond general-purpose agents to provide deep expertise in specific frameworks, tools, and methodologies used in modern web development.

---

## Identified Skills

### Framework-Specific Skills

#### React Ecosystem
- [ ] **react-development-skill** - Specialized skill for React component development, hooks patterns, state management, context API, and performance optimization
- [ ] **react-hooks-skill** - Deep expertise in React hooks patterns including custom hooks, composition, and optimization
- [ ] **redux-toolkit-skill** - Redux Toolkit patterns, slice creation, async thunks, RTK Query, and state normalization
- [ ] **zustand-skill** - Zustand state management patterns, middleware, persistence, and devtools integration
- [ ] **react-query-skill** - TanStack Query (React Query) patterns for server state, caching, mutations, and optimistic updates

#### Next.js Ecosystem
- [ ] **nextjs-skill** - Next.js specific patterns including App Router, React Server Components, Server Actions, and deployment
- [ ] **nextjs-app-router-skill** - Deep expertise in App Router patterns, route groups, parallel routes, and intercepting routes
- [ ] **react-server-components-skill** - RSC patterns, streaming, data fetching, and client/server component composition
- [ ] **nextauth-skill** - NextAuth.js configuration, providers, adapters, and session management

#### Vue Ecosystem
- [ ] **vue-development-skill** - Vue 3 development with Composition API, reactivity system, and component patterns
- [ ] **pinia-skill** - Pinia state management patterns, stores, actions, and devtools
- [ ] **nuxt-skill** - Nuxt 3 patterns including Nitro server, auto-imports, modules, and hybrid rendering

#### Angular Ecosystem
- [ ] **angular-development-skill** - Angular development patterns, modules, dependency injection, and NgRx
- [ ] **rxjs-skill** - RxJS reactive programming patterns, operators, and error handling
- [ ] **ngrx-skill** - NgRx state management, effects, entity adapter, and component store

#### Other Frontend Frameworks
- [ ] **svelte-skill** - Svelte/SvelteKit development with built-in reactivity, stores, and SSR/SSG
- [ ] **lit-skill** - Web Components development with Lit, custom elements, and shadow DOM
- [ ] **remix-skill** - Remix patterns including loaders, actions, nested routing, and progressive enhancement

### Backend/API Skills

#### Node.js Backend
- [ ] **express-skill** - Express.js middleware patterns, routing, error handling, and security
- [ ] **nestjs-skill** - NestJS architecture, modules, dependency injection, and microservices
- [ ] **fastify-skill** - Fastify plugins, hooks, validation, and performance optimization

#### API Development
- [ ] **graphql-skill** - GraphQL schema design, resolvers, directives, and best practices
- [ ] **apollo-server-skill** - Apollo Server configuration, plugins, caching, and federation
- [ ] **trpc-skill** - tRPC end-to-end type safety, procedures, routers, and integration patterns
- [ ] **rest-api-design-skill** - RESTful API design principles, versioning, pagination, and documentation
- [ ] **openapi-skill** - OpenAPI/Swagger specification, code generation, and documentation

#### Real-Time Communication
- [ ] **websocket-skill** - WebSocket implementation, connection management, and scaling patterns
- [ ] **socketio-skill** - Socket.io rooms, namespaces, adapters, and real-time patterns
- [ ] **sse-skill** - Server-Sent Events implementation and streaming patterns

### Database Skills

- [ ] **prisma-skill** - Prisma ORM schema design, migrations, relations, and query optimization
- [ ] **drizzle-skill** - Drizzle ORM patterns, migrations, and type-safe queries
- [ ] **postgresql-skill** - PostgreSQL query optimization, indexing, full-text search, and JSONB
- [ ] **mongodb-skill** - MongoDB schema design, aggregation pipelines, and indexing strategies
- [ ] **redis-skill** - Redis caching patterns, pub/sub, sessions, and data structures

### Testing Skills

- [ ] **playwright-skill** - Playwright E2E testing, page objects, fixtures, and visual regression
- [ ] **cypress-skill** - Cypress testing patterns, custom commands, and component testing
- [ ] **vitest-skill** - Vitest configuration, mocking, coverage, and performance
- [ ] **jest-skill** - Jest configuration, mocking strategies, and snapshot testing
- [ ] **react-testing-library-skill** - React Testing Library patterns, queries, and accessibility testing
- [ ] **msw-skill** - Mock Service Worker API mocking, handlers, and integration testing
- [ ] **storybook-skill** - Storybook configuration, addons, interaction testing, and documentation

### Styling and Design System Skills

- [ ] **tailwind-skill** - Tailwind CSS configuration, custom plugins, JIT mode, and design systems
- [ ] **css-modules-skill** - CSS Modules patterns, composition, and variables
- [ ] **styled-components-skill** - Styled Components theming, variants, and SSR support
- [ ] **design-tokens-skill** - Design token management, generation, and multi-platform support
- [ ] **radix-ui-skill** - Radix UI primitives, composition patterns, and accessibility
- [ ] **shadcn-skill** - shadcn/ui component patterns, customization, and theming

### Build and Tooling Skills

- [ ] **vite-skill** - Vite configuration, plugins, optimization, and custom middleware
- [ ] **webpack-skill** - Webpack configuration, module federation, and optimization
- [ ] **esbuild-skill** - esbuild bundling, plugins, and build optimization
- [ ] **turbopack-skill** - Turbopack configuration and Next.js integration

### DevOps and Deployment Skills

- [ ] **vercel-skill** - Vercel deployment, edge functions, environment configuration
- [ ] **netlify-skill** - Netlify deployment, functions, and form handling
- [ ] **aws-amplify-skill** - AWS Amplify deployment, hosting, and backend resources
- [ ] **docker-web-skill** - Docker containerization for web apps, multi-stage builds
- [ ] **github-actions-web-skill** - GitHub Actions for web app CI/CD, testing, and deployment

### Security Skills

- [ ] **web-security-skill** - OWASP Top 10, security headers, CSP, and vulnerability prevention
- [ ] **jwt-skill** - JWT implementation, token management, refresh patterns, and security
- [ ] **oauth-skill** - OAuth 2.0/OIDC flows, provider integration, and token handling
- [ ] **csp-skill** - Content Security Policy configuration, nonces, and reporting
- [ ] **secrets-management-skill** - Secrets handling, environment variables, and vault integration

### Performance Skills

- [ ] **web-performance-skill** - Core Web Vitals optimization, Lighthouse audits, and performance monitoring
- [ ] **bundle-optimization-skill** - Bundle analysis, code splitting, and tree shaking
- [ ] **image-optimization-skill** - Image formats, responsive images, lazy loading, and CDN integration
- [ ] **caching-skill** - HTTP caching, service workers, and cache invalidation strategies

### Accessibility Skills

- [ ] **wcag-skill** - WCAG 2.1/2.2 compliance, auditing, and remediation
- [ ] **aria-skill** - WAI-ARIA implementation, roles, states, and properties
- [ ] **screen-reader-skill** - Screen reader compatibility, testing, and optimization
- [ ] **keyboard-navigation-skill** - Keyboard accessibility, focus management, and shortcuts

### SEO and Analytics Skills

- [ ] **seo-skill** - Technical SEO, structured data, sitemaps, and meta tags
- [ ] **structured-data-skill** - JSON-LD schema markup and validation
- [ ] **analytics-skill** - Google Analytics 4, tag management, and event tracking

### Monorepo Skills

- [ ] **turborepo-skill** - Turborepo configuration, caching, and pipeline optimization
- [ ] **nx-skill** - Nx workspace configuration, generators, and affected commands
- [ ] **pnpm-workspaces-skill** - pnpm workspace patterns and dependency management

---

## Identified Agents

### Architecture Agents

- [ ] **frontend-architect-agent** - Frontend architecture decisions, component design, state management selection, and scalability planning
- [ ] **fullstack-architect-agent** - Full-stack architecture design, API contracts, data flow, and deployment strategy
- [ ] **api-architect-agent** - API design decisions, REST vs GraphQL, versioning strategies, and documentation
- [ ] **micro-frontend-architect-agent** - Micro-frontend architecture, module federation, and integration strategies

### Development Agents

- [ ] **react-developer-agent** - React component development, hooks, state management, and performance optimization
- [ ] **nextjs-developer-agent** - Next.js full-stack development, RSC patterns, and Vercel deployment
- [ ] **vue-developer-agent** - Vue 3 development with Composition API, Pinia, and Nuxt integration
- [ ] **angular-developer-agent** - Angular enterprise development, NgRx, and RxJS patterns
- [ ] **backend-developer-agent** - Node.js backend development, Express/NestJS, and database integration
- [ ] **graphql-developer-agent** - GraphQL API development, schema design, and Apollo Server implementation

### Specialized Developers

- [ ] **component-developer-agent** - UI component development, accessibility, variants, and documentation
- [ ] **hooks-developer-agent** - Custom React hooks development, composition, and testing
- [ ] **animation-developer-agent** - Web animations, Framer Motion, GSAP, and performance optimization
- [ ] **forms-developer-agent** - Form libraries (React Hook Form, Formik), validation, and UX patterns

### Testing Agents

- [ ] **e2e-testing-agent** - E2E test strategy, Playwright/Cypress implementation, and CI integration
- [ ] **unit-testing-agent** - Unit test patterns, mocking strategies, and coverage optimization
- [ ] **visual-regression-agent** - Visual regression testing setup, baseline management, and review
- [ ] **performance-testing-agent** - Load testing, performance benchmarks, and optimization recommendations
- [ ] **accessibility-testing-agent** - Automated and manual accessibility testing, WCAG compliance verification

### Security Agents

- [ ] **security-auditor-agent** - Security vulnerability scanning, OWASP compliance, and penetration testing
- [ ] **auth-specialist-agent** - Authentication implementation, JWT/OAuth flows, and session management
- [ ] **security-hardening-agent** - Security headers, CSP configuration, and infrastructure hardening

### Performance Agents

- [ ] **performance-auditor-agent** - Performance auditing, Core Web Vitals analysis, and optimization recommendations
- [ ] **bundle-analyzer-agent** - Bundle analysis, dependency audit, and size optimization
- [ ] **lighthouse-agent** - Lighthouse CI integration, score tracking, and automated recommendations

### Quality Agents

- [ ] **code-reviewer-agent** - Code review automation, best practices enforcement, and feedback
- [ ] **accessibility-auditor-agent** - WCAG compliance auditing, issue identification, and remediation planning
- [ ] **seo-auditor-agent** - Technical SEO audit, structured data validation, and optimization

### DevOps Agents

- [ ] **ci-cd-agent** - CI/CD pipeline setup, GitHub Actions workflows, and deployment automation
- [ ] **deployment-agent** - Deployment strategy, rollback procedures, and monitoring setup
- [ ] **container-agent** - Docker configuration, multi-stage builds, and orchestration

### Documentation Agents

- [ ] **api-documentation-agent** - API documentation generation, OpenAPI specs, and examples
- [ ] **component-documentation-agent** - Component library documentation, Storybook stories, and usage guides
- [ ] **architecture-documentation-agent** - Architecture decision records, diagrams, and technical specifications

---

## Shared/Common (candidates for parent directory)

### Cross-Specialization Skills
- [ ] **typescript-skill** - TypeScript configuration, strict mode, generics, and type utilities (shared across web, mobile, backend)
- [ ] **eslint-skill** - ESLint configuration, custom rules, and plugin development (shared across JS/TS projects)
- [ ] **prettier-skill** - Prettier configuration and integration (shared across JS/TS projects)
- [ ] **git-skill** - Git workflows, branching strategies, and hooks (shared across all specializations)
- [ ] **markdown-skill** - Markdown documentation, MDX, and content formatting (shared across documentation)
- [ ] **yaml-skill** - YAML configuration for CI/CD, Docker Compose, and Kubernetes (shared with DevOps)
- [ ] **json-schema-skill** - JSON Schema validation and API contract design (shared across API development)
- [ ] **zod-skill** - Zod schema validation and type inference (shared across TypeScript projects)

### Cross-Specialization Agents
- [ ] **technical-writer-agent** - Technical documentation writing (shared across all specializations)
- [ ] **code-quality-agent** - Code quality enforcement, linting, and formatting (shared across development)
- [ ] **dependency-audit-agent** - Dependency security scanning and update management (shared across Node.js projects)
- [ ] **environment-setup-agent** - Development environment configuration and onboarding (shared across projects)

---

## Process-to-Skills/Agents Mapping

### Frontend Application Development (5 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| React Application Development | react-development-skill, redux-toolkit-skill, vitest-skill | react-developer-agent, component-developer-agent |
| Vue.js Application Development | vue-development-skill, pinia-skill, vitest-skill | vue-developer-agent, component-developer-agent |
| Angular Enterprise Development | angular-development-skill, rxjs-skill, ngrx-skill | angular-developer-agent, frontend-architect-agent |
| Svelte/SvelteKit Development | svelte-skill, vitest-skill | frontend-architect-agent |
| PWA Development | web-performance-skill, caching-skill | performance-auditor-agent |

### Full-Stack Development (5 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| Next.js Full-Stack | nextjs-skill, prisma-skill, nextauth-skill | nextjs-developer-agent, fullstack-architect-agent |
| Remix Full-Stack | remix-skill, prisma-skill | fullstack-architect-agent |
| Nuxt.js Full-Stack | nuxt-skill, pinia-skill | vue-developer-agent, fullstack-architect-agent |
| MERN Stack | express-skill, mongodb-skill, react-development-skill | backend-developer-agent, react-developer-agent |
| T3 Stack | nextjs-skill, trpc-skill, prisma-skill | nextjs-developer-agent, api-architect-agent |

### Backend API Development (5 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| RESTful API (Node.js) | express-skill, openapi-skill | backend-developer-agent, api-architect-agent |
| GraphQL API (Apollo) | graphql-skill, apollo-server-skill | graphql-developer-agent, api-architect-agent |
| tRPC API | trpc-skill, zod-skill | api-architect-agent |
| NestJS Microservices | nestjs-skill | backend-developer-agent, api-architect-agent |
| Serverless API (Lambda) | aws-amplify-skill | deployment-agent |

### Authentication/Authorization (4 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| JWT Authentication | jwt-skill, web-security-skill | auth-specialist-agent |
| OAuth/Social Login | oauth-skill, nextauth-skill | auth-specialist-agent |
| RBAC Implementation | web-security-skill | auth-specialist-agent, security-auditor-agent |
| MFA Implementation | jwt-skill, web-security-skill | auth-specialist-agent, security-auditor-agent |

### Database Integration (4 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| PostgreSQL Design | postgresql-skill, prisma-skill | backend-developer-agent |
| MongoDB Schema Design | mongodb-skill | backend-developer-agent |
| Prisma ORM Integration | prisma-skill | backend-developer-agent |
| Redis Caching | redis-skill, caching-skill | performance-auditor-agent |

### Testing (4 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| Unit Testing (React) | vitest-skill, react-testing-library-skill | unit-testing-agent |
| E2E Testing (Playwright) | playwright-skill | e2e-testing-agent |
| API Integration Testing | msw-skill, vitest-skill | unit-testing-agent |
| Storybook Component Testing | storybook-skill | component-documentation-agent, visual-regression-agent |

### Accessibility (3 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| Accessibility Audit | wcag-skill, aria-skill | accessibility-auditor-agent, accessibility-testing-agent |
| ARIA Implementation | aria-skill | accessibility-auditor-agent |
| Keyboard Navigation | keyboard-navigation-skill | accessibility-testing-agent |

### Performance (4 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| Web Performance Optimization | web-performance-skill | performance-auditor-agent, lighthouse-agent |
| Bundle Size Optimization | bundle-optimization-skill | bundle-analyzer-agent |
| Image Optimization | image-optimization-skill | performance-auditor-agent |
| Service Workers/Caching | caching-skill | performance-auditor-agent |

### Security (3 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| CSP Implementation | csp-skill, web-security-skill | security-hardening-agent |
| OWASP Security Audit | web-security-skill | security-auditor-agent |
| Secrets Management | secrets-management-skill | security-hardening-agent |

### Deployment (5 processes)
| Process | Primary Skills | Primary Agents |
|---------|---------------|----------------|
| Vite Configuration | vite-skill | ci-cd-agent |
| Docker Containerization | docker-web-skill | container-agent |
| GitHub Actions CI/CD | github-actions-web-skill | ci-cd-agent |
| Vercel Deployment | vercel-skill | deployment-agent |
| AWS Amplify Deployment | aws-amplify-skill | deployment-agent |

---

## Summary

| Category | Count |
|----------|-------|
| **Total Skills Identified** | 78 |
| **Total Agents Identified** | 32 |
| **Shared/Common Candidates** | 12 |

### Skills Breakdown
- Framework-Specific Skills: 25
- Backend/API Skills: 14
- Database Skills: 5
- Testing Skills: 7
- Styling/Design System Skills: 6
- Build/Tooling Skills: 4
- DevOps/Deployment Skills: 5
- Security Skills: 5
- Performance Skills: 4
- Accessibility Skills: 4
- SEO/Analytics Skills: 3
- Monorepo Skills: 3

### Agents Breakdown
- Architecture Agents: 4
- Development Agents: 6
- Specialized Developers: 4
- Testing Agents: 5
- Security Agents: 3
- Performance Agents: 3
- Quality Agents: 3
- DevOps Agents: 3
- Documentation Agents: 3

---

## Implementation Priority

### Phase 1 - Core Skills (High Impact)
1. react-development-skill
2. nextjs-skill
3. typescript-skill
4. playwright-skill
5. tailwind-skill
6. prisma-skill

### Phase 2 - Architecture Agents
1. frontend-architect-agent
2. fullstack-architect-agent
3. api-architect-agent

### Phase 3 - Testing & Quality
1. e2e-testing-agent
2. unit-testing-agent
3. accessibility-auditor-agent

### Phase 4 - Security & Performance
1. security-auditor-agent
2. performance-auditor-agent
3. web-security-skill

### Phase 5 - DevOps & Documentation
1. ci-cd-agent
2. deployment-agent
3. technical-writer-agent

---

## Next Steps

1. **Skill Development**: Create detailed skill specifications with context, capabilities, and integration points
2. **Agent Prompts**: Design comprehensive agent prompts with roles, tasks, and output schemas
3. **Integration Testing**: Validate skills and agents work effectively within process workflows
4. **Documentation**: Create usage guides and examples for each skill and agent
5. **Shared Components**: Extract common skills/agents to parent directory for cross-specialization use
