file-concat

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

Implement web accessibility (a11y) patterns including ARIA attributes, keyboard navigation, focus management, and screen reader support. Use for any UI component or interactive element.

Integrate browser APIs for file handling, clipboard operations, drag and drop, and Web Workers. Use when implementing file upload, copy/paste, drag-drop interactions, or offloading heavy computations.

Write browser-based tests using Playwright or similar tools for E2E testing, visual regression, and cross-browser compatibility. Use when adding automated UI tests or validating user flows.

Implement client-side storage patterns using localStorage, sessionStorage, or IndexedDB. Use for persisting user preferences, caching data, handling storage quota, and migrating stored data schemas.

Implement React error boundaries and error handling patterns for graceful degradation. Use when adding crash recovery, error logging, or user-friendly error states.

Optimize React application performance with lazy loading, code splitting, memoization, and virtualization. Use when addressing slow renders, large bundles, or memory issues.

Configure Progressive Web App features including service workers, offline support, web app manifest, and install prompts. Use when making a web app installable or work offline.

Implement responsive layouts with mobile-first CSS, breakpoint strategies, and adaptive components. Use for any UI that needs to work across devices from mobile to desktop.

Implement client-side security measures including Content Security Policy, input sanitization, XSS prevention, and secure data handling. Use when handling user input, displaying dynamic content, or storing sensitive data.

Implement versioned state schemas with backward compatibility and data migration patterns. Use when persisted state needs to evolve across app versions while preserving user data.