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>

Type
plugin
GitHub stars
866
Repository
ccplugins/awesome-claude-code-plugins
Category

Install

  1. 1Quick install (skills CLI)

    npx skills add ccplugins/awesome-claude-code-plugins --skill frontend-developer--plugin --agent claude-code

    Installs frontend-developer--plugin into the current project's .claude/skills/ directory. Requires Node.js and the skills CLI.

  2. 2Manual install

    Create ~/.claude/plugins/<name>/ and copy the SKILL.md file from the repository into it. The directory name must match the skill name.

⚠️ Exact file layout and requirements vary by repository — always check the repo README first.

View on GitHub ↗

Prefer the full source? The repository README is the authoritative install reference.