By dotclaude
Build and optimize modern React 19/Next.js 15 frontends by generating components, state management with Zustand, UI designs via Tailwind/CSS, and performance audits for Core Web Vitals using targeted commands and proactive agents for architecture, styling, and optimization.
npx claudepluginhub dotclaude/marketplace --plugin frontend-excellenceDesign system and component library specialist. Use PROACTIVELY for component architecture.
CSS and styling specialist in Tailwind, CSS-in-JS, responsive design. Use PROACTIVELY for styling challenges.
Frontend performance specialist in Core Web Vitals and optimization. Use PROACTIVELY for performance work.
React 19 and Next.js 15 expert. Use PROACTIVELY for React development and modern patterns.
State management expert in Redux, Zustand, Context, and modern patterns. Use PROACTIVELY for state architecture.
Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing/reviewing/refactoring React code for optimal performance. Covers async patterns, bundle optimization, server/client components, re-render optimization.
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS. Includes component scaffolding, bundle analysis, performance optimization, and accessibility best practices.
React, Next.js, and React Native best practices with web design guidelines.
Premium design patterns, UX research skills, and user journey mapping for modern web applications.
Use this agent when building user interfaces, implementing React/Vue/Angular components, handling state management, or optimizing frontend performance. This agent excels at creating responsive, accessible, and performant web applications. Examples:\n\n<example>\nContext: Building a new user interface\nuser: "Create a dashboard for displaying user analytics"\nassistant: "I'll build an analytics dashboard with interactive charts. Let me use the frontend-developer agent to create a responsive, data-rich interface."\n<commentary>\nComplex UI components require frontend expertise for proper implementation and performance.\n</commentary>\n</example>\n\n<example>\nContext: Fixing UI/UX issues\nuser: "The mobile navigation is broken on small screens"\nassistant: "I'll fix the responsive navigation issues. Let me use the frontend-developer agent to ensure it works perfectly across all device sizes."\n<commentary>\nResponsive design issues require deep understanding of CSS and mobile-first development.\n</commentary>\n</example>\n\n<example>\nContext: Optimizing frontend performance\nuser: "Our app feels sluggish when loading large datasets"\nassistant: "Performance optimization is crucial for user experience. I'll use the frontend-developer agent to implement virtualization and optimize rendering."\n<commentary>\nFrontend performance requires expertise in React rendering, memoization, and data handling.\n</commentary>\n</example>