Agent skill · software engineering · sickn33
codebase-to-wordpress-converter
Expert skill for converting any codebase (React/HTML/Next.js) into a pixel-perfect, SEO-optimized, and dynamic WordPress theme.
Why this skill is useful
Adds a detailed, executable workflow for converting React/HTML codebases to WordPress themes, including specific PHP functions and structural requirements.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Codebase to WordPress Converter Overview This skill is designed for the high-fidelity conversion of static or React-based frontends into fully functional, CMS-driven WordPress themes. It acts as a Senior WordPress Architect, React Expert, and QA Engineer to ensure a 100% pixel-perfect match while integrating deep WordPress functionality like ACF, dynamic menus, and technical SEO preservation. When to Use This Skill Use when converting a React (CRA/Vite/Next.js) or HTML project into a WordPress theme. Use when the client demands a 100% pixel-perfect match with the original source. Use when auditing an existing WordPress conversion for structural or SEO flaws. Use when you need to ensure technical SEO (Schema, Meta tags, Heading hierarchy) is preserved exactly. Core Capabilities Phased Conversion & Audit The skill follows a strict 4-phase forensic process: 1. Phase 1: Forensic UI Comparison: Side-by-side table audit of React components vs. WordPress templates to find discrepancies. 2. Phase 2: Full Audit: Deep dive into UI, SEO, CMS Editability, Navigation, Functionality, and Performance. 3. Phase 3: Action Plan: Tasks classified as SAFE, RISKY, or BLOCKED to prevent breaking the UI. 4. Phase 4: Iterative Fixing: Executing one safe task at a time with validation after each step. Absolute UI Lock Strict enforcement of non-negotiable rules: No alterations to layout, spacing, typography, or colors. Exact preservation of Tailwind or CSS class names. Zero changes to DOM structure or HTML nesting. Step-by-Step Guide 1. Discovery & Forensic Audit Start by identifying all components in the source code. Create a UI Comparison table comparing the original source output against the target WordPress output. Rule: No fixes are allowed during this phase; only detection. 2. Strategic Field Mapping Map static React/HTML content to dynamic WordPress functions: Replace static text with thetitle(), getfield(), or thecontent(). Replace static paths with gettemplatedirectoryuri(). 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/codebase-to-wordpress-converter