Claude Code — Web Development Setup

A ready-to-use collection of skills, rules, hooks, and settings for Claude Code, optimised for PHP / Symfony / Shopware / JavaScript / TypeScript development on Linux.

Why This Exists

AI models are trained on the internet. The internet contains plenty of low-quality, insecure, and outdated code. To get consistently better output from AI coding assistants, you need to guide them with tools and instructions.

I quickly discovered that a single CLAUDE.md file is not the right approach for implementing all my rules and techniques. The ecosystem already has many excellent skills, plugins, and hooks — but they are scattered across dozens of repositories, marketplaces, and blog posts. Finding, evaluating, and combining them takes hours.

This is a curated, ready-to-use collection with a one-command installer.

Top Features

• Frontend Design Skills — Animation engineering (timing, easing, springs), UI audit & redesign workflow (anti-AI-slop patterns), typography, colour systems, micro-interactions
• Shopware 5 & 6 Skills — Plugin architecture, DAL, events, Admin components, Storefront JS, DDEV setup, dustin/shopware-utils
• Symfony Skills — Full framework coverage + project scaffolding blueprint (Vite, DDEV, i18n, CAPTCHA, deploy)
• PHP Skills — Modern PHP 8.0–8.4, strict typing, security (OWASP Top 10), PSR standards
• ECMAScript Skills — TypeScript type system, Vue 2/3, Svelte 5, async patterns, decorators
• Accessibility — WCAG 2.1 AA checklist, keyboard navigation, ARIA, form accessibility
• 18 Coding Rules — PSR-12 baseline, security, type safety, clean code, performance, testing, git workflow
• 4 Safety Hooks — Format-on-save, static analysis, type checking, destructive command guard

What's Included

Hooks

Skills

MCP Servers

Optional: Jira MCP Server

To enable Claude to read and create Jira issues, add this block to the mcpServers section of your ~/.claude/settings.json:

"jira": {
    "command": "npx",
    "args": ["-y", "mcp-atlassian"],
    "env": {
        "JIRA_URL": "https://your-org.atlassian.net",
        "JIRA_USERNAME": "[email protected]",
        "JIRA_API_TOKEN": "your-api-token"
    }
}

Generate an API token at: Atlassian Account → Security → API tokens

System Requirements

Works on Linux (Ubuntu, openSUSE, Fedora, etc.) and macOS. Homebrew is used as the universal package manager across both platforms.

1 — Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the post-install instructions to add Homebrew to your PATH:

macOS (Apple Silicon):

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
source ~/.zprofile

macOS (Intel):

echo 'eval "$(/usr/local/bin/brew shellenv)"' >> ~/.zprofile
source ~/.zprofile

Linux (Ubuntu, Debian, Fedora, openSUSE, etc.):

echo 'eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)"' >> ~/.bashrc
source ~/.bashrc

2 — Install Claude Code

brew install claude-code

3 — Install System Dependencies

Required

Ubuntu / Debian:

sudo apt-get install -y jq nodejs npm

openSUSE:

sudo zypper install -y jq nodejs20 npm20

Fedora:

sudo dnf install -y jq nodejs npm

macOS:

brew install jq node

Note: Node.js 20+ is required for MCP servers (npx) and JS/TS projects. If your distro ships an older version, install via NodeSource or nvm.

Optional (per-project, installed inside DDEV containers)

The hook scripts auto-detect formatters and linters from the project's vendor/ and node_modules/ directories. No global installation is needed:

• PHP-CS-Fixer — composer require --dev friendsofphp/php-cs-fixer
• PHPStan — composer require --dev phpstan/phpstan
• Prettier — npm install --save-dev prettier
• TypeScript — npm install --save-dev typescript

4 — Install DDEV (recommended for PHP projects)

Linux:

# Install Docker first if not present
# Ubuntu/Debian:
sudo apt-get install -y docker.io
# openSUSE:
sudo zypper install -y docker
# Fedora:
sudo dnf install -y docker

sudo usermod -aG docker $USER
newgrp docker

macOS:

# Install Docker Desktop from https://www.docker.com/products/docker-desktop/
# Or use Colima as a lightweight alternative:
brew install colima docker
colima start

Then install DDEV (all platforms):

brew install ddev/ddev/ddev

