Menu
context: fork
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create a new Gutenberg block with scaffolding
Use when working with the WordPress Abilities API (wp_register_ability, wp_register_ability_category, /wp-json/wp-abilities/v1/*, @wordpress/abilities) including defining abilities, categories, meta, REST exposure, and permissions checks for clients.
Prepare plugin for WordPress.org deployment
Use when generating responses containing factual claims, API details, configuration specifics, version compatibility, or recalled knowledge that could be hallucinated - especially when not working directly from source code or command output
Use when executing implementation plans with independent tasks in the current session
Create a block extension to enhance core WordPress blocks
| name | refactor |
| description | null |
| context | fork |
| agent | Explore |
| allowed-tools | Read, Glob, Grep, Bash(git *), Bash(npm run *) |
Read the target files and identify:
Anti-Patterns to Remove:
useEffect() for stylingquerySelector() or direct DOM access<InnerBlocks /> without useInnerBlocksPropsCode Smells:
Check Documentation:
.claude/CLAUDE.md for project-specific patternsdocs/BEST-PRACTICES-SUMMARY.md for quick patternsdocs/BLOCK-DEVELOPMENT-BEST-PRACTICES-COMPREHENSIVE.md for deep divesCreate todo list with specific tasks:
Make changes incrementally:
For Blocks with InnerBlocks:
<InnerBlocks /> with useInnerBlocksProps patternuseEffect to declarative style objectsFor All Blocks:
For Extensions:
Update Related Files:
src/styles/style.scss (frontend)src/styles/editor.scss (editor)# Build
npx wp-scripts build
# Check output
ls -lh build/
cat build/style-index.css | grep "your-class-name"
# Verify bundle sizes are within budgets
Editor Testing:
Frontend Testing:
FSE Testing:
Accessibility Testing:
Check bundle sizes:
ls -lh build/*.js build/*.css
If over budget:
Symptoms:
Fix:
useEffect hooksuseInnerBlocksProps with style objectSymptoms:
Fix:
// ❌ BEFORE
<div style={{ maxWidth: '800px' }}>
<InnerBlocks />
</div>
// ✅ AFTER
const innerBlocksProps = useInnerBlocksProps({
style: { maxWidth: '800px' }
});
return <div {...innerBlocksProps} />;
Symptoms:
Fix:
Symptoms:
Fix:
Symptoms:
Fix:
src/styles/style.scssnpx wp-scripts buildgrep "your-class" build/style-index.cssSymptoms:
Fix:
Symptoms:
Fix:
!importantSymptoms:
Fix:
esc_html(), esc_url(), wp_kses_post()Symptoms:
Fix:
ls -lh build/Symptoms:
Fix:
Extract Shared Logic:
// ❌ BEFORE - Duplicated in 3 blocks
const columns = device === 'mobile' ? mobileColumns :
device === 'tablet' ? tabletColumns :
desktopColumns;
// ✅ AFTER - Shared utility
// src/utils/responsive.js
export const getResponsiveValue = (device, values) => {
return values[device] || values.desktop;
};
Split Large Files:
Add Documentation:
/**
* Calculates inner container styles based on layout type.
* Supports grid, flex, and stack layouts with responsive columns.
*
* @param {Object} attributes - Block attributes
* @param {string} attributes.layoutType - Layout type (grid/flex/stack)
* @param {number} attributes.columns - Number of columns
* @return {Object} React style object for inner container
*/
export const calculateInnerStyles = (attributes) => {
// Implementation
};
Use Named Constants:
// ❌ BEFORE
if (columns > 6) { /* ... */ }
// ✅ AFTER
const MAX_GRID_COLUMNS = 6;
if (columns > MAX_GRID_COLUMNS) { /* ... */ }
Consistent Naming:
layoutType, gridColumns, enableOverlaydsgo-container, dsgo-container__inner, dsgo-container--herocalculateStyles, handleLayoutChange, getResponsiveColumnsAdd Inline Comments for Complex Logic:
// Calculate aspect ratio for video background to maintain 16:9
// even when container is resized or on different screen sizes
const aspectRatio = (height / width) * 100;
If refactoring changes save format or attributes:
// block.json
{
"deprecated": [
{
"attributes": { /* old attributes */ },
"supports": { /* old supports */ },
"migrate": function(attributes) {
return {
// Map old to new
newAttribute: attributes.oldAttribute
};
},
"save": function(props) {
// Old save function
}
}
]
}
Test:
Build & Code Quality:
npx wp-scripts build completes without errorsFunctionality:
WordPress Patterns:
useBlockProps() correctlyuseInnerBlocksProps() for nested blocks (not plain <InnerBlocks />)useEffect() for stylingFSE Compatibility:
Accessibility:
Security:
noopener noreferrerInternationalization:
__()Performance:
Documentation:
.claude/CLAUDE.md with new learningsMaintainability:
src/utils/Provide a comprehensive summary:
Files Changed:
Anti-Patterns Removed:
Improvements Made:
Performance Impact:
Maintainability Improvements:
Breaking Changes:
Testing Results:
Code Quality Metrics:
Recommendations:
Quick Reference:
docs/BEST-PRACTICES-SUMMARY.md - Copy-paste ready patternsComprehensive Guide:
docs/BLOCK-DEVELOPMENT-BEST-PRACTICES-COMPREHENSIVE.md - Deep divesProject Learnings:
.claude/CLAUDE.md - DesignSetGo-specific patternsWordPress Docs:
Now, what would you like to refactor?