npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

webdev-flow

v1.1.1

Published

AI-powered feature development automation with local and global installation for Claude Code and OpenCode

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

codelariocodelario

Keywords

claudeopencodeautomationdevelopmentaigithublinearfeature-development

Readme

webdev-flow-plugins

AI-powered feature development automation for Claude Code and OpenCode. Automate your entire development workflow from issue to merged PR with integrated review gates and quality checks.

Quick Start

Option 1: NPX (Recommended)

npx webdev-flow
# Interactive menu guides you through installation

Option 2: Direct Script

# Local installation (in current project)
bash scripts/install.sh claude-code-generic . --local
bash scripts/install.sh opencode-generic --local

# Global installation (all projects)
bash scripts/install.sh claude-code-generic . --global
bash scripts/install.sh opencode-generic --global

Verify Installation

# Claude Code
cd /path/to/project
claude --model sonnet
# Inside Claude Code: "What agents do I have?"

# OpenCode
opencode
# Try: /webdev-flow-feature #1

Features

🎯 Automated Feature Development

  • Issue Reader - Parse Linear/GitHub issues into actionable specs
  • Planner - Generate structured development plans
  • Implementer - Write production-ready code with best practices
  • Tester - Generate comprehensive unit and integration tests
  • Code Reviewer - Automated code quality checks (6 gates)
  • PR Author - Create professional PR descriptions with links

⚙️ 6 Quality Gates

  1. Architecture Check - Validates design patterns and system design
  2. Code Review - Style, performance, and maintainability
  3. Testing - Coverage and test quality verification
  4. Documentation - Comments, docstrings, and README updates
  5. Performance - Benchmarks and optimization checks
  6. Security - Vulnerability scanning and secure practices

🔄 CI/CD Integration

  • Pre-commit hooks (linting + testing)
  • Automated branch naming (follows conventions)
  • Git worktree management
  • Automatic PR generation

Installation Guide

What is webdev-flow?

webdev-flow is a distribution package of AI-powered agents that integrate with your development workflow. Instead of manually managing each step of feature development, webdev-flow orchestrates the entire process:

  1. Parse the issue/ticket
  2. Plan the implementation
  3. Implement the feature
  4. Test thoroughly
  5. Review against quality gates
  6. Create PR with full context

Local vs Global Installation

Local Installation (Recommended)

Install in a specific project directory:

# Install in current directory
bash scripts/install.sh claude-code-generic . --local
bash scripts/install.sh opencode-generic --local

Files created:

  • ./.claude/ - Claude Code configuration
  • ./.opencode/ - OpenCode configuration
  • ./opencode.json - OpenCode settings

Benefits:

  • ✅ Project-specific configuration
  • ✅ Version control friendly
  • ✅ Different configs per project
  • ✅ No global pollution

Global Installation

Install for all projects in your system:

# Install in home directory
bash scripts/install.sh claude-code-generic . --global
bash scripts/install.sh opencode-generic --global

Files created:

  • ~/.claude/ - Claude Code configuration (all projects)
  • ~/.config/opencode/commands/ - OpenCode commands (all projects)

Benefits:

  • ✅ One-time setup
  • ✅ Available in all projects
  • ✅ Simpler for consistent workflows

Installation Methods

Method 1: NPX (Easiest)

npx webdev-flow

Interactive prompt guides you through:

  1. Choose tool (Claude Code or OpenCode)
  2. Choose variant (Generic or Canio-specific)
  3. Choose installation type (Local or Global)

Best for: First-time users, trying both tools

Method 2: Shell Script (Flexible)

# Clone the repo first
git clone https://github.com/gato/webdev-flow-plugins.git
cd webdev-flow-plugins

# Install any variant
bash scripts/install.sh claude-code-generic /path/to/project --local
bash scripts/install.sh opencode-generic --local
bash scripts/install.sh claude-code-canio /path/to/canio --local
bash scripts/install.sh opencode-canio --global

Best for: CI/CD automation, specific workflows

Method 3: Manual Copy

# Clone the repo
git clone https://github.com/gato/webdev-flow-plugins.git

# Copy Claude Code agents
cp -r claude-code-generic/generic/.claude /path/to/project/

# Copy OpenCode commands
cp -r opencode-generic/generic/.opencode /path/to/project/
cp opencode-generic/generic/.opencode/opencode.json /path/to/project/

Best for: Advanced users, custom setups

Claude Code vs OpenCode Comparison

| Feature | Claude Code | OpenCode | |---------|-------------|----------| | Interaction | Chat-based (claude CLI) | Command-line commands (opencode CLI) | | Installation | Local: ./.claude/ | Local: ./.opencode/ | | | Global: ~/.claude/ | Global: ~/.config/opencode/commands/ | | Agents | 8 specialized agents | Pre-configured commands | | Best For | Full workflow orchestration | Specific feature development | | Configuration | .claude/ directory | opencode.json | | Commands | /feature, /worktree-setup | /webdev-flow-feature, /webdev-flow-worktree | | Learning Curve | Moderate | Easy | | Customization | High (agents, skills, commands) | Medium (commands, configuration) |

Detailed Guides

For Claude Code Users

See CLAUDE.md for:

  • How to use webdev-flow in Claude Code
  • The 6 quality gates explained
  • Customizing agents and skills
  • Troubleshooting and tips

For OpenCode Users

