wp-skills 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,16 +1,15 @@
1
- Agent Skills for WordPress
2
- Copyright (C) 2026 WordPress Contributors
1
+ Duke Dev License
3
2
 
4
- This program is free software; you can redistribute it and/or modify
5
- it under the terms of the GNU General Public License as published by
6
- the Free Software Foundation; either version 2 of the License, or
7
- (at your option) any later version.
3
+ Copyright (c) 2026 Duke Dev
4
+ All rights reserved.
8
5
 
9
- This program is distributed in the hope that it will be useful,
10
- but WITHOUT ANY WARRANTY; without even the implied warranty of
11
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12
- GNU General Public License for more details.
6
+ Permission to use, copy, modify, and distribute this software is granted only
7
+ with explicit written permission from Duke Dev.
13
8
 
14
- You should have received a copy of the GNU General Public License along
15
- with this program; if not, write to the Free Software Foundation, Inc.,
16
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
9
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
10
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
11
+ FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE
12
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
13
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM,
14
+ OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
15
+ SOFTWARE.
package/README.md CHANGED
@@ -1,157 +1,101 @@
1
- # Agent Skills for WordPress
1
+ # WordPress Team Skills (Senior Dev Kit)
2
2
 
3
- **Teach AI coding assistants how to build WordPress the right way.**
3
+ This skill pack helps WordPress teams (classic themes, block themes, and plugins) execute with senior-level standards: clear architecture, explicit guardrails, and verification-first workflows.
4
4
 
5
- Agent Skills are portable bundles of instructions, checklists, and scripts that help AI assistants (Claude, Copilot, Codex, Cursor, Antigravity IDE, etc.) understand WordPress development patterns, avoid common mistakes, and follow best practices.
5
+ ## Quick Install
6
6
 
