engineering-frontend-developer

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: engineering-frontend-developer
description: "Build modern web applications with React, Vue, Angular, or Svelte, focusing on performance and accessibility. Use when you need component library development, TypeScript UI implementation, responsive layouts with CSS Grid and Flexbox, Core Web Vitals optimization, service worker offline support, code splitting, ARIA accessibility, Storybook integration, or frontend API client architecture."
metadata:
  version: "1.0.0"
---

# Frontend Development Guide

## Overview
This guide covers modern frontend development with React, Vue, Angular, and Svelte, including component architecture, performance optimization, accessibility, and testing. Use it when building web applications, component libraries, or optimizing frontend performance.

## Framework and Layout Decision Rules

- When choosing a framework, match it to team expertise and project constraints; default to React for broad ecosystem needs, Vue for progressive enhancement into existing pages, Svelte for bundle-size-critical apps, and Angular when the project requires an opinionated full-framework with built-in DI and routing.
- When implementing a design, use CSS Grid for two-dimensional page layouts and Flexbox for one-dimensional component alignment; avoid absolute positioning for layout purposes because it breaks responsive reflow.
- When building a component library, expose each component as a named export with TypeScript props interface, a Storybook story, and a unit test -- components without all three are not merged.
- When integrating with backend APIs, centralize fetch logic in a typed API client layer (e.g., a single `api.ts` module using `fetch` or `axios` with interceptors) so auth headers, error transforms, and retries are handled in one place.

## Performance Decision Rules

- When a page's Largest Contentful Paint exceeds 2.5 seconds in Lighthouse CI, treat it as a blocking bug -- profile with Chrome DevTools Performance tab and fix the largest bottleneck before merging.
- When adding animations, use CSS `transform` and `opacity` properties (compositor-only) rather than `width`, `height`, or `top`/`left` to avoid triggering layout recalculations that cause jank.
- When the app needs offline support, register a service worker with a cache-first strategy for static assets and a network-first strategy for API requests, falling back to cached responses when offline.
- When initial JS bundle exceeds the budget (e.g., 200 KB gzipped), add route-based code splitting with `React.lazy()` or dynamic `import()` and defer non-critical scripts below the fold.
- When supporting older browsers, define a browserslist config and let the build tool (Vite, Webpack) auto-polyfill; do not manually add polyfills or feature checks unless browserslist coverage is insufficient.
- When adding images, use `<picture>` with WebP/AVIF sources and explicit `width`/`height` attributes to prevent layout shift; for images below the fold, add `loading="lazy"`.
- When a route is not needed on initial page load, wrap it in `React.lazy()` (or framework equivalent) with a `<Suspense>` fallback so the main bundle excludes that route's code.
- When serving static assets, configure the CDN or server to set `Cache-Control: public, max-age=31536000, immutable` on content-hashed filenames and `no-cache` on `index.html`.

## Accessibility Decision Rules

- When building any interactive component, add ARIA attributes, keyboard handlers (`Enter`, `Space`, `Escape` as appropriate), and test with axe-core before marking the task complete.
- When building forms, associate every `<input>` with a `<label>` via `htmlFor`/`id`, provide visible error messages linked with `aria-describedby`, and ensure the form is fully operable with keyboard-only navigation.
- When using color to convey meaning (e.g., error states, status badges), always include a secondary indicator (icon, text, pattern) so color-blind users can distinguish states.
- When adding a modal or dropd