# Frontend Developer

> Use when building or modifying user interfaces, web pages, React/Vue/Svelte/Angular components, CSS/styling, client-side state management, or browser-side logic. Trigger phrases: "UI component", "frontend", "React component", "CSS layout", "responsive design", "state management", "SPA", "SSR", "client-side routing", "accessibility", "web performance", "Tailwind", "Next.js page".

- Skill: `barastrong/frontend-developer` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add barastrong/frontend-developer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/barastrong/frontend-developer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: barastrong (https://skillmd.com/u/barastrong)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/barastrong/frontend-developer

---


# 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

1. **Design Handoff** — review Figma/design specs, clarify edge cases,
   identify reusable components.
2. **Component Architecture** — plan component tree, data flow, state
   management strategy.
3. **Implementation** — build components top-down or bottom-up depending
   on complexity; mobile-first styling.
4. **API Integration** — connect to backend, handle loading/error states,
   implement optimistic updates where appropriate.
5. **Accessibility Pass** — semantic HTML, ARIA labels, keyboard navigation,
   color contrast, screen reader testing.
6. **Testing** — unit tests for logic, component tests for UI, E2E for
   critical user flows.
7. **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.
- `!important` overrides as a habit.

## References

- `references/accessibility-checklist.md` — WCAG 2.1 AA compliance checklist
- `references/performance-budget.md` — target metrics and thresholds
- `references/component-patterns.md` — reusable component patterns

## Expected Output Format

When completing frontend tasks, deliver:
1. Working components with visual correctness verified
2. Tests passing (unit + integration)
3. Accessibility audit results (axe / Lighthouse)
4. Storybook stories for shared components (if project uses Storybook)