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: <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>

Type
plugin
GitHub stars
866
Repository
ccplugins/awesome-claude-code-plugins
Category

Install

  1. 1Quick install (skills CLI)

    npx skills add ccplugins/awesome-claude-code-plugins --skill web-dev --agent claude-code

    Installs web-dev into the current project's .claude/skills/ directory. Requires Node.js and the skills CLI.

  2. 2Manual install

    Create ~/.claude/plugins/<name>/ and copy the SKILL.md file from the repository into it. The directory name must match the skill name.

⚠️ Exact file layout and requirements vary by repository — always check the repo README first.

View on GitHub ↗

Prefer the full source? The repository README is the authoritative install reference.