{"id":"35d6e3fa-45be-48da-9806-8f9fde7554d8","shortId":"gkfNhh","kind":"skill","title":"codebase-to-wordpress-converter","tagline":"Expert skill for converting any codebase (React/HTML/Next.js) into a pixel-perfect, SEO-optimized, and dynamic WordPress theme.","description":"# Codebase to WordPress Converter\n\n## Overview\n\nThis 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.\n\n## When to Use This Skill\n\n- Use when converting a React (CRA/Vite/Next.js) or HTML project into a WordPress theme.\n- Use when the client demands a 100% pixel-perfect match with the original source.\n- Use when auditing an existing WordPress conversion for structural or SEO flaws.\n- Use when you need to ensure technical SEO (Schema, Meta tags, Heading hierarchy) is preserved exactly.\n\n## Core Capabilities\n\n### Phased Conversion & Audit\nThe skill follows a strict 4-phase forensic process:\n1.  **Phase 1: Forensic UI Comparison**: Side-by-side table audit of React components vs. WordPress templates to find discrepancies.\n2.  **Phase 2: Full Audit**: Deep dive into UI, SEO, CMS Editability, Navigation, Functionality, and Performance.\n3.  **Phase 3: Action Plan**: Tasks classified as **SAFE**, **RISKY**, or **BLOCKED** to prevent breaking the UI.\n4.  **Phase 4: Iterative Fixing**: Executing one safe task at a time with validation after each step.\n\n### Absolute UI Lock\nStrict enforcement of non-negotiable rules:\n- No alterations to layout, spacing, typography, or colors.\n- Exact preservation of Tailwind or CSS class names.\n- Zero changes to DOM structure or HTML nesting.\n\n## Step-by-Step Guide\n\n### 1. Discovery & Forensic Audit\nStart by identifying all components in the source code. Create a UI Comparison table comparing the original source output against the target WordPress output.\n- *Rule: No fixes are allowed during this phase; only detection.*\n\n### 2. Strategic Field Mapping\nMap static React/HTML content to dynamic WordPress functions:\n- Replace static text with `the_title()`, `get_field()`, or `the_content()`.\n- Replace static paths with `get_template_directory_uri()`.\n\n### 3. Implementation of Core Hooks\nEnsure every theme includes the foundational WordPress hooks correctly:\n- **Layout Files (`header.php` / `footer.php`)**: Must include `wp_head()` before `</head>` and `wp_footer()` before `</body>`.\n- **Page Templates**: Must call `get_header()` and `get_footer()`.\n- `register_nav_menus()` for dynamic navigation without breaking original HTML structure.\n\n### 4. Validation & Live Tracker\nMaintain a live tracker of Total Issues, Fixed, and Remaining. Every fix must be followed by a confirmation:\n- ✅ No UI change\n- ✅ No DOM change\n- ✅ No class change\n\n## Examples\n\n### Example 1: Navigation Conversion\n```php\n// WRONG: Static replacement that adds wrappers\nwp_nav_menu(['theme_location' => 'primary']);\n\n// CORRECT: Preserving original Tailwind classes and structure\nwp_nav_menu([\n    'theme_location' => 'primary',\n    'container' => false,\n    'items_wrap' => '<ul class=\"flex space-x-8\">%3$s</ul>',\n    'walker' => new Custom_Tailwind_Walker()\n]);\n```\n\n### Example 2: Asset Pathing\n```php\n// Source: <img src=\"/images/logo.png\" />\n// WP Conversion:\n<img src=\"<?php echo get_template_directory_uri(); ?>/assets/images/logo.png\" alt=\"Logo\" />\n```\n\n## Best Practices\n\n- ✅ **Do:** Use `get_page_by_path()` for robust internal linking.\n- ✅ **Do:** Implement ACF (Advanced Custom Fields) fallbacks in `functions.php`.\n- ✅ **Do:** Keep the Tailwind configuration in the `header.php` to ensure global styles are active.\n- ❌ **Don't:** Add \"div\" wrappers or rename classes to \"clean up\" the code.\n- ❌ **Don't:** Use standard WordPress default styles if they conflict with the original design.\n\n## Additional Resources\n\n- [ACF Documentation](https://www.advancedcustomfields.com/resources/)\n- [Tailwind CSS in WordPress](https://tailwindcss.com/docs/installation)\n- [WordPress Theme Handbook](https://developer.wordpress.org/themes/)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["codebase","wordpress","converter","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-codebase-to-wordpress-converter","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/codebase-to-wordpress-converter","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34882 github stars · SKILL.md body (4,299 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-24T12:50:48.545Z","embedding":null,"createdAt":"2026-04-18T21:34:45.745Z","updatedAt":"2026-04-24T12:50:48.545Z","lastSeenAt":"2026-04-24T12:50:48.545Z","tsv":"'/docs/installation)':545 '/resources/)':538 '/themes/)':551 '1':163,165,273,422 '100':70,112 '2':184,186,311,463 '3':200,202,342,455 '4':159,217,219,389 'absolut':234 'acf':81,484,534 'act':56 'action':203 'activ':504 'add':430,507 'addit':532 'advanc':485 'allow':305 'alter':245 'architect':61 'ask':585 'asset':464 'audit':123,153,174,188,276 'base':45 'best':470 'block':211 'boundari':593 'break':214,385 'call':372 'capabl':150 'chang':261,413,416,419 'clarif':587 'class':258,418,442,512 'classifi':206 'clean':514 'clear':560 'client':109 'cms':51,194 'cms-driven':50 'code':285,517 'codebas':2,11,25 'codebase-to-wordpress-convert':1 'color':251 'compar':291 'comparison':168,289 'compon':177,281 'configur':495 'confirm':410 'conflict':527 'contain':451 'content':318,333 'convers':39,127,152,424,469 'convert':5,9,28,95 'core':149,345 'correct':355,438 'cra/vite/next.js':98 'creat':286 'criteria':596 'css':257,540 'custom':459,486 'deep':77,189 'default':523 'demand':110 'describ':564 'design':33,531 'detect':310 'developer.wordpress.org':550 'developer.wordpress.org/themes/)':549 'directori':340 'discoveri':274 'discrep':183 'div':508 'dive':190 'document':535 'dom':263,415 'driven':52 'dynam':22,82,320,382 'edit':195 'enforc':238 'engin':66 'ensur':68,138,347,500 'environ':576 'environment-specif':575 'everi':348,403 'exact':148,252 'exampl':420,421,462 'execut':222 'exist':125 'expert':6,63,581 'fallback':488 'fals':452 'fidel':38 'field':313,330,487 'file':357 'find':182 'fix':221,303,400,404 'flaw':132 'follow':156,407 'footer':367,377 'footer.php':359 'forens':161,166,275 'foundat':352 'frontend':46 'full':187 'fulli':48 'function':49,79,197,322 'functions.php':490 'get':329,338,373,376,474 'global':501 'guid':272 'handbook':548 'head':144,363 'header':374 'header.php':358,498 'hierarchi':145 'high':37 'high-fidel':36 'hook':346,354 'html':100,266,387 'identifi':279 'implement':343,483 'includ':350,361 'input':590 'integr':76 'intern':480 'issu':399 'item':453 'iter':220 'keep':492 'layout':247,356 'like':80 'limit':552 'link':481 'live':391,395 'locat':436,449 'lock':236 'maintain':393 'map':314,315 'match':74,116,561 'menu':434,447 'menus':83,380 'meta':142 'miss':598 'must':360,371,405 'name':259 'nav':379,433,446 'navig':196,383,423 'need':136 'negoti':242 'nest':267 'new':458 'non':241 'non-negoti':240 'one':223 'optim':20 'origin':119,293,386,440,530 'output':295,300,570 'overview':29 'page':369,475 'path':336,465,477 'perfect':17,73,115 'perform':199 'permiss':591 'phase':151,160,164,185,201,218,308 'php':425,466 'pixel':16,72,114 'pixel-perfect':15,71,113 'plan':204 'practic':471 'preserv':87,147,253,439 'prevent':213 'primari':437,450 'process':162 'project':101 'qa':65 'react':44,62,97,176 'react-bas':43 'react/html':317 'react/html/next.js':12 'regist':378 'remain':402 'renam':511 'replac':323,334,428 'requir':589 'resourc':533 'review':582 'riski':209 'robust':479 'rule':243,301 'safe':208,224 'safeti':592 'schema':141 'scope':563 'senior':59 'seo':19,86,131,140,193 'seo-optim':18 'side':170,172 'side-by-sid':169 'skill':7,31,92,155,555 'skill-codebase-to-wordpress-converter' 'sourc':120,284,294,467 'source-sickn33' 'space':248 'specif':577 'standard':521 'start':277 'static':41,316,324,335,427 'step':233,269,271 'step-by-step':268 'stop':583 'strateg':312 'strict':158,237 'structur':129,264,388,444 'style':502,524 'substitut':573 'success':595 'tabl':173,290 'tag':143 'tailwind':255,441,460,494,539 'tailwindcss.com':544 'tailwindcss.com/docs/installation)':543 'target':298 'task':205,225,559 'technic':85,139 'templat':180,339,370 'test':579 'text':325 'theme':24,54,105,349,435,448,547 'time':228 'titl':328 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'total':398 'tracker':392,396 'treat':568 'typographi':249 'ui':167,192,216,235,288,412 'uri':341 'use':90,93,106,121,133,473,520,553 'valid':230,390,578 'vs':178 'walker':457,461 'without':384 'wordpress':4,23,27,53,60,78,104,126,179,299,321,353,522,542,546 'wp':362,366,432,445,468 'wrap':454 'wrapper':431,509 'wrong':426 'www.advancedcustomfields.com':537 'www.advancedcustomfields.com/resources/)':536 'zero':260","prices":[{"id":"28ed8849-38f6-4750-b2e3-402711b538f9","listingId":"35d6e3fa-45be-48da-9806-8f9fde7554d8","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:34:45.745Z"}],"sources":[{"listingId":"35d6e3fa-45be-48da-9806-8f9fde7554d8","source":"github","sourceId":"sickn33/antigravity-awesome-skills/codebase-to-wordpress-converter","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/codebase-to-wordpress-converter","isPrimary":false,"firstSeenAt":"2026-04-18T21:34:45.745Z","lastSeenAt":"2026-04-24T12:50:48.545Z"}],"details":{"listingId":"35d6e3fa-45be-48da-9806-8f9fde7554d8","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"codebase-to-wordpress-converter","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34882,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"52e9e706da808b03778e3b96f663daff63db6b6d","skill_md_path":"skills/codebase-to-wordpress-converter/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/codebase-to-wordpress-converter"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"codebase-to-wordpress-converter","description":"Expert skill for converting any codebase (React/HTML/Next.js) into a pixel-perfect, SEO-optimized, and dynamic WordPress theme."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/codebase-to-wordpress-converter"},"updatedAt":"2026-04-24T12:50:48.545Z"}}