See AGENTS.md for:

  • How to use webdev-flow in OpenCode
  • Available commands and variants
  • Configuring opencode.json
  • Integration with your workflow

Repository Structure

webdev-flow-plugins/
├── scripts/
│   ├── cli.js              # Interactive NPX installer
│   └── install.sh          # Direct shell installer
│
├── claude-code-generic/
│   └── generic/.claude/
│       ├── agents/         # 8 agents for feature development
│       ├── skills/         # Coding standards, templates, hooks
│       ├── commands/       # Slash commands (/feature, /worktree-setup)
│       └── hooks/          # Pre-commit hooks (lint + test)
│
├── claude-code-canio/
│   └── canio/.claude/      # Canio-specific agents and skills
│
├── opencode-generic/
│   └── generic/.opencode/
│       ├── commands/       # OpenCode commands
│       └── opencode.json   # Sample configuration
│
├── opencode-canio/
│   └── canio/.opencode/    # Canio-specific commands
│
├── README.md               # This file
├── CLAUDE.md               # Claude Code guide
├── AGENTS.md               # OpenCode guide
└── package.json            # NPM package metadata

The 8 Agents (Claude Code)

webdev-flow includes 8 specialized AI agents:

  1. Issue Reader - Extracts requirements from Linear/GitHub issues
  2. Codebase Explorer - Analyzes your project structure
  3. Planner - Creates detailed implementation plans
  4. Implementer - Writes the actual code
  5. Tester - Generates comprehensive tests
  6. Unit Test Writer - Specialized test generation
  7. File Stager - Manages git staging
  8. Commit/PR Author - Creates commits and pull requests

Each agent is specialized for one task and integrates seamlessly with the others.

Variants

Generic Variant (Recommended)

Works with any project structure:

bash scripts/install.sh claude-code-generic . --local
bash scripts/install.sh opencode-generic --local

Canio Variant

Optimized for the canio monorepo (web + internal + schema):

bash scripts/install.sh claude-code-canio /path/to/canio --local
bash scripts/install.sh opencode-canio --local

Includes:

  • Monorepo-aware code generation
  • Schema validation
  • Web + internal splits
  • Canio naming conventions

Troubleshooting

"Command not found: npx webdev-flow"

Solution: Update npm or install globally

npm install -g webdev-flow
# Then:
webdev-flow

"Directory not found: .claude" or ".opencode"

Solution: Make sure you installed locally in the correct directory

pwd  # Verify current directory
bash scripts/install.sh claude-code-generic . --local
ls -la .claude/  # Verify installation

Claude Code agents not showing

Solution: Reload Claude Code

cd /path/to/project
claude --model sonnet
# Inside Claude: "What agents do I have?"

OpenCode commands not working

Solution: Verify opencode.json exists and is valid JSON

cat opencode.json
# Should show valid JSON configuration

"cp: source directory not found"

Solution: Make sure you're in the webdev-flow-plugins directory

cd webdev-flow-plugins
bash scripts/install.sh claude-code-generic . --local

Permission denied when running hooks

Solution: Make hooks executable (should happen automatically)

chmod +x .claude/hooks/scripts/*.sh

Configuration Files

opencode.json (Local Installation)

Created automatically during local OpenCode installation. Configures:

  • $schema: Reference to OpenCode config schema
  • tools: Enabled tools (bash, edit, write, read)
  • model: AI model to use (optional)
  • permission: Granular permission controls (optional)

Edit this file to customize OpenCode behavior per project. See OpenCode config documentation for all available options.

.claude/ Directory (Local Installation)

Contains:

  • agents/ - Agent definitions
  • skills/ - Shared utilities and conventions
  • commands/ - Slash commands
  • hooks/ - Git pre-commit hooks

Edit these files to customize Claude Code agents.

Usage Examples

Feature Development Workflow (Claude Code)

cd /path/to/project
claude --model sonnet

# Inside Claude Code:
/feature #123
# or
Implement feature #123 with the webdev-flow agents

Feature Development Workflow (OpenCode)

opencode
/webdev-flow-feature #123

With Git Worktree Setup

# Claude Code
/worktree-setup feature/TICKET-123-description

# OpenCode
/webdev-flow-worktree feature/TICKET-123-description

Publishing & Updates

For Package Maintainers

Update version in package.json:

npm version minor  # or patch, major
git push
npm publish

For Users Checking Updates

npm outdated -g webdev-flow
npm install -g webdev-flow@latest

Language Support

  • Scripts (cli.js, install.sh): Spanish prompts + English comments
  • Documentation (README.md, CLAUDE.md, AGENTS.md): English
  • Agents (Claude Code): Spanish
  • Commands (OpenCode): Spanish

Contributing

To contribute improvements:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/your-improvement
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

See individual variant directories for contribution guidelines.

License

MIT License - See LICENSE file for details

Support

Documentation

Issues

Report bugs at: https://github.com/gato/webdev-flow-plugins/issues

Repository

https://github.com/gato/webdev-flow-plugins

Changelog

v1.1.0 (Latest)

  • ✅ Added local installation support for OpenCode
  • ✅ Added global installation support for both tools
  • ✅ Automatic opencode.json generation for local installs
  • ✅ Improved installation prompts (ES/EN)
  • ✅ Enhanced documentation

v1.0.2

  • Initial release
  • Claude Code generic and canio variants
  • OpenCode generic and canio variants
  • Global installation only

Made with ❤️ for AI-powered development automation