wordpress-dev-skills

内容来源：README.md（说明文档） · 原始地址 · 查看安装指南

原始内容

# WordPress Development Skills for Claude Code

A comprehensive WordPress development and automation toolkit for Claude Code. Set up complete WordPress sites with a single command, using Docker or Playground environments, with white-labeling (FREE plugins only), SEO, and visual QA.

## Quick Start

```bash
# Set up a new WordPress site
/wp-setup

# Audit an existing site
/wp-audit

# Pre-launch checklist
/wp-launch
```

## Skills Included

| Skill | Description |
|-------|-------------|
| **wp-orchestrator** | Master orchestrator - coordinates all skills, slash commands |
| **wp-docker** | Docker Compose WordPress environment with WP-CLI |
| **wp-playground** | WordPress Playground blueprints for instant testing |
| **white-label** | FREE white-labeling with ASE + Branda + Admin Menu Editor |
| **wordpress-dev** | Development best practices, coding standards, CPT creation |
| **wordpress-admin** | Page/post management, WP-CLI, REST API operations |
| **seo-optimizer** | Yoast/Rank Math audit - focus keywords, meta descriptions |
| **visual-qa** | Screenshot automation with GSAP animation handling |
| **brand-guide** | Brand documentation - colors, fonts, imagery, voice/tone |
| **gsap-animations** | GSAP best practices, accessibility, responsive animations |
| **wp-performance** | Core Web Vitals, image/video optimization, caching |

## Slash Commands

| Command | Description |
|---------|-------------|
| `/wp-setup` | Set up a new WordPress site with Docker, install plugins, configure white-labeling |
| `/wp-audit` | Comprehensive site audit - SEO, performance, security, visual QA in parallel |
| `/wp-launch` | Pre-launch checklist and handoff documentation generation |

## Installation

### Method 1: Git Clone (Recommended)

```bash
# Clone into Claude Code skills directory
git clone https://github.com/hustleserver/wordpress-dev-skills.git ~/.claude/skills/wordpress-dev-skills

# Or clone and symlink individual skills
git clone https://github.com/hustleserver/wordpress-dev-skills.git /path/to/wordpress-dev-skills
ln -s /path/to/wordpress-dev-skills/skills/* ~/.claude/skills/
```

### Method 2: Install Script

```bash
curl -sL https://raw.githubusercontent.com/hustleserver/wordpress-dev-skills/main/install.sh | bash
```

### Method 3: Manual Download

