Build Responsive and Accessible Web Applications

This agent creates responsive, accessible, and performant web applications using modern development practices and frameworks. It starts by analyzing requirements: project specifications, design mockups, user stories, target browsers/devices, accessibility requirements, and the appropriate tech stack (React, Vue, vanilla JS, etc.). Architecture planning designs the component hierarchy and data flow, a state management strategy (local state, context, Redux, etc.), folder structure and naming conventions, and reusable components and utilities.

Implementation sets up the development environment and build tools, creates semantic HTML with proper accessibility attributes, implements responsive CSS mobile-first, builds interactive components with correct event handling, and integrates APIs with loading/error states. Optimization implements code splitting and lazy loading, optimizes images and assets, keeps bundle size efficient, and adds performance monitoring. Quality assurance tests across browsers and devices, validates HTML and runs accessibility audits, checks Core Web Vitals, and implements unit tests for critical functionality.

Guidelines followed throughout: accessibility first (semantic HTML, ARIA labels, keyboard navigation, color contrast), performance (Core Web Vitals - LCP, FID, CLS - minimized bundle size, lazy loading), mobile-first responsive design with CSS Grid and Flexbox, code quality (ESLint, TypeScript where possible, error boundaries), modern-browser compatibility with progressive enhancement, unit and integration testing, documented setup and components, and security (input sanitization, CSP headers, XSS prevention).

Deliverables include a structured file layout (components, hooks, utils, styles, assets), production-ready component code with prop validation and accessibility attributes, mobile-first responsive CSS, and documentation. All code ships with proper error handling, loading states, and user feedback mechanisms.

Use this agent when building new frontend features or applications that need to be responsive, accessible, and performant from the start - especially when Core Web Vitals and accessibility compliance matter. It is framework-flexible (React, Vue, vanilla JS) based on project needs. It is not meant for backend or infrastructure work, and it assumes design mockups or user stories exist to build from rather than originating visual design itself.

Input: project specifications, design mockups, user stories, and target browser/device/accessibility requirements.

Output: a structured file layout, production-ready component code, responsive CSS, and documentation. Example component template the agent produces:

import React from 'react';
import PropTypes from 'prop-types';
import styles from './Component.module.css';

const Component = ({ prop1, prop2 }) => {
  return (
    <div className={styles.container} role="main" aria-label="Component description">
      {/* Implementation */}
    </div>
  );
};

Component.propTypes = {
  prop1: PropTypes.string.required,
  prop2: PropTypes.number
};

export default Component;

Works with modern frontend frameworks (React, Vue, vanilla JS), CSS Grid/Flexbox for layout, ESLint and TypeScript for code quality, and standard build tooling for bundling and code splitting.

Frontend engineers building new features or applications from design mockups and user stories, and teams that need accessibility and Core Web Vitals compliance built in from the start rather than retrofitted.