Frontend Dev Project Management | UI Work
Manage frontend complexity: components, design handoff, responsive breakpoints, and animations. GitScrum organizes UI work and design collaboration.
8 min read
Frontend development involves UI complexity, rapid iteration, and close design collaboration. GitScrum helps teams organize frontend work and deliver polished user experiences.
Frontend Task Structure
Component vs Feature Work
FRONTEND WORK TYPES:
┌─────────────────────────────────────────────────────────────┐
│ │
│ COMPONENT WORK: │
│ Building reusable UI pieces │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ UI-100: Create Button Component ││
│ │ ││
│ │ Variants: ││
│ │ ☐ Primary, Secondary, Ghost ││
│ │ ☐ Small, Medium, Large sizes ││
│ │ ☐ Loading state ││
│ │ ☐ Disabled state ││
│ │ ☐ Icon support (left, right) ││
│ │ ││
│ │ Requirements: ││
│ │ ☐ Accessible (keyboard, screen reader) ││
│ │ ☐ Storybook stories ││
│ │ ☐ Unit tests ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ FEATURE WORK: │
│ Implementing user-facing functionality │
│ │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-200: User Profile Settings Page ││
│ │ ││
│ │ Uses components: ││
│ │ Button, Input, Avatar, Card ││
│ │ ││
│ │ Implementation: ││
│ │ ☐ Profile form layout ││
│ │ ☐ Avatar upload with preview ││
│ │ ☐ Form validation ││
│ │ ☐ API integration ││
│ │ ☐ Success/error states ││
│ │ ☐ Responsive layout ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEPENDENCIES: │
│ Components should be built BEFORE features that need them │
│ │
│ Sprint 1: UI-100 (Button), UI-101 (Input), UI-102 (Card) │
│ Sprint 2: FE-200 (Settings Page using those components) │
└─────────────────────────────────────────────────────────────┘
Design Integration
DESIGN HANDOFF IN TASKS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ TASK WITH DESIGN SPECS: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ FE-300: Dashboard Header ││
│ │ ││
│ │ DESIGN: ││
│ │ Figma: [link to design] ││
│ │ Prototype: [link to interactive prototype] ││
│ │ ││
│ │ BREAKPOINTS: ││
│ │ Desktop: 1200px+ (full navigation) ││
│ │ Tablet: 768-1199px (collapsed nav) ││
│ │ Mobile: < 768px (hamburger menu) ││
│ │ ││
│ │ STATES: ││
│ │ ☐ Default ││
│ │ ☐ User menu open ││
│ │ ☐ Search expanded ││
│ │ ☐ Notification badge (has notifications) ││
│ │ ☐ Scrolled (sticky with shadow) ││
│ │ ││
│ │ ANIMATIONS: ││
│ │ Menu open: 200ms ease-out ││
│ │ Search expand: 150ms ease-in-out ││
│ │ ││
│ │ ACCESSIBILITY: ││
│ │ ☐ Skip to main content link ││
│ │ ☐ Keyboard navigation ││
│ │ ☐ ARIA landmarks ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ GOOD HANDOFF INCLUDES: │
│ ✅ All visual states │
│ ✅ Responsive behavior │
│ ✅ Interaction details │
│ ✅ Spacing and sizing tokens │
│ ✅ Animation timing │
│ ✅ Error states │
│ ✅ Empty states │
│ ✅ Loading states │
└─────────────────────────────────────────────────────────────┘
Estimation Factors
Frontend Complexity
FRONTEND ESTIMATION FACTORS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ BASE IMPLEMENTATION: │
│ Basic layout and structure │
│ │
│ MULTIPLIERS: │
│ │
│ RESPONSIVE: │
│ Desktop only: 1x │
│ Desktop + Mobile: 1.5x │
│ Desktop + Tablet + Mobile: 2x │
│ │
│ BROWSER SUPPORT: │
│ Modern only: 1x │
│ + Safari quirks: 1.2x │
│ + Legacy browsers: 1.5x │
│ │
│ INTERACTIONS: │
│ Static: 1x │
│ Basic hover/click: 1.2x │
│ Complex animations: 1.5-2x │
│ Drag and drop: 2x │
│ │
│ STATE MANAGEMENT: │
│ Simple local state: 1x │
│ Complex forms: 1.5x │
│ Real-time updates: 2x │
│ Offline support: 2.5x │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ OFTEN UNDERESTIMATED: │
│ │
│ • Edge cases (empty states, errors, loading) │
│ • Polish (animations, micro-interactions) │
│ • Cross-browser testing │
│ • Accessibility │
│ • Performance optimization │
│ • Documentation (Storybook, etc.) │
│ │
│ RULE OF THUMB: │
│ If it "looks simple," add 30% for hidden complexity │
└─────────────────────────────────────────────────────────────┘
Storybook and Documentation
Component Documentation
COMPONENT DOCUMENTATION WORKFLOW:
┌─────────────────────────────────────────────────────────────┐
│ │
│ STORYBOOK REQUIREMENT: │
│ │
│ Every component needs: │
│ ☐ Default story (primary use case) │
│ ☐ All variants documented │
│ ☐ Interactive controls │
│ ☐ Usage documentation │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ TASK INCLUDES STORYBOOK: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ UI-150: Create Modal Component ││
│ │ ││
│ │ Implementation: ││
│ │ ☐ Modal component ││
│ │ ☐ Overlay with click-outside close ││
│ │ ☐ Focus trap ││
│ │ ☐ Escape key closes ││
│ │ ││
│ │ Storybook: ││
│ │ ☐ Basic modal story ││
│ │ ☐ Sizes: small, medium, large ││
│ │ ☐ With form content ││
│ │ ☐ With scrolling content ││
│ │ ☐ Controlled open/close ││
│ │ ││
│ │ Tests: ││
│ │ ☐ Opens/closes correctly ││
│ │ ☐ Focus management ││
│ │ ☐ Escape key behavior ││
│ │ ☐ Accessibility (role, aria) ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ DEFINITION OF DONE FOR COMPONENTS: │
│ │
│ ☐ Component works as designed │
│ ☐ All variants implemented │
│ ☐ Storybook stories complete │
│ ☐ Accessible │
│ ☐ Unit tested │
│ ☐ Responsive (if applicable) │
│ ☐ Documented │
└─────────────────────────────────────────────────────────────┘
Design System Work
Design System Development
DESIGN SYSTEM ORGANIZATION:
┌─────────────────────────────────────────────────────────────┐
│ │
│ DESIGN SYSTEM COMPONENTS: │
│ │
│ FOUNDATIONS (Priority 1): │
│ • Colors / Themes │
│ • Typography │
│ • Spacing │
│ • Icons │
│ │
│ ATOMS (Priority 2): │
│ • Button │
│ • Input │
│ • Checkbox │
│ • Radio │
│ • Badge │
│ │
│ MOLECULES (Priority 3): │
│ • Form Field (label + input + error) │
│ • Search Bar │
│ • Dropdown │
│ • Toast │
│ │
│ ORGANISMS (Priority 4): │
│ • Modal │
│ • Card │
│ • Table │
│ • Navigation │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ GITSCRUM EPIC: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ DS-001: Design System Phase 1 ││
│ │ ││
│ │ Goal: Core components for new features ││
│ │ ││
│ │ Foundations: ││
│ │ ☐ DS-010: Theme tokens ││
│ │ ☐ DS-011: Typography scale ││
│ │ ☐ DS-012: Icon library ││
│ │ ││
│ │ Atoms: ││
│ │ ☐ DS-020: Button ││
│ │ ☐ DS-021: Input ││
│ │ ☐ DS-022: Checkbox / Radio ││
│ │ ││
│ │ Molecules: ││
│ │ ☐ DS-030: Form Field ││
│ │ ☐ DS-031: Dropdown ││
│ └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘
Performance Work
Frontend Performance
FRONTEND PERFORMANCE TASKS:
┌─────────────────────────────────────────────────────────────┐
│ │
│ PERFORMANCE BUDGET: │
│ │
│ Bundle size: < 200KB gzipped │
│ First contentful paint: < 1.5s │
│ Time to interactive: < 3s │
│ Largest contentful paint: < 2.5s │
│ │
│ ─────────────────────────────────────────────────────────── │
│ │
│ PERFORMANCE TASK: │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ PERF-100: Reduce Initial Bundle Size ││
│ │ ││
│ │ Current: 450KB gzipped ││
│ │ Target: < 200KB gzipped ││
│ │ ││
│ │ Analysis: ││
│ │ ☐ Run bundle analyzer ││
│ │ ☐ Identify large dependencies ││
│ │ ☐ Find code-splitting opportunities ││
│ │ ││
│ │ Optimizations: ││
│ │ ☐ Lazy load routes ││
│ │ ☐ Replace moment with date-fns ││
│ │ ☐ Tree-shake lodash ││
│ │ ☐ Dynamic import for charts ││
│ │ ││
│ │ Validation: ││
│ │ ☐ Measure before/after ││
│ │ ☐ Test on slow connection ││
│ │ ☐ Add bundle size CI check ││
│ └─────────────────────────────────────────────────────────┘│
│ │
│ PERFORMANCE IN DEFINITION OF DONE: │
│ │
│ ☐ No bundle size regression │
│ ☐ Lighthouse score maintained │
│ ☐ Images optimized │
│ ☐ No layout shifts │
└─────────────────────────────────────────────────────────────┘