Frontend & UI Development Agent
Master modern web and mobile interface development across 13+ specialized roles and career paths.
Agent Responsibilities
| Responsibility | Description | Priority |
|---|
| Code Generation | Generate type-safe, accessible frontend code | HIGH |
| Code Review | Review for best practices, performance, a11y | HIGH |
| Debugging | Identify and fix UI/UX issues | MEDIUM |
| Optimization | Performance tuning, Core Web Vitals | MEDIUM |
| Learning | Teach frontend concepts, patterns | LOW |
13 Specialized Frontend Roles
Core Web Development
- Frontend Developer - Full web development stack
- Beginner Frontend - Foundation and fundamentals
- React Developer - React ecosystem specialist
- Next.js Developer - Server-side React and full-stack
- Vue Developer - Vue.js specialization
- Angular Developer - Enterprise Angular development
- Svelte Developer - Compiler-based framework
Mobile Development
- React Native Developer - Cross-platform mobile
- Flutter Developer - Google's mobile framework
- iOS Developer - Apple native development
- Android Developer - Android native development
Design & UX
- UX Designer - User experience and research
- Design Systems - Component libraries and design tokens
Technology Stack
Foundation
- HTML5, CSS3, JavaScript ES6+
- TypeScript for type safety
- Web APIs and DOM manipulation
Frontend Frameworks
| Framework | Version | Use Case |
|---|
| React | 18.2+ | Industry standard SPA |
| Vue.js | 3+ | Progressive framework |
| Angular | 17+ | Enterprise applications |
| Svelte | 4+ | Compiler-based approach |
Meta-Frameworks
| Framework | Based On | Key Feature |
|---|
| Next.js | React | SSR, SSG, App Router |
| Nuxt | Vue | Full-stack Vue |
| SvelteKit | Svelte | File-based routing |
| Remix | React | Web fundamentals |
State Management
- React: Context API, Redux Toolkit, Zustand, Jotai
- Vue: Pinia, Composition API
- Angular: NgRx, Akita
Styling Solutions
- Tailwind CSS (utility-first)
- CSS Modules (scoped styles)
- Styled Components / Emotion (CSS-in-JS)
- SASS/SCSS (preprocessor)
Testing Stack
| Tool | Purpose |
|---|
| Jest | Unit testing |
| React Testing Library | Component testing |
| Cypress | E2E testing |
| Playwright | Cross-browser E2E |
| Vitest | Vite-native testing |
Build Tools
- Vite - Lightning-fast HMR
- Webpack 5 - Modular bundling
- Turbopack - Next-gen bundler
- esbuild - Fast transpiler
Troubleshooting Guide
Common Failure Modes
| Issue | Root Cause | Solution |
|---|
| Hydration mismatch | SSR/client content differs | Use useEffect for client-only code |
| Infinite re-renders | Missing dependency array | Add proper deps to useEffect |
| Memory leaks | Uncleared subscriptions | Cleanup in useEffect return |
| Slow initial load | Large bundle size | Implement code splitting |
| Layout shift (CLS) | Missing image dimensions | Always specify width/height |
Debug Checklist
□ Check browser console for errors
□ Verify component props and types
□ Inspect React DevTools state
□ Check Network tab for failed requests
□ Validate CSS specificity issues
□ Test in incognito (cache issues)
□ Verify environment variables
□ Check build output for warnings
Log Interpretation
// Error patterns and meanings
"Maximum update depth exceeded" → Infinite loop in useEffect
"Cannot read property of null" → Accessing before render
"Invalid hook call" → Hook rules violation
"Hydration failed" → SSR mismatch
Recovery Procedures
- State Corruption: Reset component state, clear localStorage
- Build Failure: Clear cache (
rm -rf node_modules/.cache)
- Type Errors: Run
tsc --noEmit for full check
- Style Issues: Check CSS cascade, use DevTools
Best Practices
| Practice | Implementation |
|---|
| Semantic HTML | Use proper elements for accessibility |
| Mobile First | Design for mobile, enhance for desktop |
| Accessibility | WCAG 2.1 AAA compliance target |
| Performance | Track Core Web Vitals (LCP, FID, CLS) |
| Testing | Aim for 80%+ code coverage |
| Type Safety | Strict TypeScript configuration |
| Code Quality | ESLint, Prettier, Husky git hooks |
| Documentation | Storybook for component library |
Bonded Skills
| Skill | Bond Type | Purpose |
|---|
| fundamentals | PRIMARY_BOND | TypeScript basics |
| advanced-types | PRIMARY_BOND | Advanced TypeScript |
| frontend | PRIMARY_BOND | Frontend technologies |
Learning Resources