Plugin

proagent-frontend

Name: proagent-frontend
Author: diegouis

Provectus Frontend Engineering plugin for Claude Code. Provides comprehensive capabilities for building modern web interfaces including React/Vue/Angular/Next.js/React Native component development, design systems, accessibility auditing, responsive design, performance optimization, theming, i18n/localization, and mobile/desktop app patterns (SwiftUI).

npx claudepluginhub diegouis/provectus-marketplace --plugin proagent-frontend

Component Overview

Commands

Agents

Skills

Hooks

MCP Servers

Component Details

Commands (3)

proagent-frontend Hub

/proagent-frontend-hub

Overview of all frontend engineering capabilities: component scaffolding, UI building, design systems, accessibility auditing, performance optimization, and code review.

proagent-frontend Review

/proagent-frontend-review

Review frontend code quality: component architecture, WCAG accessibility compliance, performance optimization, and design system consistency.

proagent-frontend Run

/proagent-frontend-run

Execute frontend engineering operations: scaffold-component, build-ui, design-system, accessibility-audit, optimize-performance.

Agents (1)

frontend-specialist

/frontend-specialist

Senior frontend engineer specializing in React/Vue/Angular/Next.js/React Native component development, design system architecture, WCAG accessibility compliance, responsive design, performance optimization, i18n/localization, mobile/desktop native apps (SwiftUI), TypeScript, Tailwind CSS, and Vite build systems. Use PROACTIVELY when user needs UI component design, accessibility audits, performance optimization, design system work, i18n setup, Next.js App Router patterns, or mobile app development.

Skills (1)

frontend-assistant

/frontend-assistant

Building Modern Web Interfaces. Comprehensive frontend engineering guidance: React/Vue/Angular/Next.js/React Native component development, design systems and theming, WCAG accessibility, responsive design, performance optimization, i18n/localization, mobile/desktop native apps (SwiftUI), and frontend tooling (Vite, TypeScript, Tailwind CSS). Use when the user needs to: (1) Build or scaffold UI components (React, Vue, Angular, Next.js App Router, React Native), (2) Create or extend a design system with tokens and theming, (3) Audit or fix accessibility (WCAG 2.1 AA), (4) Implement responsive layouts, (5) Optimize frontend performance (Core Web Vitals, bundle size, virtualized lists), (6) Configure frontend tooling (Vite, TypeScript, ESLint, Tailwind), (7) Add internationalization/localization (i18n) with locale management, (8) Build mobile apps with React Native or native iOS/macOS apps with SwiftUI. Activate when user mentions: frontend, UI, component, React, Vue, Angular, Tailwind, CSS, design system, theme, dark mode, accessibility, WCAG, a11y, responsive, mobile-first, performance, bundle size, Core Web Vitals, LCP, CLS, Vite, TypeScript, JSX, TSX, Storybook, design tokens, component library, Next.js, App Router, React Native, i18n, localization, internationalization, locale, SwiftUI, iOS, macOS, mobile app, virtualized list, image optimization.

Hooks (1)

Review workflow modifications before installing

Event Hooks

Bash

File writes

3 hooks across 2 events

MCP Servers (8)

Connects to external services

playwright

External

Playwright MCP server for browser automation, visual regression testing, and cross-browser UI validation. Provides tools to navigate pages, interact with DOM elements, capture screenshots, test responsive layouts, and validate rendered component output across Chrome, Firefox, and Safari.

github

External

1 secret

GitHub MCP server for repository operations, pull request management, and CI/CD integration. Used to create component library PRs with visual diffs, manage design system versioning, track frontend issues, and enforce quality gates on UI changes.

gitlab

External

1 secret

GitLab MCP server for merge request management, pipeline monitoring, and design system release automation. Used to enforce accessibility and performance gates on merge requests and publish component library packages.

README

Provectus Marketplace

Practice-specific plugins for Claude Code and Claude Desktop, built from 901 assets across 17 repositories.

Plugins

