Search everything...

Stats

Actions

Available In

frontend-mobile-development

Name: frontend-mobile-development
Author: wshobson

By wshobson

Build and scaffold production-ready React, Next.js, and React Native applications with modern architecture patterns including server components, state management, design systems, and cross-platform mobile features.

npx claudepluginhub wshobson/agents --plugin frontend-mobile-development

Popularity

Stars

Top 1%

37,196

Med: 0·Avg: 362

Installs

Top 1%

Med: 0·Avg: 1

What's Inside

Slash Commands1

React/React Native Component Scaffolding

/component-scaffold

You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete component implementations with TypeScript, tests, styles, and documentation following modern best practices.

Agents2

frontend-mobile-development-frontend-developer

/frontend-developer

Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.

frontend-mobile-development-mobile-developer

/mobile-developer

Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.

Skills4

nextjs-app-router-patterns

/nextjs-app-router-patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

react-native-architecture

/react-native-architecture

Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.

react-state-management

/react-state-management

Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.

tailwind-design-system

/tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Stats

Version1.2.3

LanguagePython

Stars37,196

Forks4,003

Copy clicks77

MaintenanceGood

LicenseMIT

Last CommitJun 25, 2026

AddedFeb 2, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).

Available In

claude-code-workflows37,186 claude-code-workflows20 claude-code-workflows2 claude-code-workflows1 claude-code-workflows

Safety Signals

Caution

Uses power tools

Uses Bash, Write, or Edit tools

README

Agentic Plugin Marketplace

Production-ready agentic workflow building blocks: 88 plugins, 194 agents, 158 skills, 106 commands — built for Claude Code and consumed natively by OpenAI Codex CLI, Cursor, OpenCode, Gemini CLI, and GitHub Copilot from a single Markdown source.

[!NOTE] One source-of-truth (plugins/), five harnesses. Each harness gets idiomatic, harness-native artifacts — not lowest-common-denominator translations. See docs/harnesses.md for the capability matrix.

Quick start

Pick your harness:

Claude Code

/plugin marketplace add wshobson/agents
/plugin install python-development          # or any of 88 plugins

→ Full Claude Code setup, troubleshooting, and plugin catalog

Codex CLI · Cursor · OpenCode · Gemini CLI · Copilot

Codex and Cursor install natively from the committed registries (which point at the source plugins/):

npx codex-marketplace add wshobson/agents        # Codex; then install individual plugins
# Cursor: add the marketplace, then `/plugin install <name>` (reads .cursor-plugin/ + source)

Gemini and OpenCode install via clone + generate (the transformed trees are gitignored):

gh repo clone wshobson/agents ~/agents && cd ~/agents
make generate HARNESS=gemini && gemini extensions install .   # Gemini
make install-opencode                                          # OpenCode (runs generate + symlinks)

Setup details and per-harness gotchas: docs/harnesses.md. Gemini-specific setup: GEMINI.md (also auto-loaded by Gemini CLI).

What's inside

	Count	What it is
Plugins	88	Granular, single-purpose installable units (85 local + 3 external via git-subdir)
Agents	194	Domain experts (architecture, languages, infra, security, data, ML, docs, business, SEO)
Skills	158	Modular knowledge packages with progressive disclosure (load when activated)
Commands	106	Slash commands: scaffolding, security scans, test gen, infrastructure setup
Orchestrators	16	Multi-agent coordination workflows (full-stack, security, ML, incident response)

Browse the catalog: docs/plugins.md · docs/agents.md · docs/agent-skills.md

How it works

Each plugin is isolated and composable: agents, commands, and skills are auto-discovered from directory structure. Installing a plugin loads only its components into context — not the whole marketplace.

plugins/python-development/
├── .claude-plugin/plugin.json
├── agents/             # 3 Python agents (python-pro, django-pro, fastapi-pro)
├── commands/           # 1 scaffolding command
└── skills/             # 16 specialized skills (async, testing, packaging, …)

Tiered model strategy:

Tier	Model	Use
0	Fable 5	Longest-horizon autonomous work — large migrations, multi-hour runs (opt-in, premium cost)
1	Opus	Architecture, security, code review, production-critical
2	inherit	User-chosen — backend, frontend, AI/ML, specialized
3	Sonnet	Docs, testing, debugging, API references
4	Haiku	Fast operational tasks, SEO, deployment, content

→ Model configuration details

Multi-harness support

This marketplace ships to five agentic harnesses from one Markdown source. Each adapter emits harness-native artifacts (not lowest-common-denominator translations):

Harness	Generates	Notes
Claude Code	(source-of-truth)	Native `marketplace.json` + `plugins/`
Codex CLI	`.agents/plugins/marketplace.json` + `plugins/*/.codex-plugin/plugin.json` (committed); `.codex/skills/`, `.codex/agents/` (gitignored)	8 KB skill cap respected; commands → skills
Cursor	`.cursor-plugin/`, `.cursor/rules/`	Thin marketplace + curated rules; reuses `.claude/`
OpenCode	`.opencode/agents/`, `.opencode/commands/`, `.opencode/skills/`	`permission:` block from `tools:` allowlist; OpenCode-safe skill names
Gemini CLI	`skills/`, `agents/`, `commands/` (TOML)	Native skills + subagents (April 2026 spec)
Copilot	`.copilot/agents/`, `.copilot/skills/`, `.copilot/commands/`	Markdown agent profiles + SKILL.md skills + commands-as-skills; model maps to native Claude models

View full README on GitHub

Similar Plugins

frontend-mobile-development

15·

Frontend and mobile development with React, Next.js, React Native, and Tailwind

3mo

v1.0.0

EricGrill

crossplatform-mobile-dev

53·1·

Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>

3mo

v1.0.0

devsforge

react-native-dev

1.7k·1·

React Native mobile development with platform-specific optimizations

5mo

v1.0.0

rohitg00

web-dev

682·

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>

5mo

v1.0.0

ananddtyagi

frontend-excellence

33·16·

Modern React and UI development expertise. Master React 19, Next.js 15, component architecture, state management, performance optimization, and design systems.

5mo

v1.0.0

dotclaude

agents-development-architecture

2.9k·14·

Expert agents for software architecture, backend development, and system design

6mo

v1.0.0

davepoon

frontend-mobile-development

Popularity

What's Inside

Confidence

README

Agentic Plugin Marketplace

Quick start

Claude Code

Codex CLI · Cursor · OpenCode · Gemini CLI · Copilot

What's inside

How it works

Multi-harness support

Similar Plugins

frontend-mobile-development

crossplatform-mobile-dev

react-native-dev

web-dev

frontend-excellence

agents-development-architecture

More by wshobson

tdd-workflows

shell-scripting

llm-application-dev

javascript-typescript

python-development

Agentic Plugin Marketplace

Quick start

Claude Code

Codex CLI · Cursor · OpenCode · Gemini CLI · Copilot

What's inside

How it works

Multi-harness support

Popularity

Health & Quality

More by wshobson

tdd-workflows

shell-scripting

llm-application-dev

javascript-typescript

python-development

Similar Plugins

frontend-mobile-development

crossplatform-mobile-dev

react-native-dev

web-dev

frontend-excellence

agents-development-architecture