By para-fr
Accelerate full-stack web development with 22 AI-powered commands and 5 specialized agents that analyze codebases, implement features across React/Next.js/Vue stacks, benchmark performance and accessibility, automate testing/cleanup/migrations, generate docs/designs, manage git workflows, and finalize deployments.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin para-fr-wd-frameworkMulti-dimensional code and system analysis with intelligent routing
Performance testing and optimization with visual reports and actionable insights.
Structured idea generation and solution exploration with systematic analysis.
Project builder with framework detection and optimization
Clean up code, remove dead code, and optimize project structure
Design system architecture, APIs, and component interfaces
Create focused documentation for specific components or features
Provide development estimates for tasks, features, or projects
Provide clear explanations of code, concepts, or system behavior
Complete project finalization with quality gates and git workflow automation.
Git operations with intelligent commit messages and branch management
Feature and code implementation with intelligent persona activation
Apply systematic improvements to code quality, performance, and maintainability
Generate comprehensive project documentation and knowledge base
Load and analyze project context, configurations, and dependencies
Code migration between frameworks and technologies with systematic planning and validation.
Comprehensive code and system review with actionable insights and quality metrics.
Break complex tasks into coordinated subtasks with efficient execution
Execute complex tasks with intelligent workflow management and cross-session persistence
Execute tests, generate test reports, and maintain test coverage
Diagnose and resolve issues in code, builds, or system behavior
Generate structured implementation workflows from PRDs and feature requirements with expert guidance
Specialized agent for server-side development, API design, database optimization, and secure backend systems.
Specialized agent for technical documentation creation, API documentation, knowledge base management, and multi-language documentation.
Specialized agent for UI/UX development with modern frameworks, accessibility compliance, and design system integration.
Specialized agent for security analysis, vulnerability assessment, threat modeling, and compliance validation.
Specialized agent for comprehensive testing strategy, test automation, quality assurance, and performance benchmarking.
Official marketplace for Web Development plugins - React, Next.js, Vue, TypeScript and more.
/plugin marketplace add Para-FR/wd-framework
Intelligent web development framework with 80% token optimization.
| Metric | Value |
|---|---|
| Commands | 22 |
| Agents | 5 |
| Personas | 11 |
| MCP Servers | 4 |
| Core Tokens | ~6K (was ~30K) |
wd-framework/
├── plugins/wd/
│ ├── .claude/ # 6 optimized core files (~24KB)
│ ├── agents/ # 5 specialized agents
│ ├── commands/ # 22 slash commands
│ └── docs/ # Documentation
└── README.md
React, Next.js, Vue, Angular, TypeScript, Tailwind CSS, Node.js, Python
MIT © Para CC-France
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.
Build and deploy web apps and agents
Editorial "Web Wizard" bundle for Claude Code from Antigravity Awesome Skills.
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>
Modern React and UI development expertise. Master React 19, Next.js 15, component architecture, state management, performance optimization, and design systems.
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.