1. Download the [latest release](https://github.com/hustleserver/wordpress-dev-skills/releases)
2. Extract to `~/.claude/skills/`
3. Skills are automatically available

## Requirements

- **Python 3.9+** - For SEO audit and visual QA scripts
- **Playwright** - For screenshot automation (`pip install playwright && playwright install`)
- **curl** - For API requests
- **Docker** (optional) - For local WordPress database access

## Usage

Once installed, ask Claude Code:

### WordPress Development

```
"Create a custom post type for properties"
"Review this code for WordPress security issues"
"Generate a meta box for property details"
"What are the best practices for enqueueing scripts?"
```

### SEO Optimization

```
"Run an SEO audit on all pages"
"Check SEO for the about page"
"Fix missing featured images"
"Update meta descriptions to include focus keywords"
```

### Visual QA

```
"Take screenshots of all pages"
"Run visual QA on the portfolio page"
"Check responsive layouts at all breakpoints"
```

### Brand Guide

```
"Generate a brand style guide"
"Document the color palette"
"Create typography guidelines"
```

### White-Labeling (FREE Plugins)

```
"White label the admin for client handoff"
"Configure the login page with client branding"
"Set up custom login URL and security"
"Apply Branda settings for admin bar"
```

### Docker Environment

```
"Set up a Docker WordPress environment"
"Start the WordPress containers"
"Run WP-CLI commands in Docker"
```

### WordPress Playground

```
"Test this in WordPress Playground"
"Create a Playground blueprint with WooCommerce"
"Share a Playground demo link"
```

### GSAP Animations

```
"Add scroll-triggered animations to this section"
"Make sure animations respect prefers-reduced-motion"
"Create a staggered card entrance animation"
"Set up responsive animations for mobile"
```

### Performance Optimization

```
"Optimize images for Core Web Vitals"
"Compress videos for web delivery"
"Configure LiteSpeed Cache settings"
"Run a speed test on all pages"
```

### Project Orchestration

```
"Set up a new WordPress project"
"Audit this WordPress site"
"Prepare site for launch"
"Generate a handoff document for the client"
```

## Skill Details

### wordpress-dev

Provides comprehensive WordPress development guidance:

- **Coding Standards**: PHP, JS, CSS conventions
- **Custom Post Types**: Complete CPT registration guide
- **Security**: Sanitization, escaping, nonces, SQL safety
- **Performance**: Caching, query optimization, asset loading
- **Hooks & Filters**: Actions and filters reference
- **Template Hierarchy**: Theme template structure

Includes code templates for:
- Custom Post Type registration
- Custom Taxonomy registration
- Meta Box with save handling
- REST API endpoints
- Plugin skeleton

### seo-optimizer

Audits WordPress pages for SEO completeness:

- Focus keyword presence and usage
- Meta description quality (length, keyword inclusion)
- Featured image presence and metadata
- SEO title optimization

Supports Yoast SEO and Rank Math plugins.

### visual-qa

Automated visual testing with Playwright:

- Full-page scroll to trigger GSAP/ScrollTrigger animations
- Screenshots at 10 viewports (desktop, tablet, mobile)
- Parallel analysis with Haiku sub-agents

Default viewports:
- Desktop: 1920px, 1440px, 1280px
- Tablet: 768px, 1024px, 744px
- Mobile: 390px, 393px, 375px, 412px

### wordpress-admin

WordPress site management:

- Create/update pages and posts
- Configure Yoast SEO settings
- Upload and manage media
- WP-CLI command reference
- REST API endpoints

### white-label

Complete WordPress white-labeling using FREE plugins only:

- **ASE**: Admin cleanup, security (login URL, XML-RPC, author slugs)
- **Branda**: Login page customization (logo, colors, backgrounds)
- **Admin Menu Editor**: Menu organization, role-based hiding
- WP-CLI automation for programmatic configuration
- Client handoff checklist

### wp-docker

Docker Compose WordPress environment:

- MariaDB 10.11 with health checks
- WordPress PHP 8.3 Apache
- WP-CLI container for automation
- Automated setup script with plugin installation
- Environment variable configuration

### wp-playground

WordPress Playground blueprints:

- Instant browser-based WordPress testing
- Pre-configured blueprints with plugins
- CLI usage with `@wp-playground/cli`
- URL parameters for quick customization
- Snapshot export for sharing

### gsap-animations

GSAP animation best practices:

- WordPress enqueue patterns for GSAP/ScrollTrigger
- Animation patterns (fade, stagger, parallax, text reveal, curtain)
- Accessibility with `prefers-reduced-motion` support
- Responsive animations with `gsap.matchMedia()`
- Visual QA integration with `completeAllAnimations()` helper
- Reusable animation library with data attributes

### wp-performance

Core Web Vitals and performance optimization:

- LCP, INP, CLS targets and measurement
- EWWW Image Optimizer configuration
- FFmpeg video compression (H.264/H.265)
- LiteSpeed Cache settings optimization
- CSS/JS defer and minification
- Database optimization queries
- Automated speed testing script

### wp-orchestrator

Master WordPress project orchestrator:

- Coordinates all WordPress skills
- Discovery interview phases (project type, requirements, brand)
- Site audit workflows (SEO, visual, performance, security)
- Todo list generation for project phases
- Parallel agent patterns using Haiku sub-agents
- Audit report and handoff documentation templates
- Pre-launch checklist generation

## Configuration

### For Docker-based WordPress

Update database config in `skills/seo-optimizer/audit.py`:

```python
DB_CONTAINER = "your-db-container-name"
DB_USER = "your-db-user"
DB_PASS = "your-db-password"
DB_NAME = "your-db-name"
```

### For Visual QA

Update base URL in `skills/visual-qa/screenshot.py`:

```python
DEFAULT_BASE_URL = "https://your-site.com"
DEFAULT_OUTPUT = "/path/to/screenshots"
```

## Directory Structure

```
wordpress-dev-skills/
├── plugin.json              # Plugin manifest
├── README.md                # This file
├── CHANGELOG.md             # Version history
├── install.sh               # Installation script
├── skills/
│   ├── wp-orchestrator/     # Master orchestrator
│   ├── wp-docker/           # Docker environment
│   │   ├── SKILL.md
│   │   └── templates/       # docker-compose.yml, wp-setup.sh
│   ├── wp-playground/       # WordPress Playground
│   │   ├── SKILL.md
│   │   └── blueprints/      # base.json, woocommerce.json
│   ├── white-label/         # Admin white-labeling
│   ├── wordpress-dev/       # Development best practices
│   ├── wordpress-admin/     # Admin management
│   ├── seo-optimizer/       # SEO audit
│   ├── visual-qa/           # Visual testing
│   ├── brand-guide/         # Brand documentation
│   ├── gsap-animations/     # GSAP best practices
│   └── wp-performance/      # Performance optimization
├── commands/
│   ├── wp-setup.md          # /wp-setup slash command
│   ├── wp-audit.md          # /wp-audit slash command
│   └── wp-launch.md         # /wp-launch slash command
└── hooks/
    └── wp-session-init.sh   # WordPress session initialization
```

## Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## License

MIT License - See [LICENSE](https://github.com/CrazySwami/wordpress-dev-skills/tree/HEAD/LICENSE) for details.

## Support

- [Issues](https://github.com/hustleserver/wordpress-dev-skills/issues)
- [Discussions](https://github.com/hustleserver/wordpress-dev-skills/discussions)

## Changelog

See [CHANGELOG.md](https://github.com/CrazySwami/wordpress-dev-skills/blob/HEAD/CHANGELOG.md) for version history.

WordPress Development Skills for Claude Code

A comprehensive WordPress development and automation toolkit for Claude Code. Set up complete WordPress sites with a single command, using Docker or Playground environments, with white-labeling (FREE plugins only), SEO, and visual QA.

Quick Start

# Set up a new WordPress site
/wp-setup

# Audit an existing site
/wp-audit

# Pre-launch checklist
/wp-launch

Skills Included

Skill	Description
wp-orchestrator	Master orchestrator - coordinates all skills, slash commands
wp-docker	Docker Compose WordPress environment with WP-CLI
wp-playground	WordPress Playground blueprints for instant testing
white-label	FREE white-labeling with ASE + Branda + Admin Menu Editor
wordpress-dev	Development best practices, coding standards, CPT creation
wordpress-admin	Page/post management, WP-CLI, REST API operations
seo-optimizer	Yoast/Rank Math audit - focus keywords, meta descriptions
visual-qa	Screenshot automation with GSAP animation handling
brand-guide	Brand documentation - colors, fonts, imagery, voice/tone
gsap-animations	GSAP best practices, accessibility, responsive animations
wp-performance	Core Web Vitals, image/video optimization, caching

Slash Commands

Command	Description
`/wp-setup`	Set up a new WordPress site with Docker, install plugins, configure white-labeling
`/wp-audit`	Comprehensive site audit - SEO, performance, security, visual QA in parallel
`/wp-launch`	Pre-launch checklist and handoff documentation generation

Installation

Method 1: Git Clone (Recommended)

# Clone into Claude Code skills directory
git clone https://github.com/hustleserver/wordpress-dev-skills.git ~/.claude/skills/wordpress-dev-skills

# Or clone and symlink individual skills
git clone https://github.com/hustleserver/wordpress-dev-skills.git /path/to/wordpress-dev-skills
ln -s /path/to/wordpress-dev-skills/skills/* ~/.claude/skills/

Method 2: Install Script

curl -sL https://raw.githubusercontent.com/hustleserver/wordpress-dev-skills/main/install.sh | bash

Method 3: Manual Download

Download the latest release
Extract to ~/.claude/skills/
Skills are automatically available

Requirements

Python 3.9+ - For SEO audit and visual QA scripts
Playwright - For screenshot automation (pip install playwright && playwright install)
curl - For API requests
Docker (optional) - For local WordPress database access

Usage

Once installed, ask Claude Code:

WordPress Development

"Create a custom post type for properties"
"Review this code for WordPress security issues"
"Generate a meta box for property details"
"What are the best practices for enqueueing scripts?"

SEO Optimization

"Run an SEO audit on all pages"
"Check SEO for the about page"
"Fix missing featured images"
"Update meta descriptions to include focus keywords"

Visual QA

"Take screenshots of all pages"
"Run visual QA on the portfolio page"
"Check responsive layouts at all breakpoints"

Brand Guide

"Generate a brand style guide"
"Document the color palette"
"Create typography guidelines"

White-Labeling (FREE Plugins)

"White label the admin for client handoff"
"Configure the login page with client branding"
"Set up custom login URL and security"
"Apply Branda settings for admin bar"

Docker Environment

"Set up a Docker WordPress environment"
"Start the WordPress containers"
"Run WP-CLI commands in Docker"

WordPress Playground

"Test this in WordPress Playground"
"Create a Playground blueprint with WooCommerce"
"Share a Playground demo link"

GSAP Animations

"Add scroll-triggered animations to this section"
"Make sure animations respect prefers-reduced-motion"
"Create a staggered card entrance animation"
"Set up responsive animations for mobile"

Performance Optimization

"Optimize images for Core Web Vitals"
"Compress videos for web delivery"
"Configure LiteSpeed Cache settings"
"Run a speed test on all pages"

Project Orchestration

"Set up a new WordPress project"
"Audit this WordPress site"
"Prepare site for launch"
"Generate a handoff document for the client"

Skill Details

wordpress-dev

Provides comprehensive WordPress development guidance:

Coding Standards: PHP, JS, CSS conventions
Custom Post Types: Complete CPT registration guide
Security: Sanitization, escaping, nonces, SQL safety
Performance: Caching, query optimization, asset loading
Hooks & Filters: Actions and filters reference
Template Hierarchy: Theme template structure

Includes code templates for:

Custom Post Type registration
Custom Taxonomy registration
Meta Box with save handling
REST API endpoints
Plugin skeleton

seo-optimizer

Audits WordPress pages for SEO completeness:

Focus keyword presence and usage
Meta description quality (length, keyword inclusion)
Featured image presence and metadata
SEO title optimization

Supports Yoast SEO and Rank Math plugins.

visual-qa

Automated visual testing with Playwright:

Full-page scroll to trigger GSAP/ScrollTrigger animations
Screenshots at 10 viewports (desktop, tablet, mobile)
Parallel analysis with Haiku sub-agents

Default viewports:

Desktop: 1920px, 1440px, 1280px
Tablet: 768px, 1024px, 744px
Mobile: 390px, 393px, 375px, 412px

wordpress-admin

WordPress site management:

Create/update pages and posts
Configure Yoast SEO settings
Upload and manage media
WP-CLI command reference
REST API endpoints

white-label

Complete WordPress white-labeling using FREE plugins only:

ASE: Admin cleanup, security (login URL, XML-RPC, author slugs)
Branda: Login page customization (logo, colors, backgrounds)
Admin Menu Editor: Menu organization, role-based hiding
WP-CLI automation for programmatic configuration
Client handoff checklist

wp-docker

Docker Compose WordPress environment:

MariaDB 10.11 with health checks
WordPress PHP 8.3 Apache
WP-CLI container for automation
Automated setup script with plugin installation
Environment variable configuration

wp-playground

WordPress Playground blueprints:

Instant browser-based WordPress testing
Pre-configured blueprints with plugins
CLI usage with @wp-playground/cli
URL parameters for quick customization
Snapshot export for sharing

gsap-animations

GSAP animation best practices:

WordPress enqueue patterns for GSAP/ScrollTrigger
Animation patterns (fade, stagger, parallax, text reveal, curtain)
Accessibility with prefers-reduced-motion support
Responsive animations with gsap.matchMedia()
Visual QA integration with completeAllAnimations() helper
Reusable animation library with data attributes

wp-performance

Core Web Vitals and performance optimization:

LCP, INP, CLS targets and measurement
EWWW Image Optimizer configuration
FFmpeg video compression (H.264/H.265)
LiteSpeed Cache settings optimization
CSS/JS defer and minification
Database optimization queries
Automated speed testing script

wp-orchestrator

Master WordPress project orchestrator:

Coordinates all WordPress skills
Discovery interview phases (project type, requirements, brand)
Site audit workflows (SEO, visual, performance, security)
Todo list generation for project phases
Parallel agent patterns using Haiku sub-agents
Audit report and handoff documentation templates
Pre-launch checklist generation

Configuration

For Docker-based WordPress

Update database config in skills/seo-optimizer/audit.py:

DB_CONTAINER = "your-db-container-name"
DB_USER = "your-db-user"
DB_PASS = "your-db-password"
DB_NAME = "your-db-name"

For Visual QA

Update base URL in skills/visual-qa/screenshot.py:

DEFAULT_BASE_URL = "https://your-site.com"
DEFAULT_OUTPUT = "/path/to/screenshots"

Directory Structure

wordpress-dev-skills/
├── plugin.json              # Plugin manifest
├── README.md                # This file
├── CHANGELOG.md             # Version history
├── install.sh               # Installation script
├── skills/
│   ├── wp-orchestrator/     # Master orchestrator
│   ├── wp-docker/           # Docker environment
│   │   ├── SKILL.md
│   │   └── templates/       # docker-compose.yml, wp-setup.sh
│   ├── wp-playground/       # WordPress Playground
│   │   ├── SKILL.md
│   │   └── blueprints/      # base.json, woocommerce.json
│   ├── white-label/         # Admin white-labeling
│   ├── wordpress-dev/       # Development best practices
│   ├── wordpress-admin/     # Admin management
│   ├── seo-optimizer/       # SEO audit
│   ├── visual-qa/           # Visual testing
│   ├── brand-guide/         # Brand documentation
│   ├── gsap-animations/     # GSAP best practices
│   └── wp-performance/      # Performance optimization
├── commands/
│   ├── wp-setup.md          # /wp-setup slash command
│   ├── wp-audit.md          # /wp-audit slash command
│   └── wp-launch.md         # /wp-launch slash command
└── hooks/
    └── wp-session-init.sh   # WordPress session initialization

Contributing

Fork the repository
Create a feature branch
Make your changes
Submit a pull request

License

MIT License - See LICENSE for details.

Support

Changelog

See CHANGELOG.md for version history.