wp-rich-article

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

1. Lead section box — Gradient background (e.g., linear-gradient(135deg, #667eea 0%, #764ba2 100%)), white text, padding: 2rem, border-radius: 12px

2. Card sections — background: #fff, border-radius: 12px, box-shadow: 0 2px 12px rgba(0,0,0,0.08), padding: 2rem, margin: 1.5rem 0

3. Grid layout — display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem

4. Color-coded comparison cards — Different accent colors per item (left border: border-left: 4px solid {color})

5. Code blocks — background: #1e1e1e; color: #d4d4d4; padding: 1.5rem; border-radius: 8px; overflow-x: auto; font-family: 'Fira Code', monospace

6. Pastel summary boxes — background: #f0f7ff (blue) or #f0fff4 (green), border-radius: 12px, padding: 1.5rem

7. 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