7
- > **AI Authorship Disclosure:** These skills were generated using GPT-5.2 Codex (High Reasoning) from official Gutenberg and WordPress documentation, then reviewed and edited by WordPress contributors. We tested skills with AI assistants and iterated based on results. This is v1, and skills will improve as the community uses them and contributes fixes. See [docs/ai-authorship.md](docs/ai-authorship.md) for details. ([WordPress AI Guidelines](https://make.wordpress.org/ai/handbook/ai-guidelines/))
8
-
9
- ## Why Agent Skills?
10
-
11
- AI coding assistants are powerful, but they often:
12
- - Generate outdated WordPress patterns (pre-Gutenberg, pre-block themes)
13
- - Miss critical security considerations in plugin development
14
- - Skip proper block deprecations, causing "Invalid block" errors
15
- - Ignore existing tooling in your repo
16
-
17
- Agent Skills solve this by giving AI assistants **expert-level WordPress knowledge** in a format they can actually use.
18
-
19
- ## Available Skills
20
-
21
- | Skill | What it teaches |
22
- |-------|-----------------|
23
- | **wordpress-router** | Classifies WordPress repos and routes to the right workflow |
24
- | **wp-project-triage** | Detects project type, tooling, and versions automatically |
25
- | **wp-block-development** | Gutenberg blocks: `block.json`, attributes, rendering, deprecations |
26
- | **wp-block-themes** | Block themes: `theme.json`, templates, patterns, style variations |
27
- | **wp-plugin-development** | Plugin architecture, hooks, settings API, security |
28
- | **wp-rest-api** | REST API routes/endpoints, schema, auth, and response shaping |
29
- | **wp-interactivity-api** | Frontend interactivity with `data-wp-*` directives and stores |
30
- | **wp-abilities-api** | Capability-based permissions and REST API authentication |
31
- | **wp-wpcli-and-ops** | WP-CLI commands, automation, multisite, search-replace |
32
- | **wp-performance** | Profiling, caching, database optimization, Server-Timing |
33
- | **wp-phpstan** | PHPStan static analysis for WordPress projects (config, baselines, WP-specific typing) |
34
- | **wp-playground** | WordPress Playground for instant local environments |
35
- | **wpds** | WordPress Design System |
36
-
37
- ## Quick Start
38
-
39
- ### Install via npx (recommended)
7
+ Install all skills into the current project:
40
8
 
41
9
  ```bash
42
- # Install into current project
43
10
  npx wp-skills install --dest=. --targets=codex,vscode,claude,cursor,antigravity
44
-
45
- # List available skills
46
- npx wp-skills list
47
11
  ```
48
12
 
49
- This installs from the published npm package without cloning this repository.
50
-
51
- ### Install globally for Claude Code
13
+ List available skills:
52
14
 
53
15
  ```bash
54
- # Clone agent-skills
55
- git clone https://github.com/WordPress/agent-skills.git
56
- cd agent-skills
57
-
58
- # Install all skills globally (available across all projects)
59
- node shared/scripts/skillpack-install.mjs --global
60
-
61
- # Or install specific skills only
62
- node shared/scripts/skillpack-install.mjs --global --skills=wp-playground,wp-block-development
16
+ npx wp-skills list
63
17
  ```
64
18
 
65
- This installs skills to `~/.claude/skills/` where Claude Code will automatically discover them.
66
-
67
- ### Install into your repo
19
+ Install a single skill:
68
20
 
69
21
  ```bash
70
- # Clone agent-skills
71
- git clone https://github.com/WordPress/agent-skills.git
72
- cd agent-skills
73
-
74
- # Install into your WordPress project
75
- node shared/scripts/skillpack-install.mjs --dest=../your-wp-project --targets=codex,vscode,claude,cursor,antigravity
22
+ npx wp-skills install --dest=. --targets=codex,vscode,claude,cursor,antigravity --skills=classic-theme-dev
76
23
  ```
77
24
 
78
- This copies skills into:
79
- - `.codex/skills/` for OpenAI Codex
80
- - `.github/skills/` for VS Code / GitHub Copilot
81
- - `.claude/skills/` for Claude Code (project-level)
82
- - `.cursor/skills/` for Cursor (project-level)
83
- - `.agent/skill/` for Antigravity IDE (project-level)
25
+ Installed locations:
84
26
 
85
- ### Install globally for Cursor
27
+ - `.codex/skills/`
28
+ - `.github/skills/`
29
+ - `.claude/skills/`
30
+ - `.cursor/skills/`
31
+ - `.agent/skill/`
86
32
 
87
- ```bash
88
- node shared/scripts/skillpack-install.mjs --targets=cursor-global
89
- ```
33
+ ## Team Usage Flow
90
34
 
91
- This installs skills to `~/.cursor/skills/` where Cursor will discover them.
35
+ 1. Start with `wordpress-router` or `wp-project-triage` to classify repository context.
36
+ 2. Select the domain skill (theme, frontend, plugin/API, ops, review/migration).
37
+ 3. Provide explicit inputs: URL/page type, file scope, and compatibility constraints.
38
+ 4. Require explicit verification before merge or release.
92
39
 
93
- ### Available options
40
+ Prompt examples:
94
41
 
95
- ```bash
96
- # List available skills
97
- node shared/scripts/skillpack-install.mjs --list
42
+ - `Use wordpress-router and wp-project-triage, then choose the right skill for this repository.`
43
+ - `Use classic-theme-dev to map URL -> template -> hook and implement the fix.`
44
+ - `Use wp-dev-workflow for a WordPress-focused code review with security and performance findings.`
98
45
 
99
- # Dry run (preview without installing)
100
- node shared/scripts/skillpack-install.mjs --global --dry-run
46
+ ## Skill Catalog
101
47
 
102
- # Install specific skills to a project (e.g. Claude + Antigravity)
103
- node shared/scripts/skillpack-install.mjs --dest=../my-repo --targets=claude,antigravity --skills=wp-wpcli-and-ops
104
- ```
48
+ ### Routing and triage
105
49
 
106
- ### Manual installation
50
+ - [wordpress-router](skills/wordpress-router/README.md)
51
+ - [wp-project-triage](skills/wp-project-triage/README.md)
107
52
 
108
- Copy any skill folder from `skills/` into your project's instructions directory for your AI assistant.
53
+ ### Theme development
109
54
 
110
- ## How It Works
55
+ - [classic-theme-dev](skills/classic-theme-dev/README.md)
56
+ - [block-theme-dev](skills/block-theme-dev/README.md)
57
+ - [wp-block-themes](skills/wp-block-themes/README.md)
58
+ - [wp-block-development](skills/wp-block-development/README.md)
111
59
 
112
- Each skill contains:
60
+ ### Frontend
113
61
 
114
- ```
115
- skills/wp-block-development/
116
- ├── SKILL.md # Main instructions (when to use, procedure, verification)
117
- ├── references/ # Deep-dive docs on specific topics
118
- │ ├── block-json.md
119
- │ ├── deprecations.md
120
- │ └── ...
121
- └── scripts/ # Deterministic helpers (detection, validation)
122
- └── list_blocks.mjs
123
- ```
62
+ - [frontend-wp](skills/frontend-wp/README.md)
63
+ - [wp-interactivity-api](skills/wp-interactivity-api/README.md)
64
+ - [wpds](skills/wpds/README.md)
124
65
 
125
- When you ask your AI assistant to work on WordPress code, it reads these skills and follows the documented procedures rather than guessing.
66
+ ### Plugin, API, and capabilities
126
67
 
127
- ## Compatibility
68
+ - [wp-plugin-development](skills/wp-plugin-development/README.md)
69
+ - [wp-rest-api](skills/wp-rest-api/README.md)
70
+ - [wp-abilities-api](skills/wp-abilities-api/README.md)
128
71
 
129
- - **WordPress 6.9+** (PHP 7.2.24+)
130
- - Works with any AI assistant that supports project-level instructions
72
+ ### Tooling, ops, and quality
131
73
 
132
- ## Contributing
74
+ - [wp-wpcli-and-ops](skills/wp-wpcli-and-ops/README.md)
75
+ - [wp-performance](skills/wp-performance/README.md)
76
+ - [wp-phpstan](skills/wp-phpstan/README.md)
77
+ - [wp-playground](skills/wp-playground/README.md)
78
+ - [wp-dev-workflow](skills/wp-dev-workflow/README.md)
133
79
 
134
- **We welcome contributions!** This project is a great way to share your WordPress expertise—you don't need to be a coding wizard. Most skills are written in Markdown, focusing on clear procedures and best practices.
80
+ ## Recommended Team Bundles
135
81
 
136
- See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to get started.
82
+ - `classic-theme-dev` + `frontend-wp` + `wp-dev-workflow`
83
+ - `block-theme-dev` + `wp-block-development` + `wp-interactivity-api`
84
+ - `wp-plugin-development` + `wp-rest-api` + `wp-abilities-api`
85
+ - `wp-wpcli-and-ops` + `wp-performance` + `wp-phpstan`
137
86
 
138
- Quick commands:
87
+ ## Maintain and Validate
139
88
 
140
89
  ```bash
141
- # Scaffold a new skill
142
- node shared/scripts/scaffold-skill.mjs <skill-name> "<description>"
143
-
144
- # Validate skills
90
+ # Validate the skill set
145
91
  node eval/harness/run.mjs
146
- ```
147
92
 
148
- ## Documentation
149
-
150
- - [Authoring Guide](docs/authoring-guide.md) - How to create and improve skills
151
- - [Principles](docs/principles.md) - Design philosophy
152
- - [Packaging](docs/packaging.md) - Build and distribution
153
- - [Compatibility Policy](docs/compatibility-policy.md) - Version targeting
93
+ # List available skills from local repository
94
+ node shared/scripts/skillpack-install.mjs --list
95
+ ```
154
96
 
155
- ## License
97
+ Related docs:
156
98
 
157
- GPL-2.0-or-later
99
+ - [docs/authoring-guide.md](docs/authoring-guide.md)
100
+ - [docs/packaging.md](docs/packaging.md)
101
+ - [docs/skill-set-v1.md](docs/skill-set-v1.md)
@@ -13,6 +13,12 @@ This repo currently includes:
13
13
  - `wp-wpcli-and-ops`
14
14
  - `wp-performance`
15
15
  - `wp-phpstan`
16
+ - `wp-playground`
17
+ - `wpds`
18
+ - `classic-theme-dev`
19
+ - `block-theme-dev`
20
+ - `frontend-wp`
21
+ - `wp-dev-workflow`
16
22
 
17
23
  Planned next skills (not yet implemented):
18
24
 
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "wp-skills",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "WordPress Agent Skills installer and packager",
5
- "license": "GPL-2.0-or-later",
5
+ "license": "Duke Dev",
6
6
  "type": "module",
7
7
  "bin": {
8
8
  "wp-skills": "shared/scripts/skillpack-cli.mjs",
@@ -0,0 +1,46 @@
1
+ # Block Theme Dev
2
+
3
+ ## Purpose
4
+
5
+ Use when building or migrating WordPress block themes using theme.json, templates/parts, patterns, and custom block integration.
6
+
7
+ ## Install this skill only
8
+
9
+ Use npm package (recommended):
10
+
11
+ ```bash
12
+ npx wp-skills install --dest=. --targets=codex,vscode,claude,cursor,antigravity --skills=block-theme-dev
13
+ ```
14
+
15
+ Use local repository scripts:
16
+
17
+ ```bash
18
+ node shared/scripts/skillpack-install.mjs --dest=../your-wp-project --targets=codex,vscode,claude,cursor,antigravity --skills=block-theme-dev
19
+ ```
20
+
21
+ ## When to use
22
+
23
+ - Apply this skill when your task matches the scope in [SKILL.md](./SKILL.md).
24
+ - Typical trigger prompt: `Use block-theme-dev to handle this task in my WordPress repo`.
25
+
26
+ ## Inputs to provide
27
+
28
+ - Repository root (or target project path).
29
+ - Exact task goal (feature, refactor, debugging, migration, or review).
30
+ - Constraints: WordPress/PHP versions, plugin/theme boundaries, timeline/risk constraints.
31
+
32
+ ## Expected output
33
+
34
+ - Clear implementation plan tied to project context.
35
+ - File-level changes or command steps with verification.
36
+ - Guardrails and risks called out before high-impact operations.
37
+
38
+ ## Team guardrails
39
+
40
+ - Prefer existing repo conventions and tooling over introducing new patterns.
41
+ - Avoid destructive DB/content operations without explicit approval.
42
+ - Keep backward compatibility visible for production WordPress sites.
43
+
44
+ ## References
45
+
46
+ - Main instructions: [SKILL.md](./SKILL.md)
@@ -0,0 +1,72 @@
1
+ ---
2
+ name: block-theme-dev
3
+ description: Use when building or migrating WordPress block themes using theme.json, templates/parts, patterns, and custom block integration.
4
+ compatibility: Targets WordPress 6.9+ (PHP 7.2.24+). Filesystem-based agent with bash + node.
5
+ ---
6
+
7
+ # Block Theme Dev
8
+
9
+ ## When to use
10
+
11
+ Use this skill for block themes and hybrid migrations when the task touches:
12
+
13
+ - `theme.json` settings/styles,
14
+ - `templates/*.html` and `parts/*.html`,
15
+ - block patterns,
16
+ - classic -> block theme migration,
17
+ - block-theme rendering/debugging in Site Editor workflows.
18
+
19
+ ## Inputs required
20
+
21
+ - Repo root.
22
+ - Target template/page type or user flow.
23
+ - Desired design/system constraints (colors, spacing, typography, layout).
24
+ - Migration scope (full block theme vs hybrid).
25
+
26
+ ## Procedure
27
+
28
+ 1. Classify and confirm block-theme context:
29
+ - `node skills/wp-project-triage/scripts/detect_wp_project.mjs`
30
+ - Confirm signals: `theme.json`, `templates/`, `parts/`, pattern registration.
31
+ 2. Audit current theme model:
32
+ - Review `theme.json` for global styles, presets, spacing/layout constraints.
33
+ - Map template and part coverage for home/single/page/archive/404/header/footer.
34
+ 3. Implement requested change in the smallest stable layer:
35
+ - Global design tokens -> `theme.json`.
36
+ - Page structure -> `templates/*.html` and `parts/*.html`.
37
+ - Reusable content sections -> patterns.
38
+ 4. For pattern work:
39
+ - Use deterministic slugs and categories.
40
+ - Prefer core blocks and minimal custom CSS hooks.
41
+ - Ensure pattern markup is editable by content teams.
42
+ 5. For classic -> block migration:
43
+ - Preserve parity first (header/footer/core layouts) before enhancement.
44
+ - Flag likely breakpoints: shortcode-dependent sections, widget areas, hard-coded template logic.
45
+ - Keep backward compatibility notes in the response.
46
+
47
+ ## Verification
48
+
49
+ - Validate changed templates/parts and `theme.json` syntax.
50
+ - Verify intended template selection for target URLs/page types.
51
+ - Run project lint/build/test commands when available.
52
+
53
+ ## Failure modes / debugging
54
+
55
+ - Styles not applying:
56
+ - check `theme.json` scope and preset references.
57
+ - Wrong template used:
58
+ - verify template hierarchy and slug naming.
59
+ - Pattern regressions:
60
+ - test insertion/editing in editor to ensure block validity.
61
+
62
+ ## Escalation
63
+
64
+ If migration scope is unclear, ask one question:
65
+
66
+ - "Do you want full block-theme migration or hybrid with classic templates kept?"
67
+
68
+ ## Do not do
69
+
70
+ - Do not remove classic templates/widgets without explicit migration approval.
71
+ - Do not hard-code environment-specific URLs/IDs in patterns/templates.
72
+ - Do not bypass validation for block markup changes.
@@ -0,0 +1,46 @@
1
+ # Classic Theme Dev
2
+
3
+ ## Purpose
4
+
5
+ Use when building, refactoring, or debugging classic WordPress themes with template hierarchy, hooks, and URL-to-template mapping.
6
+
7
+ ## Install this skill only
8
+
9
+ Use npm package (recommended):
10
+
11
+ ```bash
12
+ npx wp-skills install --dest=. --targets=codex,vscode,claude,cursor,antigravity --skills=classic-theme-dev
13
+ ```
14
+
15
+ Use local repository scripts:
16
+
17
+ ```bash
18
+ node shared/scripts/skillpack-install.mjs --dest=../your-wp-project --targets=codex,vscode,claude,cursor,antigravity --skills=classic-theme-dev
19
+ ```
20
+
21
+ ## When to use
22
+
23
+ - Apply this skill when your task matches the scope in [SKILL.md](./SKILL.md).
24
+ - Typical trigger prompt: `Use classic-theme-dev to handle this task in my WordPress repo`.
25
+
26
+ ## Inputs to provide
27
+
28
+ - Repository root (or target project path).
29
+ - Exact task goal (feature, refactor, debugging, migration, or review).
30
+ - Constraints: WordPress/PHP versions, plugin/theme boundaries, timeline/risk constraints.
31
+
32
+ ## Expected output
33
+
34
+ - Clear implementation plan tied to project context.
35
+ - File-level changes or command steps with verification.
36
+ - Guardrails and risks called out before high-impact operations.
37
+
38
+ ## Team guardrails
39
+
40
+ - Prefer existing repo conventions and tooling over introducing new patterns.
41
+ - Avoid destructive DB/content operations without explicit approval.
42
+ - Keep backward compatibility visible for production WordPress sites.
43
+
44
+ ## References
45
+
46
+ - Main instructions: [SKILL.md](./SKILL.md)
@@ -0,0 +1,73 @@
1
+ ---
2
+ name: classic-theme-dev
3
+ description: Use when building, refactoring, or debugging classic WordPress themes with template hierarchy, hooks, and URL-to-template mapping.
4
+ compatibility: Targets WordPress 6.9+ (PHP 7.2.24+). Filesystem-based agent with bash + node.
5
+ ---
6
+
7
+ # Classic Theme Dev
8
+
9
+ ## When to use
10
+
11
+ Use this skill for classic themes (`style.css` header + PHP templates) when the task involves:
12
+
13
+ - theme architecture analysis,
14
+ - URL -> template -> hook mapping,
15
+ - template hierarchy decisions,
16
+ - hook/filter-based UI or query customization,
17
+ - refactoring legacy `functions.php` and template logic.
18
+
19
+ ## Inputs required
20
+
21
+ - Repo root.
22
+ - Target URL or page type (home, single, archive, taxonomy, search).
23
+ - Desired change (UI, query, metadata, behavior).
24
+ - Constraints (child theme policy, backward compatibility requirements).
25
+
26
+ ## Procedure
27
+
28
+ 1. Classify project context:
29
+ - `node skills/wp-project-triage/scripts/detect_wp_project.mjs`
30
+ - Confirm classic theme signals: `style.css` theme header, PHP templates, no mandatory `templates/*.html` rendering path.
31
+ 2. Build architecture map (text output in response):
32
+ - Locate registration and bootstrap points with `rg`:
33
+ - `add_theme_support|register_nav_menus|register_sidebar|add_image_size`
34
+ - `register_post_type|register_taxonomy|add_shortcode`
35
+ - `add_action|add_filter|remove_action|remove_filter`
36
+ - Summarize: request entry -> query shaping -> template chosen -> key hooks/functions used.
37
+ 3. Map URL to template/hook path:
38
+ - Apply template hierarchy rules (`single-{post_type}.php`, `archive-{post_type}.php`, `category-{slug}.php`, etc.).
39
+ - Check custom overrides (`template_include`, `pre_get_posts`, custom query args).
40
+ - Provide exact candidate files and hook insertion points.
41
+ 4. Implement with safe theme patterns:
42
+ - Keep templates focused on rendering; move business logic to reusable functions/classes under `inc/` or `src/`.
43
+ - Prefer `get_template_part()` for repeated sections.
44
+ - Prefer hooks/filters over invasive template rewrites when possible.
45
+ 5. Produce hook map delta when editing hooks:
46
+ - Note added/changed/removed actions and filters.
47
+
48
+ ## Verification
49
+
50
+ - Run available project checks from triage output (lint/tests/build).
51
+ - Lint changed PHP files (at minimum `php -l <file>` when toolchain is absent).
52
+ - Confirm affected URL/page type resolves to intended template and no fatal error is introduced.
53
+
54
+ ## Failure modes / debugging
55
+
56
+ - Wrong template selected:
57
+ - inspect hierarchy-specific filenames and any `template_include` filters.
58
+ - Query side effects:
59
+ - verify `pre_get_posts` guards (`is_admin`, `is_main_query`, conditional checks).
60
+ - Mixed classic + block behavior:
61
+ - check whether hybrid/block templates are taking precedence.
62
+
63
+ ## Escalation
64
+
65
+ Ask one clarifying question if URL/page target is ambiguous:
66
+
67
+ - "Which exact URL and user-visible section should be changed?"
68
+
69
+ ## Do not do
70
+
71
+ - Do not modify database schema/content directly.
72
+ - Do not edit vendor/core/plugin files unless explicitly requested.
73
+ - Do not perform destructive mass replacements without dry-run and approval.
@@ -0,0 +1,46 @@
1
+ # Frontend WP
2
+
3
+ ## Purpose
4
+
5
+ Use when implementing WordPress frontend CSS/SCSS architecture, JavaScript behavior, and asset loading/performance across classic and block themes.
6
+
7
+ ## Install this skill only
8
+
9
+ Use npm package (recommended):
10
+
11
+ ```bash
12
+ npx wp-skills install --dest=. --targets=codex,vscode,claude,cursor,antigravity --skills=frontend-wp
13
+ ```
14
+
15
+ Use local repository scripts:
16
+
17
+ ```bash
18
+ node shared/scripts/skillpack-install.mjs --dest=../your-wp-project --targets=codex,vscode,claude,cursor,antigravity --skills=frontend-wp
19
+ ```
20
+
21
+ ## When to use
22
+
23
+ - Apply this skill when your task matches the scope in [SKILL.md](./SKILL.md).
24
+ - Typical trigger prompt: `Use frontend-wp to handle this task in my WordPress repo`.
25
+
26
+ ## Inputs to provide
27
+
28
+ - Repository root (or target project path).
29
+ - Exact task goal (feature, refactor, debugging, migration, or review).
30
+ - Constraints: WordPress/PHP versions, plugin/theme boundaries, timeline/risk constraints.
31
+
32
+ ## Expected output
33
+
34
+ - Clear implementation plan tied to project context.
35
+ - File-level changes or command steps with verification.
36
+ - Guardrails and risks called out before high-impact operations.
37
+
38
+ ## Team guardrails
39
+
40
+ - Prefer existing repo conventions and tooling over introducing new patterns.
41
+ - Avoid destructive DB/content operations without explicit approval.
42
+ - Keep backward compatibility visible for production WordPress sites.
43
+
44
+ ## References
45
+
46
+ - Main instructions: [SKILL.md](./SKILL.md)
@@ -0,0 +1,69 @@
1
+ ---
2
+ name: frontend-wp
3
+ description: Use when implementing WordPress frontend CSS/SCSS architecture, JavaScript behavior, and asset loading/performance across classic and block themes.
4
+ compatibility: Targets WordPress 6.9+ (PHP 7.2.24+). Filesystem-based agent with bash + node.
5
+ ---
6
+
7
+ # Frontend WP
8
+
9
+ ## When to use
10
+
11
+ Use this skill when building or refactoring theme frontend behavior and styling for:
12
+
13
+ - CSS/SCSS architecture,
14
+ - Gutenberg editor vs frontend styling boundaries,
15
+ - JavaScript behavior (menu, modal, accordion, tabs, lazy-load),
16
+ - WordPress enqueue strategy and performance.
17
+
18
+ ## Inputs required
19
+
20
+ - Repo root and target UI component/page.
21
+ - Existing CSS strategy (BEM, ITCSS, utility-first, custom).
22
+ - Browser/performance constraints and plugin compatibility constraints.
23
+
24
+ ## Procedure
25
+
26
+ 1. Discover stack and conventions:
27
+ - Identify existing CSS organization and naming rules.
28
+ - Identify JS build/runtime path and enqueue points (`wp_enqueue_style`, `wp_enqueue_script`).
29
+ 2. Align with one style strategy (do not mix ad hoc):
30
+ - Keep tokens/variables centralized.
31
+ - Separate base/layout/components/utilities if project supports layering.
32
+ 3. Implement styles with editor/frontend separation:
33
+ - Frontend styles for site output.
34
+ - Editor-specific styles only when necessary for parity.
35
+ 4. Implement JS behavior with WP-safe loading:
36
+ - Register/enqueue with dependencies and predictable handles.
37
+ - Avoid inline JS unless no alternative exists.
38
+ - Ensure behavior degrades safely if dependency is missing.
39
+ 5. Optimize delivery:
40
+ - Avoid duplicate bundles.
41
+ - Load only where needed.
42
+ - Minimize conflicts with plugins/page builders by scoping selectors and events.
43
+
44
+ ## Verification
45
+
46
+ - Validate no console errors on affected pages.
47
+ - Validate behavior works without breaking editor experience.
48
+ - Run available lint/build/test commands.
49
+
50
+ ## Failure modes / debugging
51
+
52
+ - Style leaks:
53
+ - tighten selector scope and component boundaries.
54
+ - Script conflicts:
55
+ - verify handle uniqueness and dependency order.
56
+ - Editor mismatch:
57
+ - check editor-only style loading and block wrapper classes.
58
+
59
+ ## Escalation
60
+
61
+ If style system is inconsistent, ask one question:
62
+
63
+ - "Should I standardize this change on the current project convention or introduce a new CSS architecture now?"
64
+
65
+ ## Do not do
66
+
67
+ - Do not add large frontend dependencies without explicit approval.
68
+ - Do not enqueue global assets for single-page-only features unless requested.
69
+ - Do not use brittle selectors tied to dynamic plugin-generated markup when stable hooks exist.