| name | wp-rich-article |
| description | Generate rich HTML articles for the WordPress Classic Editor with inline CSS.
Produces visually appealing content using gradients, cards, grids, color-coded
boxes, and code blocks. Plain text-only articles are not allowed.
Use when writing WordPress articles that need professional visual design.
|
| allowed-tools | ["Read","Write","Edit","Grep","Glob","WebSearch","WebFetch"] |
WP Rich Article — WordPress Classic Editor Rich HTML Generator
Generate visually rich HTML articles designed to be pasted directly into the
WordPress Classic Editor "Text" tab. Every article must include visual design
components — plain text-only output is not acceptable.
Writing Style
- Write in a clear, reader-friendly tone
- Avoid AI boilerplate phrases ("In today's rapidly evolving...", "It's worth noting that...")
- Be specific and concrete rather than vague and abstract
- Match the tone to your site's audience
Design Requirements (no plain text)
All styling uses inline CSS. No external stylesheets or class dependencies.
Required Components
-
Lead section box — Gradient background (e.g., linear-gradient(135deg, #667eea 0%, #764ba2 100%)), white text, padding: 2rem, border-radius: 12px
-
Card sections — background: #fff, border-radius: 12px, box-shadow: 0 2px 12px rgba(0,0,0,0.08), padding: 2rem, margin: 1.5rem 0
-
Grid layout — display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem
-
Color-coded comparison cards — Different accent colors per item (left border: border-left: 4px solid {color})
-
Code blocks — background: #1e1e1e; color: #d4d4d4; padding: 1.5rem; border-radius: 8px; overflow-x: auto; font-family: 'Fira Code', monospace
-
Pastel summary boxes — background: #f0f7ff (blue) or #f0fff4 (green), border-radius: 12px, padding: 1.5rem
-
Quotes and Tips — Icon-decorated, distinguished by background color
Color Palette Examples
- Main:
#667eea, #764ba2
- Accent:
#f093fb, #4facfe, #43e97b
- Pastel:
#f0f7ff, #fff5f5, #f0fff4, #fffff0
You can customize these colors to match your site's branding.
Article Structure
1. Lead section (gradient box)
2. Introduction (why this topic matters)
3. Main content (cards and grids for visual organization)
4. Practical examples (code blocks, screenshots, step-by-step)
5. Summary (pastel box)
Output
- Save as an
.html file
- The HTML should be ready to paste directly into the Classic Editor "Text" tab
- All styles must be inline (no
<style> blocks or external CSS)
- Responsive design via
max-width, auto-fit grids, and relative units
