Using AI
Because all templates in WP Next Editor are stored as structured Lexical JSON, AI agents can read, write, and transform them directly. A template that would take hours to build manually can often be scaffolded in seconds.
The editor ships with an agent skill — /wp-next-editor-template — that generates and modifies Lexical JSON from natural-language prompts inside Claude Code.
See the Agent Skills overview for background on how Claude Code skills work.
Installing the Skill
Run the following CLI command to install the skill:
npx @rnaga/wp-next-cli -- editor agentSkills add
You can install it to your home directory (~/.claude/skills) so it's available across all projects, or to the root of your Next.js project for project-local use.
To remove the skill:
npx @rnaga/wp-next-cli -- editor agentSkills remove
Skill Reference
The skill has four modes:
| Mode | What it does |
|---|---|
create | Generates a new Lexical JSON template from a natural-language description and writes it to a file |
update | Reads an existing JSON file and applies a prompted change, then writes it back |
convert | Converts a raw HTML + CSS/SCSS file pair into a Lexical JSON template |
help | Prints usage information |
/wp-next-editor-template create <output-path> <prompt>
/wp-next-editor-template update [json-file-path] <prompt>
/wp-next-editor-template convert <html-file> <css-or-scss-file> <output-path>
/wp-next-editor-template help
Example Prompts
create — Generate a new template
/wp-next-editor-template create src/templates/home.json "A hero section with a full-width background image, centered headline, subtitle, and a CTA button"
/wp-next-editor-template create src/templates/blog-post.json "A blog post layout: page title heading, author and date metadata row, body text area, and a related posts grid at the bottom"
/wp-next-editor-template create src/templates/pricing.json "A pricing page with three columns: Free, Pro, and Enterprise tiers, each with a heading, feature list, and sign-up button"
/wp-next-editor-template create src/templates/contact.json "A contact page with a two-column layout: a form on the left (name, email, message fields, submit button) and an address/map placeholder on the right"
update — Modify an existing template
/wp-next-editor-template update src/templates/home.json "Change the hero background to dark navy and increase the headline font size to 64px on desktop"
# Uses the currently open file as the target when no path is provided
/wp-next-editor-template update "Add a sticky navigation bar above the hero section with a logo on the left and nav links on the right"
/wp-next-editor-template update src/templates/pricing.json "Make the Pro tier card visually highlighted with a border and a 'Most Popular' badge above it"
convert — Convert HTML + CSS to Lexical JSON
/wp-next-editor-template convert design/index.html design/styles.css src/templates/home.json
/wp-next-editor-template convert design/landing.html design/landing.scss src/templates/landing.json
Using the JSON Editor with AI
After the skill writes a JSON file, paste its contents into the JSON Editor to load the template directly into the canvas. The JSON Editor's copy button also makes it easy to extract the current canvas state and hand it back to the skill for further updates.