Generate modern React components, custom hooks, and Tailwind styles with TypeScript; implement patterns like composition and state management with Zustand; design app architectures; write Vitest and Jest tests; review code for best practices, performance, accessibility, and quality using specialized agents.
```tsx
Design React application architecture and component hierarchies. Plans state management, folder structure, and performance optimization strategies.
```tsx
Review React components for best practices, performance, accessibility, and testing coverage. Invoke after implementing features, modifying existing code, or creating new React components.
```tsx
Write modern React components with TypeScript, hooks, and best practices. Creates functional components, custom hooks, and follows composition patterns.
Expert guidance on modern React patterns including hooks, composition, state management, and concurrent features. Use when implementing React components or refactoring existing code.
Testing patterns for Vitest, React Testing Library, and Jest. Routes to component, hook, and integration test examples.
Generate responsive, performant Tailwind CSS styles for React components. Use when styling components, building design systems, or implementing responsive layouts.
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
The Majestic marketplace where we share our workflows.
New here? Check out the Marketplace Tutorial for an interactive walkthrough.
Coding is no longer the bottleneck. Planning, review, and learning loops matter more than syntax. Each feature makes the next one easier to build.
| Step | What Happens | Key Tools |
|---|---|---|
| Plan | Agents research codebase + best practices, produce detailed implementation plans | /majestic:plan, architect agent |
| Work | Agents write code, tests, and iterate using real app feedback | /majestic:build-task, coder skills |
| Assess | Multi-angle review: security, performance, simplicity, conventions | /majestic:code-review, quality-gate |
| Reflect | Analyze session patterns, capture lessons so future agents improve | /majestic-tools:insight:reflect, /majestic:add-lesson |
See the Workflow Guide for detailed documentation.
Run the installer:
curl -fsSL https://raw.githubusercontent.com/majesticlabs-dev/majestic-marketplace/master/install.sh | bash
This gives you options to:
Run claude and add the marketplace:
/plugin marketplace add https://github.com/majesticlabs-dev/majestic-marketplace.git
Then install a plugin:
/plugin install {plugin-name}
Export Majestic plugins to OpenCode or Codex with schema-aware conversion:
./scripts/install-codex.sh
# Install all plugins
./scripts/install-codex.sh --all
# Install all plugins to OpenCode
./scripts/install-opencode.sh --all
# Install specific plugins
./scripts/install-codex.sh engineer rails tools
# Example (explicit): convert engineer, rails, and tools to OpenCode
# Output target: ~/.config/opencode
./scripts/install-opencode.sh engineer rails tools
# Install one plugin (short or prefixed)
./scripts/install-codex.sh engineer
./scripts/install-codex.sh majestic-tools
Both commands are now local to this repository and only require Ruby (scripts/convert-plugin.rb).
This runs a converter pipeline (not a plain file copy), so incompatible Claude metadata is translated for target formats.
disable-model-invocation frontmatter is preserved as part of source metadata parsing, but it does not exclude a command from conversion for OpenCode/Codex output.
Output locations:
~/.codex/skills/ and ~/.codex/prompts/~/.config/opencode (opencode.json, agents/, skills/, plugins/)Limitations: Codex still does not support some Claude Code features (Task, hooks, some MCP integrations), so behavior is reduced there.
| Plugin | Description |
|---|---|
| majestic-engineer | Language-agnostic engineering workflows (17 agents, 8 commands, 12 skills) |
| majestic-rails | Ruby on Rails development tools (23 agents, 5 commands, 9 skills) |
| majestic-react | Modern React development with TypeScript (3 agents, 1 command, 4 skills) |
| majestic-python | Python development tools (2 agents) |
| majestic-devops | Infrastructure-as-Code and DevOps workflows (1 agent, 8 skills) |
| majestic-llm | External LLM integration - Codex, Gemini (5 agents, 1 command) |
| majestic-marketing | Marketing and SEO tools (14 agents, 2 commands, 24 skills) |
| majestic-sales | Sales acceleration tools (1 command, 6 skills) |
| majestic-company | Business operations and CEO tools (2 agents, 21 skills) |
| majestic-experts | Expert panel discussion system (2 agents, 1 command) |
| majestic-tools | Claude Code customization tools (10 commands, 3 skills) |
npx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-reactClaude Code customization tools. Includes 0 agents, 13 commands, and 12 skills.
Infrastructure as Code and DevOps tools. Includes 0 agents and 15 skills for OpenTofu, Ansible, Hetzner, DigitalOcean, Cloudflare, 1Password CLI, cloud-init, and devops-plan.
AI-powered creative tools for image generation, editing, and visual content creation. Includes 0 agents, 1 command, and 1 skill for Gemini image generation.
Expert panel discussion system with 22 curated personas. Includes 2 agents, 1 command, and 22 expert definitions.
Language-agnostic engineering workflows. Includes 20 specialized agents, 33 commands, 43 skills, and 5 toolbox presets. Now includes relay orchestration for fresh-context task execution with quality gates and compound learning.
AI-powered generative UI with Thesys - create React components from natural language.
Modern React and UI development expertise. Master React 19, Next.js 15, component architecture, state management, performance optimization, and design systems.
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>
Premium design patterns, UX research skills, and user journey mapping for modern web applications.
React, React Flow, React Router, shadcn/ui, Tailwind v4, Vitest, and Zustand code review. Pairs with beagle-core for full workflow.
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS. Includes component scaffolding, bundle analysis, performance optimization, and accessibility best practices.