Or follow the official guide: https://ddev.readthedocs.io/en/stable/users/install/ddev-installation/

5 — Install tmux (for Claude Code teammate mode)

Ubuntu / Debian:

sudo apt-get install -y tmux

openSUSE:

sudo zypper install -y tmux

Fedora:

sudo dnf install -y tmux

macOS:

brew install tmux

Installation

git clone https://github.com/alpham8/claude-webdev.git
cd claude-webdev
chmod +x install.sh
./install.sh

The installer copies all configuration into ~/.claude. If ~/.claude/settings.json already exists, it will not be overwritten — merge manually.

Post-Install Configuration

GitHub MCP Server

The GitHub MCP server needs a personal access token:

1. Create a token at: GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
2. Required scopes: Contents (read), Issues (read/write), Pull requests (read/write), Metadata (read)
3. Export the token in your shell profile:

# Linux (bash):
echo 'export GITHUB_TOKEN=ghp_yourtoken' >> ~/.bashrc
source ~/.bashrc

# macOS (zsh):
echo 'export GITHUB_TOKEN=ghp_yourtoken' >> ~/.zprofile
source ~/.zprofile

Jira MCP Server (optional)

See the Optional: Jira MCP Server section under MCP Servers above for setup instructions.

MySQL MCP Server

The MySQL MCP is pre-configured for DDEV's default credentials (user: db, pass: db, host: 127.0.0.1, port: 3306). DDEV maps the database port dynamically — check with ddev describe and adjust MYSQL_PORT in settings.json if needed.

Write operations are disabled by default. To enable, set ALLOW_INSERT_OPERATION, ALLOW_UPDATE_OPERATION, or ALLOW_DELETE_OPERATION to "true" in settings.json.

Claude Code Plugins

The following plugins are pre-configured in settings.json and will be auto-installed by Claude Code on first launch:

• superpowers — skill system and agent tooling
• ask-questions-if-underspecified — clarifying question prompts
• skill-improver — skill quality feedback
• claude-md-management — CLAUDE.md file management
• security-guidance — security best practices
• context7 — live library documentation
• context-mode — context window management
• playwright — Playwright browser automation
• claude-mem — persistent cross-session memory with tree-sitter code exploration

Agent Browser (optional, for AI-driven browser automation)

agent-browser is a native Rust CLI for browser automation via CDP (Chrome DevTools Protocol). It provides accessibility-tree snapshots and compact element references -- useful for testing, scraping, and interacting with web apps from Claude Code.

# Install the CLI globally
npm i -g agent-browser && agent-browser install

# Or install as a Claude Code skill only
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser

After installation, load the documentation matching your installed version:

# Core workflows, patterns, troubleshooting
agent-browser skills get core

# Complete command reference
agent-browser skills get core --full

Key capabilities:

• Three browser modes: headless Chromium, real Chrome with profiles, cloud-hosted remote
• 15+ command categories: navigation, inspection, interactions, data extraction, cookies, JavaScript
• Session management, authentication vault, state persistence, video recording
• No Playwright/Puppeteer dependency (native Rust binary)

Specialised skill modules:

agent-browser skills get electron    # Desktop apps (Electron)
agent-browser skills get slack       # Slack automation
agent-browser skills get dogfood     # QA testing workflows

claude-mem (persistent memory)

claude-mem provides cross-session memory so Claude remembers context between conversations. It runs a lightweight worker service that captures observations during sessions and stores them in a local SQLite database.

Key capabilities:

• Automatic session observation (PostToolUse hook captures what you work on)
• Cross-session memory search (/claude-mem:mem-search)
• Tree-sitter-powered code exploration (/claude-mem:smart-explore) — AST-level structural search without reading full files
• Implementation plan creation and execution (/claude-mem:make-plan, /claude-mem:do)
• Knowledge agent for building topic-specific "brains" from observation history
• Timeline reports showing project development history
• Plugin version bump automation

Installation is handled automatically via settings.json. The plugin's hooks start the worker service on session start and capture observations transparently.

Skills provided:

Updating

To pull the latest configuration from this repo and reinstall:

git pull
./install.sh

Existing settings.json will not be overwritten. Delete ~/.claude/settings.json first if you want a fresh install.