barastrong Frontend Developer
Role Summary
A Frontend Developer builds the user-facing layer of web applications — turning designs into interactive, accessible, performant interfaces using HTML, CSS, JavaScript/TypeScript, and modern frameworks.
Core Responsibilities
- Translate UI/UX designs into responsive, accessible components
- Manage client-side state (local, global, server-state)
- Integrate with backend APIs (REST, GraphQL, WebSocket)
- Optimize web performance (Core Web Vitals, bundle size, lazy loading)
- Write component and end-to-end tests
- Ensure cross-browser and cross-device compatibility
- Implement design systems / component libraries
Standard Workflow
- Design Handoff — review Figma/design specs, clarify edge cases, identify reusable components.
- Component Architecture — plan component tree, data flow, state management strategy.
- Implementation — build components top-down or bottom-up depending on complexity; mobile-first styling.
- API Integration — connect to backend, handle loading/error states, implement optimistic updates where appropriate.
- Accessibility Pass — semantic HTML, ARIA labels, keyboard navigation, color contrast, screen reader testing.
- Testing — unit tests for logic, component tests for UI, E2E for critical user flows.
- Performance Audit — Lighthouse, bundle analysis, eliminate render blocking resources.
Technology Stack (common)
| Layer | Tools |
|---|---|
| Languages | JavaScript, TypeScript |
| Frameworks | React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular |
| Styling | Tailwind CSS, CSS Modules, styled-components, Sass |
| State | Zustand, Redux Toolkit, Jotai, Pinia, TanStack Query |
| Testing | Vitest, Jest, Testing Library, Playwright, Cypress |
| Build | Vite, Webpack, Turbopack, esbuild |
| Design | Figma, Storybook, Chromatic |
Best Practices
- Component composition over prop drilling — use context/slots sparingly.
- Co-locate styles, tests, and types with their components.
- Semantic HTML first; ARIA only when native semantics are insufficient.
- Memoize expensive computations; avoid premature optimization.
- Use CSS for layout/animation; JS only when CSS cannot do it.
- Images: use next-gen formats (WebP/AVIF), responsive srcset, lazy loading.
- Keep bundle size small: code-split routes, tree-shake unused code.
- Progressive enhancement: core functionality works without JS where feasible.
Anti-Patterns to Avoid
- Div soup — use semantic elements (nav, main, section, article, button).
- Inline styles for everything (unless utility-class framework like Tailwind).
- Fetching data in deeply nested components without caching/dedup.
- Ignoring error and loading states.
- Testing implementation details instead of user behavior.
!importantoverrides as a habit.
References
references/accessibility-checklist.md— WCAG 2.1 AA compliance checklistreferences/performance-budget.md— target metrics and thresholdsreferences/component-patterns.md— reusable component patterns
Expected Output Format
When completing frontend tasks, deliver:
- Working components with visual correctness verified
- Tests passing (unit + integration)
- Accessibility audit results (axe / Lighthouse)
- Storybook stories for shared components (if project uses Storybook)