[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-c3cb38a0-3515-4648-bb7f-555df15ed95c":3,"$fFuTsaPDBDeoiwunkDf0Kc8G3gjgCmWIsn-yamltk-NA":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"c3cb38a0-3515-4648-bb7f-555df15ed95c","codebase-to-wordpress-converter","将任何代码库（React\u002FHTML\u002FNext.js）转换为像素完美、SEO优化和动态的WordPress主题的专业技能。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: codebase-to-wordpress-converter\ndescription: \"Expert skill for converting any codebase (React\u002FHTML\u002FNext.js) into a pixel-perfect, SEO-optimized, and dynamic WordPress theme.\"\nrisk: safe\nsource: community\ndate_added: \"2026-04-12\"\n---\n\n# 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\u002FVite\u002FNext.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\u002FHTML 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` \u002F `footer.php`)**: Must include `wp_head()` before `\u003C\u002Fhead>` and `wp_footer()` before `\u003C\u002Fbody>`.\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\u002F\u002F WRONG: Static replacement that adds wrappers\nwp_nav_menu(['theme_location' => 'primary']);\n\n\u002F\u002F CORRECT: Preserving original Tailwind classes and structure\nwp_nav_menu([\n    'theme_location' => 'primary',\n    'container' => false,\n    'items_wrap' => '\u003Cul class=\"flex space-x-8\">%3$s\u003C\u002Ful>',\n    'walker' => new Custom_Tailwind_Walker()\n]);\n```\n\n### Example 2: Asset Pathing\n```php\n\u002F\u002F Source: \u003Cimg src=\"\u002Fimages\u002Flogo.png\" \u002F>\n\u002F\u002F WP Conversion:\n\u003Cimg src=\"\u003C?php echo get_template_directory_uri(); ?>\u002Fassets\u002Fimages\u002Flogo.png\" alt=\"Logo\" \u002F>\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:\u002F\u002Fwww.advancedcustomfields.com\u002Fresources\u002F)\n- [Tailwind CSS in WordPress](https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Finstallation)\n- [WordPress Theme Handbook](https:\u002F\u002Fdeveloper.wordpress.org\u002Fthemes\u002F)\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,139,1397,"2026-05-16 13:12:07",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"b4852dc1-3d51-451b-8933-8b8402749767","1.0.0","codebase-to-wordpress-converter.zip",2362,"uploads\u002Fskills\u002Fc3cb38a0-3515-4648-bb7f-555df15ed95c\u002Fcodebase-to-wordpress-converter.zip","0f599f42c54b2c421b04cbfd0a196506be741966b5d58706cb668a04f42a8fb6","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":4560}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]