Claude Plugin

frontend-developer

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>

Editor's Note

Plugin Overview

This item is backed by a plugin manifest rather than a `SKILL.md` file, so the most useful fields are surfaced here first.

Plugin Name

frontend-developer

Version

1.0.0

Author

Michael Galpert

Homepage

https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/frontend-developer

Manifest Description

Raw Manifest

The structured plugin fields above are derived from the same upstream manifest shown below.

{ "name": "frontend-developer", "description": "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>", "version": "1.0.0", "author": { "name": "Michael Galpert" }, "homepage": "https://github.com/ccplugins/awesome-claude-code-plugins/tree/main/plugins/frontend-developer" }

Related Items

Claude Plugin

python-expert

Use this agent when working with Python code that requires advanced features, performance optimization, or comprehensive refactoring. Examples: <example>Context: User needs to optimize a slow Python function that processes large datasets. user: "This function is taking too long to process our data, can you help optimize it?" assistant: "I'll use the python-expert agent to analyze and optimize your Python code with advanced techniques and performance profiling."</example> <example>Context: User wants to implement async/await patterns in their existing synchronous Python code. user: "I need to convert this synchronous code to use async/await for better performance" assistant: "Let me use the python-expert agent to refactor your code with proper async/await patterns and concurrent programming techniques."</example> <example>Context: User needs help implementing complex Python design patterns. user: "I want to implement a factory pattern with decorators for my API endpoints" assistant: "I'll use the python-expert agent to implement advanced Python patterns with decorators and proper design principles."</example>

Claude Plugin

ai-engineer

Use this agent when implementing AI/ML features, integrating language models, building recommendation systems, or adding intelligent automation to applications. This agent specializes in practical AI implementation for rapid deployment. Examples:\n\n<example>\nContext: Adding AI features to an app\nuser: "We need AI-powered content recommendations"\nassistant: "I'll implement a smart recommendation engine. Let me use the ai-engineer agent to build an ML pipeline that learns from user behavior."\n<commentary>\nRecommendation systems require careful ML implementation and continuous learning capabilities.\n</commentary>\n</example>\n\n<example>\nContext: Integrating language models\nuser: "Add an AI chatbot to help users navigate our app"\nassistant: "I'll integrate a conversational AI assistant. Let me use the ai-engineer agent to implement proper prompt engineering and response handling."\n<commentary>\nLLM integration requires expertise in prompt design, token management, and response streaming.\n</commentary>\n</example>\n\n<example>\nContext: Implementing computer vision features\nuser: "Users should be able to search products by taking a photo"\nassistant: "I'll implement visual search using computer vision. Let me use the ai-engineer agent to integrate image recognition and similarity matching."\n<commentary>\nComputer vision features require efficient processing and accurate model selection.\n</commentary>\n</example>

Claude Plugin

brand-guardian

Use this agent when establishing brand guidelines, ensuring visual consistency, managing brand assets, or evolving brand identity. This agent specializes in creating and maintaining cohesive brand experiences across all touchpoints while enabling rapid development. Examples:\n\n<example>\nContext: Creating brand guidelines for a new app

Claude Plugin

flutter-mobile-app-dev

Use this agent when you need expert assistance with Flutter mobile development tasks, including code analysis, widget creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a Flutter app and faces issues with navigation. user: 'My Navigator.push isn't updating the UI correctly when moving to a new screen' assistant: 'Let me use the flutter-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a Flutter-specific navigation issue, use the flutter-dev agent to provide expert guidance on Navigator problems.</commentary></example> <example>Context: User wants to create a custom widget that aligns with their app's design system. user: 'I need to create a custom button widget that matches our app's design system' assistant: 'I'll use the flutter-dev agent to create a button widget that aligns with your existing codebase structure and design patterns' <commentary>The user needs a Flutter widget that follows existing patterns, so use the flutter-dev agent.</commentary></example>