agent-skills-frontend-ui-engineering

Use semantic HTML elements like button instead of div for interactions, add ARIA labels to icon-only controls, manage focus when dialogs open, and ensure every interactive element works with keyboard navigation. Test by tabbing through the page and running axe-core checks.

Use the project's actual color palette and design tokens instead of default purple gradients, apply consistent spacing scale values rather than arbitrary pixels, and build content-first layouts instead of stock card grids. Avoid excessive rounding and shadow-heavy designs.

Choose the simplest option that fits: useState for local UI state, lifted state for 2-3 siblings, Context for read-heavy values like theme or auth, URL search params for shareable filters, React Query or SWR for server data, and Zustand or Redux only for complex app-wide state.

Yes, the guidance includes Tailwind-specific patterns such as mobile-first responsive classes like grid-cols-1 sm:grid-cols-2 lg:grid-cols-3. It recommends testing at 320px, 768px, 1024px, and 1440px breakpoints and using semantic token classes over raw values.

Prop drilling deeper than three levels makes components hard to maintain and refactor. When intermediate components only pass props through without using them, introduce Context or restructure the component tree to keep data flow explicit.

Split components that exceed roughly 200 lines or handle multiple responsibilities. Separate data fetching containers from presentational components, extract complex state into custom hooks, and keep each component focused on a single task.