Plugin	Practice	Description
proagent-agentic-engineering	Agentic Engineering	AI agent systems, MCP servers, multi-agent orchestration, autonomous coding loops, context engineering
proagent-sdlc	SDLC	Architecture, code review, debugging, ADRs, C4 diagrams, release management, PITER framework
proagent-platform	Platform	Service catalogs, golden paths, scaffolding, document generation, plugin lifecycle, DX
proagent-devops	DevOps	CI/CD, Docker/Kubernetes, Terraform/IaC, secrets management, GitOps, cloud cost optimization
proagent-qa	QA	Test automation, TDD, LLM judge evaluation, Playwright, mock/replay backends, coverage
proagent-backend	Backend	APIs, databases, microservices, CQRS/event sourcing, MCP server development, auth
proagent-frontend	Frontend	React/Vue/Angular, design systems, canvas design, WCAG 2.1 AA, theme factory
proagent-delivery	Delivery	Sprint planning, standup notes, PRD creation, internal comms, agentic KPIs, ROM estimation
proagent-security	Security	Vulnerability scanning, agent sandboxing, risk classification, threat modeling, OWASP, audit workflows
proagent-data	Data	ETL/ELT, dbt, Airflow, business analytics, bioinformatics pipelines, SQL optimization
proagent-ml-ai	ML/AI	Model training, knowledge graphs, meta-prompting, LLM judge, RAG, AWS Bedrock
proagent-hr	HR	Hiring, CV validation, GDPR compliance, resume generation, growth analysis, onboarding
proagent-sales	Sales	Proposals, sales automation, content marketing, business cases, market opportunity analysis
proagent-documentation	Documentation	Repo analysis, doc generation (README/architecture/API/onboarding/runbook), Confluence publishing and sync
proagent-finance	Finance	Budgeting, cloud FinOps, financial projections, Stripe/PCI, budget variance analysis
proagent-router	Router	Single `/proagent` command that detects the domain and dispatches to the appropriate practice specialist
proagent-aws-ai	AWS AI	Amazon Bedrock, AgentCore, AWS AI services, CDK for AI, Knowledge Bases, AWS architecture
proagent-connector-setup	Setup	Guided MCP credential configuration — Slack token extraction, Google Drive OAuth, connector verification
proagent-prorag	ProRAG	RAG framework scaffolding with @step/@pipeline decorators, LLM abstractions, OpenSearch retrieval, CLI tooling
proagent-mobile	Mobile	Expo and React Native: UI, EAS builds, App Store/Play Store deployment, CI/CD, Tailwind, SDK upgrades
proagent-agentic-stack	Agentic Stack	Scaffold composite MCP servers (FastMCP), Strands agents with LTM/STM memory (AgentCore), hybrid pgvector search, OTEL/Phoenix tracing

Installation

Claude Code (CLI)

Install a single plugin from a local checkout:

claude plugin install ./plugins/proagent-devops

Or add plugins to your project's .claude/settings.json so they load automatically for the whole team:

{
  "plugins": {
    "proagent-devops": {
      "source": "file:./provectus-marketplace/plugins/proagent-devops",
      "version": "0.3.0",
      "enabled": true
    },
    "proagent-backend": {
      "source": "file:./provectus-marketplace/plugins/proagent-backend",
      "version": "0.3.0",
      "enabled": true
    }
  }
}

Claude Desktop

Each plugin's .mcp.json contains the MCP server configurations. Copy the servers you need into your Claude Desktop config:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

Important notes for Claude Desktop:

View full README on GitHub

Similar Plugins

frontend-developer

268

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>

Stats

Version0.3.2

Parent Repo Stars2

Parent Repo Forks1

MaintenanceExcellent

AddedMar 9, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Available In

provectus-marketplace2

Safety Signals

Caution

Executes bash commands

Hook triggers when Bash tool is used

Modifies files

Hook triggers on file write and edit operations

External network access

Connects to servers outside your machine

Help us improve

Share bugs, ideas, or general feedback.

Back to Plugins

Provectus Marketplace

Practice-specific plugins for Claude Code and Claude Desktop, built from 901 assets across 17 repositories.

Plugins

