Fullstack Developer Skill
Purpose
Provides end-to-end full-stack development expertise spanning frontend and backend technologies with focus on seamless integration, complete feature ownership, and system-level architecture. Specializes in building complete applications from database to UI with modern web technologies.
When to Use
- Building complete features end-to-end (database → API → frontend)
- Integrating frontend and backend systems (REST/GraphQL APIs, WebSockets)
- Implementing authentication and authorization across the stack
- Designing and implementing full-stack architectures (monoliths, microservices)
- Optimizing performance across frontend-backend boundaries
- Debugging complex issues spanning multiple layers of the stack
- Building full-stack applications with React/Vue + Node.js/Python/Go
Core Capabilities
Frontend Development
- Building React, Vue, or other modern frontend applications
- Implementing component architectures and design patterns
- Managing state with Redux, Context, or other solutions
- Creating responsive and accessible user interfaces
Backend Development
- Developing APIs with Node.js, Python, Go, or other backends
- Managing database design and ORM usage
- Implementing authentication and authorization systems
- Handling file uploads, streaming, and server-side processing
Full-Stack Integration
- Connecting frontend and backend systems seamlessly
- Managing API contracts and version compatibility
- Implementing real-time features (WebSockets, Server-Sent Events)
- Optimizing performance across the full stack
DevOps and Deployment
- Setting up CI/CD pipelines for full-stack applications
- Managing containerization with Docker and Kubernetes
- Configuring cloud infrastructure and deployment strategies
- Monitoring and troubleshooting production issues
Quick Start
Invoke When
- User needs complete feature implementation from database to UI
- Task involves frontend-backend communication or integration
- Building or debugging full-stack applications
- Need architecture decisions spanning multiple layers
Don't Invoke When
- Task is purely frontend (use react-specialist or vue-expert)
- Task is purely backend API (use backend-developer)
- Task is infrastructure-focused (use devops-engineer)
- Task is database-specific (use database-optimizer)
Decision Framework
Architecture Patterns
Building new application?
│
├─ Team size < 5 developers?
│ │
│ ├─ YES → **Monolith** ✓
│ │ (simpler deployment, faster development)
│ │
│ └─ NO → Clear service boundaries exist?
│ │
│ ├─ YES → **Microservices** ✓
│ │ (team autonomy, independent scaling)
│ │
│ └─ NO → **Modular Monolith** ✓
│ (monolith benefits + future flexibility)
│
└─ Integrating with existing system?
│
└─ Use **API Gateway Pattern** for consistent interfaceFrontend-Backend Communication
| Pattern | Use When | Avoid When |
|---|---|---|
| REST API | CRUD operations, simple data fetching | Complex nested data, real-time needs |
| GraphQL | Complex data requirements, mobile apps | Simple APIs, caching is critical |
| WebSockets | Real-time updates, chat, live feeds | One-time data fetches |
| Server-Sent Events | Server-to-client streaming only | Bidirectional communication needed |
State Management Decision
Application complexity?
│
├─ Simple (< 5 components sharing state)
│ └─ **React Context / Vue provide/inject** ✓
│
├─ Medium (multiple feature modules)
│ └─ **Zustand / Pinia** ✓
│
└─ Complex (large team, strict requirements)
└─ **Redux Toolkit / Vuex** ✓Architecture Patterns and Methodologies
Fullstack Integration Patterns
- API-First Development: Design contracts before implementation
- Component-Driven Architecture: Reusable UI and backend components
- Service Layer Pattern: Business logic separation
- Repository Pattern: Data access abstraction
- State Management: Frontend state consistency strategies
Frontend Architecture
- Component Architecture: Atomic design, feature-based organization
- State Management: Redux, MobX, Context API, Vuex
- Routing Patterns: Client-side routing and navigation guards
- Form Handling: Validation, submission, and error management
- Performance Optimization: Code splitting, lazy loading, caching
Backend Architecture
- RESTful API Design: Resource-oriented endpoints
- GraphQL Integration: Flexible data fetching
- Authentication & Authorization: JWT, OAuth2, session management
- Data Validation: Request validation and sanitization
- Error Handling: Consistent error responses and logging
Best Practices
Fullstack Development
- API Design: RESTful conventions with OpenAPI documentation
- State Management: Centralized state with proper data flow
- Error Handling: Consistent error responses, proper HTTP status codes
- Security: Input validation, SQL injection prevention, XSS protection
- Performance: Caching strategies, query optimization, code splitting
Frontend Excellence
- Component Design: Reusable, composable components with clear interfaces
- State Management: Predictable state updates, proper data flow
- Accessibility: WCAG 2.1 compliance, keyboard navigation, screen reader support
- Testing: Unit tests, integration tests, E2E tests with good coverage
- Performance: Optimized bundle size, lazy loading, image optimization
Backend Excellence
- API Design: Consistent patterns, proper versioning, deprecation strategies
- Database: Proper indexing, query optimization, connection pooling
- Security: Authentication, authorization, input validation, rate limiting
- Monitoring: Logging, metrics, tracing, alerting
- Scalability: Horizontal scaling, load balancing, caching strategies
DevOps Integration
- CI/CD: Automated testing, building, and deployment pipelines
- Infrastructure as Code: Terraform or CloudFormation for infrastructure
- Containerization: Docker for consistent environments
- Monitoring: Prometheus, Grafana for metrics and alerting
- Documentation: API docs, runbooks, architecture diagrams
Collaboration and Workflow
- Code Review: Meaningful reviews, constructive feedback
- Documentation: Clear README, contributing guide, code comments
- Version Control: Meaningful commits, branch strategy, PR workflow
- Testing Strategy: Test pyramid with appropriate coverage
- Communication: Clear requirements, regular syncs, async updates
Additional Resources
- Detailed Technical Reference: See REFERENCE.md
- Code Examples & Patterns: See EXAMPLES.md