# web-dev

> Web/Next.js build configuration and verification. Creates .devflows/build/config.sh for web projects.

- Author: Tomohiko Ikeda
- Repository: tom-e-kid/devflows
- Version: 20260206142952
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/tom-e-kid/devflows
- Web: https://mule.run/skillshub/@@tom-e-kid/devflows~web-dev:20260206142952

---

---
name: web-dev
description: Web/Next.js build configuration and verification. Creates .devflows/build/config.sh for web projects.
---

# web-dev

Configure and verify build settings for Web/Next.js projects.

**Platform**: Web / Next.js / Node.js

## When to Use

- Called by `/devflows:feature-setup` when web project detected (`package.json`)
- Called manually to reconfigure build settings
- After Node.js or package manager updates

## Git Root Resolution

**IMPORTANT: Always resolve git root first to ensure .devflows is created at the repository root (monorepo support).**

```bash
GIT_ROOT=$(git rev-parse --show-toplevel)
```

All `.devflows/` paths below should be prefixed with `$GIT_ROOT/`.

## Behavior

1. Check if `$GIT_ROOT/.devflows/build/config.sh` exists
2. If exists:
   - Read and display current configuration
   - Ask user if they want to reconfigure
3. If not exists (or reconfigure requested):
   - Run environment investigation using helper script
   - Present findings to user for confirmation
   - Generate `$GIT_ROOT/.devflows/build/config.sh`

## Environment Investigation

**IMPORTANT: Use the helper script instead of running individual commands.**

```bash
# Gather all environment info in one command
"${CLAUDE_PLUGIN_ROOT}/skills/web-dev/scripts/web-env-info.sh"
```

This script outputs:
- Package manager (bun/npm/yarn/pnpm)
- Available scripts from package.json
- Node.js version
- Framework detection (Next.js, etc.)

Based on the output, ask user to confirm:
- Which package manager to use
- Build command
- Dev command
- Lint/format commands

## Configuration File Format

Generate `$GIT_ROOT/.devflows/build/config.sh`:

```bash
#!/bin/bash
# Web Build Configuration
# Generated by /devflows:web-dev on <date>

PLATFORM="web"

# Package manager
PACKAGE_MANAGER="bun"  # bun | npm | yarn | pnpm

# Project root (relative to repo root)
PROJECT_ROOT="."  # or "apps/web" for monorepos

# Build commands
BUILD_CMD="bun run build"
DEV_CMD="bun run dev"

# Quality commands
LINT_CMD="bun run lint"
FORMAT_CMD="bun run format"
FORMAT_CHECK_CMD="bun run format:check"
TEST_CMD="bun run test"
TYPECHECK_CMD="bun run typecheck"  # if available

# Warning/error extraction
WARNINGS_FILTER="grep -E '(warning|Warning|WARN)' | sort -u"
ERRORS_FILTER="grep -E '(error|Error|ERR)' | sort -u"
```

## Helper Scripts

All scripts are located in `${CLAUDE_PLUGIN_ROOT}/skills/web-dev/scripts/`.

### web-env-info.sh

Gathers environment information for configuration:

```bash
${CLAUDE_PLUGIN_ROOT}/skills/web-dev/scripts/web-env-info.sh [project_root]
```

### web-build.sh

Runs build and extracts errors/warnings:

```bash
${CLAUDE_PLUGIN_ROOT}/skills/web-dev/scripts/web-build.sh [--save-baseline <path>]
```

### web-verify.sh

Runs lint, format check, and typecheck:

```bash
${CLAUDE_PLUGIN_ROOT}/skills/web-dev/scripts/web-verify.sh [--save-baseline <path>]
```

## Monorepo Support

For monorepos (Turborepo, Nx, etc.), the skill detects:
- `turbo.json` → Turborepo
- Root `package.json` with workspaces

### Turborepo Configuration

For Turborepo projects, **run all commands from the repo root**:

```bash
PROJECT_ROOT="."  # Always repo root for Turborepo

# Turborepo commands (no --filter needed, turbo.json controls)
BUILD_CMD="bun run build"
DEV_CMD="bun run dev"
LINT_CMD="bun run lint"
TEST_CMD="bun run test"

# Format is typically at root level (not through turbo)
FORMAT_CMD="bun run format"
FORMAT_CHECK_CMD="bun run format:check"
```

### Non-Turborepo Monorepo

For workspaces without Turborepo:
```bash
PROJECT_ROOT="apps/web"
BUILD_CMD="bun run --cwd apps/web build"
```

## Notes

- `$GIT_ROOT/.devflows/build/config.sh` is local only (should be in .gitignore)
- Reconfigure when Node.js or package manager is updated
- For Turborepo projects, always run commands from repo root
- Check CLAUDE.md for project-specific command details