Plugin	Practice	Description
proagent-agentic-engineering	Agentic Engineering	AI agent systems, MCP servers, multi-agent orchestration, autonomous coding loops, context engineering
proagent-sdlc	SDLC	Architecture, code review, debugging, ADRs, C4 diagrams, release management, PITER framework
proagent-platform	Platform	Service catalogs, golden paths, scaffolding, document generation, plugin lifecycle, DX
proagent-devops	DevOps	CI/CD, Docker/Kubernetes, Terraform/IaC, secrets management, GitOps, cloud cost optimization
proagent-qa	QA	Test automation, TDD, LLM judge evaluation, Playwright, mock/replay backends, coverage
proagent-backend	Backend	APIs, databases, microservices, CQRS/event sourcing, MCP server development, auth
proagent-frontend	Frontend	React/Vue/Angular, design systems, canvas design, WCAG 2.1 AA, theme factory
proagent-delivery	Delivery	Sprint planning, standup notes, PRD creation, internal comms, agentic KPIs, ROM estimation
proagent-security	Security	Vulnerability scanning, agent sandboxing, risk classification, threat modeling, OWASP, audit workflows
proagent-data	Data	ETL/ELT, dbt, Airflow, business analytics, bioinformatics pipelines, SQL optimization
proagent-ml-ai	ML/AI	Model training, knowledge graphs, meta-prompting, LLM judge, RAG, AWS Bedrock
proagent-hr	HR	Hiring, CV validation, GDPR compliance, resume generation, growth analysis, onboarding
proagent-sales	Sales	Proposals, sales automation, content marketing, business cases, market opportunity analysis
proagent-documentation	Documentation	Repo analysis, doc generation (README/architecture/API/onboarding/runbook), Confluence publishing and sync
proagent-finance	Finance	Budgeting, cloud FinOps, financial projections, Stripe/PCI, budget variance analysis
proagent-router	Router	Single `/proagent` command that detects the domain and dispatches to the appropriate practice specialist
proagent-aws-ai	AWS AI	Amazon Bedrock, AgentCore, AWS AI services, CDK for AI, Knowledge Bases, AWS architecture
proagent-connector-setup	Setup	Guided MCP credential configuration — Slack token extraction, Google Drive OAuth, connector verification
proagent-prorag	ProRAG	RAG framework scaffolding with @step/@pipeline decorators, LLM abstractions, OpenSearch retrieval, CLI tooling
proagent-mobile	Mobile	Expo and React Native: UI, EAS builds, App Store/Play Store deployment, CI/CD, Tailwind, SDK upgrades
proagent-agentic-stack	Agentic Stack	Scaffold composite MCP servers (FastMCP), Strands agents with LTM/STM memory (AgentCore), hybrid pgvector search, OTEL/Phoenix tracing

Installation

Claude Code (CLI)

Install a single plugin from a local checkout:

claude plugin install ./plugins/proagent-devops

Or add plugins to your project's .claude/settings.json so they load automatically for the whole team:

{
  "plugins": {
    "proagent-devops": {
      "source": "file:./provectus-marketplace/plugins/proagent-devops",
      "version": "0.3.0",
      "enabled": true
    },
    "proagent-backend": {
      "source": "file:./provectus-marketplace/plugins/proagent-backend",
      "version": "0.3.0",
      "enabled": true
    }
  }
}

Claude Desktop

Each plugin's .mcp.json contains the MCP server configurations. Copy the servers you need into your Claude Desktop config:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

Important notes for Claude Desktop:

proagent-frontend

Component Overview

Component Details

Commands (3)

Agents (1)

Skills (1)

Hooks (1)

MCP Servers (8)

README

Provectus Marketplace

Plugins

Installation

Claude Code (CLI)

Claude Desktop

Similar Plugins

frontend-developer

Help us improve

Help us improve

proagent-frontend

Component Overview

Component Details

Commands (3)

Agents (1)

Skills (1)

Hooks (1)

MCP Servers (8)

README

Provectus Marketplace

Plugins

Installation

Claude Code (CLI)

Claude Desktop

Similar Plugins

frontend-developer

Help us improve

ui-ux-engineer

ui-design

frontend-mobile-development

frontend-design

sdlc-team-fullstack

Help us improve