wordpress-theme-development by sickn33/antigravity-awesome-skills
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill wordpress-theme-development用于从零开始创建自定义 WordPress 主题的专门工作流,包括现代区块编辑器(Gutenberg)支持、模板层次结构、响应式设计以及 WordPress 7.0 增强功能。
管理界面刷新
模式编辑
disableContentOnlyForUnsyncedPatterns 设置导航覆盖层
新区块
Theme.json 增强
Iframed 编辑器
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
在以下情况下使用此工作流:
app-builder - 项目脚手架frontend-developer - 前端开发/*
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 - 模板开发Use @frontend-developer to create WordPress template files
backend-dev-guidelines - 后端模式{
"$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 模式register_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 - 区块开发{
"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 设计tailwind-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 - 浏览器测试webapp-testing - Web 应用测试Use @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 开发wordpress-plugin-development - 插件开发wordpress-woocommerce - WooCommerce每周安装次数
78
代码仓库
GitHub 星标数
27.6K
首次出现
2026年2月24日
安全审计
安装于
codex77
opencode77
gemini-cli76
amp76
github-copilot76
cursor76
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 - WooCommerceWeekly Installs
78
Repository
GitHub Stars
27.6K
First Seen
Feb 24, 2026
Security Audits
Gen Agent Trust HubPassSocketWarnSnykPass
Installed on
codex77
opencode77
gemini-cli76
amp76
github-copilot76
cursor76
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
122,000 周安装
化学分析师技能:原子理论、热力学、光谱学、色谱法、合成路线规划与材料表征
200 周安装
Android无障碍功能检查清单:内容描述、触摸目标、色彩对比度、焦点语义完整指南
202 周安装
Magento 2 Hyvä 主题列表工具 - 快速发现项目中的所有 Hyvä 主题路径
213 周安装
floor-plan:基于Drawio的Markdown平面图与布局生成器,快速创建家居/办公室设计图
205 周安装
LinkedIn广告健康度审计工具 - 25项检查清单,优化B2B广告效果与ROI
202 周安装
oh-my-claudecode技能管理CLI教程:创建、列表、删除技能命令详解
206 周安装