Builds custom WordPress themes with block editor support, template hierarchy, custom post types, responsive design, and WP 7.0 features including Pattern Editing, Navigation Overlays, and theme.json enhancements.
From antigravity-awesome-skillsnpx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-awesome-skillsThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Specialized workflow for creating custom WordPress themes from scratch, including modern block editor (Gutenberg) support, template hierarchy, responsive design, and WordPress 7.0 enhancements.
Admin Refresh
Pattern Editing
disableContentOnlyForUnsyncedPatterns settingNavigation Overlays
New Blocks
Theme.json Enhancements
Iframed Editor
Use this workflow when:
app-builder - Project scaffoldingfrontend-developer - Frontend development/*
Theme Name: My Custom Theme
Theme URI: https://example.com
Author: Developer Name
Author URI: https://example.com
Description: A WordPress 7.0 compatible theme with modern design
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: block-patterns, block-styles, editor-style, wide-blocks
*/
Use @app-builder to scaffold a new WordPress theme project
frontend-developer - Template developmentUse @frontend-developer to create WordPress template files
backend-dev-guidelines - Backend patterns{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "1200px",
"wideSize": "1400px"
},
"background": {
"backgroundImage": true
},
"typography": {
"fontFamilies": true,
"fontSizes": true
},
"spacing": {
"margin": true,
"padding": true
},
"blocks": {
"core/heading": {
"typography": {
"fontSizes": ["24px", "32px", "48px"]
}
}
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#1a1a1a"
},
"elements": {
"link": {
"color": {
"text": "#0066cc"
}
}
}
},
"customTemplates": [
{
"name": "page-home",
"title": "Homepage",
"postTypes": ["page"]
}
],
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
}
]
}
Use @backend-dev-guidelines to create theme functions
wordpress-penetration-testing - WordPress patternsregister_post_type('portfolio', [
'labels' => [
'name' => __('Portfolio', 'my-theme'),
'singular_name' => __('Portfolio Item', 'my-theme')
],
'public' => true,
'has_archive' => true,
'show_in_rest' => true, // Enable for RTC
'supports' => ['title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'],
'menu_icon' => 'dashicons-portfolio',
]);
// Register meta for collaboration
register_post_meta('portfolio', 'client_name', [
'type' => 'string',
'single' => true,
'show_in_rest' => true,
'sanitize_callback' => 'sanitize_text_field',
]);
Use @wordpress-penetration-testing to understand WordPress CPT patterns
frontend-developer - Block development{
"name": "my-theme/hero-section",
"title": "Hero Section",
"contentOnly": true,
"content": [
{
"name": "core/cover",
"attributes": {
"url": "{{hero_image}}",
"overlay": "black",
"dimRatio": 50
},
"innerBlocks": [
{
"name": "core/heading",
"attributes": {
"level": 1,
"textAlign": "center",
"content": "{{hero_title}}"
}
},
{
"name": "core/paragraph",
"attributes": {
"align": "center",
"content": "{{hero_description}}"
}
}
]
}
]
}
// template-parts/header-overlay.php
?>
<nav class="header-navigation-overlay" aria-label="<?php esc_attr_e('Overlay Menu', 'my-theme'); ?>">
<button class="overlay-close" aria-label="<?php esc_attr_e('Close menu', 'my-theme'); ?>">
<span class="close-icon" aria-hidden="true">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
</button>
<?php
wp_nav_menu([
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'overlay-menu',
'fallback_cb' => false,
]);
?>
</nav>
Use @frontend-developer to create custom Gutenberg blocks
frontend-design - UI designtailwind-patterns - Tailwind CSS/* Support new admin color scheme */
@media (prefers-color-scheme: dark) {
:root {
--admin-color: modern;
}
}
/* View transitions */
.wp-admin {
view-transition-name: none;
}
body {
view-transition-name: page;
}
:root {
/* New DataViews colors */
--wp-dataviews-color-background: #ffffff;
--wp-dataviews-color-border: #e0e0e0;
/* Navigation overlay */
--wp-overlay-menu-background: #1a1a1a;
--wp-overlay-menu-text: #ffffff;
}
Use @frontend-design to create responsive theme design
// Add breadcrumb filters for custom post types
add_filter('wp_breadcrumb_args', function($args) {
$args['separator'] = '<span class="breadcrumb-separator"> / </span>';
$args['before'] = '<nav class="breadcrumb" aria-label="Breadcrumb">';
$args['after'] = '</nav>';
return $args;
});
// Add custom breadcrumb trail for CPT
add_action('breadcrumb_items', function($trail, $crumbs) {
if (is_singular('portfolio')) {
$portfolio_page = get_page_by_path('portfolio');
if ($portfolio_page) {
array_splice($trail->crumbs, 1, 0, [
[
'title' => get_the_title($portfolio_page),
'url' => get_permalink($portfolio_page)
]
]);
}
}
}, 10, 2);
// Add custom icons for Icon block via pattern category
add_action('init', function() {
register_block_pattern_category('my-theme/icons', [
'label' => __('Theme Icons', 'my-theme'),
'description' => __('Custom icons for use in the Icon block', 'my-theme'),
]);
});
// For actual SVG icons in the Icon block, use block.json or PHP registration
add_action('init', function() {
register_block_pattern('my-theme/custom-icons', [
'title' => __('Custom Icon Set', 'my-theme'),
'categories' => ['my-theme/icons'],
'content' => '<!-- Pattern content with Icon blocks -->'
]);
});
playwright-skill - Browser testingwebapp-testing - Web app testingUse @playwright-skill to test WordPress theme
theme-name/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── comments.php
├── template-parts/
│ ├── header/
│ ├── footer/
│ ├── navigation/
│ └── content/
├── patterns/ # Block patterns (WP 7.0)
├── templates/ # Site editor templates
├── inc/
│ ├── class-theme.php
│ └── supports.php
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
└── languages/
wordpress - WordPress developmentwordpress-plugin-development - Plugin developmentwordpress-woocommerce - WooCommerce