Web Dev
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: Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are…
- Type
- Plugin
- Repository
- ccplugins/awesome-claude-code-plugins
- GitHub stars
- 954
- License
- Apache-2.0
- Repo last updated
- Aug 12, 2026
- Source file
- plugins/web-dev/.claude-plugin/plugin.json
- Version
- 1.0.0
- Author
- safayavatsal
What Web Dev is
Web Dev is a plugin published in the ccplugins/awesome-claude-code-plugins repository on GitHub, which has about 954 stars. The repository describes itself as: “Awesome Claude Code plugins — a curated list of slash commands, subagents, MCP servers, and hooks for Claude Code”
A plugin is a package that bundles skills, slash commands, subagents, hooks, and MCP connectors so they install together. Plugins are plain files with a manifest at .claude-plugin/plugin.json, and they work in both Claude Code and Claude Cowork.
Installing Web Dev adds everything it ships in one step. Connectors inside a plugin still need to be connected separately, and hooks and subagents only run in Cowork and Claude Code, not in regular chat.
How to install Web Dev
Claude Code
- Add the repository as a plugin marketplace: claude plugin marketplace add ccplugins/awesome-claude-code-plugins
- Install the plugin: claude plugin install web-dev@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json.
- Restart the session if the new skills or commands don't appear straight away.
Claude Cowork
- Open Customize → Plugins and choose Add marketplace.
- Enter ccplugins/awesome-claude-code-plugins (the owner/repo shorthand works for GitHub).
- Find Web Dev in the list, click Install, then connect any connectors it needs from its Connectors tab.
New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.
Inside the source file
We couldn't retrieve the source file for this entry. Browse the repository on GitHub to find it and read the README before installing.
Before you install
- Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
- Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
- Try it in a test project or a copy of your files before pointing it at real work.
- Pin the version you tested, and review changes before updating.
- Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.
FAQ
What is Web Dev?
Web Dev is a plugin for Claude Code and Claude Cowork from the ccplugins/awesome-claude-code-plugins repository on GitHub. 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: Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are…
How do I install Web Dev in Claude Code?
Add the repository as a plugin marketplace: claude plugin marketplace add ccplugins/awesome-claude-code-plugins Install the plugin: claude plugin install web-dev@<marketplace-name>, using the marketplace name from the repository's .claude-plugin/marketplace.json. Restart the session if the new skills or commands don't appear straight away.
Can I use Web Dev in Claude Cowork?
Open Customize → Plugins and choose Add marketplace. Enter ccplugins/awesome-claude-code-plugins (the owner/repo shorthand works for GitHub). Find Web Dev in the list, click Install, then connect any connectors it needs from its Connectors tab.
Is Web Dev safe to install?
It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.
Similar resources
- Ultrathink Use /ultrathink to launch a Coordinator Agent that directs four specialist sub-agents—Architect, Research, Coder, and Tester—to analyze, design, implement, and validate your coding task. The process breaks the task into clear steps, gathers insights, and synthesizes a cohesive solution with actionable outputs. Relevant files can be referenced ad-hoc using @ filename syntax. Plugin · ccplugins/awesome-claude-code-plugins
- Trend Researcher Use this agent when you need to identify market opportunities, analyze trending topics, research viral content, or understand emerging user behaviors. This agent specializes in finding product opportunities from TikTok trends, App Store patterns, and social media virality. Examples:\n\n \nContext: Looking for new app ideas based on current trends\nuser: "What's trending on TikTok that we could… Plugin · ccplugins/awesome-claude-code-plugins
- Unit Test Generator Expert Flutter/Dart unit test specialist that systematically improves test coverage using automated workflows with strict validation, git management, and Aurigo corporate standards. Use for comprehensive test suite creation and coverage improvement. Plugin · ccplugins/awesome-claude-code-plugins
- Update Claudemd Automatically update CLAUDE.md file based on recent code changes Plugin · ccplugins/awesome-claude-code-plugins
- Whimsy Injector PROACTIVELY use this agent after any UI/UX changes to ensure delightful, playful elements are incorporated. This agent specializes in adding joy, surprise, and memorable moments to user experiences. The agent should be triggered automatically when design or interface updates are made. Examples:\n\n \nContext: After implementing new features or UI components\nuser: "I've added the new onboarding… Plugin · ccplugins/awesome-claude-code-plugins
- Visual Storyteller Use this agent when creating visual narratives, designing infographics, building presentations, or communicating complex ideas through imagery. This agent specializes in transforming data and concepts into compelling visual stories that engage users and stakeholders. Examples:\n\n \nContext: Creating app onboarding illustrations Plugin · ccplugins/awesome-claude-code-plugins
- Workflow Optimizer Use this agent for optimizing human-agent collaboration workflows and analyzing workflow efficiency. This agent specializes in identifying bottlenecks, streamlining processes, and ensuring smooth handoffs between human creativity and AI assistance. Examples:\n\n \nContext: Improving development workflow efficiency Plugin · ccplugins/awesome-claude-code-plugins
- Vision Specialist Expert in vision models, OCR systems, barcode detection, and visual AI. Stays current with latest models (GPT-4V, Claude Vision, Mistral-OCR, etc.), optimization techniques, and specialized libraries. Use PROACTIVELY for image processing, document analysis, or visual AI tasks. Plugin · ccplugins/awesome-claude-code-plugins